/* =============================================================================
   COMPONENTS.CSS — Layout-supporting site-wide UI components

   Source: docs/audits/epic-1.2/design-direction.md v0.2 §§11.1, 11.5, 11.7,
           11.8, 11.9, 11.11, §6.6 (elevation), §9 (a11y baseline)
   Stories: 1.3.19 (header / footer / nav scaffold),
            1.3.23 (§§11.1, 11.5, 11.7, 11.8, 11.11 — launch-relevant)
   Depends on: tokens.css, base.css, prose.css, layout.css

   Scope:
     1. Skip-nav — base style lives at base.css §8; this file holds any
        component-tier enhancements (currently none — base style suffices).
     2. Header (full-nav).
     3. Footer — §11.9 visual treatment for the existing 3-section structure.
     4. Buttons — §11.1 primary CTA.
     5. Statute citation — §11.5 inline + footnote treatments.
     6. Trust strip — §11.7 visual treatment for home + state landings.
     7. FAQ accordion — §11.8 categorized accordion (progressive enhancement
        via native <details>/<summary>).
     8. Tier indicator — §11.11 glyph + label treatment.

   OUT OF SCOPE — deferred to other stories:
     - §11.2 Secondary CTA, §11.3 Eligibility quiz, §11.4 Eligibility result
       card, §11.6 transparency widget, §11.10 Disclosure-surface minimal nav,
       §11.12 Pricing card — DIY+ flow / post-launch.

   ADR — Iconography library: Lucide (MIT). Decision recorded 2026-05-12 in
   Story 1.3.23 (originally deferred from 1.3.2). Rationale: line icons +
   1.5px stroke + 24px default match design-direction §7.5 verbatim; largest
   candidate library; self-hosted as a static SVG sprite at
   src/assets/icons/sprite.svg so zero-tracker posture (no CDN) is preserved.
   Sprite ships with only the icons actually consumed at launch — no
   speculative pre-loading. Other candidates considered: Phosphor (six
   weights — more than launch needs); Heroicons (smaller library, only two
   styles). Unicode-only was a refused option because the FAQ plus/minus
   icon convention (§11.8 — "plus/minus icon, not chevron") wants visual
   consistency with future iconography that Unicode cannot guarantee.

   Component rhythm baseline (§6.5) — restated as the floor for components
   landing in 1.3.20:
     - Cards:      16–24px internal padding (--space-3 / --space-4),
                   --radius-md, --border-subtle (no shadow by default).
     - Buttons:    44–48px minimum height (--touch-target-min),
                   16–24px horizontal padding, --radius-md.
     - Inputs:     48px minimum height, --border-subtle 1px border,
                   --accent-info on focus.
     - Accordions: 24px internal padding, 1px --border-subtle divider.

   Load-order position: 5 of 6 (tokens → base → prose → layout → components
   → page CSS). Component CSS assumes all prior layers are resolved.
   ============================================================================= */


/* =============================================================================
   1. SKIP-NAV — base style lives at base.css §8

   The full .skip-nav rule (positioned off-screen by default, reveals on
   :focus with a white outline against the purple background) lives in
   base.css §8 because it is a foundational a11y affordance, not a component-
   tier rule. No additional treatment is needed in components.css.

   Templates use class="skip-nav" (NOT .usa-skipnav) — the USWDS class is
   replaced by the base.css selector during the 1.3.19 template strip.
   ============================================================================= */


/* =============================================================================
   2. HEADER — primary site navigation (.expeal-header)

   Progressive-enhancement contract (per .claude/rules/frontend.md
   § "SSR markup must be accessible before any JS runs"):
     - SSR markup carries no aria-hidden on the nav panel.
     - Without nav.js (Story 1.3.8 — not yet ported), nav links render
       inline below the brand row and are fully keyboard-accessible.
     - The hamburger toggle, close button, and overlay are SSR-rendered but
       hidden via CSS until nav.js lands and adds drawer behavior.
     - When nav.js lands, it will set body[data-js-loaded] (or equivalent),
       gating the drawer treatment behind that attribute. Until then, the
       toggle / close / overlay carry no functional load.

   Default state: nav inline, all links visible, no drawer.
   Desktop pivot (≥46em): nav and brand sit on a single row.
   ============================================================================= */

.expeal-header {
  background-color: var(--expeal-purple);
  color: var(--surface-elevated);
  padding-block: var(--space-3);
}

