/* Ligue accessibility enhancements: skip link + visible keyboard focus.
   Loaded on every page. Uses :focus-visible so focus rings show for keyboard
   users without adding rings on mouse click. */

/* --- Skip to main content link --- */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 10000;
  display: inline-block;
  padding: 10px 16px;
  background: #FFC021;
  color: #0B0F1C;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: 8px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  transition: top 0.15s ease-in-out;
}
.skip-link:focus {
  top: 12px;
  outline: 3px solid #0B0F1C;
  outline-offset: 2px;
}

/* Skip target should not show a persistent outline, only when focused via skip link */
#main-content {
  scroll-margin-top: 90px;
}
#main-content:focus {
  outline: none;
}

/* --- Global keyboard focus indicator --- */
/* High-contrast amber ring for keyboard navigation. !important overrides the
   per-page `outline:none` on form inputs and buttons. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 3px solid #FFC021 !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}

/* On light/amber surfaces (e.g. the amber CTA buttons), a dark ring reads
   better than an amber-on-amber ring. */
.btn-primary:focus-visible,
.cta-primary:focus-visible,
[class*="primary"]:focus-visible {
  outline-color: #0B0F1C !important;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}