/* =========================================================
   ACCESSIBILITY LAYER (WCAG 2.2 AA)
   Loaded last on every layout. Holds cross-cutting fixes that
   apply site-wide; per-component colour fixes live in each
   page stylesheet next to the rule they correct.
   ========================================================= */


/* ---------------------------------------------------------
   1. Keyboard focus (2.4.7 Focus Visible, 2.4.11 Focus Not
      Obscured, 1.4.11 Non-text Contrast)
   Several components set `outline: none` on focus and rely on
   a faint border/opacity change, so the ring is forced here.
   #0d61f8 is the brand blue: 5.1:1 on white, 3.8:1 on the
   dark footer.
   --------------------------------------------------------- */

:focus-visible {
    outline: 3px solid #0d61f8 !important;
    outline-offset: 2px !important;
}

/* Text fields already show a blue border on focus; keep the ring
   tight so it reads as part of the field. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline-offset: 0 !important;
}

/* Dark surfaces: switch to white so the ring stays visible. */
.practice-footer :focus-visible,
.button-dark:focus-visible,
.submit-session:focus-visible,
.button-blue:focus-visible,
.navbar-login-button:focus-visible,
.login-submit-button:focus-visible {
    outline-color: #0a0d14 !important;
    box-shadow: 0 0 0 5px #ffffff;
}

.practice-footer :focus-visible {
    outline-color: #ffffff !important;
    box-shadow: none;
}

/* Custom radio/option cards use :focus-within already; make sure
   the checkbox inside the Google consent rows shows it too. */
.google-consent-check:focus-within {
    border-color: #0d61f8;
}

/* Sticky header must not cover the focused element when tabbing
   through a page (2.4.11). */
html {
    scroll-padding-top: 116px;
}

@media (max-width: 700px) {
    html {
        scroll-padding-top: 100px;
    }
}


/* ---------------------------------------------------------
   2. Hover / focus states that only dimmed the element.
   Opacity alone drops contrast; pair it with a visible cue.
   --------------------------------------------------------- */

.practice-session-card:focus-visible {
    opacity: 1;
}

.practice-header nav a:hover,
.practice-header nav a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Selected question in the navigator: ring already added; give
   the "answered" state a non-colour cue too (1.4.1). */
.question-nav-item.is-answered {
    font-weight: 700;
}


/* ---------------------------------------------------------
   3. Links inside running text must not rely on colour alone
   (1.4.1 Use of Color).
   --------------------------------------------------------- */

.google-consent-check a,
.faq-list details p a,
.article-content a,
.results-note a,
.leaderboard-note a,
.first-attempt-note a {
    text-decoration: underline;
    text-underline-offset: 2px;
}


/* ---------------------------------------------------------
   4. Placeholder contrast (1.4.3). Firefox also lowers
   placeholder opacity, which would undo the colour.
   --------------------------------------------------------- */

::placeholder {
    color: #6f737c;
    opacity: 1;
}


/* ---------------------------------------------------------
   5. Text over gradients (1.4.3). The combo pricing header
   fades to peach and the podium cards to tinted gradients,
   where the default muted/blue text dropped below 4.5:1.
   --------------------------------------------------------- */

.combo-card .plan-subtitle {
    color: #0a4fce;
}

.combo-card .plan-price .price-currency,
.combo-card .plan-price .price-suffix,
.profile-podium-stats span {
    color: #5c6270;
}


/* ---------------------------------------------------------
   6. Target size (2.5.8 Target Size Minimum, 24x24px).
   --------------------------------------------------------- */

.question-edit,
.question-delete,
.admin-icon-button,
.login-modal-close,
.report-modal-head a {
    min-width: 24px;
    min-height: 24px;
}

.login-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}


/* ---------------------------------------------------------
   7. Readability at 200% zoom / small screens (1.4.4, 1.4.10,
   1.4.12). Let the header grow instead of clipping wrapped
   content, stop iOS from auto-inflating text, and lift the
   smallest user-facing text off 10px.
   --------------------------------------------------------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.practice-header {
    height: auto;
    min-height: 100px;
}

@media (max-width: 1000px) {
    .practice-header {
        min-height: 84px;
    }
}

.leaderboard-preview-names em {
    font-size: 12px;
}

/* Long words / URLs wrap instead of forcing sideways scroll. */
p,
li,
dd,
td,
h1,
h2,
h3 {
    overflow-wrap: break-word;
}


/* ---------------------------------------------------------
   8. Reduced motion (2.3.3 / user preference).
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .blog-card:hover,
    .blog-card:focus {
        transform: none !important;
    }
}


/* ---------------------------------------------------------
   9. Windows High Contrast / forced colours: buttons drawn
   only with a background would lose their edges.
   --------------------------------------------------------- */

@media (forced-colors: active) {
    .button-dark,
    .button-blue,
    .submit-session,
    .navbar-login-button,
    .login-submit-button,
    .question-nav-item,
    .practice-session-card {
        border: 1px solid ButtonText;
    }

    :focus-visible {
        outline-color: Highlight !important;
    }
}