/* a11y.css — global accessibility overrides.
 *
 * Loaded LAST on every template (after main.css AND any per-page stylesheet) so its
 * rules win the cascade against per-page resets such as `outline: none` on form fields.
 *
 * Phase 1a (a11y core): visible focus ring, skip-link, <main> scroll-margin, the
 * <button> reset that keeps the Resources trigger pixel-identical to the old <a>, and a
 * defensive prefers-reduced-motion guard. Closed-state only — no static pixel change.
 */

/* ------------------------------------------------------------------ *
 * Visible keyboard focus — WCAG 2.4.7.
 * Only :focus-visible (keyboard / programmatic focus), never plain :focus, so mouse
 * clicks don't paint a ring. Wins over per-page `outline:none` on form fields because
 * a11y.css is the last stylesheet loaded.
 * ------------------------------------------------------------------ */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Range sliders: the offset ring can clip against the track, so use a slightly larger
 * offset and no radius override. */
input[type="range"]:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Dark surfaces — a brand-purple ring has poor contrast on the deep-purple/near-black
 * hero, dark sections, the purple audit-CTA card, and the footer. Use a light ring there. */
.hero :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
section.dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.audit-cta :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.hero input[type="range"]:focus-visible,
.audit-cta input[type="range"]:focus-visible {
  outline-color: #fff;
}

/* ------------------------------------------------------------------ *
 * Skip-to-content link — WCAG 2.4.1 (Bypass Blocks).
 * First focusable element in the body (top of the shared nav include); visually hidden
 * until it receives keyboard focus, then it slides into the top-left corner.
 * ------------------------------------------------------------------ */
.skip-link {
  position: absolute;
  left: 8px;
  top: -60px;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 8px;
}

/* The skip target. Mirrors the existing section/header scroll-margin so the focused
 * heading isn't tucked under the sticky nav. */
main[id] {
  scroll-margin-top: 80px;
}

/* ------------------------------------------------------------------ *
 * Resources trigger: <a> -> <button> reset.
 * The trigger became a real <button> for correct disclosure semantics. These rules
 * strip the UA button chrome so it renders byte-for-byte like the old anchor inside
 * `.nav-links` (font, color, padding, radius all inherited from `.nav-links a`-style
 * rules). a11y.css loading last guarantees this overrides any per-page nav CSS too.
 * ------------------------------------------------------------------ */
.nav-links .submenu-trigger {
  margin: 0;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: inherit;
  color: var(--ink-2);
  padding: 10px 14px;
  border-radius: 8px;
  text-align: left;
}
.nav-links .submenu-trigger:hover {
  color: var(--ink);
  background: var(--bg-soft);
}

/* Normalize the desktop nav-link spacing across pages. Every per-page stylesheet
   sets `.nav-links { gap: 28px }`, while the theme (main.css) uses gap:4px — so the
   home page (no per-page CSS) rendered a ~120px narrower nav-links and the whole
   header shifted page to page. a11y.css loads last, so this wins everywhere and
   pins the gap to the theme value on every page (home included). */
.nav-links { gap: 4px; }

/* ------------------------------------------------------------------ *
 * Mobile navigation — WCAG 2.1.1 / 2.4.x.
 * ≤980px every per-page stylesheet hides `.nav-links` with no replacement, so the
 * primary nav is unreachable on phones/tablets. This block is the SINGLE source of
 * the mobile-nav behaviour: it neutralises those duplicated `.nav-links{display:none}`
 * rules (a11y.css loads last, so it wins the cascade) and turns the existing nav list
 * into a slide-down disclosure panel toggled by the `.nav-toggle` hamburger.
 * initNav() in js/main.js drives aria-expanded + the `.open` class + Esc / outside-
 * click / body scroll-lock / focus management.
 *
 * Desktop (>980px) is untouched: the hamburger is display:none and `.nav-links` keeps
 * its existing flex layout, so desktop snapshots do not move.
 * ------------------------------------------------------------------ */

