/* ============================================================
   CARBONSIG 3.0 — IA SKELETON
   Multi-level nav panels/sheet · 5-column footer sitemap ·
   breadcrumbs · prose (legal) pages.
   Enqueued AFTER shell.css. Every value traces to a token.

   These are NEW components, additive only — nothing here restyles
   a design-system primitive. Proposed for promotion into
   components.css once the tech lead ratifies them.
   ============================================================ */

/* ============================================================
   1. PRIMARY NAV — desktop panels
   Blueprint §3.2. The group trigger is a <button aria-expanded>
   disclosure, never a link. aria-expanded is the ONLY state
   source: CSS reads it, JS sets it, so the visual state and the
   accessibility state cannot drift apart.
   ============================================================ */

.nav-group{position:relative}

/* Trigger matches .nav-links a metrics exactly so the row reads as one bar. */
.nav-trigger{display:inline-flex;align-items:center;gap:var(--sp-1);
  min-height:var(--tap-min);padding:0;border:none;background:none;cursor:pointer;
  font-family:inherit;font-size:var(--t-small);font-weight:500;color:var(--c-body);
  transition:color var(--dur-2) var(--ease)}
.nav-trigger:hover{color:var(--c-heading)}
/* Current-section state — the trigger is not the page, so this is NOT aria-current. */
.nav-group.is-in-group>.nav-trigger,
.nav-item.is-in-group>a{color:var(--c-heading);font-weight:700}

.nav-chev{flex:none;transition:transform var(--dur-2) var(--ease)}
.nav-trigger[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}

/* Panel: opacity + translateY only — never height (CLS budget is 0.05).
   visibility:hidden also removes closed rows from the tab order and the
   accessibility tree, so no `hidden` attribute juggling is needed. */
.nav-panel{position:absolute;top:100%;left:calc(-1 * var(--sp-4));z-index:55;
  min-width:320px;max-width:min(420px,90vw);
  padding:var(--sp-2);margin-top:var(--sp-2);
  background:var(--s-page);border:1px solid var(--c-border);
  border-radius:var(--r-lg);box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(calc(-1 * var(--sp-1)));
  transition:opacity var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),visibility var(--dur-1)}
/* Enter is --dur-2, exit --dur-1 (§3.2). */
.nav-trigger[aria-expanded="true"]+.nav-panel{opacity:1;visibility:visible;transform:none;
  transition-duration:var(--dur-2)}

.nav-panel-list{list-style:none;margin:0;padding:0}

/* Row: label + one descriptor line. Full-width tap target, ≥44px.
   Selectors are .nav-links a.nav-row, not .nav-row: components.css styles the
   horizontal desktop bar with `.nav-links a{display:inline-flex;align-items:center}`,
   which at (0,1,1) OUT-SPECIFIES a bare .nav-row at (0,1,0) whatever the load
   order — so a plain .nav-row inherited align-items:center and centred every
   label inside the column flex. align-items/text-align stay explicit for the
   same reason. */
.nav-links a.nav-row{display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:var(--sp-1);
  min-height:var(--tap-min);padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r-sm);color:var(--c-body);font-weight:400;
  transition:background var(--dur-2) var(--ease)}
.nav-links a.nav-row:hover,.nav-links a.nav-row:focus-visible{background:var(--s-sunken);text-decoration:none}
.nav-row-label{font-size:var(--t-small);font-weight:600;color:var(--c-heading)}
.nav-row-desc{font-size:var(--t-caption);font-weight:400;color:var(--c-muted);line-height:var(--lh-body)}
.nav-row[aria-current="page"] .nav-row-label{color:var(--c-link)}

/* Overview row — the group's own page, set apart by a rule beneath it. */
.nav-links a.nav-row--overview{padding-bottom:var(--sp-3);margin-bottom:var(--sp-2);
  border-bottom:1px solid var(--c-border);border-radius:var(--r-sm) var(--r-sm) 0 0}
.nav-row-arrow{margin-left:var(--sp-1);color:var(--c-link);
  display:inline-block;transition:transform var(--dur-2) var(--ease)}
.nav-row--overview:hover .nav-row-arrow{transform:translateX(var(--sp-1))}

@media (prefers-reduced-motion:reduce){
  .nav-panel{transition:none}
  .nav-chev,.nav-row-arrow{transition:none}
  .nav-trigger[aria-expanded="true"] .nav-chev{transform:none}
  .nav-row--overview:hover .nav-row-arrow{transform:none}
}

/* ============================================================
   2. PRIMARY NAV — mobile sheet (accordions)
   Breakpoint mirrors the .nav-links sheet rule in components.css.
   ============================================================ */