.expeal-header__inner {
  /* Layout-level shell — uses .page in markup for outer container; this rule
     handles the inner flex layout (brand on inline-start, nav on the
     remaining inline space). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.expeal-header__brand {
  flex-grow: 0;
  flex-shrink: 0;
}

.expeal-header__logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.expeal-header__logo-link:hover {
  text-decoration: none;
}

.expeal-header__logo-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-header__logo-img {
  display: block;
  block-size: auto;
}

/* --- Hamburger toggle / close button / overlay / drawer -------------------
   Site-wide mobile drawer (Story 1.3.8 nav.js port + Sprint-23 1.7.5 CSS
   wire-up). Below 46rem (--bp-md): hamburger toggle reveals a slide-in
   drawer panel from the right; overlay scrim closes on click; close button
   inside drawer. At/above 46rem: hamburger/close/overlay hidden; nav list
   inline in header (see media query at §13). nav.js toggles `body.nav-open`
   to drive open/close state. */

.expeal-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: inherit;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-inline-start: auto;
}

.expeal-nav__toggle::before {
  content: '';
  display: block;
  inline-size: 1.5rem;
  block-size: 1.125rem;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px;
  background-position: 0 0, 0 50%, 0 100%;
  background-repeat: no-repeat;
}

.expeal-nav__toggle:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}

/* Drawer container — hidden offscreen by default on mobile */
.expeal-nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  block-size: 100dvh;
  inline-size: min(20rem, 80vw);
  background: var(--expeal-purple);
  padding: calc(var(--space-6) + 2.75rem) var(--space-4) var(--space-4);
  transform: translateX(100%);
  transition: transform 200ms ease-out;
  z-index: 100;
  overflow-y: auto;
}

body.nav-open .expeal-nav {
  transform: translateX(0);
}

.expeal-nav__close {
  display: none;
  background: transparent;
  border: 0;
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-end: var(--space-3);
  inline-size: 2.75rem;
  block-size: 2.75rem;
  color: inherit;
  cursor: pointer;
  padding: 0;
}

.expeal-nav__close::before,
.expeal-nav__close::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1.25rem;
  block-size: 2px;
  background: currentColor;
}

.expeal-nav__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.expeal-nav__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.expeal-nav__close:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}

body.nav-open .expeal-nav__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.expeal-nav__overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / 55%);
  z-index: 90;
}

body.nav-open .expeal-nav__overlay {
  display: block;
}

body.nav-open {
  overflow: hidden;
}

/* --- Nav list (column inside drawer on mobile; row inline on desktop) ----- */

.expeal-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.expeal-nav__item {
  /* Empty selector — kept as a styling hook; override per page-CSS if a
     specific item needs visual distinction (e.g., active-state treatment
     beyond aria-current). */
}

.expeal-nav__link {
  color: inherit;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  padding-block: var(--space-2);
  padding-inline: var(--space-2);
  border-radius: var(--radius-sm);
  /* Touch target — meets WCAG 2.5.5 best-practice 44×44px once vertical
     padding (--space-2 = 8px × 2) + line-height combine. */
}

.expeal-nav__link:hover {
  text-decoration: underline;
  color: inherit;
}

.expeal-nav__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
  text-decoration: underline;
}

/* aria-current="page" — distinguishes the active link without color-only.
   Underline + heavier weight signal active state per WCAG 1.4.1. */
.expeal-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}


/* =============================================================================
   2.5. BREADCRUMB — hierarchical navigation for sub-state pages

   Sprint-23 Story 1.7.5 MD-1 fix. WAI-ARIA breadcrumb pattern: semantic
   <ol> with chevron separators generated via ::before (decorative; screen
   readers skip the chevron and read only the link labels + the "current
   page" announcement on the last item). Used by counties.njk + pa-counties.njk
   for now; future per-charge / sub-state pages can adopt by emitting a
   crumbs array and including components/breadcrumb.njk.
   ============================================================================= */

.expeal-breadcrumb {
  margin-block: var(--space-3) var(--space-4);
  font-size: var(--fs-caption);
}

.expeal-breadcrumb__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.expeal-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--ink-muted);
}

.expeal-breadcrumb__item + .expeal-breadcrumb__item::before {
  /* Chevron separator — decorative, aria-hidden via display rather than
     real-element semantics. Screen readers skip ::before content. */
  content: "›";
  color: var(--ink-muted);
  font-weight: var(--fw-semibold);
}

