/* Shared FutureVitals design. The approved homepage supplies the visual system. */
:root {
  --ui-heading: #123c50;
  --ui-pink: #f5c3d9;
  --ui-section-space: clamp(3rem, 5.5vw, 4.5rem);
  --ui-section-title: clamp(2rem, 3.4vw, 3rem);
  --ui-support-title: clamp(1.875rem, 2.6vw, 2.5rem);
  --ui-card-title: clamp(1.375rem, 1.9vw, 1.625rem);
  --ui-body: 1rem;
  --ui-note: .875rem;
  --ui-control-size: .75rem;
  --ui-control-pad: .875rem 1.25rem;
  --ui-radius: 8px;
  --ui-grid-gap: clamp(1rem, 2vw, 1.5rem);
  --ui-quote: #faf1ef;
}

/* Navigation has the same geometry and behavior on every page. */
.site-header{ position:fixed; inset:0 0 auto 0; z-index:60; background:transparent;
              transition:background .25s ease, box-shadow .25s ease; }
.site-header .wrap{ max-width:var(--maxw-header); }
.nav{ display:flex; align-items:center; gap:1.4rem; height:var(--header-h); }/* Wordmark is sentence case, so it CANNOT be Montserrat : Newsreader 400 instead,
   which also ties it to the h1 it sits above. */
.brand{ display:flex; align-items:center; gap:.6rem; font-family:var(--display); font-weight:400;
        font-size:1.38rem; letter-spacing:.005em; color:var(--paper); transition:color .25s ease; }
.brand:hover{ color:var(--paper); }
.brand .mark{ width:36px; height:36px; border-radius:10px; background:var(--paper); display:grid;
              place-items:center; flex:0 0 auto; transition:background .25s ease; }
.brand .mark img{ width:100%; height:100%; object-fit:contain; padding:2px; }
/* --- top nav row: plain links + dropdown triggers (.nav-item disclosure groups) --- */
/* .74rem, gap .85rem: uppercase Montserrat at .15em widens every label ~35–45%, and
   there are 8 top-level items. At the old .95rem/1rem the row collided before the
   hamburger breakpoint could catch it. */
.nav-links{ display:flex; align-items:center; gap:clamp(.85rem,4.4vw - 2.4rem,2rem); margin-left:auto; }
.nav-item{ position:relative; display:flex; align-items:center; }
.nav-row{ display:flex; align-items:center; gap:.05rem; }
  /* Top-level items are labels, not links: only the subtabs navigate. The label
     still opens its own submenu, so the caret is not the only hit target. */
  .nav-top{ cursor:pointer; -webkit-user-select:none; user-select:none; }
.nav-links > a, .nav-top{ font-family:var(--label); color:var(--paper); font-weight:600;
                font-size:.74rem; text-transform:uppercase; letter-spacing:.15em;
                white-space:nowrap; padding:.45rem 0; border-bottom:2px solid transparent;
                transition:color .25s ease, border-color .25s ease; }
.nav-links > a:hover, .nav-top:hover{ color:var(--paper); border-bottom-color:currentColor; }
.nav-links > a[aria-current="page"], .nav-top[aria-current="page"]{ border-bottom-color:currentColor; }

/* disclosure caret button : sits beside the (navigable) top link */
.nav-toggle{ display:inline-grid; place-items:center; padding:.18rem; margin-left:.05rem;
             background:none; border:0; border-radius:6px; color:var(--paper); cursor:pointer;
             transition:color .25s ease; }
.nav-toggle svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:2.4;
                 transition:transform .25s var(--ease); }
.nav-item[data-open] .nav-toggle svg{ transform:rotate(180deg); }

/* dropdown panel : plain white, soft shadow, plain-text items (ForMed treatment) */
.nav-menu{ position:absolute; top:100%; left:-.9rem; min-width:232px; margin:0;
           display:flex; flex-direction:column; gap:2px; padding:.5rem;
           background:var(--paper); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lift);
           opacity:0; transform:translateY(-8px); pointer-events:none; visibility:hidden;
           transition:opacity .2s ease, transform .24s var(--ease), visibility 0s linear .24s; }
.nav-menu::before{ content:""; position:absolute; left:0; right:0; top:-.7rem; height:.7rem; } /* hover bridge */
/* Dropdown items are sentence case ("Board of directors"), so Montserrat is out :
   Mulish 600 keeps them legible without uppercasing real prose. */
.nav-menu a{ font-family:var(--body-font); font-weight:600; font-size:.93rem; color:var(--ink);
             padding:.58rem .8rem; border-radius:8px; white-space:nowrap;
             transition:background .18s ease, color .18s ease; }
.nav-menu a:hover{ background:var(--wash); color:var(--link-hover); }
.nav-menu a[aria-current="page"]{ background:var(--wash); color:var(--green); }

