/* a11y.css -- keyboard & semantics layer.  Loaded after style.css on every
   generated page by scripts/site_postprocess.py (step "a11y").  Owned by the
   keyboard-accessibility gate; no colour, spacing or sizing rules here. */

/* 1. Skip link (WCAG 2.4.1 bypass blocks).  Off-canvas until focused, then a
   real visible control at the top-left of the viewport. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 18px;
  background:#fff;color:#0F4A8F;font-weight:700;font-size:var(--fs-body);line-height:var(--lh-heading);
  border-radius:8px;text-decoration:underline}
.skip-link:focus,.skip-link:focus-visible{left:8px;top:8px;
  outline:3px solid #0F4A8F;outline-offset:2px;box-shadow:0 4px 18px rgba(0,0,0,.28)}

/* 2. A focused control must not land underneath the fixed mobile CTA bar.
   Without this the browser considers a footer link "in view" while the opaque
   83px bar paints over it: measured on /pricing.html at 390px, the focused
   link rendered 0 changed pixels (WCAG 2.4.7 invisible focus), and after this
   rule the same tab stop scrolls to y=304 with the bar clear of it. */
@media (max-width:720px){
  html{scroll-padding-bottom:110px}
  :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{scroll-margin-bottom:110px}
}

/* 3. Dark scheme: keep the skip link legible without touching the palette. */
@media (prefers-color-scheme:dark){
  .skip-link{background:#0b1220;color:#cfe0ff}
  .skip-link:focus,.skip-link:focus-visible{outline-color:#cfe0ff}
}

/* 4. Scroll containers are keyboard focusable (WCAG 2.1.1) and usually sit
   flush with the viewport edge, where an outline drawn OUTSIDE the box is
   clipped away: on a 390px viewport the focused div.table-wrap on
   /hs/chapter-01.html rendered 0 changed pixels.  Draw that ring inside. */
[tabindex="0"]:focus-visible{outline-offset:-3px}

/* 5. A nav group whose submenu the user just dismissed with Escape
   (keyboard-a11y-1029).  The submenu is disclosed by :focus-within, so ESC
   must suppress it WHILE the trigger keeps focus -- without this rule the
   attribute /assets/kb-support.js sets would have nothing to bind to. */
header.site-header .nav-group[data-nav-closed] > .nav-sub{display:none !important}
header.site-header .nav-group[data-nav-closed] > a::after{
  transform:rotate(45deg); margin-top:-4px}

/* 6. The text error an invalid submit writes (WCAG 3.3.1).  Its own colours,
   its own border -- it must not depend on a form family's stylesheet, because
   7.6k pages describe their forms independently. */
.form-live-error{margin:10px 0 0;padding:10px 12px;border-left:3px solid #B42318;
  border-radius:6px;background:rgba(180,35,24,.06);color:#B42318;
  font-weight:600;font-size:var(--fs-small);line-height:var(--lh-small)}
main [aria-invalid="true"]{border-color:#B42318 !important}
@media (prefers-color-scheme:dark){
  .form-live-error{color:#FFB4AB;border-left-color:#FFB4AB;
    background:rgba(255,180,171,.08)}
  main [aria-invalid="true"]{border-color:#FFB4AB !important}
}

/* 7. Drawer rows are full-bleed: a ring drawn OUTSIDE the row is clipped by the
   viewport edge, so all that survives are two thin horizontal lines that read
   as ordinary row borders.  Measured 390x844 (keyboard-a11y-1029): an
   adversarial visual audit of the open-drawer focus frame reported "no visible
   focus indicator" on the focused item while its computed outline was
   `solid 2px #0F4A8F` and the pixel diff between two focused rows was 9,360
   device px.  An INSET ring plus a tinted row makes the focused drawer item
   unmistakable without moving any layout. */
@media (max-width: 720px){
  header.site-header .nav-links a:focus-visible,
  header.site-header .nav-sub a:focus-visible{
    outline:3px solid var(--c-primary,#0F4A8F) !important;
    outline-offset:-3px !important;
    background:var(--c-accent-soft,#EAF2FB) !important;
    color:var(--c-text,#0F1E33) !important;
  }
}
@media (max-width: 720px) and (prefers-color-scheme: dark){
  header.site-header .nav-links a:focus-visible,
  header.site-header .nav-sub a:focus-visible{
    outline-color:#8AB4F8 !important; background:rgba(138,180,248,.20) !important;
    color:#FFFFFF !important;
  }
}