.expeal-breadcrumb__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.expeal-breadcrumb__link:hover {
  color: var(--ink-body);
}

.expeal-breadcrumb__link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-breadcrumb__item[aria-current="page"] {
  color: var(--ink-body);
  font-weight: var(--fw-semibold);
}

/* Narrow-viewport collapse (Sprint-23 Story 1.7.5 MD-1 follow-up: Option A).
   Below 46rem (--bp-md), long combined state+county names (e.g.,
   "Pennsylvania" + "Northumberland County") risk awkward wrapping. Drop
   the Home crumb (already reachable via main nav) and present the parent
   as a back-link: "← Pennsylvania / Northumberland County". Saves ~30%
   horizontal width while preserving navigation up to the parent state. */
@media (max-width: 46rem) {
  .expeal-breadcrumb__item:first-child {
    display: none;
  }

  .expeal-breadcrumb__item + .expeal-breadcrumb__item::before {
    content: "←";
  }

  .expeal-breadcrumb__item + .expeal-breadcrumb__item + .expeal-breadcrumb__item::before {
    content: "/";
  }
}


/* =============================================================================
   3. FOOTER — §11.9 visual treatment

   Existing markup carries 3 sections (.expeal-footer__primary,
   .expeal-footer__secondary, .expeal-footer__disclaimer). §11.9 spec
   describes 4 rows (crisis, anti-impersonation, columns, bottom). This
   file styles the existing 3-section structure with the §11.9 visual
   treatment for the 3 rows that exist; the .expeal-footer__crisis rule
   below is included as a CSS hook for future template work that adds the
   crisis-routing row when content is authored.

   Visual layering (top → bottom):
     - Crisis routing       — purple bg, larger type (CSS hook ready;
                              template rendering pending content authoring)
     - Primary nav columns  — column grid at --fs-caption (anti-impersonation
                              + column-grid §11.9 roles consolidated here
                              while only one row exists)
     - Secondary anchor     — calm, informational (logo + brand + social)
     - Bottom bar           — --fs-micro only (legal/copyright)
   ============================================================================= */

.expeal-footer {
  background-color: var(--surface-elevated);
  color: var(--ink-body);
  border-block-start: 1px solid var(--border-subtle);
  margin-block-start: var(--space-7);
}

/* --- Crisis routing row (CSS hook; template rendering pending) -------------
   §11.9: "Crisis routing row is visually prominent — larger type than body,
   full-width, purple background. The crisis-routing disclaimer is not an
   afterthought." */

.expeal-footer__crisis {
  background-color: var(--expeal-purple);
  color: var(--surface-elevated);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-medium);
  padding-block: var(--space-5);
  text-align: center;
}

.expeal-footer__crisis a {
  color: var(--surface-elevated);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.expeal-footer__crisis a:hover,
.expeal-footer__crisis a:focus-visible {
  color: var(--surface-elevated);
}

.expeal-footer__crisis a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}

/* --- Primary nav columns row ---------------------------------------------- */

.expeal-footer__primary {
  padding-block: var(--space-6);
  font-size: var(--fs-caption);
}

.expeal-footer__nav-section {
  /* Each of the 4 column sections. h2 is styled smaller here than default
     (caption-tier); the visible weight comes from --fw-semibold. nav.js
     will augment with role=button + aria-expanded for mobile accordion
     (Story 1.3.8). */
  display: flow-root;
}

.expeal-footer__nav-heading {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-block-end: var(--space-3);
  color: var(--ink-body);
}

.expeal-footer__nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.expeal-footer__nav-item a {
  color: var(--ink-body);
  text-decoration: none;
}

.expeal-footer__nav-item a:hover {
  text-decoration: underline;
  color: var(--accent-info-hover);
}

.expeal-footer__nav-item a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
  text-decoration: underline;
}

/* --- Secondary anchor row (logo + brand statement + social links) --------- */

.expeal-footer__secondary {
  padding-block: var(--space-5);
  border-block-start: 1px solid var(--border-subtle);
}

.expeal-footer__logo-link {
  color: var(--ink-body);
  text-decoration: none;
}

.expeal-footer__logo-link:hover {
  text-decoration: underline;
}

.expeal-footer__logo-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-footer__logo-body {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  margin-block-start: var(--space-2);
  max-inline-size: 32rem;
}

/* Social link strip — kept as a flex cluster with consistent gap. */

