/* a11y-motion.css (lane r2-home, 2026-10-01). Loaded from base.html.
   1. The pause/play toggle that static/js/a11y-motion.js puts on decorative motion (WCAG 2.2.2).
      Same visual language as the Forged hero's .fs-hero-pause: a 44px navy glass disc, white
      2px rim, white glyph, peach focus ring on a navy halo (>= 3:1 on video, navy or white).
   2. The skip link (WCAG 2.4.1). */

.a11ym-btn {
  position: absolute; z-index: 40; top: 1rem; right: 1rem;
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; width: 44px; height: 44px; margin: 0; padding: 0;
  border: 2px solid rgba(255, 255, 255, .8); border-radius: 50%;
  background: rgba(20, 17, 66, .74); color: #fff;
  -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%);
  box-shadow: 0 8px 22px -8px rgba(8, 6, 36, .65), inset 0 1px 0 rgba(255, 255, 255, .16);
  font: inherit; line-height: 1; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.a11ym-btn:hover { background: rgba(42, 39, 96, .92); border-color: #fff; }
.a11ym-btn:active { transform: scale(.94); }
.a11ym-btn:focus { outline: none; }
.a11ym-btn:focus-visible { outline: 3px solid #ffcd8e; outline-offset: 3px; box-shadow: 0 0 0 7px rgba(20, 17, 66, .9); }
.a11ym-btn[hidden] { display: none; }
.a11ym-btn svg { display: block; width: 20px; height: 20px; pointer-events: none; }
.a11ym-btn[data-state="paused"] .a11ym-i-pause,
.a11ym-btn:not([data-state="paused"]) .a11ym-i-play { display: none; }
/* the play glyph's mass sits left of its box; nudge it to the optical centre */
.a11ym-btn .a11ym-i-play { transform: translateX(1px); }

/* Full-bleed heroes: right edge on the 80rem content column (matches the header's Contact Us). */
.a11ym-wide { right: max(1rem, calc((100% - 80rem) / 2 + 1.5rem)); }
@media (min-width: 768px) { .a11ym-btn { top: 1.5rem; } }

/* In a slot (normal flow): carousel bar, services grid. */
.a11ym-btn.a11ym-inline { position: relative; top: auto; right: auto; z-index: auto; flex: 0 0 auto; }

/* On white / light grey: a solid navy disc, orange ring (5.17:1 on white, 3.47:1 on navy). */
.a11ym-btn.a11ym-light { background: #141142; border-color: #141142; box-shadow: 0 6px 16px -8px rgba(20, 17, 66, .55); -webkit-backdrop-filter: none; backdrop-filter: none; }
.a11ym-btn.a11ym-light:hover { background: #2a2760; border-color: #2a2760; }
.a11ym-btn.a11ym-light:focus-visible { outline-color: #c93812; box-shadow: none; }

/* Slot row above a grid or carousel: right-aligned, partly tucked into the heading's bottom margin. */
.a11ym-bar { display: flex; justify-content: flex-end; margin: -2.5rem 0 .75rem; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } /* site.css sets smooth for everyone; jumps, focus scrolls and skip links stay instant */
  .a11ym-btn { transition: none; }
  .a11ym-btn:active { transform: none; }
}
@media (forced-colors: active) {
  .a11ym-btn, .a11ym-btn.a11ym-light { border-color: ButtonText; background: ButtonFace; color: ButtonText; }
  .a11ym-btn:focus-visible { outline-color: Highlight; }
}
@media print { .a11ym-btn { display: none !important; } }

/* ---- Skip link: first tab stop on every page; hidden until focused, then a white pill
   with an orange ring above the sticky header. ---- */
.skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  position: fixed; z-index: 1000; top: .75rem; left: 1rem;
  display: inline-block; padding: .8rem 1.4rem; border-radius: 9999px;
  background: #ffffff; color: #141142; text-decoration: none;
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.2;
  outline: 3px solid #c93812; outline-offset: 3px;
  box-shadow: 0 0 0 7px #141142, 0 14px 32px -10px rgba(0, 0, 0, .6);
}
/* The skip target: focusable by script only (tabindex=-1), so no ring of its own. */
main#main:focus { outline: none; }
/* Sections an in-page link jumped to (static/js/main.js gives them tabindex=-1 and focus). */
.ifs-jump-target:focus { outline: none; }
/* Zero-height slot that floats the toggle over a strip it may not live inside (footer skyline). */
.a11ym-float { position: relative; z-index: 5; height: 0; }
.a11ym-float > .a11ym-btn { position: absolute; top: 1rem; right: max(1rem, calc((100% - 80rem) / 2 + 1.5rem)); }

/* ---- Site-wide header / footer fixes (lane r2-home, 2026-10-01, raised by the Forged lane) ---- */
/* 2.4.7: footer links had only the thin browser ring, the footer logo none at all (its focus:outline-none
   left a transparent outline and a 40% orange ring). Gold on the #333 / #282a2b footer is ~9.6:1. */
footer a[href]:focus-visible { outline: 2px solid #f9dd9a !important; outline-offset: 3px; border-radius: 3px; box-shadow: none !important; }
/* 1.4.4: with 200% text the desktop nav ran off the right (page 1291px wide at 1050). main.js adds
   .nav-wrap only when the bar actually overflows, so normal text renders exactly as before; then the
   bar grows and the nav items wrap onto a second row instead of widening the page. */
#main-header nav.nav-wrap { flex-wrap: wrap; height: auto; min-height: 6rem; }
#main-header nav.nav-wrap #desktop-nav { flex-wrap: wrap; justify-content: flex-end; min-width: 0; flex: 1 1 0%; row-gap: .25rem; }