/*
Theme Name:  TA Academy
Author:      TA Academy
Template:    twentytwentyfive
Description: Child theme for Meridian CNE Academy — hand-rolled front page, no page builder, no block editor.
Version:     1.0.1
License:     GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ta-academy
*/

/* ==========================================================================
   Design tokens

   Every foreground/background pair below was checked against WCAG 2.2 relative
   luminance (see tests/a11y/contrast.mjs). Two pairs that the original design
   failed are called out inline, because they are the reason extra tokens exist:

   1. --on-brand. The original palette used #fff on --brand. That passes in
      light mode (6.07:1) but FAILS in dark mode, where --brand lightens to
      #4fae8d and white-on-it drops to 2.70:1 (2.09:1 on --brand-strong).
      --brand-strong is doing two incompatible jobs at once: it must be LIGHT
      enough to read as a link on a dark background, and DARK enough to carry
      white button text. One value cannot do both, so button text gets its own
      token that inverts per colour scheme.

   2. --line-strong. --line is 1.24:1 against --bg (light) / 1.39:1 (dark).
      That is fine for a decorative card border, but WCAG 1.4.11 requires 3:1
      for the boundary of a form control, so inputs use --line-strong.
      axe-core cannot evaluate 1.4.11 — it is a manual-checklist item.

   ## Why every selector is scoped to .ta-academy-front

   This stylesheet is enqueued on every page of the site, not just the front
   page — a child theme's wp_enqueue_scripts callback has no cheap way to know
   which template will ultimately be chosen. Tutor LMS renders its own
   `.site-header` and `.site-footer` on /courses/, /lessons/ and /quiz/, so
   unscoped rules for those class names silently restyle the LMS: the HTML
   stays byte-identical while the rendering changes, which is exactly the kind
   of regression a markup diff cannot catch. Scoping to the body class
   .ta-academy-front — present only on front-page.php — makes this file inert
   everywhere else. The custom properties are scoped for the same reason, so
   they cannot shadow a variable of the same name in Tutor or the parent theme.
   ========================================================================== */
.ta-academy-front {
    --bg: #fbfaf7;
    --surface: #ffffff;
    --ink: #1a1d21;
    --muted: #5b6270;
    --brand: #1f6f54;
    --brand-strong: #185443;
    /* Darkened from #c47a2b, which is only 3.26:1 on --bg at .8rem/700. */
    --accent: #96591d;
    --line: #e5e2da;
    --line-strong: #767c86;
    /* Replaces `muted at 0.7 opacity`, which composited to 3.08:1. */
    --placeholder: #6b7280;
    --on-brand: #ffffff;
    --focus: #0b6bcb;
    --radius: 12px;
    --max: 68rem;
}

@media (prefers-color-scheme: dark) {
    .ta-academy-front {
        --bg: #141619;
        --surface: #1c1f24;
        --ink: #eef1f5;
        --muted: #a8b0bd;
        --brand: #4fae8d;
        --brand-strong: #6cc4a4;
        --accent: #e0a057;
        --line: #2c313a;
        --line-strong: #6b7280;
        --placeholder: #a8b0bd;
        /* Dark text on the lightened brand: 6.71:1 (8.69:1 on --brand-strong). */
        --on-brand: #141619;
        /* #0b6bcb is only 3.44:1 on the dark bg; this is 6.90:1. */
        --focus: #4da3ff;
    }
}

/* ===== base ===== */
.ta-academy-front {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 1rem/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.ta-academy-front *,
.ta-academy-front *::before,
.ta-academy-front *::after {
    box-sizing: border-box;
}

.ta-academy-front a {
    color: var(--brand-strong);
}

.ta-academy-front a:hover {
    text-decoration-thickness: 2px;
}

/* 2.4.11 / 2.4.13: a focus indicator that is visible on both surfaces. */
.ta-academy-front :focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* 2.4.1 Bypass Blocks */
.ta-academy-front .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--ink);
    color: var(--bg);
    border-radius: 0 0 8px 0;
    text-decoration: none;
    font-weight: 600;
}

.ta-academy-front .skip-link:focus {
    left: 0;
}

/* ===== layout ===== */
.ta-academy-front .site-header,
.ta-academy-front main,
.ta-academy-front .site-footer,
.ta-academy-front .eyebrow,
.ta-academy-front .hero,
.ta-academy-front .course-card,
.ta-academy-front .verify {
    width: min(100% - 2rem, var(--max));
    margin-inline: auto;
}

.ta-academy-front .site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    padding-block: 1rem;
}

.ta-academy-front .brand {
    font-weight: 700;
    font-size: 1.15rem;
    color: var(--ink);
    text-decoration: none;
}

.ta-academy-front .brand span {
    color: var(--brand-strong);
}

.ta-academy-front .site-nav {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.ta-academy-front .hero {
    padding-block: clamp(3rem, 8vw, 6rem) 2.5rem;
}

.ta-academy-front .eyebrow {
    text-transform: uppercase;
    letter-spacing: .12em;
    font-size: .8rem;
    color: var(--accent);
    font-weight: 700;
    margin: 0;
}

.ta-academy-front .hero h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.08;
    letter-spacing: -.02em;
    margin: .5rem 0 .75rem;
    max-width: 18ch;
}

.ta-academy-front .lede {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    color: var(--muted);
    max-width: 62ch;
    margin: 0;
}

