/* HANGOVR180® - Global Styles (v5.0) */

/* ===== LAYOUT / TYPE STANDARD TOKENS (2026-06-18) =====
   Shared design tokens - DEFINITIONS ONLY. No global element overrides here.
   Pages opt in by pointing their existing scoped values at these tokens
   (per-page, preserving tuned interiors). Anchored to the existing tuning so
   most values do not move: deep-page template is the 80-page anchor.
     container = 1100px (the dominant width cluster; wide marketing islands
                 snap IN to it). measure 680->672, sub 520->528, title 700->704.
     type: base 16px, ratio 1.25 (major third), rungs on existing cluster centers.
     hero tiers: each keeps its CURRENT desktop max; mobile floor unified to 48px
                 (the S4 word-break rule covers long single words at 320). */
:root{
  /* width tokens - assigned by section role */
  --container: 68.75rem;     /* 1100px - page bands / section inners */
  --measure: 43.75rem;       /* 700px  - prose / reading column (Mark-locked 2026-06-19) */
  --measure-cards: 50rem;    /* 800px  - related-cluster cards; wider than prose, scannable lists (Mark-locked 2026-06-19) */
  --measure-title: 44rem;    /* 704px  - text headline wrap (marketing) */
  --measure-hero: 60rem;     /* 960px  - deep-page display hero; fits long single-word names (NEUROINFLAMMATION) without mid-word break on wide screens */
  --measure-sub: 33rem;      /* 528px  - hero subcopy / lead paragraphs */
  --measure-narrow: 30rem;   /* 480px  - forms, narrow cards, stat blocks */

  /* type ladder - base 1rem (16px), ratio 1.25 */
  --fs-2xs: 0.75rem;   /* 12px - labels, captions, footnotes, FDA dagger */
  --fs-xs:  0.875rem;  /* 14px - meta, small UI */
  --fs-sm:  1rem;      /* 16px - body */
  --fs-md:  1.25rem;   /* 20px - lead body, large UI */
  --fs-lg:  1.5rem;    /* 24px - subhead */
  --fs-xl:  2rem;      /* 32px - small headline */
  --fs-2xl: 2.5rem;    /* 40px - section headline */
  --fs-3xl: 3.25rem;   /* 52px - large headline */

  /* hero tiers - one clamp shape; mobile floor 48px, current desktop max kept */
  --hero-sm: clamp(3rem, 7vw, 5rem);     /* 48-80px  - deep template, compare, editorial */
  --hero-md: clamp(3rem, 10vw, 7.5rem);  /* 48-120px - find-us, stock-up, tomorrow-people, faq */
  --hero-lg: clamp(3rem, 12vw, 10rem);   /* 48-160px - index, inside (biggest heroes) */

  /* color tokens - canonical palette, centralized 2026-06-19. Same values as the per-page
     :root blocks, so pages that still declare their own are unchanged; pages WITHOUT a per-page
     :root (e.g. find-us.html) now inherit these instead of rendering with undefined vars. */
  --yellow:#FFD800; --black:#303633; --red:#C7084F; --white:#FFFFFF;
  --off-white:#F7F7F2; --light:#EEEEEA; --border:#D8D8D4;
  --muted:#666660; --very-muted:#6b6b66 !important; --dark-hero:#1E2220; --yellow-tint:#FFFBCC;
  /* --very-muted darkened from #999994 + !important so it overrides the per-page :root copies
     → micro-text (captions, citations, labels) now clears WCAG AA 4.5:1. Used on light bg only,
     so darkening has no dark-context downside. Drop the !important after color centralization. */
}
/* Breakpoints (min-width; literal in @media - CSS vars can't be used in media queries):
   480 / 768 / 1024 / 1280. Keep existing landscape + reduced-motion queries. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Montserrat',sans-serif;background:#f5fbf6;color:#171d1a;-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.6}

/* Skip link - first focusable element on every page (WCAG 2.4.1) */
.skip-link{position:absolute;top:0;left:0;background:#303633;color:#FFD800;padding:0.75rem 1rem;font-weight:900;font-size:0.875rem;text-transform:uppercase;letter-spacing:0.05em;z-index:1000;transform:translateY(-150%);transition:transform 0.2s}
.skip-link:focus{transform:translateY(0);outline:2px solid #FFD800;outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .skip-link{transition:none}
  html{scroll-behavior:auto}
}
img{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
button{cursor:pointer;border:none;font-family:'Montserrat',sans-serif}
input{font-family:'Montserrat',sans-serif}

/* Nav */
.nav{position:sticky;top:0;z-index:50;display:flex;justify-content:space-between;align-items:center;width:100%;padding:0 max(2rem,env(safe-area-inset-right)) 0 max(2rem,env(safe-area-inset-left));height:5rem;background:#FFD800;border-bottom:8px solid #303633}
.nav__logo img{height:2.5rem;width:auto}
.nav__links{display:none;align-items:center;gap:0.25rem}
.nav__link{position:relative;color:#303633;font-weight:700;padding:0.5rem 1rem;font-size:0.875rem;text-transform:uppercase;letter-spacing:-0.02em}
.nav__link:hover{background:#C7084F;color:#fff}
.nav__link--active{background:#303633;color:#FFD800;font-weight:900}
.nav__link--active:hover{background:#303633;color:#FFD800}
.nav__mobile-btn{display:flex;align-items:center;background:transparent;color:#303633;padding:0.5rem;margin-left:auto}
.nav__mobile-btn svg{display:block}

/* Nav clarifier tooltips */
.nav__clarifier{display:none}

/* Mobile Menu */
.mobile-menu{display:none;position:fixed;top:calc(5rem + 8px);left:0;right:0;bottom:0;background:#303633;z-index:49;flex-direction:column;padding:2rem;gap:0;overflow-y:auto}
.mobile-menu.is-open{display:flex}
.mobile-menu a{color:#FFD800;font-weight:900;font-size:1.5rem;text-transform:uppercase;letter-spacing:-0.02em;padding:1rem 0 0.25rem;border-bottom:none}
.mobile-menu__sub{display:block;font-size:0.75rem;font-weight:500;color:rgba(255,216,0,0.6);text-transform:none;letter-spacing:0;padding-bottom:1rem;border-bottom:4px solid rgba(255,216,0,0.2)}
.mobile-menu a:last-of-type + .mobile-menu__sub{border-bottom:none}

/* Buttons - CTA on LIGHT backgrounds */
.btn-cta-light{background:#C7084F;color:#fff;padding:1.5rem 3rem;font-size:1.25rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;border-radius:0;display:inline-block;text-align:center;white-space:nowrap;border:none;cursor:pointer;font-family:'Montserrat',sans-serif}
.btn-cta-light:hover{background:#303633;color:#FFD800}

/* Buttons - CTA on DARK backgrounds */
.btn-cta-dark{background:#C7084F;color:#fff;padding:1.5rem 3rem;font-size:1.25rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;border-radius:0;display:inline-block;text-align:center;white-space:nowrap;border:none;cursor:pointer;font-family:'Montserrat',sans-serif}
.btn-cta-dark:hover{background:#FFD800;color:#303633}

/* Buttons - Signup/cart default style */
.btn-signup{background:#303633;color:#FFD800;padding:1.5rem 3rem;font-size:1.25rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;border-radius:0;display:inline-block;text-align:center;white-space:nowrap;border:none;cursor:pointer;font-family:'Montserrat',sans-serif}
.btn-signup:hover{background:#C7084F;color:#fff}

/* Card buttons - black/yellow default, red/white hover, full-width */
.card__btn{background:#303633;color:#FFD800;width:100%;padding:1.25rem;font-size:1rem;font-weight:900;text-transform:uppercase;letter-spacing:0.05em;border:none;cursor:pointer;font-family:'Montserrat',sans-serif;text-align:center;min-height:48px}
.card__btn:hover{background:#C7084F;color:#fff}

/* ===== Footer (unified V1/V2) - PP-007 r2 ===== */
.footer{background:#303633;border-top:16px solid #C7084F;padding:3.5rem max(1.5rem,env(safe-area-inset-right)) 2.75rem max(1.5rem,env(safe-area-inset-left));display:flex;flex-direction:column}
/* Main band: brand / links / legal / disclaimer */
.footer__main{display:grid;grid-template-columns:1fr;grid-template-areas:'brand' 'links' 'legal' 'disc';row-gap:2rem;align-items:start}
.footer__brand{grid-area:brand;display:flex;align-items:flex-start}
.footer__logo-img{width:10.625rem;height:auto}
.footer__tm{font-size:2.25rem;line-height:0.8;color:#FFD800;margin-left:0.5rem;align-self:flex-start}
.footer__links{grid-area:links;display:flex;flex-direction:column;align-items:flex-start;gap:0.875rem}
.footer__links a{font-size:0.875rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;color:#FFD800;white-space:nowrap}
.footer__links a:hover{text-decoration:underline;text-decoration-thickness:4px}
.footer-legal{grid-area:legal;display:flex;flex-direction:column;gap:0.375rem;font-size:0.8125rem;font-weight:500;line-height:1.6;color:#FFD800;text-align:left;margin:0}
.footer-disclaimer{grid-area:disc;border-top:1px solid rgba(255,255,255,0.14);padding-top:1.375rem;font-size:0.75rem;font-weight:500;line-height:1.7;color:rgba(255,216,0,0.6);text-align:left;max-width:none;margin:0}
/* V1 disclosure block (below the main band) */
.footer__disclosure{margin-top:1.625rem;max-width:46rem}
.footer__disclosure p{font-size:0.75rem;line-height:1.65;font-weight:400;color:#9e9e98;margin:0 0 0.7rem;text-align:left}
.footer__disclosure p:last-child{margin-bottom:0}
/* Tablet: ≥768px - links to two column-major columns; legal joins one wrapping row */
@media(min-width:768px){
  .footer__links{display:grid;grid-template-columns:repeat(2,auto);grid-template-rows:repeat(6,auto);grid-auto-flow:column;justify-content:start;gap:1rem 3rem}
  .footer-legal{flex-direction:row;flex-wrap:wrap;gap:0.625rem 3.5rem}
}
/* Desktop: ≥1024px - brand beside a 4-column column-major link grid; content capped at 1320px.
   CODE-213: 12->15 links (added Claim Registry / Media / Contact). Rows 3->4 keeps the grid at FOUR
   columns (4/4/4/3) - the 3 new links land as their own trailing column ("a full column at widest")
   without widening the grid to a 5th column, which would overflow the 3rem-padded box in the 1024-1319 band. */
@media(min-width:1024px){
  .footer{padding:3.5rem max(3rem,calc((100% - 82.5rem)/2),env(safe-area-inset-right)) 2.75rem max(3rem,calc((100% - 82.5rem)/2),env(safe-area-inset-left))}
  .footer__links{grid-template-columns:repeat(4,auto);grid-template-rows:repeat(4,auto);gap:1.25rem 4rem}
}
/* CODE-S2 Item 2: brand sits beside the links only from the footer's 1320px cap. Below 1320 the
   brand-beside grid (~1100px) overflowed the 3rem-padded content box (1024-1319 band); stacking
   brand above the full-width 4x3 links there removes the overflow. >=1320 + the 768/1024 link grid unchanged. */
@media(min-width:1320px){
  .footer__main{grid-template-columns:max-content 1fr;grid-template-areas:'brand links' 'legal legal' 'disc disc';column-gap:3.5rem;row-gap:2.5rem}
}
/* Wide: ≥1100px - V1 disclosure flows into two columns */
@media(min-width:1100px){
  .footer__disclosure{max-width:none;column-count:2;column-gap:3.5rem}
  .footer__disclosure p{break-inside:avoid}
}
.hero__headline .line{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Nav → 1024px */
@media(min-width:1024px){
  .nav__links{display:flex}
  .nav__mobile-btn{display:none}

  /* Nav clarifier tooltips - white bg, black text, 0.5s delay */
  .nav__link{overflow:visible}
  .nav__clarifier{display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:0.875rem;font-weight:700;text-transform:none;letter-spacing:0;color:#303633;background:#fff;padding:0.5rem 1.25rem;z-index:10;margin-top:0.25rem;opacity:0;pointer-events:none;transition:opacity 0.3s ease 0.7s}
  .nav__link:hover .nav__clarifier{opacity:1}
  .nav__link--active .nav__clarifier{color:#303633;background:#fff}
}

/* Cluster nav (science/local/about) -- 2026-06-18 STANDARD: contained wrapping link row.
   Supersedes the CODE-R4/S4 nowrap scroll-strip (Mark-confirmed): the strip overshot the
   container and forced sideways scrolling. Now full-bleed bg + an inner capped to --container
   with the shared gutter, links wrap into tidy rows (footer-style) at every width -- no
   horizontal scroll, no overshoot. Markup: <nav class="shadow-nav"><div class="snav-inner">..links..</div></nav> */
.shadow-nav{background:var(--light);border-bottom:1px solid var(--border);padding-inline:48px}
.shadow-nav .snav-inner{max-width:var(--container);margin:0 auto;padding-block:12px;display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.shadow-nav .snav-inner a{white-space:nowrap}
@media (max-width:767px){.shadow-nav{padding-inline:24px}.shadow-nav .snav-inner{gap:10px 20px}}
/* CODE-S4 Fix B: let long single-word hero titles (neuroinflammation, ampelopsis-grossedentata, ...) break instead of overflowing on mobile. The deep-page hero title is the h1 in .hero-block (confirmed live). No overflow:hidden on .hero-block (that would chop the title). */
.hero-block h1{overflow-wrap:break-word;word-break:break-word}

/* The blanket "LAYOUT STANDARD" override block was removed: proven on the branch to strangle
   whole pages (it capped every section inside #main-content at the reading measure). The real
   standard will be built per page type with scoped classes + tokens, never as global !important
   overrides. global.css is back to its pre-standard, per-page-correct state here. */