/*
 * Site-wide tweaks that are NOT part of Webflow's generated stylesheet.
 *
 * site.css is regenerated by the rebuild script and anything added to it
 * would be lost. Put hand-written site-wide CSS here instead; this file is
 * loaded after site.css on every page and is never regenerated.
 */

/* ---------------------------------------------- collapsed nav, menu open --
 * assets/js/site.js moves .w-nav-menu into a .w-nav-overlay and marks it
 * with data-nav-menu-open, mirroring what Webflow's runtime did. The base
 * rule .w-nav[data-collapse="medium"] .w-nav-menu { display: none } has to
 * be overridden for the open state, so this selector is deliberately
 * specific.
 */
.w-nav[data-collapse="all"]    .w-nav-menu[data-nav-menu-open],
.w-nav[data-collapse="medium"] .w-nav-menu[data-nav-menu-open],
.w-nav[data-collapse="small"]  .w-nav-menu[data-nav-menu-open],
.w-nav[data-collapse="tiny"]   .w-nav-menu[data-nav-menu-open] {
  display: block;
  float: none;
  width: 100%;
}

/* The hamburger is a <div> in the export; give it real button affordances. */
.w-nav-button { -webkit-tap-highlight-color: transparent; }

/* ------------------------------------------------------------- a11y ----- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.w-nav-button:focus-visible {
  outline: 2px solid #c8102e;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
 * Article card polish
 * -------------------------------------------------------------------------
 * The cards put white text straight onto the photograph with no scrim, so
 * legibility depended entirely on how bright that particular image happened
 * to be -- fine over the dark forest shot, poor over the bright kitchen one.
 * These rules add a gradient behind the text, lift the 10px meta line to a
 * readable size, and drop the underline from the headline (kept on hover so
 * the link still announces itself).
 * ===================================================================== */

/* the card itself: rounded, clipped, and it lifts on hover */
.collection-item-5 .link-block-5 {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(17, 17, 20, .06), 0 2px 8px rgba(17, 17, 20, .06);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease;
}
.collection-item-5 .link-block-5:hover,
.collection-item-5 .link-block-5:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 6px 14px rgba(17, 17, 20, .10), 0 18px 40px rgba(17, 17, 20, .14);
}

/* the scrim: sits above the photo, below the text */
.collection-item-5 .link-block-5 .div-block-27 {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
              rgba(12, 12, 16, .88) 0%,
              rgba(12, 12, 16, .72) 22%,
              rgba(12, 12, 16, .28) 48%,
              rgba(12, 12, 16, 0) 72%);
  pointer-events: none;
  transition: opacity .3s ease;
}

.collection-item-5 .link-block-5 .div-block-28 { z-index: 1; }