.expeal-footer__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.expeal-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--touch-target-min);
  block-size: var(--touch-target-min);
  border-radius: var(--radius-sm);
  text-decoration: none;
}

.expeal-social-link:hover {
  background-color: var(--expeal-purple-tint);
}

.expeal-social-link:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.expeal-social-link__icon {
  inline-size: 24px;
  block-size: 24px;
}

/* --- Bottom bar (legal + copyright) — §11.9 "bottom bar: --fs-micro only" */

.expeal-footer__disclaimer {
  padding-block: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--fs-micro);
  color: var(--ink-muted);
  line-height: var(--lh-base);
}

.expeal-footer__disclaimer p + p {
  margin-block-start: var(--space-2);
}

.expeal-footer__disclaimer a {
  color: var(--ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.expeal-footer__disclaimer a:hover {
  color: var(--accent-info-hover);
}

.expeal-footer__disclaimer a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}


/* =============================================================================
   4. BUTTONS — §11.1 Primary CTA

   The primary CTA carries the brand color and is consumed on packages.njk,
   landing.njk, state landings, and any page that needs a "specific next
   action" CTA per §5.5 microcopy. The button's visual treatment is identical
   in every context; only label + destination change (tier-conditional copy
   resolved at the consuming-page layer per §11.1).

   Markup contract:
     <a class="expeal-btn" href="...">Label</a>
   Modifiers:
     .expeal-btn--full  — fills container inline-size (packages card body).
     .expeal-btn--big   — larger size step for hero / CTA banner contexts.
   ============================================================================= */

.expeal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: 3rem;                /* 48px — §11.1 spec */
  padding-block: var(--space-2);
  padding-inline: var(--space-4);      /* 24px horizontal — §11.1 spec */
  background-color: var(--expeal-purple);
  color: var(--surface-elevated);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);     /* 600 — §11.1 spec */
  line-height: var(--lh-base);
  text-decoration: none;
  text-align: center;
  border: 0;
  border-radius: var(--radius-md);     /* 8px — §11.1 spec */
  cursor: pointer;
  transition: background-color var(--transition-base);
}

.expeal-btn:hover {
  background-color: var(--expeal-purple-dark);    /* §11.1: hover darkens 10% */
  color: var(--surface-elevated);
  text-decoration: none;
}

.expeal-btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}

.expeal-btn[aria-disabled="true"],
.expeal-btn:disabled {
  /* §11.1: disabled — 50% opacity, no pointer events, no focus. */
  opacity: 0.5;
  pointer-events: none;
}

/* --- Modifiers ------------------------------------------------------------ */

.expeal-btn--full {
  display: flex;
  inline-size: 100%;
}

.expeal-btn--big {
  /* Larger size step for hero / page-bottom CTA banner contexts. Same
     visual treatment otherwise — bigger type, more vertical breathing room.
     Internal vertical padding scales; horizontal padding holds at 24px so
     the button doesn't read as a banner. */
  min-block-size: 3.5rem;              /* 56px */
  padding-block: var(--space-3);
  font-size: var(--fs-body-lg);
}

/* Optional subtext inside the button (used for stacked label + tier hint).
   Kept restrained — same color, smaller size; never the dominant text. */
.expeal-btn .button-subtext {
  display: block;
  font-size: var(--fs-caption);
  font-weight: var(--fw-regular);
  margin-block-start: var(--space-1);
}


/* =============================================================================
   5. STATUTE CITATION — §11.5

   Two formats:
     - Inline (.expeal-statute): used in prose for short references like
       "§ 943.0585". Bold + --accent-info color; underline on hover. No
       tooltip — citations must be visible, not hidden behind hover (§11.5).
     - Footnote marker (.expeal-statute-footnote-marker): superscript number
       linking to a citation block at the bottom of the content-width
       column (not a sidebar). Citation block renders via the
       statute-footnote.njk partial.
   ============================================================================= */

.expeal-statute {
  color: var(--accent-info);
  font-weight: var(--fw-bold);         /* §11.5: bold inline format */
  text-decoration: none;
}

.expeal-statute:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  color: var(--accent-info-hover);
}

.expeal-statute:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-statute-footnote-marker {
  /* <sup> superscript marker; the inner <a> handles the link affordance. */
  font-size: 0.75em;
  line-height: 0;
  vertical-align: super;
  margin-inline-start: 0.15em;
}

