/* ==========================================================================
   Cheetah Accessibility Styles
   ==========================================================================
   Focus states, skip links, screen-reader text, and reduced motion.
   Dependencies: variables.css
   ========================================================================== */

/* ─── Skip Links ───
   A sleek, floating "quick jump" bar that drops down from the top of the
   viewport only when one of its links receives keyboard focus.

   Design notes:
   - The whole bar is offset above the viewport via `transform` rather
     than hidden with `visibility: hidden` or `display: none`. This keeps
     both links in the tab order so `:focus-within` can actually fire
     when the user first tabs onto the first link.
   - `pointer-events: none` in the resting state stops mouse users from
     accidentally clicking off-screen targets; keyboard focus is
     unaffected.
   - Translucent slate surface + backdrop blur reads as a "system" UI
     layer that stays legible against any underlying content.
   - Only the bottom corners are rounded so the bar visually appears to
     slide down from the top edge rather than float in mid-air.

   Stacking order — the skip bar must sit above EVERY layer that can
   occupy the top of the viewport, otherwise it disappears behind them:

     element                           z-index
     --------------------------------  ---------
     .site-header                       9999
     .mobile-menu                       9998
     .overlay                           9997
     WP admin bar                       99999
     product-search overlay panel       100000

   100001 is therefore the minimum safe value. Do NOT lower this without
   re-auditing every header-layer component (including the mobile menu,
   mobile filter drawer, and product-search overlay).

   Vertical offset — when the WP admin bar is present, the skip bar is
   pushed below it so the admin toolbar stays visible and the two bars
   stack cleanly. The offset is exposed as a CSS custom property so the
   resting transform can also account for it.
*/
.skip-links {
    /* Vertical offset from the top of the viewport. Overridden to
       32px / 46px when the WP admin bar is rendered. */
    --skip-links-top-offset: 0px;

    position: fixed;
    top: var(--skip-links-top-offset);
    left: 50%;
    z-index: 100001;

    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    margin: 0;
    list-style: none;

    background: rgba(15, 23, 42, 0.94);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-top: 0;
    border-radius: 0 0 16px 16px;

    box-shadow:
            0 20px 45px -12px rgba(15, 23, 42, 0.5),
            0 4px 12px -4px rgba(15, 23, 42, 0.35);

    /* Resting state — parked above the viewport by its own height plus
       the admin-bar offset plus a small safety gap. The element stays in
       the tab order because it is only moved, never hidden. */
    transform: translate(-50%, calc(-100% - var(--skip-links-top-offset) - 4px));
    opacity: 0;
    pointer-events: none;

    transition:
            transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1),
            opacity 0.22s ease;
}

/* Reveal the bar as soon as any of its links receives focus. */
.skip-links:focus-within {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
}

/*
 * When the WP admin bar is visible it occupies the top of the viewport
 * (32px on desktop, 46px on mobile). Shift the skip bar down so the two
 * remain visually stacked instead of overlapping.
 */
.admin-bar .skip-links {
    --skip-links-top-offset: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .skip-links {
        --skip-links-top-offset: 46px;
    }
}

/* ─── Individual skip-link chip ─── */
.skip-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.005em;
    text-decoration: none;
    white-space: nowrap;

    color: #f1f5f9;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    cursor: pointer;
    transition:
            background-color 0.18s ease,
            border-color 0.18s ease,
            color 0.18s ease,
            transform 0.18s ease,
            box-shadow 0.18s ease;
}

.skip-link:hover,
.skip-link:focus {
    color: #ffffff;
    background: var(--cheetah-primary, #2563eb);
    border-color: var(--cheetah-primary, #2563eb);
    text-decoration: none;
    outline: none;
    transform: translateY(1px);
    box-shadow: 0 6px 16px -6px rgba(37, 99, 235, 0.7);
}

/* Keyboard-only focus ring, layered over the hover treatment so both
   mouse and keyboard users get a clear affordance without ambiguity. */
.skip-link:focus-visible {
    box-shadow:
            0 0 0 2px rgba(15, 23, 42, 0.94),
            0 0 0 4px var(--cheetah-primary, #2563eb),
            0 6px 16px -6px rgba(37, 99, 235, 0.7);
}

.skip-link__icon {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    opacity: 0.9;
}

.skip-link__label {
    display: inline-block;
}

/* Compact variant for very small viewports. */
@media (max-width: 480px) {
    .skip-links {
        padding: 0.5rem;
        gap: 0.375rem;
        border-radius: 0 0 12px 12px;
    }

    .skip-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.75rem;
        gap: 0.375rem;
    }

    .skip-link__icon {
        width: 12px;
        height: 12px;
    }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .skip-links,
    .skip-link {
        transition: none;
    }
}

/* ─── Screen Reader Text ─── */
.screen-reader-text,
.sr-only {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
}

.screen-reader-text:focus,
.sr-only:focus {
    background-color: var(--cheetah-primary);
    border-radius: var(--cheetah-radius-md);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    clip-path: none !important;
    color: #ffffff;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto !important;
    left: 5px;
    line-height: normal;
    overflow: visible !important;
    padding: var(--cheetah-space-sm) var(--cheetah-space-md) !important;
    position: static !important;
    text-decoration: none;
    top: 5px;
    white-space: normal !important;
    width: auto !important;
    z-index: calc(var(--cheetah-z-toast) + 1);
}

/* ─── Skip Link Target Focus Reset ─── */
#primary-content[tabindex="-1"]:focus {
    outline: 0;
}

/* ─── ARIA Live Regions ─── */
[aria-live="polite"],
[aria-live="assertive"] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ─── Reduced Motion ─── */
@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;
    }
}

/* ─── High Contrast Mode Support ─── */
@media (prefers-contrast: more) {
    .cheetah-btn,
    .cheetah-form__input,
    .cheetah-card {
        border-width: 2px;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible {
        outline-width: 3px;
    }
}

/* ─── Visually Hidden but Accessible ─── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}