/* Hamburger button — hidden on desktop, shown ≤980px. */
.nav-toggle { display: none; }
.nav-toggle-bar {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--ink-2);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle-bar + .nav-toggle-bar { margin-top: 5px; }
/* Open state: morph to an X. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 980px) {
  .nav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center;
    width: 44px; height: 44px; padding: 10px; margin: 0 -10px 0 0;
    background: none; border: 0; cursor: pointer; border-radius: 8px;
    order: 3;
  }

  /* The nav list becomes a full-width slide-down panel under the bar. It starts hidden
     (collapsed) and is revealed when initNav adds `.open`. This wins over every
     per-page `@media(max-width:980px){ .nav-links{display:none} }` because a11y.css is
     the last stylesheet and the selector specificity is equal. */
  .nav-inner { flex-wrap: wrap; row-gap: 0; }
  .nav-links {
    display: none;
    order: 4;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 12px 0 16px;
    margin: 0 calc(var(--nav-gutter, 0px) * -1);
  }
  .nav-links.open { display: flex; }
  .nav-links a,
  .nav-links .submenu-trigger {
    display: block; width: 100%;
    padding: 12px 4px; font-size: 16px;
  }
  /* Keep the primary CTAs on the top bar; only the link list collapses. */

  /* Resources nests as an in-flow disclosure (not the absolute desktop popover):
     reset the desktop positioning so it stacks inline under its trigger. */
  .nav-links .has-submenu { position: static; }
  .nav-links .submenu-trigger { text-align: left; }
  .nav-links .submenu {
    position: static; transform: none; left: auto;
    min-width: 0; width: 100%;
    box-shadow: none; border: 0; border-radius: 0;
    padding: 0 0 0 12px; margin: 0;
    background: transparent;
    /* Closed by default; opened only via the .open class JS toggles on .has-submenu. */
    opacity: 1; visibility: hidden; pointer-events: none;
    max-height: 0; overflow: hidden;
    transition: none;
  }
  .nav-links .has-submenu.open > .submenu {
    visibility: visible; pointer-events: auto;
    max-height: 600px; transform: none;
  }
  /* On touch/mobile, hover/focus-within must NOT auto-open the nested submenu — only
     the explicit .open class does. Override the per-page :hover/:focus-within opener. */
  .nav-links .has-submenu:hover > .submenu,
  .nav-links .has-submenu:focus-within > .submenu {
    visibility: hidden; pointer-events: none; max-height: 0;
  }
  .nav-links .has-submenu.open:hover > .submenu,
  .nav-links .has-submenu.open:focus-within > .submenu {
    visibility: visible; pointer-events: auto; max-height: 600px;
  }
  .nav-links .submenu a { padding: 10px 4px; }
}

/* Body scroll-lock while the mobile menu is open (class set by initNav). */
body.nav-open { overflow: hidden; }

/* ------------------------------------------------------------------ *
 * Footer fine-print contrast (M2).
 * ~18 per-page stylesheets redefine `.footer-bottom { color: rgba(255,255,255,0.45) }`
 * (~3.0:1 — fails WCAG AA) and load AFTER main.css, so the main.css 0.62 bump alone
 * does not reach them. a11y.css is the last stylesheet, so raising the floor here wins
 * the cascade on every page. 0.62 ≈ 4.7:1 on the #050510 footer (matches .panel-sub).
 * The trust badges (.footer-badge, defined in main.css) are not overridden per-page.
 * ------------------------------------------------------------------ */
.footer-bottom { color: rgba(255,255,255,0.62); }

/* Fine-print inline links must be distinguishable without relying on color. */
.submit-disclaimer a,
.install-form .submit-disclaimer a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
  text-decoration-thickness: 1px;
}

/* Faux customer names are meaningful text, so keep them above AA contrast. */
.logo-mark-faux { color: var(--ink-2); opacity: 1; }

/* ------------------------------------------------------------------ *
 * Visually-hidden utility — text exposed to AT but not painted.
 * Used for the comparison-table "Included / Not included" labels (WCAG 1.4.1, the
 * ✓/✗ state is otherwise colour-only) and any other AT-only text.
 * ------------------------------------------------------------------ */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ *
 * Comparison table — responsive overflow.
 * The 4-column .compare-table has no responsive handling and overflows the viewport on
 * phones. Wrap it in a focusable scroll container; at ≤640px give the table a min-width
 * so columns stay legible and the wrapper scrolls horizontally instead of the page.
 * On wider screens the table fits, so the wrapper is an invisible no-op.
 * ------------------------------------------------------------------ */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 640px) {
  .table-scroll .compare-table { min-width: 560px; }
  .table-scroll .compare-table th,
  .table-scroll .compare-table td { padding: 14px 14px; }
}

/* ------------------------------------------------------------------ *
 * prefers-reduced-motion — WCAG 2.3.3.
 * Defensive global guard. Component-level motion is also wrapped at its source
 * (main.css scroll-behavior, the inline <style> blocks), but this neutralises any
 * transition/animation an editor-added module might introduce.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------------ *
 * Print stylesheet.
 * Pages (esp. trust/legal/pricing) get printed or saved as PDF. The dark hero, the
 * sticky blurred nav, the dark footer and the decorative dashboard layers waste ink and
 * may drop background colours, producing poor output. Neutralise dark surfaces to black
 * text on white, hide the sticky nav + chrome, drop decorative ::before/::after layers,
 * and let scroll containers expand so nothing is clipped on paper.
 * ------------------------------------------------------------------ */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
  }
  /* Chrome that should not print. */
  .nav, .nav-toggle, .skip-link { display: none !important; }
  /* Decorative dashboard / hero artwork — drop entirely to save ink. */
  .hero-visual, .dash-wrap, .dash-body, .exec-chrome, .recycle-viz,
  .hero::before, .hero::after, section.dark::before, section.dark::after { display: none !important; }
  /* Links: show the URL so printed copies are useful. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #555 !important; }
  a[href^="/"]::after,
  a[href^="#"]::after,
  .logo a::after, a.logo::after, .nav-cta a::after { content: ""; }
  /* Expand horizontal scrollers so content is not clipped on paper. */
  .table-scroll { overflow: visible !important; }
  .table-scroll .compare-table { min-width: 0 !important; }
  /* Avoid orphaned headings / broken cards across page breaks. */
  h1, h2, h3, h4, h5, h6 { page-break-after: avoid; }
  img, .price-card, .quote-card, .callout { page-break-inside: avoid; }
}