/* ==========================================================================
   MBSG — shared accessibility layer (WCAG 2.1 AA)

   Linked on every page BEFORE that page's inline <style>, so it deliberately
   only carries rules that do NOT collide with page-level declarations:
   skip link, focus indicators, and touch-target sizing. Anything the pages
   already declare themselves (nav wrapping/gaps, text colours, font sizes)
   is fixed at its source instead, so the cascade stays readable.
   ========================================================================== */

/* ── SKIP NAVIGATION ──────────────────────────────────────────────────────
   First focusable element on every page (WCAG 2.4.1). Parked off-screen with
   a transform — not display:none — so it stays in the tab order, and slides
   in when focused. z-index sits above the nav (60) and the cookie notice
   (9000) but below the takeover/chat overlays (99999), which trap focus. */
.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 9500;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 22px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #070B14;
  background: #F08A24;
  border: 2px solid #070B14;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.6);
  transform: translateY(-175%);
}

.skip-link:focus { transform: translateY(0); }

/* The skip target itself is focused programmatically via tabindex="-1"; it
   must not draw a ring around the whole page. */
main[tabindex="-1"]:focus { outline: none; }

/* ── VISIBLE KEYBOARD FOCUS (WCAG 2.4.7) ─────────────────────────────────
   The browser default ring is near-black, which is invisible on this site's
   dark surfaces. Orange on the page background measures 7.8:1. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #F08A24;
  outline-offset: 3px;
  border-radius: 2px;
}

/* Orange-filled controls get a light ring instead, so the indicator never
   sits orange-on-orange. */
.btn:focus-visible,
.tko-cta--email:focus-visible {
  outline-color: #EAF2FF;
}

/* robot-sounds.js injects its own <style> at runtime; keep the ring on the
   mute toggle with a more specific selector than the injected rule. */
button.rsfx-toggle:focus-visible {
  outline: 3px solid #F08A24;
  outline-offset: 3px;
}

/* ── TOUCH TARGETS ≥44×44 (spec §Phase 4) ────────────────────────────────
   Two techniques:
     1. min-height/min-width on the control itself, wherever its box can grow
        without moving anything else. Preferred — the hit area is then exactly
        the element, with nothing to overlap a neighbour.
     2. a transparent centred pseudo-element, only for controls whose visual
        box must stay exactly as designed and which stand alone (the mute
        toggle, the arcade easter-egg link). Pointer hit-testing includes the
        pseudo-element, so the tappable area really is 44px tall.
   Nav links used to use (2) and were changed to (1): a 44px band centred on a
   ~26px link overhangs its box top and bottom, so on a wrapped two-row nav the
   bands of adjacent rows overlapped and the wrong link took the tap.
   Scoped to <=768px: the 320/375/414/768 viewports in the test matrix. */
@media (max-width: 768px) {
  .footer-links a,
  .footer-links button,
  .hub-links a,
  .hub-links button,
  .nav-back,
  .nav-cta,
  .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }

  .rsfx-toggle::after,
  .arcade-egg a::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 44px;
    min-height: 100%;
  }

  /* The mute toggle is round and free-standing, so widen the band too. */
  .rsfx-toggle::after { min-width: 44px; }

  .arcade-egg a { position: relative; }
}

/* ── FIXED-NAV CLEARANCE ─────────────────────────────────────────────────
   Sizing the nav links to 44×44 costs horizontal room, so on narrow phones
   the link row wraps in two and the fixed nav grows 126px → 174px (measured:
   174px at ≤390px, 126px at 414–760px). The subpage heroes were tuned to the
   old height and their first line ended up underneath it.

   These are bottom-aligned flex boxes, so padding-top acts as a FLOOR on where
   the content can start — pages that already clear the nav are unchanged. One
   tier rather than two: the exact wrap width depends on text metrics, and a
   breakpoint that guessed wrong would put content back under the nav.

   `main …` is needed to outrank the pages' own `.subhero` / `.act-hero`
   padding, which is declared after this file. Matches the pages' own <=760px
   mobile breakpoint. */
@media (max-width: 760px) {
  main .subhero,
  main .act-hero,
  main .robot-stage {
    padding-top: 186px;
  }
}

/* ── REDUCED MOTION (WCAG 2.3.3) ─────────────────────────────────────────
   The robot is the chat entry point, so it stays on screen and interactive
   under reduced motion — it just stops moving. Baseline for pages that don't
   declare a blanket rule of their own; index/about-2 also kill animation
   page-wide in their own media query. */
@media (prefers-reduced-motion: reduce) {
  #bot,
  #bot *,
  .robot-stage .bot-body,
  .robot-stage .bot-body * {
    animation: none !important;
    transition: none !important;
  }
}