@media (max-width:1023px){

  /* The sheet must scroll: five accordion groups plus pinned CTAs exceed
     667px of viewport, and the safe-area padding keeps the last CTA clear
     of the iOS home indicator. */
  .nav-links{overflow-y:auto;overscroll-behavior:contain;
    padding-bottom:calc(var(--sp-16) + env(safe-area-inset-bottom,0px))}

  .nav-group{position:static;width:100%}

  /* Group row 56px, child rows 48px (§3.2) — the size difference is part of
     how the sheet teaches its own structure. */
  .nav-trigger{width:100%;justify-content:space-between;min-height:56px;
    padding:0 var(--sp-2);font-size:var(--t-body-lg);color:var(--c-heading);
    border-bottom:1px solid var(--c-border)}
  .nav-chev{width:var(--sp-6);height:var(--sp-6)}

  /* The flat Verification row is a PEER of the group triggers, so it takes the
     same 56px height and heading colour. Without this it inherits .nav-links a
     (48px, --c-body) and reads as a child row that lost its parent. Its missing
     chevron is the only difference, which is the whole point. */
  .nav-links .nav-item>a{min-height:56px;padding:0 var(--sp-2);
    color:var(--c-heading)}

  /* Accordion: display toggle, no height animation and therefore no CLS. */
  .nav-panel{position:static;min-width:0;max-width:none;margin:0;padding:0;
    background:var(--s-alt);border:none;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;transform:none;transition:none;display:none}
  .nav-trigger[aria-expanded="true"]+.nav-panel{display:block}

  .nav-links a.nav-row{min-height:48px;justify-content:center;
    padding:var(--sp-2) var(--sp-6);border-radius:0;
    border-bottom:1px solid var(--c-border)}
  .nav-row-label{font-size:var(--t-body)}
  .nav-links a.nav-row--overview{margin-bottom:0;padding-bottom:var(--sp-2)}

  /* Pinned CTAs at the foot of the sheet. */
  .nav-actions{display:flex;flex-direction:column;gap:var(--sp-3);
    margin-top:var(--sp-6);padding:0 var(--sp-2)}
  /* Beats the components.css .nav-login-item a colour rule, which assumes a
     single secondary button and would render the primary CTA blue-on-blue. */
  .nav-actions .btn--primary{color:var(--c-on-dark)}
  .nav-actions .btn{border-bottom:none}
}

/* Body scroll lock while the sheet is open (JS adds the class to <body>). */
body.cs3-nav-open{overflow:hidden}
@media (min-width:1024px){ body.cs3-nav-open{overflow:visible} }

/* ============================================================
   3. FOOTER — 5-column sitemap
   components.css .cols-N collapse straight to 1 at 768px, which
   cannot express five columns. §3.3: 1 / 2 / 3 / 5 steps.
   ============================================================ */
.footer-grid{display:grid;gap:var(--sp-8) var(--sp-6);grid-template-columns:1fr}
@media (min-width:480px){ .footer-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:768px){ .footer-grid{grid-template-columns:repeat(3,1fr)} }
@media (min-width:1024px){ .footer-grid{grid-template-columns:repeat(5,1fr);gap:var(--sp-6)} }

.site-footer .footer-col h2{margin-bottom:var(--sp-3)}
.footer-ext{white-space:nowrap}
/* You-are-here in the sitemap. On-dark white rather than the accent, so the
   current row is the highest-contrast link in its column. */
.site-footer a[aria-current="page"]{color:var(--c-on-dark);font-weight:600}

/* Bottom bar: logo · disclaimer + copyright · policy links. */
/* flex-basis is explicit, not auto: the L1 disclaimer is one long sentence, so an
   auto basis resolves to its full unwrapped width, overflows the row and pushes
   the policy links onto a line of their own. A shrinkable basis keeps logo ·
   legal · policies on one row at desktop and stacks them cleanly at mobile. */
.footer-legal{flex:1 1 480px;min-width:0}
.footer-legal p{color:var(--c-on-dark-muted)}
.footer-legal p+p{margin-top:var(--sp-1)}
.footer-policies{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);margin:0;padding:0}
.footer-policies a{display:inline-flex;align-items:center;min-height:var(--tap-min);
  font-size:var(--t-small)}
@media (max-width:768px){
  .footer-bottom{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   4. BREADCRUMBS
   One line above the H1, small text only — it must not become the
   LCP element in place of the heading.
   ============================================================ */
.breadcrumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-1);margin:0;padding:0;font-size:var(--t-small)}
.breadcrumbs li{display:inline-flex;align-items:center;gap:var(--sp-1)}
.breadcrumbs a{display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap-min);min-width:var(--tap-min);color:var(--c-link)}
/* min-WIDTH as well as min-height: "Home" measured 39.2x44, so the target met the DoD on
   one axis only. Centring keeps the label optically in place as the box widens. */
.breadcrumbs [aria-current="page"]{color:var(--c-muted)}
/* --c-border-strong reads at ~1.5:1 and the trail becomes unreadable; the
   separator carries the structure, so it takes a text role. */
.breadcrumbs-sep{color:var(--c-muted)}

/* ============================================================
   5. PROSE — editor content on legal / policy pages
   Styles raw editor HTML from tokens so the editor never needs to
   know the design system.
   ============================================================ */
.prose{margin-top:var(--sp-8);color:var(--c-body)}
.prose>*+*{margin-top:var(--sp-4)}
.prose h2{font-size:var(--t-h3);font-weight:700;margin-top:var(--sp-12)}
.prose h3,.prose h4{font-size:var(--t-h4);font-weight:700;margin-top:var(--sp-8)}
.prose ul,.prose ol{padding-left:var(--sp-6)}
.prose li+li{margin-top:var(--sp-2)}
.prose a{text-decoration:underline}
.prose strong{color:var(--c-heading)}
.prose em{color:var(--c-muted)}
.prose hr{border:none;border-top:1px solid var(--c-border);margin-block:var(--sp-12)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.prose th,.prose td{padding:var(--sp-3);border:1px solid var(--c-border);text-align:left}
.prose th{color:var(--c-heading);font-weight:600;background:var(--s-alt)}