/* ══════════════════════════════════════════════════════════════
   MODE ACADEMY AFRICA — polish layer for the legacy components, v2 palette

   Derived from ma-africa-polish.css. Three groups were dropped rather than
   recoloured, because the v2 system now owns them:
     • the Kente band and footer hairline — the new header/footer replace them;
     • the nav and language-switcher rules — that markup no longer exists;
     • the :root block — its --afr-* names collided with the design tokens in
       afr.css and silently overrode them.
   What remains is the interaction polish the not-yet-converted pages use.
   Shadows were re-weighted for a light ground: the savanna values were tuned
   against an espresso background and read as smudges on cream.
   ══════════════════════════════════════════════════════════════ */

::selection { background: rgba(232,137,26,.24); color: #0A1A33; }

/* Accessible focus everywhere (keyboard users) */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--afr-orange);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Primary CTAs: subtle lift, confident weight */
.ma-cta, .ma-hero__btn, .ma-auth-pair {
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
    will-change: transform;
}
.ma-hero__btn:hover, .ma-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px -10px rgba(232,137,26,.45);
}
.ma-hero__btn { letter-spacing: .4px; font-weight: 700; }

/* Cards & tiles: gentle hover lift */
.ma-card, .ma-course-tile, .ma-vid-card, .ma-glass, .ma-course-card,
.ma-game__cell, .ma-anim__main {
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ma-card:hover, .ma-course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(10,26,51,.06), 0 26px 64px rgba(10,26,51,.10);
}
/* Media tiles keep their dark treatment, so they keep the deeper shadow. */
.ma-course-tile:hover, .ma-vid-card:hover,
.ma-game__cell:hover, .ma-anim__main:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px -24px rgba(0,0,0,.5);
}
.ma-course-tile:hover .ma-course-tile__cta { color: var(--afr-orange); }

/* Typography: tighter, more editorial headings */
.ma-hero__title, .ma-section-title, .ma-headline-dark, .ma-headline-light,
.ma-page-hero__title {
    letter-spacing: -.02em;
    text-wrap: balance;
}
.ma-section-eyebrow, .ma-eyebrow-left, .ma-page-hero__eyebrow {
    letter-spacing: .22em;
}

/* Section eyebrows: a small tick before the label */
.ma-section-eyebrow::before, .ma-eyebrow-left::before {
    content: "";
    display: inline-block;
    width: 18px; height: 2px;
    margin-right: 10px;
    vertical-align: middle;
    background: var(--afr-orange);
}

a { transition: color .15s ease; }

@media (prefers-reduced-motion: reduce) {
    .ma-card, .ma-course-tile, .ma-vid-card, .ma-hero__btn, .ma-cta,
    .ma-course-card, .ma-game__cell, .ma-anim__main { transition: none !important; }
    .ma-card:hover, .ma-course-tile:hover, .ma-vid-card:hover,
    .ma-card:hover, .ma-course-card:hover,
    .ma-hero__btn:hover, .ma-cta:hover { transform: none !important; }
}

/* Same correction for the legacy eyebrows: gold on cream reads at ~2:1.
   !important is needed because the generated sheet carries it on the source
   rule; this is the one place that flag is answered rather than introduced. */
.ma-page-hero__eyebrow,
body .ma-page-hero__eyebrow,
.ma-section-eyebrow,
.ma-eyebrow-left { color: var(--afr-accent-ink) !important; }
.ma-section-eyebrow::before,
.ma-eyebrow-left::before { background: var(--afr-accent-ink); }

/* Price badge: the source paints an accent fill and white text, which the
   transform preserves by design. At badge size white on orange is ~2.6:1, so
   this one takes navy ink instead — same fill, readable label. */
.ma-course-card__price, .ma-course-card__price del { color: var(--afr-navy); }