/* headline: no permanent underline, and a touch more room to breathe */
.collection-item-5 .blog-thumb-headline {
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  margin-bottom: 6px;
}
.collection-item-5 .link-block-5:hover .blog-thumb-headline,
.collection-item-5 .link-block-5:focus-visible .blog-thumb-headline {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------- summary on hover ----
 * Webflow shipped the card summary as display:none, so it never appeared.
 * Reveal it on hover and on keyboard focus, growing upward from the
 * bottom-anchored text block. Gated behind (hover: hover) so touch devices --
 * which have no hover and would otherwise get a stuck half-state -- keep the
 * original compact card.
 */
@media (hover: hover) {
  .collection-item-5 .text-block-28 {
    /* -webkit-box + line-clamp gives a clean ellipsis instead of a hard cut
       mid-word when a summary runs past three lines */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: max-height .32s cubic-bezier(.2, .7, .3, 1),
                opacity .26s ease, margin-top .32s ease;
  }
  .collection-item-5 .link-block-5:hover .text-block-28,
  .collection-item-5 .link-block-5:focus-visible .text-block-28 {
    max-height: 84px;
    opacity: 1;
    margin-top: 4px;
  }
  /* deepen the scrim while the longer text is showing */
  .collection-item-5 .link-block-5:hover .div-block-27,
  .collection-item-5 .link-block-5:focus-visible .div-block-27 {
    background: linear-gradient(to top,
                rgba(12, 12, 16, .92) 0%,
                rgba(12, 12, 16, .82) 34%,
                rgba(12, 12, 16, .45) 62%,
                rgba(12, 12, 16, .08) 86%);
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .collection-item-5 .text-block-28 { transition: none; }
}

/* summary + meta: readable sizes, not 10px */
.collection-item-5 .text-block-28 { text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.collection-item-5 .text-block-26,
.collection-item-5 .text-block-27 {
  font-size: 12px;
  line-height: 20px;
  letter-spacing: .04em;
  opacity: .92;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* -------------------------------------------------- long-form reading ---
 * Article bodies are read by people managing fatigue and brain fog, so the
 * measure is capped and the leading opened up a little.
 */
.rich-text.blog-paragraph { max-width: 68ch; }
.rich-text.blog-paragraph p { line-height: 1.75; }
.rich-text.blog-paragraph ul { margin-bottom: 1.2em; }
.rich-text.blog-paragraph li { margin-bottom: .5em; }

/* the header image on an article gets the same rounding as the cards */
.blog-header-image { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) {
  .collection-item-5 .link-block-5 { transition: none; }
  .collection-item-5 .link-block-5:hover { transform: none; }
}

/* =========================================================================
 * Layout polish
 * -------------------------------------------------------------------------
 * The Webflow export floats its columns (.w-col { float: left }), so a short
 * column next to a long one strands a large block of empty space, and the
 * content width changes from section to section. These rules fix the
 * mechanics without touching the brand: same colours, type and images.
 * ===================================================================== */

/* --- shared measure ------------------------------------------------------
 * Section content settles on one width instead of three. Full-bleed bands
 * (the dark CTA, the subscribe strip, the footer) set their own margin and
 * are deliberately excluded. */
@media screen and (min-width: 992px) {
  .section:not(.nichelle-cta-section):not(.cc-subscribe-form):not(.nichelle-footer):not(.nichelle-hero):not(.cc-store-home-wrap) {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* --- two-column editorial rows (About, specializations) ------------------
 * Flex instead of floats so the columns share a height, and centred so a
 * short image does not leave a void under itself. */
@media screen and (min-width: 992px) {
  .columns-4 {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
  }
  .columns-4 > .w-col { float: none; }
  .column-9 { height: auto; }
  .columns-4 img { display: block; }
}

/* The "what I'm like as a therapist" style blocks are their own flexbox and
   were pinned to flex-start, which stranded space beside the short column. */
@media screen and (min-width: 992px) {
  .div-block-17 { align-items: center; }
}

/* --- contact page --------------------------------------------------------
 * The form and the address sat in a flex row pinned to the top, so the
 * address column left a tall empty gap beside the form. */
@media screen and (min-width: 768px) {
  .container.cc-full-width-form-wrap { align-items: center; gap: 40px; }
}

/* --- resources -----------------------------------------------------------
 * A single narrow column of short links looked unfinished on a wide screen.
 * Two columns give the page some density; it still stacks on small screens. */
@media screen and (min-width: 768px) {
  .div-block-41 { max-width: 900px; margin-left: auto; margin-right: auto; }
  .div-block-41 .w-dyn-items {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
    row-gap: 4px;
    align-items: start;
  }
}

/* --- mobile header -------------------------------------------------------
 * The export stacked the logo on one row and then put the CTA and the
 * hamburger on a second row with a hard-coded 46px right margin on the
 * button, which left the pair sitting off-centre. Space them properly and
 * tighten the gap under the logo. */
@media screen and (max-width: 991px) {
  .navigation-wrap {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
  }
  .nichelle-nav-cto { margin-right: 0; }
  .menu-button { margin-left: 0; }
}
@media screen and (max-width: 479px) {
  .navigation-wrap { margin-top: 16px; }
  .nichelle-nav-cto { margin-right: 0; }
}

/* --- services cards ------------------------------------------------------
 * These were floated half-width columns, so the moment one card's tagline
 * wrapped to a second line the next card snagged on it and the 2x2 grid
 * staggered. A real grid keeps the rows aligned and the cards equal height
 * whatever the text does. */
@media screen and (min-width: 768px) {
  .collection-list-2.w-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-left: 0;
    margin-right: 0;
  }
  .collection-list-2 > .collection-item-2 {
    float: none;
    width: auto;
    padding-left: 0;
    padding-right: 0;
  }
  /* card fills its cell, and the caption block sits flush at the bottom */
  .collection-list-2 .link-block {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .collection-list-2 .nichelle-specialty-bottom { margin-top: auto; }
}

/* Webflow's .w-row carries clearfix pseudo-elements (content:" ";display:table).
   Harmless while the row is floats, but once the row becomes flex or grid they
   turn into real items and steal a cell. Suppress them on the rows we convert. */
@media screen and (min-width: 768px) {
  .collection-list-2.w-row:before,
  .collection-list-2.w-row:after { display: none; }
}
@media screen and (min-width: 992px) {
  .columns-4:before,
  .columns-4:after { display: none; }
}