.expeal-statute-footnote-marker a {
  /* §11.5 WCAG 2.5.8 padding fix (Story 1.5.2 — first long-form consumer).
     The visible <a> stays at superscript size; an invisible pseudo-element
     extends the hit area to ≥24×24 CSS px without affecting surrounding text
     flow. position: relative on the anchor anchors the ::after overlay. */
  position: relative;
  color: var(--accent-info);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding-inline: 0.15em;
  border-radius: var(--radius-sm);
}

.expeal-statute-footnote-marker a::after {
  /* Invisible hit-area expander: centered on the visible marker, extends to
     24×24 minimum. inset is negative on all sides so the overlay reaches
     outside the marker's flow box. Pointer-events: auto by default; the
     overlay catches taps that fall slightly outside the visible glyph. */
  content: "";
  position: absolute;
  inset: -10px -8px;
  min-width: 24px;
  min-height: 24px;
}

.expeal-statute-footnote-marker a:hover {
  text-decoration: underline;
  color: var(--accent-info-hover);
}

.expeal-statute-footnote-marker a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.expeal-statute-footnotes {
  /* Footnote block rendered at the bottom of long-form content. Sits inside
     the content-width column (NOT a sidebar — §11.5). Visually separated
     by a thin rule + extra block spacing above. */
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--border-subtle);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}

.expeal-statute-footnotes ol {
  list-style: decimal;
  padding-inline-start: var(--space-4);
  margin: 0;
}

.expeal-statute-footnotes li + li {
  margin-block-start: var(--space-2);
}

.expeal-statute-footnotes a {
  color: var(--accent-info);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.expeal-statute-footnotes a:hover {
  color: var(--accent-info-hover);
}


/* =============================================================================
   6. TRUST STRIP — §11.7

   3–5 items per row, used on home and state landings. Items are specific
   and verifiable claims (no "#1 most trusted" — content review enforces
   this at the consuming-page layer). Layout uses the .cluster primitive
   from layout.css when items should flow; this CSS handles only the
   visual treatment of each item.

   Markup contract:
     <section class="expeal-trust-strip">
       <ul class="expeal-trust-strip__list cluster">
         <li class="expeal-trust-strip__item">...</li>
       </ul>
     </section>
   ============================================================================= */

.expeal-trust-strip {
  padding-block: var(--space-5);
  border-block: 1px solid var(--border-subtle);
}

.expeal-trust-strip__list {
  /* .cluster from layout.css provides the flex-wrap + gap; this rule strips
     list semantics from the visual layer (semantics preserved via <ul>). */
  list-style: none;
  padding: 0;
  margin: 0;
  justify-content: center;
  align-items: center;
}

.expeal-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--ink-muted);
}

.expeal-trust-strip__item a {
  color: var(--ink-body);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  font-weight: var(--fw-medium);
}

.expeal-trust-strip__item a:hover {
  color: var(--accent-info-hover);
}

.expeal-trust-strip__item a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

/* Partner logos — grayscale by default; no special hover-saturation
   treatment (anti-decoration per §7). */
.expeal-trust-strip__item img {
  block-size: 1.5rem;                  /* 24px — matches caption type rhythm */
  inline-size: auto;
  filter: grayscale(1);
  opacity: 0.85;
}


/* =============================================================================
   7. FAQ ACCORDION — §11.8

   Categorized FAQ surface (Eligibility, Pricing, Timeline, Process,
   Privacy & Security, Refunds, Account). Built on native <details>/<summary>
   so the accordion functions without JS — progressive enhancement contract
   per .claude/rules/frontend.md.

   Visual: plus/minus icon (not chevron, per §11.8) sourced from the Lucide
   sprite. The summary swaps its sprite href in the CSS via attribute
   selector on [open] state for a CSS-only icon flip.

   Markup contract (rendered by faq-accordion.njk):
     <section class="expeal-faq">
       <h2 class="expeal-faq__category">Eligibility</h2>
       <details class="expeal-faq__item">
         <summary class="expeal-faq__summary">
           <span class="expeal-faq__question">Question text</span>
           <svg class="expeal-faq__icon" aria-hidden="true">
             <use href="/assets/icons/sprite.svg#icon-plus"></use>
           </svg>
         </summary>
         <div class="expeal-faq__answer">Answer prose</div>
       </details>
     </section>
   ============================================================================= */

.expeal-faq {
  /* No outer chrome — the consuming page provides the section container.
     Spacing between categories handled by the page layout (.stack). */
}

