/* ============================================================
   GLOBAL ACCESSIBILITY & POLISH
   • Skip-to-content link (WCAG 2.4.1)
   • Universal :focus-visible ring on all interactive elements
   • prefers-reduced-motion enforcement
   • Smooth scroll with reduced-motion respect
   ============================================================ */

/* ---- Skip link ---- */
.skip-link {
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: var(--z-top, 9999);
    background: var(--color-primary, #3264f5);
    color: var(--color-primary-fg, #fff);
    padding: 10px 18px;
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-sans, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--shadow-lg);
    transform: translateY(calc(-100% - 24px));
    transition: transform var(--duration-base, 280ms) var(--ease-standard, cubic-bezier(.22, 1, .36, 1));
}
.skip-link:focus,
.skip-link:focus-visible {
    transform: translateY(0);
    outline: none;
}

/* ---- Universal focus-visible ring ----
   Buttons (.btn) keep their custom ring from general_style.css.
   This rule covers links, summaries, role-based and tabindex
   interactive elements — but NOT form fields. The 3px radius is a
   visual tweak for the outline ring on links/buttons; applying it
   to inputs would clobber their own border-radius (e.g.
   .booking-input is 10px), making rounded corners look square on
   focus. Form fields are handled separately below. */
a:focus-visible,
button:not(.btn):focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible,
[role="tab"]:focus-visible,
[role="menuitem"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-primary, #3264f5);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Inputs/selects/textareas — outline is a safety net only; each
   field keeps its own border-radius (e.g. .booking-input = 10px). */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--color-primary, #3264f5) 70%, transparent);
    outline-offset: 0;
}

/* ---- Reduced motion — global enforcement ----
   Anything not explicitly opting in via --motion-safe gets
   neutralized when the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- Smooth scroll (respects reduced motion via media query above) ---- */
html { scroll-behavior: smooth; }

/* ---- Visually hidden helper (sr-only) — universal ---- */
.visually-hidden,
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}