/* ==========================================================================
   Wormatia Modern — base: cascade layers, fonts, design tokens, light/dark,
   typography and the liquid page layout.

   The parent stylesheet is imported into the layer "mh". Unlayered rules
   (everything in this theme) always beat layered ones, so the parent keeps
   styling what we do not touch (widgets, sliders, comments) and never wins a
   conflict through ID selectors or long selector chains.
   ========================================================================== */

@layer mh;
@import url("../../mh-magazine/style.css") layer(mh);

/* ---------- Fonts (self-hosted, SIL OFL; see fonts/LICENSE-*) ---------- */

@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Big Shoulders Display";
    src: url("../fonts/big-shoulders-display-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 100 900;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-latin-wght-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Atkinson Hyperlegible Next";
    src: url("../fonts/atkinson-hyperlegible-next-latin-ext-wght-italic.woff2") format("woff2");
    font-weight: 200 800;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Design tokens ----------
   Colors use light-dark(): the active value follows `color-scheme`, which is
   the OS preference unless the visitor picked a scheme (html[data-theme]). */

:root {
    color-scheme: light dark;

    /* Brand */
    --wm-red: #e2001a;
    --wm-red-deep: #a8000f;
    --wm-red-ink: light-dark(#c10016, #ff5a6a);   /* red for text: AA on both surfaces */
    --wm-green: #1f7a3a;                           /* the crest's dragon */
    --wm-night: #121014;
    --wm-night-2: #1c181d;

    /* Surfaces & text */
    --wm-bg: light-dark(#f3f0ee, #0f0d10);
    --wm-surface: light-dark(#ffffff, #19161a);
    --wm-surface-2: light-dark(#f7f4f2, #221e23);
    --wm-surface-3: light-dark(#ece7e4, #2c272d);
    --wm-text: light-dark(#1b1719, #ece6e7);
    --wm-text-muted: light-dark(#5c5457, #aaa1a4);
    --wm-line: light-dark(#e3dcd9, #362f35);
    --wm-line-strong: light-dark(#cdc3bf, #4a4248);
    --wm-link: var(--wm-red-ink);
    --wm-focus: #ffd400;
    --wm-shadow: light-dark(0 1px 2px rgb(40 10 14 / 6%), 0 1px 2px rgb(0 0 0 / 40%));
    --wm-shadow-lg: light-dark(0 18px 48px -12px rgb(60 10 18 / 22%), 0 18px 48px -12px rgb(0 0 0 / 70%));

    /* Type */
    --wm-font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif-condensed, Impact, sans-serif;
    --wm-font-body: "Atkinson Hyperlegible Next", "Segoe UI", system-ui, -apple-system, sans-serif;
    --wm-step--1: clamp(0.82rem, 0.79rem + 0.1vw, 0.88rem);
    --wm-step-0: clamp(1rem, 0.97rem + 0.05vw, 1.03rem);
    --wm-step-1: clamp(1.1rem, 1.05rem + 0.2vw, 1.25rem);
    --wm-step-2: clamp(1.3rem, 1.2rem + 0.45vw, 1.5rem);
    --wm-step-3: clamp(1.6rem, 1.4rem + 0.8vw, 1.95rem);
    --wm-step-4: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
    --wm-measure: 70ch;

    /* Layout: liquid up to 1760px, gutters grow with the viewport */
    --wm-gutter: clamp(1rem, 0.4rem + 2.6vw, 3rem);
    --wm-max: 1760px;
    --wm-radius: 14px;
    --wm-radius-sm: 8px;
    --wm-navbar-h: 52px;
    --wm-ease: cubic-bezier(.2, .7, .2, 1);
    --wm-sash: polygon(0 0, 100% 0, 100% calc(100% - var(--wm-cut)), 0 100%);
    --wm-cut: clamp(12px, 1.8vw, 28px);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Smooth page-to-page navigation where supported (cross-document view transitions). */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Base ---------- */

html {
    font-size: 100%;
    scroll-padding-top: calc(var(--wm-navbar-h) + var(--wp-admin--admin-bar--height, 0px) + 16px);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body.wm-theme {
    margin: 0;
    font-family: var(--wm-font-body);
    font-size: var(--wm-step-0);
    line-height: 1.65;
    color: var(--wm-text);
    background: var(--wm-bg);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
}

.wm-theme h1, .wm-theme h2, .wm-theme h3, .wm-theme h4, .wm-theme h5, .wm-theme h6 {
    font-family: var(--wm-font-display);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: 0.005em;
    color: var(--wm-text);
    text-wrap: balance;
    hyphens: auto;
    -webkit-hyphens: auto;
}
.wm-theme h1 { font-size: var(--wm-step-4); }
.wm-theme h2 { font-size: var(--wm-step-3); }
.wm-theme h3 { font-size: var(--wm-step-2); }
.wm-theme h4 { font-size: var(--wm-step-1); }
.wm-theme h5, .wm-theme h6 { font-size: var(--wm-step-0); }

/* :where() keeps these at element specificity so component classes override them. */
:where(.wm-theme) a { color: inherit; text-decoration: none; transition: color .2s var(--wm-ease); }
:where(.wm-theme) a:hover { color: var(--wm-red-ink); }
.wm-theme p { text-wrap: pretty; }
.wm-theme img { max-width: 100%; height: auto; }
.wm-theme ::selection { color: #fff; background: var(--wm-red); }
.wm-theme small { font-size: 0.8em; }
.wm-theme hr { height: 0; border: 0; border-top: 1px solid var(--wm-line); margin: 2em 0; }

.wm-theme :focus-visible {
    outline: 3px solid var(--wm-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.wm-skip-link {
    position: fixed;
    top: 12px; left: 12px;
    z-index: 100000;
    padding: 12px 18px;
    font-weight: 700;
    color: #fff;
    background: var(--wm-red);
    border-radius: var(--wm-radius-sm);
    transform: translateY(-200%);
    transition: transform .2s var(--wm-ease);
}
.wm-skip-link:focus { transform: none; color: #fff; }

/* ---------- Liquid layout ---------- */

.wm-shell {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--wm-max);
    margin-inline: auto;
    padding-inline: var(--wm-gutter);
}

.wm-page { outline: none; }

/* Parent containers become fluid; the parent's floats are replaced by grid. */
.wm-theme .mh-container,
.wm-theme .mh-container-inner { max-width: none; }

.wm-theme .mh-wrapper {
    box-sizing: border-box;
    max-width: var(--wm-max);
    margin: 0 auto;
    padding: clamp(1rem, 2vw, 2rem) var(--wm-gutter) clamp(2.5rem, 5vw, 4.5rem);
    background: transparent;
}

.wm-theme .mh-main { display: block; }

/* Content + sidebar. Mobile: stacked. From 1024px: fluid content, sidebar 300–380px. */
.wm-theme .mh-main:has(> .mh-sidebar) {
    display: grid;
    gap: clamp(1.5rem, 3vw, 3.5rem);
}
@media (min-width: 1024px) {
    .wm-theme .mh-main:has(> .mh-sidebar) {
        grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 380px);
        align-items: start;
    }
}
.wm-theme .mh-content,
.wm-theme .mh-sidebar,
.wm-theme #main-content { float: none; width: auto; margin: 0; overflow: visible; }

.wm-theme .mh-sidebar { display: grid; gap: 1.5rem; align-content: start; }
@media (min-width: 1024px) {
    .wm-theme .mh-main > .mh-sidebar { position: sticky; top: calc(var(--wm-navbar-h) + var(--wp-admin--admin-bar--height, 0px) + 1.5rem); }
}

/* Parent column helpers as grid-friendly blocks */
.wm-theme [class*="mh-col-"] { box-sizing: border-box; }
.wm-theme .clearfix::after { content: ""; display: table; clear: both; }

/* Utility: a big "sash" label (red tag with a slanted edge) */
.wm-tag {
    display: inline-flex;
    align-items: center;
    gap: .4em;
    padding: .3em .75em .25em .6em;
    font-family: var(--wm-font-display);
    font-size: .85rem;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: 1.1;
    text-transform: uppercase;
    color: #fff;
    background: var(--wm-red);
    clip-path: polygon(0 0, 100% 0, calc(100% - .45em) 100%, 0 100%);
}

/* Icons drawn with CSS masks: they follow currentColor in both schemes */
.wm-icon { display: inline-block; width: 1.25rem; height: 1.25rem; background: currentColor; -webkit-mask: var(--wm-icon) center / contain no-repeat; mask: var(--wm-icon) center / contain no-repeat; }
.wm-icon--search { --wm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m16 16 5.5 5.5'/%3E%3C/svg%3E"); }
.wm-icon--close { --wm-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }

@media print {
    .wm-topbar, .wm-partners, .wm-navbar, .wm-footer__stage, .mh-sidebar, .mh-back-to-top { display: none !important; }
    .wm-masthead { min-height: 0 !important; }
    body.wm-theme { background: #fff; color: #000; }
}