/* The Braid Foundation - custom additions on top of the MindKare template.
   Uses the template's own CSS variables (--theme-color1/2/3/4) so it blends
   with the theme instead of looking bolted on. */

.skip-link{
  position:absolute; left:-999px; top:0; z-index:99999;
  background:var(--theme-color2); color:#fff; padding:12px 18px; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

.count-text-static{ font-weight:700; }

/* ---------- Homepage hero: clean gradient, no photo ----------
   Cathy asked for the hero background to be simplified to a clean color
   instead of a photo — this also happens to fix a real bug: the photo
   that was there (a small brand illustration never meant for full-bleed
   use) was only 366x382px, stretched ~5x across the banner, which is
   what made it look blurry. Removing the image entirely (see index.html)
   and giving the outer-box its own gradient here replaces it cleanly.
   The template's own ".outer-box:before" gradient fades to transparent
   (it was designed to darken the left side of a photo, not stand alone),
   so this class makes it fully opaque instead. */
.braid-hero-nophoto{ background:linear-gradient(135deg, var(--theme-color2) 0%, var(--theme-color1) 100%); }
.braid-hero-nophoto:before{
  background:linear-gradient(135deg, var(--theme-color2) 0%, var(--theme-color1) 100%) !important;
}

/* ---------- Interior page banners: same clean-gradient treatment ----------
   Same reasoning as the homepage hero above, applied to the smaller
   ".page-title" banner used at the top of interior pages (e.g. Youth
   Connect). Removes the stock photo background (see the page's own HTML)
   and gives the banner an opaque gradient instead of the template's
   ":before" overlay, which was designed to fade over a photo. */
.braid-page-title-nophoto{ background:linear-gradient(135deg, var(--theme-color2) 0%, var(--theme-color1) 100%) !important; }
.braid-page-title-nophoto:before{
  background:linear-gradient(135deg, var(--theme-color2) 0%, var(--theme-color1) 100%) !important;
}

/* ---------- "Three ways to get involved" photos: drop the blur crossfade ----------
   The template's .service-image swaps in a second, duplicate copy of the same
   photo on hover, sliding and blurring one copy out while the other slides in
   sharp (see style.css .service-block-1 .service-image img:first-child /
   :hover rules) — same dizzying blur-in-motion feeling Chris asked us to cut
   from the About/Why-Choose images, just triggered by hover here instead of
   scroll. Disabling that crossfade (freezing both copies in their resting,
   sharp state) and giving the visible photo a small, calm zoom on hover
   instead keeps some response to the cursor — like the icons beside it react
   a little on hover — without any blur or shake. */
.service-block-1 .service-image img:first-child,
.service-block-1:hover .service-image img:first-child{
  -webkit-transform:none !important; transform:none !important;
  opacity:0 !important; -webkit-filter:none !important; filter:none !important;
}
.service-block-1:hover .service-image img:nth-child(2){
  -webkit-transform:scale(1.06) !important; transform:scale(1.06) !important;
  opacity:1 !important; -webkit-filter:none !important; filter:none !important;
}

/* ---------- Header Donate button: keep the label on mobile/tablet ----------
   The template hides the CTA's text below 1024px, leaving just a bare round
   arrow icon with no "Donate" next to it. Bring the label back so it still
   reads as a button, and tighten the pill's padding a little so it doesn't
   crowd the logo/hamburger on narrow phones. */
@media (max-width: 1024px){
  .header-style-one .header-lower .inner-container .main-box .right-box .theme-btn-two .theme-btn{
    display:inline-flex !important;
  }
}
@media (max-width: 480px){
  .header-style-one .header-lower .inner-container .main-box .right-box .theme-btn-two{
    padding-left:18px; height:44px; line-height:44px; gap:8px;
  }
  .header-style-one .header-lower .inner-container .main-box .right-box .theme-btn-two .theme-btn-arrow-left,
  .header-style-one .header-lower .inner-container .main-box .right-box .theme-btn-two .theme-btn-arrow-right{
    width:32px; height:32px; line-height:32px;
  }
  .header-style-one .header-lower .inner-container .main-box .right-box .theme-btn-two .theme-btn{
    font-size:14px;
  }
  /* Give the wider "Donate" pill room on narrow phones by letting the
     wordmark shrink a bit instead of overlapping it. The template's own
     ".left-box .logo-box img{ max-width:181px }" outweighs a shorter
     selector on specificity alone, so this matches it and goes further. */
  .header-style-one .header-lower .inner-container .main-box .left-box .logo-box img{
    max-width:128px !important; height:auto !important;
  }
}

/* ---------- Header logo: bigger on desktop ----------
   Chris asked for the top header wordmark to read at roughly twice its
   prior size on desktop (the mobile/tablet sizing, including the ≤480px
   shrink above, is untouched). The template's own 181px max-width would
   otherwise force the aspect-ratio height down below the 44px inline
   style ever asked for, so this sets both height and width explicitly
   rather than fighting max-width again.

   This only has room to apply at ≥1600px. Measured against the real nav
   (5 items, this site's actual labels) plus the logo plus the gap
   between them, the header's ".left-box" doesn't have enough width to
   fit an 88px-tall (~392px-wide) logo next to the full nav until the
   viewport reaches roughly 1500-1600px — below that, the nav's <li>s
   were wrapping onto 2-3 broken rows (reported as "the navigation bar
   isn't showing correctly"), which got dramatically worse once the logo
   grew, since the enlarged logo alone eats ~210px more width than the
   template's original small one. 1600px leaves comfortable margin. */
@media (min-width: 1600px){
  .header-style-one .header-lower .inner-container .main-box .left-box .logo-box img{
    height:88px !important; width:auto !important; max-width:400px !important;
  }
}

/* ---------- Header nav: stop wrapping in the 1025-1599px band ----------
   Below 1600px the logo stays at the template's original ~181px size (see
   above), but even at that original size, this site's 5 nav labels ("Who
   We Are", "Youth Connect", etc. — longer than the template's stock demo
   labels) are just wide enough that "Donate" alone wraps onto its own
   line in this band; measured and confirmed with Playwright across
   1025-1399px. Rather than shrinking type or spacing site-wide to chase
   a few more pixels, this hides just the "Donate" text link in the nav
   for this range — the pill-shaped Donate button already sitting in the
   header's right-box (visible whenever this text nav is, i.e. ≥1025px)
   covers the exact same action, so nothing is actually lost, and the
   remaining 4 items fit on one line with room to spare. */
@media (min-width:1024px) and (max-width:1599.98px){
  .header-style-one .header-lower .inner-container .main-box .left-box .main-menu .navigation > li:last-child{
    display:none;
  }
}

/* ---------- FAQ / accordion contrast fix ----------
   The template's <p> tags carry their own muted text color that wins over
   the white color set on the active (expanded, dark-green) accordion panel,
   leaving low-contrast text on a dark background. Force white in that case. */
.how-it-faq-1 .accordion-box .active-block .acc-content .content .text,
.how-it-faq-1 .accordion-box .active-block .acc-content .content .text p,
.how-it-faq-1 .accordion-box .active-block .acc-content .content .text li,
.how-it-faq-1 .accordion-box .active-block .acc-content .content .text ol,
.how-it-faq-1 .accordion-box .active-block .acc-content .content .text ul{
  color:#fff !important;
}

/* ---------- Hero banner contrast fix ----------
   The template's <strong> tags carry their own dark gray color meant for
   light backgrounds, which wins over the white text color set on the dark
   hero banner, leaving low-contrast bold text. Force white in that case. */
.banner-content .text strong,
.banner-content strong{
  color:#fff !important;
}

/* ---------- Preloader: real logo instead of the template's stock icon ---------- */
.preloader:after{
  background-image:url(../images/braid/branding/the-braid-foundation-mark.png) !important;
  background-size:contain !important;
}

/* ---------- Mission section: animated woven-strand background ----------
   Ported from the original site's hero canvas: three sine-wave strands in
   brand colors, continuously drifting past one another (see braid-canvas.js).
   Sits behind the mission text, covering the full section. */
.about-section{ position:relative; overflow:hidden; }
.about-section .row.g-4{ position:relative; z-index:1; }
#braidCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:.27; pointer-events:none; z-index:0;
}