.expeal-faq__category {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin-block: var(--space-5) var(--space-3);
}

.expeal-faq__item {
  border-block-end: 1px solid var(--border-subtle);
}

.expeal-faq__item:first-of-type {
  border-block-start: 1px solid var(--border-subtle);
}

.expeal-faq__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);     /* 16px — §11.8 internal padding floor */
  padding-inline: 0;
  cursor: pointer;
  list-style: none;                    /* Suppress default disclosure triangle */
  min-block-size: var(--touch-target-min);
}

/* Suppress default disclosure triangle on Safari + Chrome. */
.expeal-faq__summary::-webkit-details-marker {
  display: none;
}

.expeal-faq__summary:hover {
  color: var(--accent-info-hover);
}

.expeal-faq__summary:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-faq__question {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  flex: 1 1 auto;
}

.expeal-faq__icon {
  inline-size: 24px;
  block-size: 24px;
  flex: 0 0 24px;
  color: var(--ink-muted);
  transition: transform var(--transition-base);
}

/* Plus → minus icon swap on [open]. Both icons render in markup; CSS
   toggles visibility based on the <details> open state, so the swap is
   JS-free and progressive-enhancement-safe (closed state shows plus by
   default — the more permissive "you can open this" affordance). The
   [open] selector also tints the icon for additional state feedback. */
.expeal-faq__icon--minus {
  display: none;
}

.expeal-faq__item[open] .expeal-faq__icon--plus {
  display: none;
}

.expeal-faq__item[open] .expeal-faq__icon--minus {
  display: inline-block;
  color: var(--expeal-purple);
}

.expeal-faq__item[open] .expeal-faq__icon--plus,
.expeal-faq__item[open] .expeal-faq__icon--minus {
  color: var(--expeal-purple);
}

.expeal-faq__answer {
  padding-block-end: var(--space-3);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  max-inline-size: var(--content-narrow);
}

.expeal-faq__answer p + p {
  margin-block-start: var(--space-3);
}


/* =============================================================================
   8. TIER INDICATOR — §11.11

   Small functional glyph + optional label used on /states/ directory rows,
   state-landing page headers, and the nav state-switcher featured section.
   Per §10.5, this is an orientation signal — not a pricing hierarchy.

   Markup contract (rendered by tier-indicator.njk):
     <span class="expeal-tier expeal-tier--diy-plus">
       <span class="expeal-tier__glyph" aria-hidden="true">⭐</span>
       <span class="expeal-tier__label">DIY+</span>      // optional
       <span class="sr-only">DIY-plus</span>             // when label hidden
     </span>
   ============================================================================= */

.expeal-tier {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-size: 1em;                      /* Scales to surrounding text — §11.11 */
  white-space: nowrap;
}

.expeal-tier__glyph {
  font-size: 1em;
  line-height: 1;
}

.expeal-tier--diy-plus .expeal-tier__glyph {
  color: var(--expeal-purple);
}

.expeal-tier--diy .expeal-tier__glyph {
  color: var(--ink-muted);
}

.expeal-tier__label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);        /* §11.11: caption weight 500 */
  color: inherit;
  /* Refused per spec: text-transform: uppercase / small-caps. */
}


/* =============================================================================
   9. INTRO + UNIQUE ASPECTS — state landing intro per §5.2 anchor pattern

   The intro lead opens with the second-person affirmation + statute specificity
   (§5.2). uniqueAspects is the bulleted list of state-distinctive process notes.
   Per docs/audits/epic-1.5/narrative-content-schema.md.
   ============================================================================= */

.expeal-intro {
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-body);
  margin-block: var(--space-3) var(--space-5);
  max-inline-size: var(--content-narrow);
}

.expeal-unique-aspects {
  /* Per §5.7 calibration (warmth + specificity), present unique aspects as
     a callout that's visually distinct from prose without becoming a marketing
     panel. Subtle warm-neutral background + left rule. */
  background: var(--surface-elevated);
  border-inline-start: 3px solid var(--accent-info);
  padding: var(--space-4) var(--space-5);
  margin-block: var(--space-5);
  border-radius: var(--radius-md);
  max-inline-size: var(--content-narrow);
}

.expeal-unique-aspects h2 {
  font-size: var(--fs-h3);
  margin-block: 0 var(--space-3);
  color: var(--ink-body);
}

