/* ============================================================
   GHP Formline — micro-detail layer (Part 2 §B)
   Load in every page's helmet after the design-system styles.
   Theme accent per page via --gf-accent on the page root.
   ============================================================ */

/* ICON COLORWAY TOKENS — the ONLY icon paint on the site (two variants).
   on-light: white / ice / sky surfaces · on-dark: navy surfaces.
   ghp-icon reads these; changing icon color anywhere means changing them here. */
:root {
  --icon-ink1: #1A3DAE;                    /* navy-600 */
  --icon-ink2: #0099FF;                    /* sky-500, hue-locked to logo */
  --icon-tint: #E8F5FF;                    /* sky-50 ice circle */
  --icon-knock: #FFFFFF;                   /* mono knockout on light */
  --icon-dark-ink1: #FFFFFF;
  --icon-dark-ink2: #5FB8FF;               /* sky-300 */
  --icon-dark-tint: rgba(255,255,255,0.10);/* white 10% circle */
  --icon-dark-knock: #0F2466;              /* mono knockout on navy */
  --icon-accent-ink1: #1A3DAE;             /* accent variant: navy-600 base ink */
  --icon-accent-ink2: #FF6600;             /* accent variant: orange-500 accent ink; free-floating, no tint disc */

  /* LOCKUP TOKENS — <ghp-lockup> geometry (one voice, no per-card sizing).
     Card density: 60px disc (56–64 law) · 32px glyph (duotone floor, ≈55%).
     Compact density (dense rows): 44px disc · same 32px glyph.
     Disc paint reuses the two icon colorway tint tokens above. */
  --lockup-circle: 60px;
  --lockup-circle-compact: 44px;
  --lockup-gap: 20px;
  --lockup-gap-compact: 14px;
  --lockup-title: 22px;
  --lockup-title-compact: 16px;
  --lockup-sub: 15px;
  --lockup-sub-compact: 13.5px;
  --lockup-nudge: 4px;                     /* disc top → title cap-height optical alignment */

  /* SECTION KICKER TOKENS — <ghp-kicker>, the ONE section-header kicker device.
     Values match the lockup title TODAY but are deliberately independent tokens
     so the two roles can diverge without silently redefining each other.
     Sentence case by design: −0.01em is a lowercase spec — NO text-transform,
     NO wide tracking, NO royal-blue ink. Hero eyebrows are deleted sitewide
     (supersession recorded 2026-07-29); heroes have no eyebrow slot anymore. */
  --section-kicker-size: 22px;
  --section-kicker-size-mobile: 20px;
  --section-kicker-weight: 600;
  --section-kicker-leading: 1.25;
  --section-kicker-tracking: -0.01em;
  --section-kicker-ink: var(--azure-text, #006FB8);      /* ROLE MARKER: azure ink — the one attribute no heading rank carries */
  --section-kicker-ink-dark: var(--azure-200, #7ACCFF);   /* light azure tint on navy surfaces, white headings beside it */

  /* TYPE LADDER — the closed heading scale (2026-07-29). Six ranks, no additions,
     no size between ranks anywhere. Adjacent ranks ≥1.25× at 1440 and 390:
     1440: h1 52 / h2 40 / h3 28 / h4 22 / label 16  ·  ≤860 see the mobile ladder below (390: 31.2 / 27.3 / 22.2 / 20 / 15).
     Visual rank ALWAYS equals semantic tag; every heading ink is navy-800 on light
     and white on navy — no other heading ink exists. The kicker is NOT a rank:
     its role marker is azure ink (above); it is never tagged as a heading. */
  --h1-size: clamp(42px, 3.7vw, 52px);     --h1-weight: 700; --h1-leading: 1.1;  --h1-tracking: -0.02em;
  --h2-size: clamp(33px, 2.85vw, 40px);    --h2-weight: 700; --h2-leading: 1.1;  --h2-tracking: -0.02em;
  --h3-size: clamp(26px, 2vw, 28px);       --h3-weight: 600; --h3-leading: 1.22; --h3-tracking: -0.015em;
  --h4-size: 22px;                          --h4-weight: 600; --h4-leading: 1.3;  --h4-tracking: -0.01em;
  --label-size: clamp(15px, 1.15vw, 16px); --label-weight: 600; --label-leading: 1.4; --label-tracking: 0;
  --heading-ink: var(--navy-800, #0F2466);
  --heading-ink-dark: #FFFFFF;
  --azure-text: #006FB8; /* text-safe azure, hue 204° locked to logo; ≥4.5:1 on white, ice, ink-50, navy-50 */

  /* CONTAINMENT GAPS — tight < block < section, enforced sitewide.
     Heading→its own subhead is per-rank tight (no two ranks share a gap value);
     heading→sibling block is a full step; section→section is the largest. */
  --gap-h2-sub: 12px; --gap-h3-sub: 8px; --gap-h4-sub: 6px;
  --gap-block: 28px;
  --gap-section: var(--section-y, 72px);
}

/* SectionKicker component — consumes the tokens above; nothing else styles it. */
ghp-kicker {
  display: block;
  font-family: var(--font-display, "Hanken Grotesk", sans-serif);
  font-size: var(--section-kicker-size);
  font-weight: var(--section-kicker-weight);
  line-height: var(--section-kicker-leading);
  letter-spacing: var(--section-kicker-tracking);
  color: var(--section-kicker-ink);
  margin: 0 0 8px; /* kicker-to-H2: the tight token — one thought, one unit */
  text-wrap: balance;
}
ghp-kicker[variant="on-dark"] { color: var(--section-kicker-ink-dark); }
ghp-kicker:empty { display: none; }
/* Kicker ink is ONE value per surface (2026-09-16): --section-kicker-ink on light, --section-kicker-ink-dark on navy/azure.
   The per-theme TOC kicker rotation (navy-700 / sky-700 by data-ghp-theme) is retired — every article/guide TOC kicker is azure-text. */
@media (max-width: 860px) {
  ghp-kicker { font-size: var(--section-kicker-size-mobile); }
  /* MOBILE LADDER (2026-09-16). H1 is the sitewide mobile clamp from the 2026-09-15 mobile pass; h2/h3 scale
     under it so the ranks stay ordered on phones (the July 42/33/26 floors were derived from a 42px H1):
     390 → 35.9 / 27.3 / 22.2 / 20 / 15  ·  860 → 40 / 33 / 26 / 20 / 15. h4 steps with the kicker (20);
     h3 stays above the kicker at every width. Pages carry NO literal heading sizes in their mobile blocks. */
  :root { --h1-size: clamp(2.2425rem, 9.2vw, 2.875rem); --h2-size: clamp(27px, 7vw, 33px); --h3-size: clamp(22px, 5.7vw, 26px); --h4-size: 20px; }
  /* CTA sections on phones (2026-09-23): no single word left alone on the last line — headings balance, copy wraps pretty. */
  [data-screen-label="Bottom CTA"] :is(h1, h2, h3, h4), [data-screen-label="Heart band"] :is(h2, h3), [data-screen-label="Life heart"] :is(h2, h3) { text-wrap: balance !important; }
  [data-screen-label="Bottom CTA"] p, [data-screen-label="Heart band"] p, [data-screen-label="Life heart"] p { text-wrap: pretty !important; }
  /* FAQ block on phones: the title wraps (never nowrap/ellipsis), the byline stacks faces over centered text,
     and the boxes tighten (20px sides, 18px rows, 10px stack) so the section stays short. */
  [data-screen-label="FAQ"] h2 { white-space: normal !important; text-wrap: balance !important; }
  [data-r="faq-byline"] { flex-direction: column !important; gap: 12px !important; margin: 0 0 28px !important; }
  [data-r="faq-byline-text"] { text-align: center; line-height: 1.6; }
  [data-r="faq-list"] { gap: 10px !important; }
  [data-r="faq-list"] > div { padding: 0 20px !important; }
  [data-r="faq-list"] button { padding: 18px 0 !important; gap: 16px !important; }
  /* Learn-family + Groups sub-page bodies (the TOC + article column) start 48px under the hero on phones — one value for articles, state and county guides. */
  section[data-screen-label="Article body"], section[data-screen-label="Article"] { padding-top: 48px !important; }
}
@media (max-width: 560px) {
  /* byline on phones: "Answers by our licensed team" takes its own line; the second line keeps one separator */
  [data-r="faq-by-1"] { display: block; }
  [data-r="faq-sep"] { display: none; }
}

/* pre-upgrade sizing so <ghp-lockup> never causes layout shift */
ghp-lockup { display: flex; align-items: flex-start; gap: var(--lockup-gap, 20px); }
ghp-lockup:not(:defined) { min-height: var(--lockup-circle, 60px); }
ghp-lockup[density="compact"]:not(:defined) { min-height: var(--lockup-circle-compact, 44px); }
ghp-lockup [slot="title"] { display: block; }
ghp-lockup [slot="sub"] { display: block; }
ghp-lockup [slot="meta"] { display: block; }
/* slotted headings/paragraphs adopt the lockup's type voice (h3 keeps its outline role) */
ghp-lockup h1[slot], ghp-lockup h2[slot], ghp-lockup h3[slot], ghp-lockup h4[slot], ghp-lockup p[slot] { margin: 0; font: inherit; color: inherit; letter-spacing: inherit; }

/* pre-upgrade sizing so <ghp-icon> never causes layout shift.
   Kameleon registry runtime: duotone 32/48/64, mono 16/20/24. */
ghp-icon { display: inline-flex; justify-content: center; align-items: center; line-height: 0; vertical-align: middle; }
ghp-icon[hidden] { display: none; }
ghp-icon[container="rsq"] { width: 64px; height: 64px; }
ghp-icon[container="rsq"][size="32"] { width: 43px; height: 43px; }
ghp-icon[mode="mono"] { width: 20px; height: 20px; }
ghp-icon[mode="mono"][size="16"] { width: 16px; height: 16px; }
ghp-icon[mode="mono"][size="24"] { width: 24px; height: 24px; }

/* B1 — eyebrow labels: 12px/700/0.08em uppercase, accent */
.gf-eyebrow {
  display: flex; align-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gf-accent, var(--navy-600)); margin: 0 0 14px;
}
.gf-eyebrow[data-center] { justify-content: center; }

/* B2 — H1 keyword underline (orange, 6px, curved, round caps) */
.gf-hl { position: relative; display: inline-block; }
.gf-hl > svg { position: absolute; left: 1%; right: 1%; width: 98%; height: 9px; bottom: -8px; overflow: visible; pointer-events: none; }

/* B3 — number typography */
.ghp-tabular, .gf-num { font-feature-settings: "tnum" 1; font-variant-numeric: tabular-nums lining-nums; }
.gf-unit { font-size: 55%; font-weight: 500; color: var(--text-muted); }

/* B4 — list markers: 6px rounded square in the theme accent */
ul:not([class]):not([role]) { list-style: none; padding-left: 1.15em; }
ul:not([class]):not([role]) > li { position: relative; }
ul:not([class]):not([role]) > li::before {
  content: ""; position: absolute; left: -1.15em; top: 0.58em;
  width: 6px; height: 6px; border-radius: 2px; background: var(--gf-accent, var(--navy-600));
}

/* B5 — one link grammar: Formline arrow nudges right on hover */
a svg[data-gf="arrow"], a ghp-icon[name="arrow"] { transition: translate 140ms var(--ease-out, ease-out); }
a:hover svg[data-gf="arrow"], a:hover ghp-icon[name="arrow"] { translate: 3px 0; }

/* B6 — visible keyboard focus, sky ring, radius follows element */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--ring, var(--sky-400));
  outline-offset: 2px;
  border-radius: var(--radius-sm, 6px);
}