/* ---------- Filter chips (Find a Therapist) ---------- */
.braid-filterbox{
  background:var(--theme-color4); border-radius:16px; padding:28px; margin:0 0 40px;
}
.braid-filter-group{ margin-bottom:18px; }
.braid-filter-group h6{ margin-bottom:10px; color:var(--headings-color); font-weight:700; }
.braid-chiprow{ display:flex; flex-wrap:wrap; gap:8px; }
.braid-chip{
  border:1px solid var(--theme-color1); background:#fff; color:var(--theme-color2);
  border-radius:999px; padding:8px 16px; font-size:.9rem; cursor:pointer; transition:.2s;
}
.braid-chip:hover{ background:var(--theme-color3); }
.braid-chip[aria-pressed="true"]{ background:var(--theme-color1); border-color:var(--theme-color1); color:#fff; }
.braid-filter-meta{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:16px;
  font-weight:600; color:var(--headings-color);
}

/* ---------- Therapist / board cards ---------- */
.braid-tcard-col{ display:block; }
.braid-board-card{ height:100%; }
.braid-tphoto{ position:relative; aspect-ratio:1/1; overflow:hidden; border-radius:12px; background:var(--theme-color3); }
.braid-tphoto img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Override the template's two-image hover-crossfade effect (.team-block-items2 .thumb
   img:first-child), which is designed for a pair of images and otherwise hides our
   single real photo (opacity:0, blurred, scaled) leaving only the sage background.
   Still needed for the board cards below, which keep the template's card wrapper. */