.expeal-unique-aspects ul {
  list-style: disc;
  padding-inline-start: var(--space-5);
  margin: 0;
}

.expeal-unique-aspects li + li {
  margin-block-start: var(--space-2);
}


/* =============================================================================
   10. EXPEAL RANKING — score matrix table per §11.x and per-state matrix data

   5-metric × 4-case-type matrix with totals row. Shared metric-definition
   rubric is rendered via components/ranking-rubric.njk after the table.
   Table is the canonical accessible form for tabular data; do not refactor
   to <div role="grid"> without an a11y review.
   ============================================================================= */

.expeal-ranking {
  margin-block: var(--space-6);
}

.expeal-ranking__lead {
  margin-block: 0 var(--space-4);
  max-inline-size: var(--content-narrow);
}

.expeal-ranking__matrix-wrapper {
  /* Horizontal-scroll wrapper for the matrix at narrow viewports (Sprint-23
     Story 1.7.5 FL-2 fix). The 5-column matrix (metric + 4 case types) with
     long column labels ("Misdemeanor — Conviction") cannot fit at 375px even
     with reduced padding; horizontal scrolling preserves table semantics +
     keeps all data accessible. Gradient fade on the inline-end edge signals
     scrollable content. role="region" + tabindex="0" + aria-label make the
     scroll container keyboard-focusable + screen-reader-announced per
     WAI-ARIA region pattern for scrolling tabular content. */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block-end: var(--space-4);
  position: relative;
  background:
    linear-gradient(to right, var(--surface-primary), var(--surface-primary)) left center / 1rem 100% no-repeat,
    linear-gradient(to right, var(--surface-primary), transparent) left center / 2rem 100% no-repeat,
    linear-gradient(to left, var(--surface-primary), var(--surface-primary)) right center / 1rem 100% no-repeat,
    linear-gradient(to left, var(--surface-primary), transparent) right center / 2rem 100% no-repeat;
  background-attachment: local, scroll, local, scroll;
}

.expeal-ranking__matrix-wrapper:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

.expeal-ranking__matrix {
  width: 100%;
  min-inline-size: 36rem;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.expeal-ranking__matrix th,
.expeal-ranking__matrix td {
  padding: var(--space-2) var(--space-3);
  border-block-end: 1px solid var(--border-subtle);
  text-align: center;
}

.expeal-ranking__matrix th[scope="col"] {
  /* Column headers (case types) — semibold, slightly smaller for readability
     at narrow widths where headers may wrap. */
  text-align: center;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  background: var(--surface-elevated);
}

.expeal-ranking__matrix th[scope="row"] {
  /* Row headers (metric names) — left-aligned, semibold. */
  text-align: start;
  font-weight: var(--fw-semibold);
}

.expeal-ranking__matrix .expeal-ranking__totals {
  /* Totals row — bold + thicker border above. */
  font-weight: var(--fw-bold);
  border-block-start: 2px solid var(--ink-body);
}

.expeal-ranking__matrix .expeal-ranking__totals th,
.expeal-ranking__matrix .expeal-ranking__totals td {
  padding-block-start: var(--space-3);
}

.expeal-ranking-rubric {
  /* The metric-definition rubric below the matrix. Narrower font + tighter
     leading; this is reference content, not primary scanning content. */
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--ink-muted);
  max-inline-size: var(--content-narrow);
}

.expeal-ranking-rubric ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.expeal-ranking-rubric li + li {
  margin-block-start: var(--space-2);
}


/* =============================================================================
   11. STEPS — phase + step procedural list

   Five-phase, multi-step procedural list per legacy MD shape. Each step has
   a bold title, body prose, optional inline cost reference (resolved from
   state.feeLinks[] via the resolveCostRef filter), and optional note.
   The <ol value="N"> attribute preserves the legacy MD's continuous step
   numbering across phases (step 1...N regardless of phase boundary).
   ============================================================================= */

.expeal-steps {
  margin-block: var(--space-6);
  max-inline-size: var(--content-narrow);
}

.expeal-steps__mail-note {
  /* Reminder line above the first phase — italic, slightly muted. */
  font-style: italic;
  color: var(--ink-muted);
  margin-block: var(--space-3) var(--space-5);
}

.expeal-steps__phase {
  margin-block: var(--space-5);
}

.expeal-steps__phase h3 {
  font-size: var(--fs-h4);
  margin-block: 0 var(--space-3);
  color: var(--ink-body);
}

