/* ============================================================
   cybergrokr.com — global accessibility layer (WCAG 2.2 AA)
   Added 2026-09-22. Loaded on every page; safe to keep.
   ============================================================ */

/* 1. Screen-reader-only utility (global; pages define it locally too) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 2. Contrast fixes (WCAG 1.4.3 — 4.5:1 minimum) */
/* Skip link: dark text on pink = 5.55:1 (was white on pink = 3.56:1) */
.skip-link {
  color: #14060f !important;
}
/* Directory badge: dark text on pink = 5.55:1 */
.leo-homescreen .dir-card::after {
  color: #14060f !important;
}

/* 3. Heading-order repairs: keep the h3 look when the tag is h2 for outline correctness */
.footer-sitemap h2 {
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ff7ab8;
  margin: 0 0 10px;
}
/* Generic "looks like an h3 but is an h2" helper for repaired pages */
h2.h3-look {
  font-size: 1.17em;
  font-weight: 700;
  margin: 1em 0 0.5em;
}

/* 4. Visible focus — fallback for browsers without :focus-visible */
a:focus, button:focus, input:focus, select:focus, textarea:focus,
[tabindex]:focus, summary:focus {
  outline: 3px solid #ff2d78;
  outline-offset: 3px;
  border-radius: 4px;
}
/* Never remove focus outlines entirely */
*:focus:not(:focus-visible) {
  outline: none;
}
*:focus-visible {
  outline: 3px solid #ff2d78 !important;
  outline-offset: 3px;
  border-radius: 4px;
}

/* 5. Touch targets — icon-only controls must hit 44x44px (WCAG 2.5.8) */
button:empty,
a:empty,
button[class*="icon"]:not([class*="text"]),
.btn-icon, .icon-btn, .close-btn, .nav-toggle, .menu-toggle,
[aria-label][class*="close"], [aria-label][class*="toggle"] {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 6. Ticker / marquee pause control injected by a11y.js */
.a11y-ticker-pause {
  font: 600 12px/1 system-ui, sans-serif;
  padding: 8px 14px;
  min-height: 44px;
  border: 2px solid #ff2d78;
  background: #14060f;
  color: #fff;
  border-radius: 999px;
  cursor: pointer;
  margin: 6px 0;
}

/* 7. Form error text (used by hire.html + any validated form) */
.field-error {
  display: block;
  color: #ffd7ea;
  background: #4a0a1e;
  border-left: 4px solid #ff2d78;
  padding: 8px 12px;
  margin-top: 6px;
  font-size: 14px;
  border-radius: 0 6px 6px 0;
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] {
  border-color: #ff2d78 !important;
  box-shadow: 0 0 0 2px rgba(255, 45, 120, 0.45);
}

/* 8. Media text equivalents */
.media-alt {
  font-size: 14px;
  color: #d7d9d6;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 10px 0;
}
.media-alt strong { color: #fff; }

/* 9. Reduced motion — respect the OS setting (WCAG 2.3.3) */
@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;
  }
  html { scroll-behavior: auto !important; }
  /* Stop parallax / ken-burns style transforms */
  [class*="parallax"], [class*="kenburns"], [class*="float"], [class*="pulse"] {
    transform: none !important;
  }
}

/* 10. Forced colors (Windows High Contrast) — keep controls perceivable */
@media (forced-colors: active) {
  *:focus-visible, a:focus, button:focus {
    outline: 3px solid Highlight !important;
  }
  button, .btn, input[type="submit"] {
    border: 2px solid ButtonText;
  }
  .skip-link {
    background: Highlight !important;
    color: HighlightText !important;
    border: 2px solid HighlightText;
  }
  img { forced-color-adjust: none; }
}

/* 11. 200% text resize safety — never clip essential content */
@media (max-width: 1280px) {
  /* layouts already responsive; guard fixed-height text containers */
  [class*="ticker"], [class*="marquee"] {
    overflow-x: auto;
  }
}

/* 12. Never un-hide the mobile nav toggle on desktop (2026-09-22)
   Rule 5 above sets display:inline-flex on [aria-label][class*="toggle"] and
   .nav-toggle, which overrode the pages' `.nav-toggle{display:none}` (same
   specificity, later stylesheet) and rendered an empty white square button at
   the top-left of every page on desktop. The toggle must stay hidden until the
   mobile breakpoint, where the page's own media query shows it. */
.nav-toggle{display:none !important;}
@media(max-width:900px){
  .nav-toggle{display:flex !important;}
}