.team-block-items2 .thumb.braid-tphoto img:first-child,
.braid-tphoto img:first-child{
  position:static !important; inset:auto !important; left:auto !important; top:auto !important;
  right:auto !important; bottom:auto !important; z-index:1 !important;
  opacity:1 !important; -webkit-filter:none !important; filter:none !important;
  -webkit-transform:none !important; transform:none !important;
}
/* "Profile coming soon" placeholder (Jordan Imler, Karen Jimenez): a circle
   sized and colored to match the real photo circles (which are baked into
   each therapist's image at ~83% of its square canvas, ringed in a mossy
   green), so the two pending cards read as the same photo-in-a-circle
   treatment instead of a plain solid square standing out among the rest. */
.braid-tphoto .tinitials{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:83%; aspect-ratio:1/1; max-width:216px; max-height:216px; box-sizing:border-box;
  display:flex; align-items:center; justify-content:center; border-radius:50%;
  font-size:2.4rem; font-weight:700; color:var(--theme-color2);
  background:#eae7da; border:6px solid #7c8169;
}
.braid-tblurb{ font-size:.9rem; color:var(--text-color); margin:6px 0;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.braid-tblurb.braid-bio-expanded{ -webkit-line-clamp:unset; overflow:visible; display:block; }
.braid-tflags{ display:flex; gap:6px; flex-wrap:wrap; margin-top:auto; padding-top:6px; }
.tflag{ font-size:.72rem; padding:3px 9px; border-radius:999px; background:var(--theme-color3); color:var(--theme-color2); }
.tflag.vid{ background:var(--theme-color1); color:#fff; }
.tflag.soon{ background:#eee; color:#777; }
.tback-actions{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.tbtn{
  border:1px solid var(--theme-color1); background:var(--theme-color1); color:#fff;
  border-radius:8px; padding:8px 12px; font-size:.85rem; cursor:pointer;
}
.tbtn.ghost{ background:#fff; color:var(--theme-color1); }
.tbtn:hover{ opacity:.85; }

/* hidden-by-filter state */
.braid-tcard-col.braid-hide{ display:none !important; }

/* ---------- Therapist cards: flat, permanently-visible ----------
   Previously a 3D flip card (hover/tap to reveal the bio on the back).
   Replaced at Cathy's request: she and her team add/edit therapists
   themselves in Squarespace and don't want to hand-build a flip
   animation each time, and a flat card is far simpler to keep uniform
   height on than a two-sided one. Photo, name, credential, and a short
   teaser stay visible at all times; "Read full bio" opens the existing
   bio modal (braid-filter.js) with the rest — same modal that was
   already used for the "Watch intro" video-notice flow, so this reuses
   it instead of adding a second interaction pattern.
   .braid-tcard-col stretches to the row's height (Bootstrap's grid rows
   are flex containers with align-items:stretch by default), and
   .braid-tcard fills that with height:100% plus a min-height, so every
   card in a row matches the tallest one instead of shrink-wrapping to
   its own content — the same uniform-height goal the flip card's fixed
   520px height was solving for, without hardcoding one number that a
   longer name or credential could overflow. */
.braid-tcard-col{ display:flex; }
.braid-tcard{
  display:flex; flex-direction:column; width:100%; height:100%; min-height:480px; outline:none;
  border-radius:16px; border:1px solid var(--theme-color3); background:#fff;
  box-shadow:0 10px 30px rgba(4,47,35,.08); overflow:hidden;
}
.braid-tcard .braid-tphoto{ aspect-ratio:auto; height:260px; border-radius:0; flex-shrink:0; }
/* The photo box (260px tall) is wider than it is tall, but the therapist
   photos are square with the circular portrait already inset inside a
   transparent margin. object-fit:cover (the default above) scales the
   image up to fill that wider box and crops the top/bottom of the circle
   in the process. object-fit:contain instead shows the whole circle,
   letterboxed by the box's own sage background on the sides. */
.braid-tcard .braid-tphoto img{ width:100%; height:100%; object-fit:contain; }
.braid-tinfo{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:4px; flex:1; min-height:0; }

/* ---------- News/press video thumbnails ----------
   A real cover photo (stand-in until each item has its own frame) with a
   play button on top. The template's own ".news-block-items-1 .thumb .date"
   rule (a small fixed 60x60 "day number" badge, 30px font) has higher
   specificity than a plain ".braid-news-thumb .date" override, which is what
   was clipping the outlet name down to its first letter ("W...", "V...") —
   removed that label entirely rather than fight that specificity. */
.braid-news-thumb{
  /* These stills are much taller than the 200px-high thumbnail box, so a
     centered crop was slicing right through the person's face to keep the
     vertical midpoint of the photo (desk/knees). Anchoring to the top
     keeps the face in frame and only trims the lower body instead. */
  background-size:cover; background-position:center top; background-color:var(--theme-color2);
  border-radius:12px; height:200px; display:flex; align-items:center; justify-content:center; position:relative;
  color:#fff; overflow:hidden;
}
.braid-news-thumb::after{
  content:""; position:absolute; inset:0; background:rgba(4,47,35,.40); /* keep the play button/photo legible */
}
.braid-play-badge{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:50%; background:rgba(255,255,255,.28);
  display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}
.braid-video-trigger:hover .braid-play-badge{ background:rgba(255,255,255,.45); }
.braid-play-badge--soon{ background:rgba(255,255,255,.18); }
.braid-video-soon{
  position:absolute; z-index:1; bottom:12px; left:50%; transform:translateX(-50%);
  background:rgba(4,47,35,.72); color:#fff; font-size:.72rem; font-weight:600;
  padding:4px 12px; border-radius:999px; white-space:nowrap;
}

/* ---------- Our Work project blocks ---------- */
.braid-proj-kicker{
  position:absolute; top:20px; left:20px; z-index:2;
  font-size:1.3rem; font-weight:800; color:#fff; background:rgba(4,47,35,.55);
  padding:4px 14px; border-radius:999px;
}
/* The template only gives these blocks an explicit height below 992px
   (400px/340px); above that, each box's height is left to its own <img>'s
   natural aspect ratio. That worked with the template's own matched demo
   photos, but our real program photos have different proportions, so the
   three boxes were rendering at inconsistent heights on desktop. Giving
   them a shared explicit height there (object-fit:cover, already set on
   the img, does the cropping) makes all three the same size regardless of
   the source photos' own dimensions. */
@media (min-width: 992px){
  .project-block-style1 .inner-block{ height:460px; }
}

/* ---------- Impact stat counters: clean responsive grid ---------- */
.braid-stats-grid{
  display:grid !important; grid-template-columns:repeat(4,1fr); gap:24px;
  text-align:center;
}
.braid-stats-grid .experience-speaks-card-items{ padding:0; }
@media (max-width: 991.98px){ .braid-stats-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 575.98px){ .braid-stats-grid{ grid-template-columns:1fr; } }

/* ---------- Bio modal ---------- */
.braid-modal{ position:fixed; inset:0; z-index:99998; display:flex; align-items:center; justify-content:center; padding:24px; }
.braid-modal[hidden]{ display:none; }
.braid-modal-backdrop{ position:absolute; inset:0; background:rgba(4,47,35,.65); }
.braid-modal-panel{
  position:relative; background:#fff; border-radius:16px; max-width:640px; width:100%;
  max-height:85vh; overflow:auto; padding:32px;
}
.braid-modal-close{
  position:absolute; top:14px; right:14px; border:none; background:var(--theme-color3);
  width:36px; height:36px; border-radius:50%; font-size:1.3rem; cursor:pointer; line-height:1;
}
.braid-modal-panel h3{ margin-bottom:4px; }
.braid-modal-panel .tcred{ color:var(--text-color); margin-bottom:16px; display:block; }
.braid-modal-panel #braidModalLangBtn{ margin-top:16px; }

/* ---------- Donate page: live Givebutter giving-form embed ---------- */
#give, #ways{ scroll-margin-top:120px; }
.braid-give-trust{ list-style:none; margin:22px 0 0; padding:0; }
.braid-give-trust li{
  display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
  color:var(--headings-color); font-weight:600;
}
.braid-give-trust li i{ color:var(--theme-color1); margin-top:4px; }
.braid-give-panel{
  background:#fff; border-radius:20px; box-shadow:0 20px 50px rgba(4,47,35,.12);
  overflow:hidden; max-width:460px; margin:0 auto;
}
/* The custom element defaults to display:inline with no intrinsic size, which
   collapses to 0x0 until it's told otherwise — force it to fill the panel. */
.braid-give-panel givebutter-giving-form{ display:block; width:100%; min-height:600px; }
.braid-give-fallback{
  text-align:center; font-size:.85rem; color:var(--text-color); margin-top:14px;
}
.braid-give-fallback a{ color:var(--theme-color1); text-decoration:underline; }

/* ---------- Why Choose / Our Values / What Your Gift Protects ----------
   The template put the photo in its own column beside a 2-up box grid,
   with a decorative 1px vertical rule between them (.why-choose-us
   .image-box:before/:after in style.css) — that's the vertical line Chris
   asked to remove, along with the boxes only ever sitting 2-per-row. The
   template's photo column also relied on CSS mask-image (a PNG silhouette
   cut into the photo) to give it its shape, which several browsers refuse
   to load over a plain file:// preview (no server), leaving the photo
   totally blank there — which is exactly what showed up in Chris's
   screenshot. Replacing that mask with a plain rounded-rectangle photo
   above the boxes, and the 2-up grid with a single full-width row (equal
   height, wraps only if the window gets too narrow to fit them all), fixes
   both: no divider line, every box the same size, and the photo actually
   shows up. */
.braid-why-image{
  max-width:640px; margin:0 auto 50px; border-radius:16px; overflow:hidden;
}
/* object-position:top (rather than the object-fit default of centered) keeps
   these portrait counseling-circle photos framed on the seated speaker's
   face instead of splitting the crop evenly top/bottom and cutting into
   foreheads/eyes to make room for the table and hands below. */
.braid-why-image img{ width:100%; height:320px; object-fit:cover; object-position:center top; display:block; }
.braid-why-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:24px;
}
.braid-why-grid .inner-block{ height:100%; box-sizing:border-box; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* ---------- Icons: no hover wobble ----------
   The template swings every icon sideways (translate + rotate) for a beat
   whenever you hover it - wired up separately for each block type across
   style.css (features-block-style1/2/3, about-block-items-1, service-block-1,
   working-block-style1, testimonial-block-style2). Chris asked that icons
   throughout the site hold still instead of moving left to right, so this
   neutralizes the animation everywhere the template attaches it, rather than
   patching each block type's rule individually. */
.features-block-style1 .inner-block:hover .icon-block i,
.features-block-style1 .inner-block:hover .icon-block img,
.features-block-style2 .inner-block:hover .icon-block i,
.features-block-style2 .inner-block:hover .icon-block img,
.features-block-style3 .inner-block:hover .icon-block i,
.features-block-style3 .inner-block:hover .icon-block img,
.features-block-style3 .inner-block.active .icon-block i,
.features-block-style3 .inner-block.active .icon-block img,
.about-block-items-1 .about-wrap .about-icon-items .icon-items:hover .icon img,
.about-block-items-1 .about-wrap .about-icon-items .icon-items:hover .icon i,
.service-block-1:hover .content .icon img,
.service-block-1:hover .content .icon i,
.working-block-style1 .inner-block:hover .icon-block .icon i,
.working-block-style1 .inner-block:hover .icon-block .icon img,
.testimonial-block-style2 .inner-block:hover .quote-icon i,
.testimonial-block-style2 .inner-block:hover .quote-icon img{
  -webkit-animation:none !important; animation:none !important;
  -webkit-transform:none !important; transform:none !important;
}

/* ---------- Footer: breathing room above the green panel ----------
   style.css gives the rounded footer panel side margins only
   (.footer-area{ margin:0 40px }), so on every page where a full-bleed
   photo section (the "Give Today" bg-cover block) is the thing right
   before the footer, the photo runs straight into the green panel with
   no gap at all. Adding a top margin here (after style.css, so it wins)
   gives that seam some air without touching the side margins or the
   rounded corners. */
.footer-area{ margin-top:32px; }

/* ---------- "Why choose us" stat numbers on Our Work ---------- */
/* .icon-block .icon is a template slot meant for a single small icon
   glyph, and it carries a tiny 16x16 decorative dot (:before) centered
   behind wherever that glyph sits. Chris is using this same slot to show
   a short stat instead ("300+", "1st", "19-25"), so that dot — sized for
   one icon character — ends up floating in the middle of a much wider
   piece of text, covering whatever digit happens to land there. Scoped to
   just these stat badges (.braid-stat-badge) so the dot still shows up
   normally on every other icon that uses this same block elsewhere. */
.features-block-style2 .inner-block .icon-block .icon.braid-stat-badge:before{
  content:none;
}