.expeal-steps__list {
  /* Suppress the default list-marker because we render the step number inline
     in the .expeal-steps__step-title <strong>. The <ol value="N"> attribute
     still anchors semantic continuity across phases. */
  list-style: none;
  padding: 0;
  margin: 0;
}

.expeal-steps__step + .expeal-steps__step {
  margin-block-start: var(--space-4);
}

.expeal-steps__step-title {
  margin-block: 0 var(--space-2);
}

.expeal-steps__cost {
  /* Cost-reference line under a step body. Renders as muted-secondary so the
     procedural prose stays primary; the cost is reference data, not the user
     action. Link inside picks up .expeal-statute styling (already bold +
     --accent-info) but here we want plain underline + body weight. */
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  margin-block: var(--space-2) 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--border-subtle);
}

.expeal-steps__cost-label {
  font-weight: var(--fw-semibold);
}

.expeal-steps__cost a {
  color: var(--accent-info);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.expeal-steps__cost a:hover {
  color: var(--accent-info-hover);
}

.expeal-steps__cost a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.expeal-steps__cost-note {
  font-style: italic;
}

.expeal-steps__step-note {
  font-size: var(--fs-caption);
  color: var(--ink-muted);
  margin-block: var(--space-2) 0;
}


/* =============================================================================
   12. LINK LISTS — agencies + forms

   Shared style for the Agencies and Forms link-list sections at the bottom
   of state landings. Both render as a labeled <ul> of external <a>
   references with target="_blank" + rel="noopener noreferrer".
   ============================================================================= */

.expeal-link-list {
  margin-block: var(--space-5);
  max-inline-size: var(--content-narrow);
}

.expeal-link-list h2 {
  margin-block: 0 var(--space-3);
}

.expeal-link-list p {
  margin-block: 0 var(--space-3);
}

.expeal-link-list ul {
  list-style: disc;
  padding-inline-start: var(--space-5);
  margin: 0;
}

.expeal-link-list li + li {
  margin-block-start: var(--space-2);
}

.expeal-link-list a {
  color: var(--accent-info);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.expeal-link-list a:hover {
  color: var(--accent-info-hover);
}

.expeal-link-list a:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}


/* =============================================================================
   13. RESPONSIVE PIVOTS — mobile-first

   46em — header collapses-to-single-row layout activates; footer columns
          can sit two-up (the .grid-auto-fit on the column wrapper handles
          this in markup via layout.css; no media query needed here).
          FAQ accordion's first-question-per-category is opened on desktop
          (no JS — pure CSS via [data-faq-first-open] data attribute set by
          the partial on the first <details> in each category).
   68em — footer columns can sit four-up; nav fully inline.
   ============================================================================= */

@media (min-width: 46rem) {
  .expeal-header__inner {
    /* Brand left, nav right on a single row. flex-wrap stays on so very long
       nav-link lists still wrap rather than overflow. */
    flex-wrap: nowrap;
  }

  /* Desktop: hide the mobile-only drawer affordances. */
  .expeal-nav__toggle,
  .expeal-nav__close,
  .expeal-nav__overlay {
    display: none;
  }

  /* Reset drawer-mode body lock on desktop. */
  body.nav-open {
    overflow: auto;
  }

  /* Desktop: nav reverts to inline header flow (no drawer). */
  .expeal-nav {
    position: static;
    block-size: auto;
    inline-size: auto;
    background: transparent;
    padding: 0;
    transform: none;
    transition: none;
    overflow: visible;
    flex-grow: 1;
  }

  .expeal-nav__list {
    /* Inline at this breakpoint; gap tightens slightly for visual rhythm. */
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: flex-end;
  }

  /* First-question-per-category open by default on desktop only (§11.8).
     The partial decorates the first <details> with [data-faq-first-open];
     CSS adds the open attribute equivalent via :not([open]) detection —
     but native <details> needs the attribute itself. Since CSS can't add
     the attribute, the partial conditionally renders <details open> when
     this media query would match — implementation note: the partial uses
     a CSS-driven "always open on desktop, collapsed on mobile" trick by
     wrapping the answer block, since native [open] applies at all sizes.
     Pure-CSS approach: hide/show answer via this media query without
     touching [open]. See the partial for the chosen approach. */
}

@media (min-width: 68rem) {
  /* Reserved for desktop-specific overrides if needed. Currently the
     46em layout scales cleanly to 68em without further adjustment. */
}