/* ========== General Styles ========== */
body {
    font-family: "Futura", "Outfit", sans-serif;
    background: #333;
}

a, body, small {
    color: #fff;
}

/* Phase 5 A11Y-009 — make <a> and <small> inside any <article>
 * inherit the article's text color. Mixtape articles (single.php
 * + card-mixtape.php) set an inline `color` based on luminance of
 * the curator-supplied ACF background, but the rule above gives
 * <a> and <small> a fixed #fff that wins by specificity (0,0,1
 * tag-only) and breaks the contrast adaptation. Specificity 0,0,2
 * (article + tag) here beats it cleanly. The home/text <article>
 * tags don't set an inline color so they inherit body #fff via
 * the cascade, no visual change. */
article a,
article small {
    color: inherit;
}

.font-smoothing {
    -webkit-font-smoothing: antialiased!important;
    -moz-osx-font-smoothing: grayscale!important;
}

/* ========== Focus Visible (A11Y-001) ========== */
/* Phase 5 — restore a clear keyboard focus indicator on every
 * interactive element. The legacy theme had `outline: 0 !important`
 * blanket-disabled on .btn / button / input / select / textarea
 * which made the site fundamentally unusable at the keyboard
 * (WCAG 2.4.7 violation, niveau AA).
 *
 * Strategy: use `:focus-visible` (not `:focus`) so mouse clicks
 * don't trigger an outline, only keyboard navigation does. The
 * 2px solid #fff on -2px offset matches the theme color palette
 * (white text on #333 body) and is visible on every background
 * including the gradient mobile menu and the ACF-colored mixtape
 * cards. */
:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Range inputs (player seekbar) need a slightly different style
 * because the offset would clip outside the slider track. Inset
 * the outline instead. The id-based selector is required to win
 * over `#seekbar { outline: none }` in player.css (specificity 1,0,0
 * beats type+pseudo). */
#seekbar:focus-visible,
input[type="range"]:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 0;
}

.form-control:focus {
    border-color: #66afe9;
}

/* ========== Link Styles ========== */
a.underline {
    border-bottom: solid 2px CurrentColor;
    padding-bottom: 1px;
}

a:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: solid 2px CurrentColor;
    padding-bottom: 1px;
}

a.no--border, a.no--hover:hover {
    color: #fff;
    text-decoration: none;
    border-bottom: none!important;
}

/* ========== Miscellaneous ========== */
hr {
    margin-bottom: 10px;
    border: 0;
    border-top: 2px solid #fff;
}

/* ========== Reduced Motion (A11Y-007) ========== */
/* Phase 5 — globally neutralize animations, transitions, and
 * smooth-scroll for users who prefer reduced motion. This catches
 * the 3 known thematic animations (.menu-fade-in navbar,
 * #title marquee player, .player-slide-up player) AND any
 * future / plugin-emitted animation. The 0.01ms value preserves
 * the final state of `transition` rules without visible motion
 * (vs setting `none` which can leave intermediate states stuck).
 * Pattern recommended by MDN. */
@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;
    }
}

/* ========== [END general.css] ========== */
/* Homepage entrance animations (.fade-in + .delay-N) removed in
 * Phase 4 CHECKPOINT 3 fix #4. The animation conflicted with the
 * Phase 3 infinite-scroll: AJAX-appended cards inherited the
 * fade-in opacity:0 baseline but never received the .visible
 * class added by main.js on DOM ready, so cards beyond the first
 * 30 stayed permanently invisible. Removing the animation
 * (markup + CSS + JS handler) was the cleanest resolution. */