/*
 * Ojistoh — a11y.css
 * WCAG 2.1 AA accessibility styles.
 * Loaded last so it wins specificity over all other sheets.
 *
 * Covers:
 *   • Skip link visible on focus
 *   • Focus-visible ring on all interactive elements
 *   • Corrected colour contrast (--oj-slate-text, --oj-sage-text)
 *   • Mobile nav keyboard support
 *   • Reduced motion
 *   • Screen-reader utilities
 *   • High-contrast mode support
 */

/* ── TOKEN CORRECTIONS
   --oj-slate (#6B6882) fails AA at small text on dark backgrounds.
   Use --oj-slate-text (#8A8599) for any readable body text that needs
   a muted appearance — passes 4.5:1 on all dark surfaces.

   --oj-sage (#5A7A5C) fails AA at small text.
   Use --oj-sage-text (#7AA87C) for nation attribution text.
   The original --oj-sage is kept for UI elements (borders, dots)
   where 3:1 is sufficient.
── */
:root {
    --oj-slate-text: #8A8599;   /* 5.4:1 on --oj-night — AA PASS */
    --oj-sage-text:  #7AA87C;   /* 7.1:1 on --oj-night — AA PASS */
}

/* Apply corrected tokens to all text contexts that previously used
   the failing values */

/* Venue names, secondary metadata */
.oj-event-card__venue,
.oj-mini-event__meta,
.oj-hero-event-card__venue,
.oj-book-card__author,
.oj-book-meta-author,
.oj-artist-card__nation,
.oj-event-keyinfo__label,
.oj-ticket-box__note,
.oj-ticket-tier__desc,
.oj-ticket-price,
.oj-book-specs__row dd,
.oj-venue-block__address,
.oj-sidebar-next__venue,
.oj-month-heading,
.oj-filter-group__label,
.oj-nl-form__note,
.oj-newsletter-body,
.oj-pillar__desc,
.oj-stat__label,
.oj-footer__tagline,
.oj-footer__copy,
.oj-footer__legal a,
.oj-page-intro,
.oj-hero-event-card__venue {
    color: var(--oj-slate-text);
}

/* Nation attribution text — all instances */
.oj-nation-tag,
.oj-nation-filter-item,
.oj-artist-nation-text,
.oj-book-card__genre + .oj-nation-tags .oj-nation-tag,
.oj-book-meta-nation,
.oj-team-card__nation,
.oj-artist-card__nation,
.oj-stat__note,
.oj-footer__territory {
    color: var(--oj-sage-text);
}

/* ── SKIP LINK ── */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 4px;
    z-index: 9999;
    padding: 10px 20px;
    background: var(--oj-star);
    color: var(--oj-night);
    font-family: var(--oj-font-sans);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--oj-radius-sm);
    text-decoration: none;
    white-space: nowrap;
    /* Remove screen-reader-text clip when focused */
    clip: auto;
    clip-path: none;
    width: auto;
    height: auto;
    overflow: visible;
    /* Hide until focused */
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.15s, transform 0.15s;
}
.skip-link:focus,
.skip-link:focus-visible {
    left: 16px;
    opacity: 1;
    transform: translateY(0);
    outline: 3px solid var(--oj-night);
    outline-offset: 2px;
}

/* ── FOCUS RING — global
   Use :focus-visible so mouse users don't see the ring,
   but keyboard and AT users always do.
── */
:focus { outline: none; }

:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 3px;
    border-radius: var(--oj-radius-sm);
}

/* Invert focus ring on star-yellow backgrounds (buttons, badges) */
.oj-btn--primary:focus-visible,
.oj-marquee:focus-visible,
.oj-announce-bar:focus-visible {
    outline-color: var(--oj-night);
}

/* Links in body text */
.oj-prose a:focus-visible,
.oj-footer__links a:focus-visible,
.oj-event-keyinfo__value a:focus-visible {
    outline-color: var(--oj-star);
    border-radius: 2px;
}

/* Cards — focus on the anchor wrapping the whole card */
.oj-event-card:focus-visible,
.oj-book-card:focus-visible,
.oj-artist-card:focus-visible,
.oj-hero-event-card:focus-visible,
.oj-mini-event:focus-visible,
.oj-featured-event-card:focus-visible,
.oj-pillar:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 4px;
    border-radius: var(--oj-radius-lg);
}

/* Filter pills */
.oj-filter-pill:focus-visible,
.oj-nation-filter-item:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 2px;
    border-radius: 20px;
}

/* Ticket tiers */
.oj-ticket-tier:focus-within {
    border-color: var(--oj-star);
    outline: 2px solid var(--oj-star);
    outline-offset: 2px;
}

/* Quantity buttons */
.oj-ticket-qty__btn:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 2px;
    position: relative;
    z-index: 1;
}

/* Inputs */
.oj-nl-form__input:focus-visible,
.oj-ticket-box input:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 0;
    border-color: var(--oj-star);
}

/* ── MOBILE NAV ── */
.oj-nav__toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
    border-radius: var(--oj-radius-sm);
}
.oj-nav__toggle:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 2px;
}
.oj-nav__toggle-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--oj-ash);
    border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.oj-nav__toggle[aria-expanded="true"] .oj-nav__toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.oj-nav__toggle[aria-expanded="true"] .oj-nav__toggle-bar:nth-child(2) {
    opacity: 0;
}
.oj-nav__toggle[aria-expanded="true"] .oj-nav__toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media ( max-width: 768px ) {
    .oj-nav__toggle { display: flex; }

    .oj-nav__links {
        display: none;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--oj-ink);
        border-bottom: 1px solid rgba(240,230,160,0.1);
        flex-direction: column;
        padding: 16px 24px 24px;
        gap: 4px;
    }
    .oj-nav__links.is-open {
        display: flex;
    }
    .oj-nav__links li {
        list-style: none;
    }
    .oj-nav__links a {
        display: block;
        padding: 10px 0;
        font-size: 16px;
        border-bottom: 1px solid rgba(240,230,160,0.07);
    }
}

