/* Inkgility Accessibility Polish (Wave 11)
   Site-wide a11y CSS:
     - Visible focus rings (2px gold outline + 2px offset) via :focus-visible
     - Skip-link styling
     - Reduced-motion overrides (disables animations/transitions/parallax/autoplay)
     - 44×44 minimum tap targets on touch devices
     - High-contrast hover states for interactive elements
     - Screen-reader-only utility .sr-only
*/

/* ── Skip link ─────────────────────────────────────────────────────── */
.skip-link{
  position:absolute;
  left:8px;
  top:-44px;
  width:auto;
  padding:10px 16px;
  background:#0A0810;
  color:#FFFDF9;
  font-family:"Space Mono",monospace;
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  border-radius:6px;
  border:2px solid #7C3AED;
  text-decoration:none;
  z-index:99999;
  transition:top .2s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  top:8px;
  outline:none;
}
[data-theme="light"] .skip-link{ background:#FFFDF9; color:#0A0810; border-color:#7C3AED; }

/* ── Global focus indicators ──────────────────────────────────────── */
:focus{ outline: none; }
:focus-visible{
  outline:2px solid #7C3AED !important;
  outline-offset:2px !important;
  border-radius:4px;
}
/* Higher visibility focus on dark surfaces */
[data-theme="dark"] :focus-visible,
.ink-dark :focus-visible{
  outline-color:#C58BEB !important;
  box-shadow:0 0 0 4px rgba(142,33,202,.18);
}
/* Custom focus for solid-bg buttons */
button:focus-visible,
.start-btn:focus-visible,
.ink-btn:focus-visible{
  outline:2px solid #7C3AED !important;
  outline-offset:3px !important;
  box-shadow:0 0 0 4px rgba(142,33,202,.22);
}

/* ── SR-only utility ──────────────────────────────────────────────── */
.sr-only,
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.sr-only-focusable:focus,
.sr-only-focusable:focus-visible{
  position:static !important;
  width:auto;height:auto;
  clip:auto;white-space:normal;
}

/* ── Touch target minimums ─────────────────────────────────────────
   Applies on coarse pointers (phones, tablets). Ensures interactive
   targets are at least 44×44 with adequate spacing. */
@media (pointer: coarse){
  a[href],
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  input[type="checkbox"],
  input[type="radio"],
  label,
  select,
  summary{
    min-height:44px;
    min-width:44px;
  }
  /* Adjacent tap targets need at least 8px gap */
  nav a + a,
  .ink-mob-nav a{ position:relative; }
}

/* ── High-contrast hover/active states for links ─────────────────── */
a:hover,
a:focus-visible{ text-decoration:underline; }
a.start-btn:hover,
a.ink-btn:hover,
button:hover{ text-decoration:none; }

/* ── ARIA live regions (default offscreen) ───────────────────────── */
[aria-live][data-ink-live-region]{
  position:absolute;
  left:-9999px;
  width:1px;height:1px;
  overflow:hidden;
}

/* ── Reduced motion overrides ─────────────────────────────────────
   Disables animations, transitions, parallax, autoplay carousels,
   page transitions, and toast animations. */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
  html{ scroll-behavior:auto !important; }
  /* Disable parallax-style transforms wired via data attribute */
  [data-parallax]{ transform:none !important; }
  /* Stop auto-rotating carousels by removing animation */
  [data-autoplay],
  .ink-marquee,
  .ink-ticker{ animation:none !important; }
  /* Toast — show instantly */
  .ink-toast{ transform:none !important; }
  /* Page transition fade bar */
  #ink-loadbar{ display:none !important; }
  /* Mobile nav slide */
  .ink-mob-nav{ transition:none !important; }
  /* View transitions */
  ::view-transition-old(root),
  ::view-transition-new(root){ animation:none !important; }
}

/* ── Forced colors / Windows High Contrast support ───────────────── */
@media (forced-colors: active){
  :focus-visible{ outline-color: Highlight !important; }
  .skip-link{ border-color: Highlight; }
}

/* ── Nav action labels stay on one line ─────────────────────────────
   Defensive global rule so labels like "Sign In", "Search", or
   "Get Started" never wrap across two lines regardless of viewport.
   Container can scroll horizontally if it overflows. */
.nav-right,
.nav-actions,
.site-nav-right,
nav .nav-r,
nav .nav-cta-row,
nav .actions{
  flex-wrap: nowrap !important;
}
.nav-right > *,
.nav-actions > *,
nav .nav-cta,
nav .start-btn,
nav .search-btn,
nav .theme-toggle,
nav .sign-in-btn,
nav .signin-btn,
nav .signin-link,
nav .nav-link,
nav .nav-icon-btn,
.nav-right button,
.nav-right a,
.site-nav-right button,
.site-nav-right a{
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  word-break: keep-all;
  overflow-wrap: normal;
}