.ta-academy-front .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.ta-academy-front .btn {
    display: inline-block;
    padding: .7rem 1.3rem;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.4;
}

.ta-academy-front .btn-primary {
    background: var(--brand);
    color: var(--on-brand);
}

.ta-academy-front .btn-primary:hover {
    background: var(--brand-strong);
    color: var(--on-brand);
}

.ta-academy-front .btn-ghost {
    border-color: var(--line-strong);
    color: var(--ink);
    background: transparent;
}

.ta-academy-front .btn-ghost:hover {
    background: var(--surface);
}

/* ===== course card ===== */
.ta-academy-front .course-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-block: 2rem;
}

.ta-academy-front .course-meta {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ta-academy-front .course-meta li {
    font-size: .8rem;
    font-weight: 600;
    color: var(--brand-strong);
    background: color-mix(in srgb, var(--brand) 12%, transparent);
    padding: .25rem .6rem;
    border-radius: 999px;
}

.ta-academy-front .course-card h2 {
    font-size: clamp(1.3rem, 3vw, 1.8rem);
    margin: .75rem 0 .5rem;
}

.ta-academy-front .course-card h2 a {
    color: var(--ink);
    text-decoration: none;
}

.ta-academy-front .course-card h2 a:hover {
    text-decoration: underline;
}

.ta-academy-front .course-card p {
    color: var(--muted);
    max-width: 66ch;
}

.ta-academy-front .card-link {
    font-weight: 600;
}

/* ===== verify ===== */
.ta-academy-front .verify {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
    margin-bottom: 3rem;
}

.ta-academy-front .verify h2 {
    margin-top: 0;
}

.ta-academy-front .verify-form label {
    display: block;
    font-weight: 600;
    margin-bottom: .4rem;
}

.ta-academy-front .verify-row {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.ta-academy-front .verify-row input {
    flex: 1 1 18rem;
    padding: .7rem 1rem;
    font-size: 1rem;
    font-family: inherit;
    /* 1.4.11: a form control boundary needs 3:1, --line is only 1.24:1. */
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--ink);
}

.ta-academy-front .verify-row input::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

.ta-academy-front .hint {
    font-size: .85rem;
    color: var(--muted);
}

.ta-academy-front .verify-status {
    min-height: 1.5em;
    font-weight: 600;
    margin: .75rem 0 0;
}

.ta-academy-front .verify-status[data-state="ok"] {
    color: var(--brand-strong);
}

.ta-academy-front .verify-status[data-state="bad"] {
    color: var(--accent);
}

/* The JS builds a <dl> of dt/dd pairs directly inside #verify-result, so the
   layout targets that structure rather than a wrapper element. */
.ta-academy-front .verify-result {
    margin: 1rem 0 0;
}

.ta-academy-front .verify-result dl {
    display: grid;
    grid-template-columns: minmax(11rem, max-content) 1fr;
    gap: .35rem 1rem;
    margin: 0;
    padding: 0;
}

.ta-academy-front .verify-result dt {
    font-weight: 600;
    border-top: 1px solid var(--line);
    padding-top: .35rem;
}

.ta-academy-front .verify-result dd {
    margin: 0;
    color: var(--muted);
    border-top: 1px solid var(--line);
    padding-top: .35rem;
    overflow-wrap: anywhere;
}

.ta-academy-front .verify-pdf {
    margin-top: 1rem;
}

@media (max-width: 34rem) {

    .ta-academy-front .verify-result dl {
        grid-template-columns: 1fr;
        gap: .15rem;
    }

    .ta-academy-front .verify-result dd {
        border-top: 0;
        padding-top: 0;
        margin-bottom: .35rem;
    }
}

/* ===== footer ===== */
.ta-academy-front .site-footer {
    padding-block: 1.5rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {

    .ta-academy-front *,
    .ta-academy-front *::before,
    .ta-academy-front *::after {
        transition: none !important;
        animation: none !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Third-party remediation: Tutor LMS muted-text contrast (WCAG 1.4.3)

   This is the ONE deliberately unscoped rule in this file, and the exception
   is load-bearing rather than an oversight:

   - It must apply on the Tutor course page, whose <body> does NOT carry
     .ta-academy-front (that class marks hand-rolled templates only). Scoping
     it would make it a no-op exactly where it is needed.
   - It cannot collide the way a selector override would. It reassigns Tutor's
     OWN custom property, so only rules that read var(--tutor-color-muted)
     change. No element selector is touched, so the .site-header/.site-footer
     class-collision failure mode does not apply here.

   Tutor ships --tutor-color-muted: #757c8e on :root, which renders at 4.17:1
   on #ffffff and 3.85:1 on the #f4f6f9 panel — both below the 4.5:1 that
   SC 1.4.3 requires for normal-size text. axe-core flags four nodes: the
   course meta text, the Wishlist button, the Share button, and the "Free
   access this course" notice.

   #676e80 is a hue-preserving darkening of the same token: 5.10:1 on #ffffff
   and 4.71:1 on #f4f6f9. The obvious candidate #6b7280 was rejected — it
   reaches only 4.47:1 on #f4f6f9 and would still fail.

   This is a fix, not a suppression: no axe rule, tag or node is disabled.
   Evidence and attribution: tests/a11y/conformance.md, exception #2.
   ========================================================================== */

:root {
    --tutor-color-muted: #676e80;
}