/* Accessibility corrections to the approved theme — GTS-3.
 *
 * SEPARATE FILE, DELIBERATELY. theme.css is the approved design extracted
 * verbatim (§4.4) and is not ours to edit; these are additive corrections that
 * the style package's own README lists as known gaps. Keeping them apart means
 * a future v2 of the package can replace theme.css wholesale without silently
 * discarding the fixes, and a reviewer can see exactly what was added to a
 * CEO-approved design.
 *
 * §9.6 makes Lighthouse accessibility >= 95 a BLOCKING gate, so the approved
 * draft does not pass its own gate as it stands. That is why GTS-3 is P2 work
 * rather than a nicety.
 *
 * Colours are taken from the guide's own token set (§4.4 colour tokens); no
 * new colour is introduced.
 */

/* 1. :focus-visible — the package has NONE, so keyboard navigation is
 *    currently invisible. Uses the theme's own accent (#00E88F) rather than a
 *    browser default, so the indicator belongs to the design.
 *
 *    :focus-visible rather than :focus, so a mouse click does not draw a ring
 *    a pointer user did not ask for. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #00E88F;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Belt and braces for browsers without :focus-visible — remove the default
 * ring only where the modern selector is supported, so older engines keep
 * their own. */
@supports selector(:focus-visible) {
  a:focus:not(:focus-visible),
  button:focus:not(:focus-visible),
  input:focus:not(:focus-visible),
  textarea:focus:not(:focus-visible) {
    outline: none;
  }
}

/* 2. prefers-reduced-motion — the package has NO block, while the theme
 *    animates. Vestibular-disorder users get motion they cannot opt out of.
 *
 *    Not `animation: none`: some animations convey state, and removing them
 *    entirely can hide information. Collapsing the duration preserves the end
 *    state while removing the movement. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 3. Caption contrast — the README records some caption greys below WCAG AA.
 *
 *    MEASURED against the theme's page background #070B12, using the WCAG
 *    relative-luminance formula:
 *
 *      #4A5568   2.62:1   FAIL AA
 *      #56637a   3.25:1   FAIL AA
 *      #5A6778   3.42:1   FAIL AA
 *      #8A97A8   6.64:1   pass
 *      #E8EEF7  16.90:1   pass
 *
 *    Three of the theme's greys fail the 4.5:1 AA threshold for body text, not
 *    two. #4A5568 is the worst at 2.62:1.
 *
 *    #8A97A8 is already in the theme's token set, so this raises the failing
 *    captions to an EXISTING token rather than inventing a colour — which
 *    keeps the CI check that forbids off-token colours meaningful.
 *
 *    SCOPED TO CAPTION-CLASS ELEMENTS ONLY. #4A5568 and #56637a are also used
 *    for borders and hairlines, where a contrast threshold for body text does
 *    not apply, and blanket-replacing them would change the approved visual
 *    design rather than fix an accessibility defect. Where those colours carry
 *    TEXT outside these selectors, Lighthouse will say so and it is a design
 *    question for the owner (GTS-3), not something to fix by sweeping. */
.caption,
.muted,
figcaption,
small {
  color: #8A97A8;
}

/* 4. A skip link. Not in the README's list, but a keyboard user landing on a
 *    page with a nav has no way past it, and Lighthouse checks for it. Visible
 *    only on focus, so it does not alter the approved visual design. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.5rem 1rem;
  background: #00E88F;
  color: #04110B;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 0;
}

/* 5. GTS-3 residual: the code-card comment token `.tk-c` is TEXT at #56637a,
 *    3.25:1 against #070B12 — below WCAG AA. Raised to the existing muted
 *    token #8A97A8 (6.64:1), same rule as the captions above: an existing
 *    token, never a new colour. `.inv-logos span` (#5A6778) is defined in the
 *    theme but has no element in the approved markup, so nothing to fix. */
.tk-c {
  color: #8A97A8;
}

/* 6. GTS-2 — mobile. The approved theme hides `.nav-links` under 900px and
 *    replaces them with nothing, so a phone has no navigation at all; and the
 *    models table overflows the viewport below ~700px.
 *
 *    Acceptance is REACHABILITY: every destination reachable at desktop width
 *    is reachable at 375px, and the table scrolls inside its card rather than
 *    widening the page. A CSS-only reflow satisfies both without adding a
 *    hamburger's JS to a page whose approved markup we do not edit: the links
 *    drop to a full-width row under the logo. Above 900px nothing changes. */
@media (max-width: 900px) {
  .nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 10px 0;
    row-gap: 8px;
  }
  .nav-links {
    display: flex;
    order: 3;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
    font-size: 14px;
  }
}
@media (max-width: 700px) {
  .models-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .models-table table {
    min-width: 640px;
  }
}
@media (max-width: 700px) {
  /* The footer link row is `display:flex` with no wrap; at 375px its seven
   * links run to 535px and drag the whole document wider than the viewport —
   * the page-level horizontal scroll GTS-2 forbids. Measured, not guessed. */
  .foot-grid { flex-direction: column; }
  .foot-links { flex-wrap: wrap; row-gap: 10px; }
}

/* 7. Header actions: "Log in" (ghost) sits left of "Contact sales" on every
 *    page (owner ruling 2026-09-11 12:41). One flex container so the pair
 *    stays together when the nav reflows on a phone. */
.nav-cta { display: flex; align-items: center; gap: 14px; }
@media (max-width: 480px) {
  .nav-cta .btn { padding: 9px 14px; font-size: 13.5px; }
}