.nav-socials{ display:flex; gap:.9rem; align-items:center; margin-left:.2rem; }
.nav-socials a{ display:grid; place-items:center; color:var(--paper); transition:color .25s ease, opacity .2s ease; }
.nav-socials a:hover{ opacity:.75; color:var(--paper); }
.nav-socials svg{ width:20px; height:20px; stroke:currentColor; fill:none; }
/* Donate pill: needs the extra specificity to beat `.nav-links > a` on colour. */
.nav-links > a.donate{ margin-left:1.35rem; padding:.7rem 1.25rem; font-size:.74rem;
                       color:var(--ink); border-bottom:2px solid transparent; }
.nav-links > a.donate:hover{ color:var(--ink); background:var(--wash); border-bottom-color:transparent; }

/* desktop only: open on hover / keyboard focus / explicit toggle; hide inline socials to fit 8 items */
@media (min-width:1181px){
  .nav-item:hover .nav-menu,
  .nav-item:focus-within .nav-menu,
  .nav-item[data-open] .nav-menu{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
    transition:opacity .2s ease, transform .24s var(--ease), visibility 0s; }
  .nav-item:last-of-type .nav-menu{ left:auto; right:-.9rem; } /* keep the rightmost panel on-screen */
  .nav-socials{ display:none; }
}

.site-header.is-solid, .site-header--solid{ background:var(--paper);
  box-shadow:0 1px 0 var(--line), 0 8px 24px -18px rgba(28,42,39,.25); }
.site-header.is-solid .brand, .site-header--solid .brand{ color:var(--green-deep); }
.site-header.is-solid .nav-links > a, .site-header--solid .nav-links > a,
.site-header.is-solid .nav-top, .site-header--solid .nav-top,
.site-header.is-solid .nav-toggle, .site-header--solid .nav-toggle{ color:var(--ink); }
.site-header.is-solid .nav-links > a:hover, .site-header--solid .nav-links > a:hover,
.site-header.is-solid .nav-top:hover, .site-header--solid .nav-top:hover{ color:var(--link-hover); }
.site-header.is-solid .nav-links > a[aria-current="page"],
.site-header--solid .nav-links > a[aria-current="page"],
.site-header.is-solid .nav-top[aria-current="page"],
.site-header--solid .nav-top[aria-current="page"]{ border-bottom-color:var(--green); }
.site-header.is-solid .nav-socials a, .site-header--solid .nav-socials a{ color:var(--green-deep); }
.site-header.is-solid .nav-links > a.donate,
.site-header--solid .nav-links > a.donate{ background:var(--ink); color:var(--paper); }
.site-header.is-solid .nav-links > a.donate:hover,
.site-header--solid .nav-links > a.donate:hover{ background:var(--green-deep); color:var(--paper); }

.menu-btn{ display:none; margin-left:auto; background:none; border:2px solid currentColor;
           border-radius:10px; padding:.42rem; cursor:pointer; color:var(--paper); transition:color .25s ease; }
.menu-btn svg{ width:24px; height:24px; stroke:currentColor; display:block; }
.site-header.is-solid .menu-btn, .site-header--solid .menu-btn{ color:var(--green-deep); }

/* Mobile drawer : smooth open/close. One JS breakpoint, now 1180px: the uppercase nav
   needs the hamburger sooner than the old 1100px allowed. */
