/* =========================================================================
   BASE — reset, elements, layout primitives, accessibility
   ========================================================================= */

/* -------------------------------------------------------------------------
   Body font: Mulish.
   Body font: Mulish (all weights), loaded from Google Fonts in inc/enqueue.php.
   Supports Latin + Cyrillic. Weights used: 300, 400, 500, 600, 700, 800, 900.
   ------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

body {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--fs-300);
    line-height: var(--lh-normal);
    color: var(--color-text);
    background: var(--color-background);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden; /* guard against accidental horizontal scroll */
    position: relative;
}
/* Site-wide background — light theme: a clean white base with a brand wash
   that runs as a vertical band on the left and fades lighter toward the right.
   The colour is stronger on the left edge and eases out to near-white on the
   right. Identical on every page (homepage, all-courses archive, single
   course, search — everywhere). Fixed so it stays put while scrolling; sits
   behind all content. Header and footer set their own bg. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--color-background);
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Light left→right magenta wash, identical on EVERY page.
       Two anti-banding measures combined:
       1) The gradient runs between two SOLID colours — a light magenta tint
          (#f5e4ef) → white — instead of fading one colour's alpha. Using all
          three RGB channels yields many more intermediate shades and, because
          each channel's steps fall at different widths, no single hard vertical
          line forms.
       2) A tiled feTurbulence noise layer blended over it (soft-light) DITHERS
          the remaining steps — effective ~0.9 of one 8-bit level, enough to
          scatter the band edges while staying invisible as grain. */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"),
        linear-gradient(to right, #f5e4ef 0%, #ffffff 90%);
    background-size: 160px 160px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, 0 0;
    background-blend-mode: soft-light, normal;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--color-background);
}

img, picture, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    margin: 0 0 var(--space-sm);
    line-height: var(--lh-tight);
    font-weight: var(--fw-bold);
    color: inherit;
    text-wrap: balance;
}
h1 { font-size: var(--fs-700); }
h2 { font-size: var(--fs-600); }
h3 { font-size: var(--fs-500); }
h4 { font-size: var(--fs-400); }

p { margin: 0 0 var(--space-sm); max-width: 70ch; }

a { color: var(--color-accent-600); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-primary); }

ul, ol { margin: 0 0 var(--space-sm); padding-left: 1.25rem; }

/* ---- Focus visibility (WCAG 2.2) ---- */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ---- Skip link ---- */
.mdt-skip-link {
    position: absolute;
    left: var(--space-sm);
    top: -100px;
    z-index: 9999;
    background: var(--color-primary);
    color: #fff;
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: top var(--transition);
}
.mdt-skip-link:focus { top: var(--space-sm); color: #fff; }

/* ---- Screen-reader-only ---- */
.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0);
    white-space: nowrap; border: 0;
}

/* ---- Layout primitives ---- */
.mdt-container {
    width: 100%;
    /*max-width: var(--container-width);*/
	max-width: 90%;
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.mdt-container--wide { max-width: var(--container-wide); }
.mdt-container--narrow { max-width: var(--container-narrow); }

.mdt-section { padding-block: var(--space-2xl); }
.mdt-section--sm { padding-block: var(--space-xl); }
.mdt-section--flush-top { padding-top: 0; }

/* Section background variants — LIGHT THEME.
   Sections sit on a light surface with dark, legible text. The former "dark"
   variant now renders on the light alternate surface too, so pages that mark a
   section as --dark still read correctly against the white page. Headings and
   body copy are dark. Header and footer set their own backgrounds. */
/* All content section variants are transparent so the site-wide magenta wash
   (body::after) shows through identically on every page — homepage, all-courses,
   search, single course. Text stays dark for legibility on the light wash.
   Small elements (cards, langinfo) keep their own solid surface; header/footer
   set their own backgrounds; --primary remains a solid branded band. */
.mdt-section--light,
.mdt-section--dark,
.mdt-section--surface {
    background: transparent;
    color: var(--color-text);
}
/* --primary stays a genuine branded band (white text on the MDT gradient) */
.mdt-section--primary {
    background: var(--gradient-horizontal);
    color: var(--color-text-invert);
}
.mdt-section--light h1, .mdt-section--light h2, .mdt-section--light h3, .mdt-section--light h4,
.mdt-section--surface h1, .mdt-section--surface h2, .mdt-section--surface h3, .mdt-section--surface h4,
.mdt-section--dark h1, .mdt-section--dark h2, .mdt-section--dark h3, .mdt-section--dark h4 { color: var(--color-primary); }
.mdt-section--primary h1, .mdt-section--primary h2, .mdt-section--primary h3, .mdt-section--primary h4 { color: #fff; }
.mdt-section--light p, .mdt-section--surface p, .mdt-section--dark p { color: var(--color-text); }
.mdt-section--primary p { color: var(--color-text-invert-muted); }

.mdt-eyebrow {
    display: inline-block;
    font-size: var(--fs-200);
    font-weight: var(--fw-semibold);
    color: var(--color-accent);
    margin-bottom: var(--space-2xs);
}
.mdt-section--dark .mdt-eyebrow,
.mdt-section--primary .mdt-eyebrow { color: var(--color-accent); }

.mdt-section__head { max-width: 62ch; margin-bottom: var(--space-lg); }
.mdt-section__head--center { margin-inline: auto; text-align: center; }

/* eOppiva collection title: heading + inline "Take a closer look" link,
   with a short decorative underline under the heading. */
.mdt-sectionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-sm) var(--space-lg);
    margin-bottom: var(--space-lg);
}
.mdt-sectionbar .mdt-section__head { margin-bottom: 0; }
.mdt-sectionbar__title {
    position: relative;
    margin: 0;
    padding-bottom: 12px;
    font-weight: var(--fw-bold);
}
.mdt-sectionbar__title::after {
    content: ""; position: absolute; left: 0; bottom: 0;
    width: 100%; max-width: 374px; height: 1px; background: currentColor;
}
.mdt-sectionbar__link {
    font-size: var(--fs-400);
    text-decoration: underline;
    text-underline-offset: 6px;
    color: inherit;
    white-space: nowrap;
}
.mdt-sectionbar__link:hover { color: var(--color-accent); }
.mdt-section__lead { max-width: 70ch; margin: 0 0 var(--space-lg); font-size: var(--fs-400); color: var(--color-text-muted); }
.mdt-section--dark .mdt-section__lead { color: var(--color-text-muted); }
.mdt-section--primary .mdt-section__lead { color: var(--color-text-invert-muted); }

/* Utility */
.mdt-visually-flush { margin: 0; }
.mdt-text-center { text-align: center; }
.mdt-mt-md { margin-top: var(--space-md); }