/* B7 — one motion voice (engine in ghp-formline.js) */
.gf-reveal { opacity: 0; transform: translateY(12px); transition: opacity 240ms var(--ease-out, ease-out), transform 240ms var(--ease-out, ease-out); }
.gf-reveal.gf-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .gf-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* B8 — engineered input focus */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"])):focus,
select:focus, textarea:focus {
  border-color: var(--sky-500);
  box-shadow: 0 0 0 3px var(--sky-100);
  outline: none;
  transition: border-color 140ms var(--ease-out, ease-out), box-shadow 140ms var(--ease-out, ease-out);
}

/* B8a — ZIP quote bars: the pill itself carries the focus cue; no inner ring */
input[inputmode="numeric"][pattern="[0-9]*"]:focus,
input[autocomplete="postal-code"]:focus {
  box-shadow: none;
}

/* B9 — drawn pull-quote glyph sits behind quote text */
.gf-quote-mark { position: absolute; pointer-events: none; z-index: 0; }
.gf-quote-mark ~ * { position: relative; z-index: 1; }

/* B8 — product feature band (three icon-led columns on white) */
.gf-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; text-align: center; justify-items: center; }
.gf-band ghp-icon { max-width: 100%; }
.gf-band-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.gf-band-col h4 { text-wrap: balance; height: auto; min-height: 0; width: 100%; }
.gf-band-col p { margin: 0; max-width: 38ch; }
@media (min-width: 861px) and (max-width: 1199px) {
  .gf-band { gap: 28px; } /* wider columns so band titles keep their line without painting over the copy */
}
@media (max-width: 860px) {
  .gf-band { grid-template-columns: 1fr; gap: 40px; }
  .gf-band ghp-icon { transform: scale(0.75); margin: -8px 0; } /* 64 → 48 visual */
}