@media (max-width:1180px){
  .nav-links{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch;
    gap:0; background:var(--paper); padding:.6rem var(--pad) 1.4rem;
    max-height:calc(100dvh - var(--header-h)); overflow-y:auto;
    box-shadow:0 12px 30px -14px rgba(28,42,39,.28);
    opacity:0; transform:translateY(-14px) scaleY(.96); transform-origin:top center;
    pointer-events:none; visibility:hidden;
    transition:opacity .18s ease, transform .24s var(--ease), visibility 0s linear .24s; }
  .nav-links.open{ opacity:1; transform:none; pointer-events:auto; visibility:visible;
    transition:opacity .2s ease, transform .24s var(--ease), visibility 0s; }
  .nav-links > a{ color:var(--green-deep) !important; padding:.9rem .2rem; border-bottom:1px solid var(--line); }

  /* dropdown groups become tap-to-expand accordions inside the drawer */
  .nav-item{ flex-direction:column; align-items:stretch; }
  .nav-row{ justify-content:space-between; padding:.9rem .2rem; border-bottom:1px solid var(--line); }
  .nav-top{ color:var(--green-deep) !important; padding:0; border-bottom:0; flex:1; }
  .nav-toggle{ color:var(--green-deep) !important; padding:.3rem; }
  .nav-menu{ position:static; opacity:1; transform:none; visibility:hidden; pointer-events:none;
    box-shadow:none; border:0; border-radius:0; min-width:0; margin:0; padding:0 0 0 1rem; gap:0;
    max-height:0; overflow:hidden; transition:none; }
  .nav-item[data-open] .nav-menu{ visibility:visible; pointer-events:auto; max-height:600px; }
  .nav-menu::before{ display:none; }
  .nav-menu a{ padding:.75rem .4rem; border-bottom:1px solid var(--line); border-radius:0; white-space:normal; }

  .nav-socials{ margin:1.1rem 0 0; }
  .nav-socials a{ color:var(--green-deep) !important; }
  .nav-links > a.donate{ margin:1.1rem 0 0; background:var(--ink) !important; color:var(--paper) !important; }
  .menu-btn{ display:inline-flex; }
}
.site-header, .site-header:not(.is-solid) { background: var(--paper); border-bottom: 1px solid var(--line); }
.site-header .brand, .site-header .nav-top, .site-header .nav-toggle,
.site-header .nav-links > a, .site-header .menu-btn { color: var(--ui-heading); }
.site-header .nav-top:hover, .site-header .nav-links > a:hover { color: var(--green); }
.site-header .nav-links > a.donate,
.site-header.is-solid .nav-links > a.donate { background: var(--ui-pink); color: var(--ui-heading); margin-left: 0; }
.site-header .nav-links > a.donate:hover { background: #e9bdd3; color: var(--ui-heading); }
.mobile-donate { display: none; }
@media (max-width: 1180px) {
  .site-header .nav { gap: .5rem; }
  .site-header .brand { white-space: nowrap; }
  .site-header .mobile-donate { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-left: auto; min-height: 44px; padding: .625rem .875rem; border-radius: 999px; background: var(--ui-pink); color: var(--ui-heading); font-family: var(--label); font-size: .75rem; font-weight: 600; line-height: 1.2; text-decoration: none; }
  .site-header .mobile-donate:hover { background: #e9bdd3; }
  .site-header .mobile-donate:active { background: #dfa9c3; }
  .site-header .mobile-donate:focus-visible { outline: 2px solid var(--green-deep); outline-offset: 3px; }
  .site-header .menu-btn { margin-left: auto; flex: 0 0 44px; width: 44px; height: 44px; padding: 0; align-items: center; justify-content: center; }
  .site-header .nav-links > a.donate { display: none; }
}
@media (max-width: 480px) {
  .site-header .brand { font-size: 1.125rem; gap: .375rem; }
  .site-header .brand .mark { width: 28px; height: 28px; }
}

.site-header .wrap { max-width: var(--maxw); }
.site-header.is-solid .brand, .site-header.is-solid .nav-top,
.site-header.is-solid .nav-toggle, .site-header.is-solid .nav-links > a,
.site-header.is-solid .menu-btn, .site-header--solid .brand,
.site-header--solid .nav-top, .site-header--solid .nav-toggle,
.site-header--solid .nav-links > a, .site-header--solid .menu-btn { color: var(--ui-heading); }
.site-header--solid .nav-links > a.donate { background: var(--ui-pink); color: var(--ui-heading); }
.site-header .nav-menu a { min-height: 44px; display: flex; align-items: center; }
.site-header .nav-menu a:focus-visible { outline: 2px solid var(--green-deep); outline-offset: -2px; }
@media (max-width: 1180px) {
  .site-header .nav-toggle { min-width: 44px; min-height: 44px; }
  .site-header .nav-row { padding-block: .35rem; }
  .site-header .nav-top { min-height: 44px; display: flex; align-items: center; }
  .site-header .nav-links { transform: translateY(-10px); transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s linear 240ms; }
  .site-header .nav-links.open { transform: none; transition: opacity 180ms ease, transform 240ms var(--ease), visibility 0s; }
  .site-header .nav-menu { transition: none; }
}

/* Shared footer, including contact and subscription controls. */
.site-footer { background: var(--green-deep); color: var(--paper); padding-block: 3rem 1rem; }
.site-footer .footer-brand, .site-footer h4, .site-footer .legal, .site-footer a, .site-footer .footer-bottom { color: var(--paper); }
.site-footer .footer-grid > * { min-width: 0; }
.site-footer .legal { color: var(--mist); font-size: var(--ui-note); line-height: 1.65; }
.site-footer .legal strong { color: inherit; }
.site-footer .btn { --button-fill: var(--ui-pink); --button-ink: var(--ui-heading); --button-hover: #e9bdd3; --button-focus: var(--paper); min-height: 48px; font-size: var(--ui-control-size); padding: var(--ui-control-pad); letter-spacing: .07em; }
.site-footer a[href^="mailto:"], .site-footer a[href^="tel:"] { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ui-note); overflow-wrap: anywhere; }
.site-footer .f-socials a { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(228,237,234,.45); border-radius: 50%; }
.site-footer .f-socials a:hover { background: rgba(228,237,234,.12); }
.site-footer a:focus-visible { outline: 2px solid var(--ui-pink); outline-offset: 4px; }
.site-footer .footer-bottom { border-color: rgba(251,250,248,.25); gap: .75rem 1.5rem; }
.site-footer .footer-bottom a { display: inline-flex; align-items: center; min-height: 44px; }


.site-footer .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.site-footer .footer-bottom a:hover { text-decoration: underline; text-underline-offset: .25em; }
@media (max-width: 800px) {
  .site-footer .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer .newsletter { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer .newsletter { grid-column: auto; }
}
::selection { background: var(--ui-pink); color: var(--ui-heading); }
@media (prefers-reduced-motion: reduce) {
  .site-header .nav-links, .site-header .nav-links.open { transition: none; }
}

@media(max-width:1180px) { .site-header .mobile-donate + .menu-btn { margin-left:0; } }