/* ── TIME ELEMENTS ── */
/* Dates rendered as <time> — no visual change needed, but make sure
   the datetime attribute is always present (done in PHP templates) */

/* ── FORM ACCESSIBILITY ── */

/* Visible labels on all inputs */
.oj-ticket-qty__label {
    font-size: 13px;
    color: var(--oj-ash);
    /* Already visible — ensure it's not hidden */
    clip: auto;
    clip-path: none;
    position: static;
    width: auto;
    height: auto;
}

/* Required field indicator */
input[required]::placeholder::after,
[aria-required="true"] + label::after {
    content: ' *';
    color: var(--oj-ember);
}

/* Error state */
.oj-input--error {
    border-color: var(--oj-ember) !important;
    outline-color: var(--oj-ember) !important;
}
.oj-input-error-msg {
    font-size: 12px;
    color: var(--oj-ember);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── SCREEN READER UTILITIES ── */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}
/* Visible on focus (for sr-only links/buttons) */
.screen-reader-text:focus {
    clip: auto;
    clip-path: none;
    display: block;
    font-size: 14px;
    font-weight: 500;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
    background: var(--oj-star);
    color: var(--oj-night);
    border-radius: var(--oj-radius-sm);
}

/* ── ARIA LIVE REGIONS ── */
[aria-live] { /* No visual styles needed — AT handles this */ }

/* ── FILTER PILLS — keyboard accessible ── */
/* Filter pills rendered as <a> or <span> with data-filter need
   tabindex="0" and keyboard handler in JS */
.oj-filter-pill[data-filter] {
    cursor: pointer;
}
.oj-filter-pill[data-filter]:focus-visible {
    outline: 3px solid var(--oj-star);
    outline-offset: 2px;
}

/* ── ICON-ONLY ELEMENTS ── */
/* All decorative SVGs (star glyphs, patterns) carry aria-hidden="true" in PHP.
   This catches any that don't */
svg:not([aria-label]):not([role="img"]) {
    /* Defensive — mark as presentation if no accessible name */
    pointer-events: none;
}

/* ── IMAGES ── */
/* Featured images from get_the_post_thumbnail() always get alt="" for
   decorative use, or the post title when meaningful (done in templates).
   Placeholder divs carry aria-hidden="true". */

/* ── TABLES ── */
/* No data tables in current templates — add if needed */

/* ── COLOUR CONTRAST — ADDITIONAL FIXES ──
   Anything using --oj-slate or --oj-sage at body text sizes
   that we can't catch by token replacement gets direct overrides here.
── */

/* Nation tags — border uses sage (UI context, 3:1 OK),
   text must use sage-text */
.oj-nation-tag {
    color: var(--oj-sage-text);
    border-color: rgba(122,168,124,0.35); /* sage-text alpha */
}
.oj-nation-dot {
    background: var(--oj-sage-text);
}

/* Open-to-work badge */
.oj-open-badge {
    color: var(--oj-sage-text);
    border-color: rgba(122,168,124,0.4);
}

/* Sidebar nation filter — active state is now a star-yellow chip */
.oj-nation-filter-item--active {
    background: var(--oj-star);
    color: var(--oj-night);
}
/* Checkbox hidden — chip style has no visible checkbox */
.oj-nation-filter-item--active .oj-nation-filter-check {
    display: none;
}

/* Artist card nation */
.oj-artist-card__nation { color: var(--oj-sage-text); }

/* Book card nation in template parts */
.oj-pc-nation, .oj-book-meta-nation, .bcc-meta-nation { color: var(--oj-sage-text); }

/* Sidebar next venue */
.oj-sidebar-next__venue { color: var(--oj-slate-text); }

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

    .oj-marquee__track {
        animation: none;
        /* Show all items stacked if motion is reduced */
        white-space: normal;
        overflow: visible;
    }

    .oj-hero__scroll { display: none; }

    .oj-book-card:hover .oj-book-card__cover,
    .oj-event-card:hover,
    .oj-artist-card:hover .oj-artist-card__portrait {
        transform: none;
    }
}

/* ── HIGH CONTRAST MODE ── */
@media (forced-colors: active) {
    .oj-btn--primary {
        border: 2px solid ButtonText;
    }
    .oj-nation-tag,
    .oj-type-pill,
    .oj-filter-pill--active {
        border: 1px solid ButtonText;
        forced-color-adjust: none;
    }
    .oj-hero__canvas,
    .oj-pillar__bg,
    .oj-hero__vignette {
        display: none;
    }
    :focus-visible {
        outline: 3px solid Highlight;
    }
}

/* ── PRINT ── */
@media print {
    .oj-nav,
    .oj-announce-bar,
    .oj-hero__canvas,
    .oj-hero__vignette,
    .oj-marquee,
    .oj-hero__scroll,
    .oj-newsletter-band,
    .oj-footer {
        display: none !important;
    }
    body {
        background: white;
        color: black;
        font-size: 12pt;
    }
    a::after {
        content: ' (' attr(href) ')';
        font-size: 10pt;
        color: #444;
    }
    a[href^="#"]::after,
    a[href^="javascript"]::after {
        content: '';
    }
}