/* 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; }

/* ---------- 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. */
@media (min-width: 1025px){
  .header-style-one .header-lower .inner-container .main-box .left-box .logo-box img{
    height:88px !important; width:auto !important; max-width:400px !important;
  }
}

/* ---------- 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;
}
.braid-tphoto .tinitials{
  width:100%; height:100%; display:flex; align-items:center; justify-content:center;
  font-size:2.4rem; font-weight:700; color:var(--theme-color2); background:var(--theme-color3);
}
.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-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: 3D flip (front photo, back full bio) ----------
   Ported from the client's earlier prototype at Chris's request: hover
   flips the card to reveal the bio, recolored to this site's palette
   instead of the prototype's own. A short hover delay avoids flipping
   every card the pointer sweeps past; a real click/tap (touch has no
   hover) or keyboard focus flips instantly via the .braid-flipped class,
   toggled in braid-filter.js. The bio text below is rendered straight
   into the page's HTML, not injected by JS on click the way the old
   bio-modal-only version worked, so it's there for search engines too. */
.braid-tcard{ perspective:1600px; height:520px; width:100%; outline:none; }
.braid-tcard-inner{
  position:relative; width:100%; height:100%; transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,.1,.2,1);
}
.braid-tcard:hover .braid-tcard-inner{ transform:rotateY(180deg); transition-delay:.3s; }
.braid-tcard.braid-flipped .braid-tcard-inner,
.braid-tcard:focus-within .braid-tcard-inner{ transform:rotateY(180deg); transition-delay:0s; }
.braid-tface{
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:16px; border:1px solid var(--theme-color3); background:#fff;
  box-shadow:0 10px 30px rgba(4,47,35,.08); overflow:hidden; display:flex; flex-direction:column;
}
.braid-tfront{ position:relative; }
.braid-tfront .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-tfront .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; }
.braid-fliphint{
  position:absolute; bottom:11px; right:14px; font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--text-color); opacity:.55; z-index:2; pointer-events:none;
}
.braid-tback{ transform:rotateY(180deg); padding:22px; gap:8px; }
.braid-tback-head .title{ margin-bottom:0; }
.braid-tback-head .text{ display:block; margin-bottom:8px; }
.braid-tbacktxt{
  font-size:.83rem; color:var(--text-color); line-height:1.5; flex:1; overflow-y:auto; min-height:0;
  padding-right:6px;
  -webkit-mask-image:linear-gradient(#000 calc(100% - 24px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 24px), transparent);
}
.braid-tbacktxt::-webkit-scrollbar{ width:4px; }
.braid-tbacktxt::-webkit-scrollbar-thumb{ background:var(--theme-color3); border-radius:9px; }
.braid-tbacktxt strong{ color:var(--headings-color); }
.braid-taglist{ display:flex; flex-wrap:wrap; gap:5px; margin:8px 0 0; }
.braid-taglist .tag{
  font-size:.68rem; padding:3px 9px; border-radius:6px; background:var(--theme-color4);
  color:var(--theme-color2); border:1px solid var(--theme-color3);
}
/* Touch devices have no hover to preview with, so the "Hover / tap" hint
   would be half-true there — say just "Tap" instead. */
@media (hover: none){
  .braid-fliphint{ font-size:0; }
  .braid-fliphint::after{ content:"Tap"; font-size:.66rem; }
}

/* ---------- 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{
  background-size:cover; background-position:center; 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;
}

/* ---------- 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 .tags{ margin-top:16px; display:flex; gap:8px; flex-wrap:wrap; }
.braid-modal-panel .tag{ background:var(--theme-color3); color:var(--theme-color2); border-radius:999px; padding:4px 12px; font-size:.8rem; }

/* ---------- 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; }

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