/* ==========================================================================
   ECOMpedia Editorial — Premium Stylesheet
   ========================================================================== */

/* ---------- DESIGN TOKENS ---------- */
:root {
    /* Color System */
    --color-bg:           #FAFAF7;
    --color-bg-warm:      #F5F3EE;
    --color-bg-card:      #FFFFFF;
    --color-bg-dark:      #0F0F14;
    --color-bg-dark-2:    #1A1A24;

    --color-ink:          #1A1A24;
    --color-ink-light:    #6B6B7B;
    --color-ink-muted:    #9B9BAB;
    --color-ink-inverse:  #FAFAF7;

    --color-accent:       #C8553D;
    --color-accent-light: #E8765F;
    --color-accent-bg:    #FDF0ED;
    /* Filled buttons only, kept separate from --color-accent so recolouring the CTAs does not
       also move the decorative accents (section dots, category chips, the banner's "%",
       timeline markers) or the semantic vote states. Change these two and every button follows. */
    --color-btn:          #CC4C4C;
    --color-btn-hover:    #D96666;

    --color-border:       #E8E6E1;
    --color-border-dark:  #2A2A38;

    --color-gold:         #B8860B;
    --color-emerald:      #2D6A4F;
    --color-header:       #E84C4C;

    /* Typography */
    --font-display:  'Funnel Display', Arial, sans-serif;
    --font-body:     'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:     'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing Scale */
    --space-xs:  0.25rem;
    --space-sm:  0.5rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Layout */
    --container-max: 1240px;
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;

    /* The house featured-image ratio, measured not chosen: across the 400 most recent posts
       with a thumbnail the median, p10 AND p90 are all exactly 1.83 (768x419), 98.2% fall in
       1.75–1.95, and none is portrait. EVERY container that crops a post thumbnail should use
       this — archive cards, related posts, the mega-menu cards and its loading skeleton. Any
       other value silently crops the site's own house format. */
    --card-media: 768 / 419;

    /* Shadows */
    --shadow-sm:  0 1px 2px rgba(15,15,20,0.04);
    --shadow-md:  0 4px 16px rgba(15,15,20,0.06);
    --shadow-lg:  0 8px 32px rgba(15,15,20,0.08);
    --shadow-xl:  0 16px 48px rgba(15,15,20,0.12);

    /* Transitions */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --transition: 0.3s var(--ease-out);
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-ink);
    line-height: 1.6;
    overflow-x: hidden;
}

h1 {
    font-family: var(--font-display);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition);
}

ul, ol { list-style: none; }

/* ---------- CONTAINER ---------- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* ---------- TOP STRIP (after header) ----------
   A contained mosaic, not a full-bleed row of six identical cards. The strip sits inside
   .container so it lines up with everything below it instead of running edge to edge. */
.top-strip {
    width: 100%;
    padding: var(--space-md) 0 0;
    background: var(--color-bg);
    transition: filter 0.3s ease;
}

/* 6 columns x 2 rows. Spans are assigned by nth-child below:
     ┌───────┬───────────────┬───────────────┐
     │       │       B       │       C       │
     │   A   ├───────────────┼───────┬───────┤
     │       │       D       │   E   │   F   │
     └───────┴───────────────┴───────┴───────┘
   Rows are a clamp rather than an aspect-ratio: with six different tile shapes there is no one
   ratio to set, so the ROW is the fixed dimension and each tile's proportions fall out of its
   span. That is also what keeps the whole strip's height predictable — it sits above the fold
   ahead of the community card and the hero, both of which are already fighting for that space. */
.top-strip__grid {
    display: grid;
    /* FOUR columns, five tiles, ONE shape at two sizes:
         ┌───────────────┬───────┬───────┐
         │               │   B   │   C   │
         │       A       ├───────┼───────┤
         │               │   D   │   E   │
         └───────────────┴───────┴───────┘
       Every tile is the 1.83 house ratio, so object-fit has nothing to crop. The previous
       version fixed the ROW height and let each span produce its own shape — three different
       box ratios (1.07 / 2.18 / 1.07) against a uniform 1.83 source, discarding an average of
       29% of every image and 42% of the WIDTH on the square-ish tiles.

       The arrangement is forced, not chosen: for a 2-row tile to hold the same ratio as a
       1-row tile it must be almost exactly twice as wide, which makes "2 cols x 2 rows beside
       1 col x 1 row" the only layout that works. Measured at a 1232px container: smalls
       302x165 (1.83), big 612x338 (1.81) — the 0.8% is gap arithmetic and is invisible. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-sm);
}

.top-strip__card {
    position: relative;
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: var(--radius-md);
}

/* Every tile carries the house ratio. The small ones get it from aspect-ratio; the big one
   inherits it from spanning exactly two of those rows plus the gap between them, which is why
   it must NOT declare its own — a declared ratio would fight the span and leave a few pixels of
   gap under it. */
.top-strip__card {
    aspect-ratio: var(--card-media, 768 / 419);
}

.top-strip__card:nth-child(1) {
    grid-column: span 2;
    grid-row: span 2;
    aspect-ratio: auto;
}

/* Scrim behind the caption — now a COLOURED wash, one hue per tile.
   Was a flat rgba(0,0,0,0.26) over the whole card, which is the worst of both: not dark enough
   to carry white text over a bright photo, while still dulling the image everywhere. A
   bottom-weighted gradient puts the density where the words are and clears to fully transparent
   by the top of the frame, so the photo reads as a photo.

   ⚠️ The ALPHA CURVE IS UNCHANGED from the neutral version — only the colour is new. An earlier
   pass chased worst-single-pixel contrast up to 6.3:1 and the verdict was "way too dark". The
   six stops below are the density that was signed off; adding hue must not become an excuse to
   add weight. Legibility still comes mostly from the title's two-layer text-shadow, which costs
   the image nothing. Both states share the same 6-stop shape so `transition: background`
   interpolates.

   --strip-r/g/b rather than a hex, because rgba() needs the channels separately to vary alpha
   across the six stops. */
.top-strip__card::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--strip-wash) 88%, transparent)   0%,
        color-mix(in srgb, var(--strip-wash) 78%, transparent)  18%,
        color-mix(in srgb, var(--strip-wash) 56%, transparent)  42%,
        color-mix(in srgb, var(--strip-wash) 30%, transparent)  65%,
        color-mix(in srgb, var(--strip-wash) 10%, transparent)  84%,
        transparent                                            100%
    );
    transition: background 0.4s ease;
}

.top-strip__card:hover::after {
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--strip-wash) 94%, transparent)   0%,
        color-mix(in srgb, var(--strip-wash) 86%, transparent)  18%,
        color-mix(in srgb, var(--strip-wash) 66%, transparent)  42%,
        color-mix(in srgb, var(--strip-wash) 42%, transparent)  65%,
        color-mix(in srgb, var(--strip-wash) 21%, transparent)  84%,
        color-mix(in srgb, var(--strip-wash) 12%, transparent) 100%
    );
}

/* The "Tropic pop" palette, one colour per tile, cycled by position.
   Deterministic rather than randomised: a genuinely random pick would change the strip's
   identity on every page load, could deal the same colour to two neighbours, and could not be
   measured. Five colours across five tiles is already every tile distinct.

   ⚠️ These are LIGHT summer colours and the tiles carry WHITE captions, so they cannot simply
   be dropped in where the old deep hues were — white on #FED32C measures about 1.3:1. What
   makes them usable is that the tile is built from TWO hue layers, and they get different jobs:

     --strip-hue   the palette colour itself, used by the duotone multiply over the whole tile.
                   This is what the reader sees as the tile's colour.
     --strip-wash  a darkened version of that same colour, used ONLY by the caption scrim at the
                   bottom. Derived with color-mix so it is always the same hue family, never a
                   separate value to keep in sync.

   So each tile reads as its tropic colour and deepens into a rich version of itself exactly
   where the words are. Change a --strip-hue and both layers follow. */
/* Three values per tile, all derived from one palette colour so a hue change carries everywhere:
     --strip-hue   the raw palette swatch. Identity only; never painted at full strength, because
                   multiplying a LIGHT colour barely darkens and the tiles came out pastel.
     --strip-tone  the deepened version actually used by the duotone over the whole tile. This is
                   what gives the strip its weight.
     --strip-wash  a deeper still version, used only by the caption scrim at the bottom.

   ⚠️ Ink is WHITE again. It was briefly near-black, when the tiles were painted at full palette
   strength and were far too pale to carry white type — at that lightness even a 92%-black scrim
   left the sky and yellow tiles at p95 3.2 against the 4.5 a 15px title needs. Deepening the
   tone fixes the cause rather than the symptom, so the ink and its shadow go back. If the tone
   is ever lightened again, all three have to move together. */
.top-strip__card {
    --strip-ink: #FFFFFF;

    /* sRGB fallback first. Mixing toward a near-black is the obvious way to deepen a colour and
       it is the wrong one: it drags every hue toward that black's own hue and strips the chroma
       out, so teal came back grey-green, pink muddy maroon and yellow olive. The palette stopped
       being recognisable. Kept only for browsers without relative colour syntax. */
    --strip-tone: color-mix(in srgb, var(--strip-hue) 52%, #241030);
    --strip-wash: color-mix(in srgb, var(--strip-hue) 20%, #0C0510);

    /* The real values. oklch(from …) rebuilds each swatch at a fixed low LIGHTNESS while keeping
       its hue and pushing chroma UP, which is what "deep" should mean — a dark saturated teal,
       not a desaturated one. Lightness is the only thing that changes between tone and wash. */
    --strip-tone: oklch(from var(--strip-hue) 0.46 calc(c * 1.45) h);
    --strip-wash: oklch(from var(--strip-hue) 0.24 calc(c * 1.2) h);
}

.top-strip__card:nth-child(5n + 1) { --strip-hue: #5BC8B2; }  /* teal   */
.top-strip__card:nth-child(5n + 2) { --strip-hue: #FE91A3; }  /* pink   */
.top-strip__card:nth-child(5n + 3) { --strip-hue: #A0D9E8; }  /* sky    */
.top-strip__card:nth-child(5n + 4) { --strip-hue: #FF845A; }  /* coral  */
.top-strip__card:nth-child(5n + 5) { --strip-hue: #FED32C; }  /* yellow */

.top-strip__img {
    position: absolute;
    inset: 0;
    z-index: 0;
}

/* Greyscale is what makes the colour actually land.
   The six source images have nothing in common tonally — three are logo shots on near-white
   (Amazon, Shein, eAWB) and three are photographs. A bottom-weighted scrim over that leaves the
   white ones reading as grey cards with a tinted hem, which is why the first coloured pass
   looked like no change at all. Draining the image to mono and multiplying the hue back over it
   is a duotone: the whole tile takes the colour, and six mismatched pictures become one set.
   Hover releases most of the grey, so the real photograph is the reward for pointing at it. */
/* `contain`, not `cover`.
   The mosaic has three box ratios (1.07, 2.18, 1.07) and every source image is 1.83, so cover
   was discarding an average of 29% of each picture — 42% of the WIDTH on the two square-ish
   tiles, which is what turned "amazon.com" into "mazon.co" and clipped the Shein wordmark.

   Containing shows the whole frame, which leaves the rest of the tile to fill. A flat colour
   BANDED against the image: the multiply overlay runs over both, so a constant backdrop and a
   varying photograph land at different tones and the letterbox edge becomes a visible line —
   worst on the logo shots, where the picture is near-white and the fill was mid grey. A scaled,
   blurred copy of the same image has no edge to band against, and it is the only fill that is
   automatically the right colour for every picture. */
.top-strip__img::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--tile-src) center / cover no-repeat;
    /* Blur samples beyond the element, so an un-scaled layer shows a soft transparent rim at
       the edges. 1.15 pushes that rim outside the tile. */
    transform: scale(1.15);
    filter: grayscale(1) blur(22px) brightness(1.04);
}

.top-strip__img img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: grayscale(1) contrast(1.08) brightness(1.04);
    transition: transform 0.5s var(--ease-out), filter 0.4s ease;
}

/* The colour itself, multiplied over the mono image. A gradient, not a flat fill: light at the
   top so the picture still shows through, full strength at the bottom where the title sits. */
/* z-index 2 so the hue lands on BOTH the contained image and the blurred fill behind it.
   Without it the img (z-index 1) paints over this layer and only the backdrop gets coloured. */
.top-strip__img::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    mix-blend-mode: multiply;
    /* --strip-tone, not --strip-hue. Painting the raw swatch here was what made the strip look
       washed out: multiply against a light colour tints the mono image without giving it any
       weight. The deepened tone keeps the hue clearly recognisable while the tile reads as a
       saturated block rather than a pastel one. */
    background: linear-gradient(
        to top,
        var(--strip-tone)                                       0%,
        color-mix(in srgb, var(--strip-tone) 90%, transparent) 45%,
        color-mix(in srgb, var(--strip-tone) 70%, transparent) 100%
    );
    transition: opacity 0.4s ease;
}

.top-strip__card:hover .top-strip__img img {
    transform: scale(1.06);
    filter: grayscale(0.12) contrast(1.02) brightness(1);
}

.top-strip__card:hover .top-strip__img::after {
    opacity: 0.55;
}

/* Content block at bottom. It used to slide up 32px on hover to uncover the meta band; with
   that band gone the slide would just open a gap, so the caption now stays put. */
.top-strip__overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
}

.top-strip__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--strip-ink, #0F0F14);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Two layers doing different jobs: a tight 2px shadow for a hard edge against whatever pixel
       sits directly behind a stroke, and a wide 14px one to lift the whole word off a busy photo.
       Local contrast exactly where it is needed, so the scrim can stay light and the image stays
       legible.

       ⚠️ Must match --strip-ink. This was briefly white, while the ink was near-black on the
       pastel version of the palette — a shadow the same colour as the text does nothing at all,
       so the two always flip together. */
    text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 14px rgba(0,0,0,0.6);
}

/* ---------- HEADER: GREEN BAR ---------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-bar {
    /* Horizontal: dark on the left easing into the brand red, echoing the mega menu panel,
       which runs red-to-navy. The bar itself stays full-bleed; only its contents are capped. */
    background: linear-gradient(90deg, #A33636 0%, var(--color-header, #E84C4C) 100%);
    color: #fff;
}

.header-bar__inner {
    /* Three zones: logo left, nav centred, controls right.
       1fr auto 1fr is what makes the nav sit at the TRUE centre of the container — with flex
       it would only land wherever the logo pushed it, which is what made the old header look
       "a little bit centred". The outer 1fr columns absorb the difference between the logo's
       width and the controls' width. */
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 52px;
    /* Width, centring and horizontal padding come from the .container class this element also
       carries, so the header tracks whatever page containers do rather than duplicating a
       number that is already wrong (--container-max says 1240px; Tailwind's .container wins
       at 1536px). Only the gap is set here. */
    gap: var(--space-lg);
}

.header-bar__inner > .site-logo {
    justify-self: start;
}

.header-bar__inner > .header-bar__nav {
    justify-self: center;
}

.header-bar__inner > .header-bar__right {
    justify-self: end;
}

/* Hamburger toggle */
.header-bar__toggle {
    display: none;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: var(--space-xs);
    flex-shrink: 0;
    /* The icon is 24px and the padding took the button to 28x28 — over WCAG 2.2's 24px floor
       but well under the 44px both Apple and Google ask for on the primary nav control.
       Centring the icon in a 44px box grows the hit area without moving the glyph. */
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

/* Logo */
.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    margin-right: var(--space-md);
}

.site-logo__mark {
    display: inline-flex;
    align-items: center;
    gap: 0;
    font-family: 'Noto Sans', sans-serif;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.5px;
}

.site-logo__ecom {
    font-weight: 800;
    color: #fff;
}

.site-logo__pedia {
    font-weight: 400;
    color: rgba(255,255,255,0.85);
}

/* Navigation inside bar */
.header-bar__nav {
    flex: 1;
    min-width: 0;
}

.nav-menu {
    display: flex;
    align-items: center;
    /* Was 0, so the Articole and Întrebări pills shared an edge and read as one control. */
    gap: var(--space-sm);
}

.nav-menu > .menu-item {
    position: relative;
}

.nav-menu > .menu-item > a {
    display: flex;
    align-items: center;
    padding: 0 var(--space-sm);
    height: 52px;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    white-space: nowrap;
    position: relative;
    transition: background var(--transition);
}

.nav-menu > .menu-item > a:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}

.nav-menu > .menu-item.current-menu-item > a {
    background: rgba(255,255,255,0.1);
}

/* Dropdown */
.nav-menu > .menu-item > .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: all var(--transition);
    z-index: 200;
}

.nav-menu > .menu-item:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.sub-menu .menu-item a {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-light);
    border-bottom: 1px solid var(--color-border);
    transition: all var(--transition);
}

.sub-menu .menu-item:last-child a {
    border-bottom: none;
}

.sub-menu .menu-item a:hover {
    color: var(--color-accent);
    background: var(--color-accent-bg);
    padding-left: calc(var(--space-lg) + 4px);
}

/* Right side: social + search */
.header-bar__right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: auto;
    flex-shrink: 0;
}

.header-bar__social {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.header-bar__social:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

.header-bar__search {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    border: none;
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    font-family: var(--font-display);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.header-bar__search:hover {
    background: rgba(255,255,255,0.25);
    color: #fff;
}

/* ---------- HEADER ACCOUNT / LOGIN ----------
   Same pill shape as the social and search controls so the right-hand group reads as one set. */
.header-bar__login,
.header-bar__account-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 var(--space-md);
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.85);
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.header-bar__login:hover,
.header-bar__account-toggle:hover,
.header-bar__account[open] .header-bar__account-toggle {
    background: rgba(255,255,255,0.28);
    color: #fff;
}

.header-bar__login:focus-visible,
.header-bar__account-toggle:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.header-bar__account {
    position: relative;
}

/* Kill the native disclosure triangle — the chevron below is the affordance. */
.header-bar__account-toggle {
    list-style: none;
}

.header-bar__account-toggle::-webkit-details-marker,
.header-bar__account-toggle::marker {
    display: none;
    content: '';
}

/* A migrated display name can be long; the pill must not push the header wider. */
.header-bar__account-toggle > span {
    max-width: 12ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-bar__account-chev {
    flex-shrink: 0;
    transition: transform var(--transition);
}

.header-bar__account[open] .header-bar__account-chev {
    transform: rotate(180deg);
}

/* The panel. z-index stays modest on purpose: .site-header is position:sticky with its own
   z-index, so it creates a stacking context and this value only competes INSIDE the header —
   raising it further would do nothing useful and could shadow the search overlay. */
.header-bar__account-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    min-width: 220px;
    padding: var(--space-sm);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* The name repeats inside the panel because the trigger truncates at 12ch and, on mobile, hides
   the label entirely — without this you could open the menu and not know whose account it is. */
.header-bar__account-who {
    display: block;
    padding: var(--space-xs) var(--space-sm) var(--space-sm);
    margin-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    white-space: normal;
}

.header-bar__account-menu a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.55rem var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-ink);
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.header-bar__account-menu a:hover,
.header-bar__account-menu a:focus-visible {
    background: var(--color-bg-warm);
    color: var(--color-accent);
}

.header-bar__account-out {
    color: var(--color-ink-light) !important;
}

.header-bar__account-out:hover {
    color: var(--color-btn) !important;
}

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-header, #1B9B4B);
    z-index: 200;
    transform: translateY(-100%);
    transition: transform var(--transition);
}

.search-overlay.is-open {
    transform: translateY(0);
}

.search-overlay__inner {
    display: flex;
    align-items: center;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-md) var(--space-lg);
    gap: var(--space-md);
}

.search-overlay__form {
    flex: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.search-overlay__input {
    flex: 1;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: var(--radius-sm);
    padding: var(--space-md) var(--space-lg);
    font-size: 1rem;
    color: #fff;
    font-family: var(--font-body);
    outline: none;
}

.search-overlay__input::placeholder {
    color: rgba(255,255,255,0.5);
}

.search-overlay__submit {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    padding: var(--space-sm);
}

.search-overlay__close {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 var(--space-sm);
    opacity: 0.7;
    transition: opacity var(--transition);
}

.search-overlay__close:hover {
    opacity: 1;
}

/* Sticky scroll shadow */
.site-header.is-scrolled .header-bar {
    box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

/* ---------- MEGA MENU ---------- */
.menu-item--mega {
    position: static !important;
}

.mega-trigger__link {
    display: flex !important;
    align-items: center;
    gap: 5px;
    font-family: var(--font-display) !important;
    font-size: 0.85rem !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 999px !important;
    padding: 0 var(--space-xl) !important;
    height: 36px !important;
    margin: 8px 0;
    transition: background var(--transition) !important;
}

.mega-trigger__link:hover {
    background: rgba(255,255,255,0.25) !important;
}

/* --- Întrebări split control ---
   The pill and "Adaugă întrebare" are separate <li>s (so hovering the add half does not open
   the mega panel) but read as one segmented control: the negative margin cancels the
   .nav-menu gap between just these two, and the facing corners are squared off. */
.menu-item--questions .mega-trigger__link {
    border-radius: 999px 0 0 999px !important;
    padding-right: var(--space-lg) !important;
}

.menu-item--add {
    margin-left: calc(var(--space-sm) * -1);
}

/* Selector must out-specify `.nav-menu > .menu-item > a` (0,3,1), which sets height:52px and
   its own padding — at plain `.nav-add` (0,1,0) the pill and this half sat on different
   baselines. The sibling pill solves the same problem with !important; this is tidier. */
.nav-menu > .menu-item--add > .nav-add {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    margin: 8px 0;
    padding: 0 var(--space-lg);
    border-radius: 0 999px 999px 0;
    /* Slightly lighter than the sibling pill so the split is legible without a hard divider */
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 1px 0 0 rgba(163, 54, 54, 0.35);
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition);
}

.nav-menu > .menu-item--add > .nav-add:hover,
.nav-menu > .menu-item--add > .nav-add:focus-visible {
    background: rgba(255, 255, 255, 0.36);
    color: #fff;
}

.nav-menu > .menu-item--add > .nav-add:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
}

/* Thin-stroke icon inside the nav pills; sized to sit optically with the 0.85rem label. */
.mega-trigger__icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.menu-item--mega:hover .mega-trigger__icon,
.menu-item--mega.is-open .mega-trigger__icon {
    opacity: 1;
}

.mega-trigger__chevron {
    transition: transform var(--transition);
    opacity: 0.7;
}

.menu-item--mega:hover .mega-trigger__chevron,
.menu-item--mega.is-open .mega-trigger__chevron {
    transform: rotate(180deg);
    opacity: 1;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    width: 100%;
    max-width: var(--container-max);
    background-image: radial-gradient(circle farthest-corner at 93.7% 21.8%, rgba(232,76,76,1) 0%, rgba(13,32,67,1) 90%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s var(--ease-out);
    z-index: 200;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    overflow: hidden;
}

/* Grid overlay pattern */
.mega-menu::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 80px 80px;
    pointer-events: none;
    z-index: 0;
}

/* Small cross markers at grid intersections */
.mega-menu::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.08) 1px, transparent 1px);
    background-size: 80px 80px;
    background-position: 0 0;
    pointer-events: none;
    z-index: 0;
}

/* Blur backdrop when mega-menu is open */
body.mega-open .top-strip,
body.mega-open .site-main,
body.mega-open .site-footer {
    filter: blur(6px);
    transition: filter 0.3s ease;
    pointer-events: none;
}

.menu-item--mega:hover .mega-menu,
.mega-menu.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu__inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px 220px 1fr;
    max-width: 100%;
    min-height: 480px;
}

/* Col 1: Parent categories */
.mega-menu__parents {
    background: rgba(0,0,0,0.15);
    padding: var(--space-md) 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mega-menu__parent-item {
    display: block;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: rgba(255,255,255,0.75);
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.mega-menu__parent-item:hover,
.mega-menu__parent-item.is-active {
    color: #fff;
    background: rgba(255,255,255,0.06);
    border-left-color: var(--color-accent);
}

/* Col 2: Subcategories */
.mega-menu__subcats {
    border-left: 1px solid rgba(255,255,255,0.06);
    border-right: 1px solid rgba(255,255,255,0.06);
    padding: var(--space-md) 0;
    overflow-y: auto;
}

.mega-menu__subcat-group {
    display: none;
    flex-direction: column;
}

.mega-menu__subcat-group.is-active {
    display: flex;
}

.mega-menu__subcat-item {
    display: block;
    padding: var(--space-xs) var(--space-lg);
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: rgba(255,255,255,0.7);
    transition: all 0.15s ease;
}

.mega-menu__subcat-item:hover,
.mega-menu__subcat-item.is-active {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.mega-menu__subcat-empty {
    font-family: var(--font-display);
    padding: var(--space-sm) var(--space-lg);
    font-size: 0.8rem;
    color: var(--color-ink-muted);
    opacity: 0.5;
    font-style: italic;
}

/* Col 3: Articles */
.mega-menu__articles {
    padding: var(--space-md) var(--space-lg);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    align-content: start;
    overflow-y: auto;
}

.mega-menu__placeholder {
    grid-column: 1 / -1;
    color: var(--color-ink-muted);
    text-align: center;
    padding-top: var(--space-3xl);
    font-size: 0.875rem;
}

/* Article card inside mega menu */
.mega-menu__article-card {
    display: block;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.mega-menu__article-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
    background: rgba(0,0,0,0.35);
}

/* House ratio, was 16/9 — a ~3% side crop on every mega-menu card for no reason. */
.mega-menu__article-thumb {
    aspect-ratio: var(--card-media, 16 / 9);
    overflow: hidden;
    /* Was var(--color-bg-dark) — a near-black fill that showed through for the whole
       aspect-ratio box whenever the image was missing or still loading. A translucent wash
       reads as "space for a picture" on the dark panel instead of a black slab. */
    background: rgba(255, 255, 255, 0.04);
}

/* Cards with no featured image keep the grid tidy: the body takes the height the thumb would
   have used rather than leaving a short, ragged card next to full-height neighbours. */
.mega-menu__article-card.is-textonly .mega-menu__article-body {
    padding-top: var(--space-md);
    padding-bottom: var(--space-md);
}

.mega-menu__article-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s var(--ease-out);
}

.mega-menu__article-card:hover .mega-menu__article-thumb img {
    transform: scale(1.05);
}

.mega-menu__article-body {
    padding: var(--space-sm) var(--space-md);
}

.mega-menu__article-cats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-bottom: 2px;
}

.mega-menu__article-cat {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-accent-light);
}

.mega-menu__article-title {
    font-family: var(--font-body);
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mega-menu__article-meta {
    display: flex;
    gap: var(--space-sm);
    font-size: 0.6875rem;
    color: rgba(255,255,255,0.6);
    margin-top: 2px;
}

/* Loading skeleton */
.mega-menu__skeleton {
    background: var(--color-bg-dark-2);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

/* Must match .mega-menu__article-thumb exactly, or the panel reflows the moment the real
   cards replace the skeleton. */
.mega-menu__skeleton-thumb {
    aspect-ratio: var(--card-media, 16 / 9);
    background: linear-gradient(90deg, var(--color-bg-dark-2) 25%, rgba(255,255,255,0.04) 50%, var(--color-bg-dark-2) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.mega-menu__skeleton-body {
    padding: var(--space-sm) var(--space-md);
}

.mega-menu__skeleton-line {
    height: 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    margin-bottom: var(--space-xs);
}

.mega-menu__skeleton-line:first-child {
    width: 40%;
    height: 7px;
}

.mega-menu__skeleton-line:last-child {
    width: 60%;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ---------- HERO SECTION ---------- */
.hero-section {
    padding: var(--space-2xl) 0;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-lg);
    min-height: 480px;
}

.hero-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-dark);
}

.hero-card__link {
    display: block;
    height: 100%;
    position: relative;
}

.hero-card__image-wrap {
    position: absolute;
    inset: 0;
}

.hero-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out);
}

.hero-card:hover .hero-card__image {
    transform: scale(1.03);
}

.hero-card__image--placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-dark), var(--color-bg-dark-2));
}

.hero-card__image--placeholder svg {
    width: 80px;
    height: 80px;
    opacity: 0.3;
}

.hero-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15,15,20,0.92) 0%, rgba(15,15,20,0.4) 40%, rgba(15,15,20,0.1) 100%);
    transition: background var(--transition);
}

.hero-card:hover .hero-card__overlay {
    background: linear-gradient(to top, rgba(15,15,20,0.95) 0%, rgba(15,15,20,0.5) 40%, rgba(15,15,20,0.15) 100%);
}

.hero-card__content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-2xl);
    z-index: 2;
}

.hero-card__category {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent-light);
    background: rgba(200,85,61,0.15);
    padding: 4px 12px;
    border-radius: 2px;
    margin-bottom: var(--space-md);
}

.hero-card--primary .hero-card__title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink-inverse);
    margin-bottom: var(--space-md);
    letter-spacing: -0.01em;
}

.hero-card--secondary .hero-card__title {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink-inverse);
    margin-bottom: var(--space-sm);
}

.hero-card__meta {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.hero-card__sep {
    opacity: 0.4;
}

.hero-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.hero-card--secondary {
    flex: 1;
    min-height: 0;
}

.hero-card--secondary .hero-card__content {
    padding: var(--space-lg);
}

/* ---------- SECTION DIVIDER ---------- */
.section-divider {
    padding: 0;
}

.section-divider__line {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-border), transparent);
}

/* ---------- SECTION HEADER ---------- */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

.section-header__label {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.section-header__dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    display: inline-block;
}

.section-header__link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--transition);
}

/* Bare text links are only as tall as their line box — 21px here, under WCAG 2.2 AA's 24px
   target minimum. Touch pointers only: on a mouse the smaller target is not a problem and the
   extra height would loosen the section headers. */
@media (pointer: coarse) {
    .section-header__link {
        min-height: 44px;
    }

    /* Footer navigation and trending headlines are lists of links, not running prose, so each
       one is a target in its own right — and at 22-23px they sat just under the 24px minimum.
       min-height only, keeping each element's existing display: a title that wraps to two
       lines must stay a normal block, and an inline-flex box would size itself to the
       headline's max-content width and push the page wider than the viewport. */
    .footer-col__list a {
        min-height: 24px;
    }

    .trending-item__title a {
        display: block;
        min-height: 24px;
    }
}

.section-header__link:hover {
    gap: 8px;
}

/* ---------- ARTICLES GRID ---------- */
.latest-section {
    padding: var(--space-3xl) 0;
}

/* --card-media is defined once in :root — see the note there. Both card shapes below use it,
   so a banner-shaped source lands in a banner-shaped box and object-fit:cover has nothing to
   crop. The old boxes fought it: 16/10 on the featured cards trimmed ~13% off the sides, and
   the 1:1 thumb on the list cards threw away 45% of the image width — which is why a wide logo
   like Vinted's arrived cropped to "Vinted". */
.articles-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.article-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition), transform var(--transition);
}

.article-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.article-card--featured .article-card__link {
    display: block;
}

/* 220px, not 140. At 140 a 1.83 image is only 76px tall, so the thumb had to be forced square
   to fill the row — which is where the heavy cropping came from. A wider column lets the image
   keep its own shape and still leaves ~380px for the text at this grid width. */
.article-card:not(.article-card--featured) .article-card__link {
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
}

/* Posts with no featured image no longer emit `.article-card__image-wrap`, so without this the
   body would land in column 2 and leave a 220px hole where the picture used to be — the empty
   box removed from the markup would simply come back as whitespace. Collapse to one column. */
.article-card:not(.article-card--featured) .article-card__link:not(:has(.article-card__image-wrap)) {
    grid-template-columns: 1fr;
}

.article-card--featured {
    grid-column: span 1;
}

/* article-card:nth-child(n+3) stacks in single column row */
.articles-grid > .article-card:nth-child(n+3) {
    grid-column: span 1;
}

.article-card__image-wrap {
    overflow: hidden;
    aspect-ratio: var(--card-media, 16 / 10);
    background: var(--color-bg-warm);
}

/* Same ratio as the featured card, and NO `height: 100%`.
   Stretching the thumb to the row height is what forced the 1:1 crop: the row is as tall as the
   text beside it, so the image had to fill a box it was never shaped for. Letting the ratio set
   the height instead means the row is `max(image, text)` and the picture stays intact. */
.article-card:not(.article-card--featured) .article-card__image-wrap {
    aspect-ratio: var(--card-media, 768 / 419);
}

.article-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}

.article-card:hover .article-card__image {
    transform: scale(1.04);
}

/* `.article-card__image--placeholder` lived here. The markup no longer emits an empty media
   box when a post has no featured image — the wrapper itself is skipped — so the rule had
   nothing left to style. A text-only card is the intended look for those 45 posts, not a
   filled rectangle standing in for a picture that does not exist. */

.article-card__body {
    padding: var(--space-lg);
}

.article-card:not(.article-card--featured) .article-card__body {
    padding: var(--space-md) var(--space-lg);
}

.article-card__category {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin-bottom: var(--space-sm);
}

.article-card__title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
    transition: color var(--transition);
}

.article-card:not(.article-card--featured) .article-card__title {
    font-size: 1rem;
}

.article-card:hover .article-card__title {
    color: var(--color-accent);
}

.article-card__excerpt {
    font-size: 0.875rem;
    color: var(--color-ink-light);
    line-height: 1.6;
    margin-bottom: var(--space-md);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    font-weight: 500;
}

/* ---------- CATEGORIES SECTION ---------- */
.categories-section {
    padding: var(--space-3xl) 0;
    background: var(--color-bg-warm);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.category-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-xl);
    transition: all var(--transition);
    text-decoration: none;
}

.category-card:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.category-card__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent-bg);
    border-radius: var(--radius-sm);
    color: var(--color-accent);
}

.category-card__icon svg {
    width: 24px;
    height: 24px;
}

.category-card__body {
    flex: 1;
    min-width: 0;
}

.category-card__name {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: 2px;
    transition: color var(--transition);
}

.category-card:hover .category-card__name {
    color: var(--color-accent);
}

.category-card__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.category-card__latest {
    font-size: 0.8125rem;
    color: var(--color-ink-light);
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.category-card__arrow {
    flex-shrink: 0;
    color: var(--color-ink-muted);
    transition: all var(--transition);
}

.category-card:hover .category-card__arrow {
    color: var(--color-accent);
    transform: translateX(4px);
}

/* ---------- STATS SECTION ---------- */
.stats-section {
    padding: var(--space-4xl) 0;
    background: var(--color-bg-dark);
    color: var(--color-ink-inverse);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    text-align: center;
}

.stat-item {
    position: relative;
}

.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--color-border-dark);
}

.stat-item__number {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--color-ink-inverse), var(--color-accent-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item__label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ---------- TRENDING SECTION ---------- */
.trending-section {
    padding: var(--space-3xl) 0;
}

.trending-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trending-item {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}

.trending-item:first-child {
    border-top: 1px solid var(--color-border);
}

.trending-item:hover {
    background: var(--color-bg-warm);
    margin: 0 calc(-1 * var(--space-lg));
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
    border-radius: var(--radius-sm);
}

.trending-item__rank {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-border);
    line-height: 1;
    min-width: 48px;
    transition: color var(--transition);
}

.trending-item:hover .trending-item__rank {
    color: var(--color-accent);
}

.trending-item__body {
    flex: 1;
    min-width: 0;
}

.trending-item__category {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.trending-item__title {
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 4px;
    color: var(--color-ink);
}

.trending-item__title a:hover {
    color: var(--color-accent);
}

.trending-item__meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.75rem;
    color: var(--color-ink-muted);
    margin-top: 6px;
}

/* Was a hardcoded 96x72 — a 4:3 box holding 1.83 images, so every trending thumbnail lost 27%
   of its width. The width is what's designed here; the height follows from the house ratio. */
.trending-item__thumb {
    flex-shrink: 0;
    width: 96px;
    aspect-ratio: var(--card-media, 4 / 3);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.trending-item__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}

.trending-item:hover .trending-item__image {
    transform: scale(1.06);
}

/* ---------- FOOTER ---------- */
.site-footer {
    background: var(--color-bg-dark);
    color: var(--color-ink-inverse);
}

.footer-main {
    padding: var(--space-4xl) 0 var(--space-3xl);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-3xl);
}

.footer-brand__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    margin-bottom: var(--space-lg);
}

.footer-brand__logo .site-logo__ecom {
    color: var(--color-accent-light);
}

.footer-brand__logo .site-logo__pedia {
    color: var(--color-ink-inverse);
}

.footer-brand__logo .site-logo__dot {
    color: var(--color-ink-muted);
}

.footer-brand__desc {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.footer-social {
    display: flex;
    gap: var(--space-md);
}

.footer-social__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-dark);
    color: var(--color-ink-muted);
    transition: all var(--transition);
}

.footer-social__link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent-light);
    background: rgba(200,85,61,0.1);
}

/* Footer Columns */
.footer-col__title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-ink-inverse);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border-dark);
}

.footer-col__list li {
    margin-bottom: var(--space-sm);
}

.footer-col__list a {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    transition: all var(--transition);
    display: inline-block;
}

.footer-col__list a:hover {
    color: var(--color-ink-inverse);
    transform: translateX(3px);
}

.footer-col__text {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

/* Newsletter Form */
.footer-newsletter__field {
    display: flex;
    border: 1px solid var(--color-border-dark);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color var(--transition);
}

.footer-newsletter__field:focus-within {
    border-color: var(--color-accent);
}

.footer-newsletter__field input {
    flex: 1;
    background: transparent;
    border: none;
    padding: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-ink-inverse);
    font-family: var(--font-body);
    outline: none;
}

/* 16px, so iOS does not zoom the viewport when the field takes focus. This one sits in the
   footer of every page, so it was the most reachable instance of the bug on the whole site. */
@media (pointer: coarse) {
    .footer-newsletter__field input {
        font-size: 1rem;
    }
}

.footer-newsletter__field input::placeholder {
    color: var(--color-ink-muted);
}

.footer-newsletter__field button {
    background: var(--color-btn);
    border: none;
    padding: var(--space-md) var(--space-lg);
    color: var(--color-ink-inverse);
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--transition);
}

.footer-newsletter__field button:hover {
    background: var(--color-btn-hover);
}

.footer-newsletter__field button[disabled] {
    opacity: 0.55;
    cursor: progress;
}

/* Honeypot. NOT `display:none` and NOT `hidden` — some bots skip fields they can tell are
   hidden, and a few password managers ignore them too. Pushing it out of the viewport keeps it
   a real, fillable input that no sighted user can reach, and aria-hidden + tabindex="-1" on the
   markup keep it away from screen readers and the tab order. */
.footer-newsletter__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.footer-newsletter__msg {
    font-size: 0.8125rem;
    line-height: 1.5;
    margin: var(--space-sm) 0 0;
    min-height: 1.2em;          /* reserve the line so the footer doesn't jump on first message */
    color: var(--color-ink-muted);
}

/* Literals, not --color-emerald/--color-gold: this message sits on the DARK footer, and those
   tokens are tuned for the light page background — #2D6A4F on #0F0F14 measures 2.1:1. */
.footer-newsletter__msg[data-state="ok"]    { color: #6FD08C; }
.footer-newsletter__msg[data-state="error"] { color: #F09A94; }

.footer-newsletter__note {
    font-size: 0.75rem;
    line-height: 1.5;
    margin: var(--space-xs) 0 0;
    color: var(--color-ink-muted);
}

/* Newsletter toast — shown after a confirm/unsubscribe redirect */
.nl-toast {
    position: fixed;
    /* Clears the sticky header (52px) instead of covering the nav. Measured, not guessed —
       at `top: var(--space-lg)` the toast sat at y=24 with the header bottom at y=52. */
    top: calc(52px + var(--space-sm));
    left: 50%;
    z-index: 9999;
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    width: min(30rem, calc(100vw - 2 * var(--space-md)));
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    box-shadow: var(--shadow-lg);
    /* Two transforms on one axis: the centring translate must be repeated in both states or the
       toast slides in from the left edge instead of from above. */
    transform: translateX(-50%) translateY(-12px);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}

.nl-toast.is-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.nl-toast[data-tone="ok"]    { border-left-color: var(--color-emerald); }
.nl-toast[data-tone="warn"]  { border-left-color: var(--color-gold); }
.nl-toast[data-tone="muted"] { border-left-color: var(--color-ink-muted); }

.nl-toast__text { flex: 1; }

.nl-toast__title {
    margin: 0;
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-ink);
}

.nl-toast__body {
    margin: 2px 0 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-light);
}

.nl-toast__close {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--color-ink-muted);
    flex-shrink: 0;
}

.nl-toast__close:hover { color: var(--color-ink); }

@media (prefers-reduced-motion: reduce) {
    .nl-toast { transition: opacity 0.3s linear; transform: translateX(-50%) translateY(0); }
}

/* Footer Bottom */
.footer-bottom {
    border-top: 1px solid var(--color-border-dark);
    padding: var(--space-lg) 0;
}

.footer-bottom__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom__copy {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.footer-bottom__partners {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.footer-bottom__partners a {
    color: var(--color-ink-inverse);
    font-weight: 500;
    border-bottom: 1px solid var(--color-border-dark);
    transition: all var(--transition);
}

.footer-bottom__partners a:hover {
    color: var(--color-accent-light);
    border-color: var(--color-accent);
}

/* ==========================================================================
   SINGLE ARTICLE PAGE
   ========================================================================== */

/* ---------- READING PROGRESS BAR ---------- */
.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: rgba(0,0,0,0.08);
    pointer-events: none;
}

.reading-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-bg-dark), var(--color-accent));
    transition: width 0.1s linear;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(200,85,61,0.4);
}

/* ---------- BREADCRUMBS ---------- */
.article-breadcrumbs {
    padding: var(--space-lg) 0;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
}

.article-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin: 0;
}

.article-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    font-family: var(--font-body);
    color: var(--color-ink-muted);
}

.article-breadcrumbs__item a {
    color: var(--color-ink-light);
    transition: color var(--transition);
}

/* 21px line box, and these are the primary way back up the hierarchy on a phone. */
@media (pointer: coarse) {
    .article-breadcrumbs__item a {
        min-height: 24px;
    }
}

.article-breadcrumbs__item a:hover {
    color: var(--color-accent);
}

.article-breadcrumbs__item [aria-current="page"] {
    color: var(--color-ink);
    font-weight: 500;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article-breadcrumbs__sep {
    color: var(--color-ink-muted);
    opacity: 0.5;
    flex-shrink: 0;
}

/* ---------- ARTICLE HERO ---------- */
.article-hero {
    padding: var(--space-3xl) 0 var(--space-xl);
    background: var(--color-bg);
}

.article-hero__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.article-hero__cat {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-md);
    background: var(--color-accent-bg);
    border-radius: var(--radius-sm);
    transition: all var(--transition);
}

.article-hero__cat:hover {
    background: var(--color-accent);
    color: #fff;
}

.article-hero__reading-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.article-hero__title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--color-ink);
    line-height: 1.2;
    margin-bottom: var(--space-lg);
    letter-spacing: -0.02em;
    max-width: 860px;
}

.article-hero__subtitle {
    font-family: var(--font-body);
    font-size: 1.125rem;
    color: var(--color-ink-light);
    line-height: 1.6;
    max-width: 720px;
    margin-bottom: var(--space-xl);
}

.article-hero__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border);
}

.article-hero__author {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    text-decoration: none;
    transition: opacity var(--transition);
}

.article-hero__author:hover {
    opacity: 0.8;
}

.article-hero__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--color-border);
}

.article-hero__author-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.article-hero__author-name {
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
}

.article-hero__author-role {
    font-size: 0.75rem;
    color: var(--color-ink-muted);
}

.article-hero__dates {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.article-hero__date,
.article-hero__updated {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-ink-light);
}

.article-hero__updated {
    color: var(--color-emerald);
    font-weight: 500;
}

/* ---------- FEATURED IMAGE ---------- */
.article-featured {
    margin-bottom: var(--space-3xl);
}

.article-featured__figure {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: var(--color-bg-warm);
}

/* ⚠️ DEAD as of 2026-08-20 — single.php no longer prints .article-featured; the lead image is
   .article-lead inside the content column. Left in place in case the hero is ever reinstated,
   but note the `aspect-ratio: 16 / 9` here does NOT use --card-media: it is deliberately not
   updated, because reviving this block should be a conscious decision, not something that
   inherits the house ratio by accident. */
.article-featured__img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    max-height: 520px;
}

.article-featured__caption {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    font-style: italic;
    background: var(--color-bg-warm);
    border-top: 1px solid var(--color-border);
}

/* ---------- ARTICLE BODY GRID ---------- */
.article-body {
    padding-bottom: var(--space-4xl);
}

.article-body__grid {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-3xl);
    align-items: start;
}

/* ---------- STICKY SIDEBAR ---------- */
.article-sidebar {
    position: sticky;
    top: 80px;
}

.article-sidebar__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* --- Table of Contents --- */
.article-toc {
    background: var(--color-bg-warm);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
}

.article-toc__title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border);
}

.article-toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc;
}

.article-toc__item {
    counter-increment: toc;
}

.article-toc__item--h3 {
    padding-left: var(--space-md);
}

.article-toc__link {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-ink-light);
    padding: var(--space-xs) 0;
    border-left: 2px solid transparent;
    padding-left: var(--space-sm);
    transition: all var(--transition);
    text-decoration: none;
}

.article-toc__link::before {
    content: counter(toc, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--color-ink-muted);
    min-width: 1.4em;
    opacity: 0.6;
}

.article-toc__link:hover {
    color: var(--color-accent);
    border-left-color: var(--color-accent-light);
}

.article-toc__link.is-active {
    color: var(--color-accent);
    border-left-color: var(--color-accent);
    font-weight: 600;
}

.article-toc__link.is-active::before {
    color: var(--color-accent);
    opacity: 1;
}

/* --- Share Buttons --- */
.article-share__title {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}

.article-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.article-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    background: var(--color-bg-card);
    color: var(--color-ink-light);
    cursor: pointer;
    transition: all var(--transition);
    position: relative;
}

.article-share__btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.article-share__btn--facebook:hover {
    background: #1877F2;
    color: #fff;
    border-color: #1877F2;
}

.article-share__btn--x:hover {
    background: #0F0F14;
    color: #fff;
    border-color: #0F0F14;
}

.article-share__btn--linkedin:hover {
    background: #0A66C2;
    color: #fff;
    border-color: #0A66C2;
}

.article-share__btn--whatsapp:hover {
    background: #25D366;
    color: #fff;
    border-color: #25D366;
}

.article-share__btn--copy:hover {
    background: var(--color-btn);
    color: #fff;
    border-color: var(--color-btn);
}

.article-share__copied {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-emerald);
    background: var(--color-bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.article-share__copied.is-visible {
    opacity: 1;
}

/* --- Article Stats --- */
.article-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-bg-warm);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}

.article-stats__item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-ink-light);
}

.article-stats__item svg {
    color: var(--color-ink-muted);
    flex-shrink: 0;
}

/* ---------- KEY TAKEAWAYS ---------- */
.article-takeaways {
    background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
    border: 1px solid #bbf7d0;
    border-radius: var(--radius-lg);
    padding: var(--space-xl) var(--space-2xl);
    margin-bottom: var(--space-3xl);
    position: relative;
}

.article-takeaways::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-emerald);
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.article-takeaways__header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.article-takeaways__header svg {
    color: var(--color-emerald);
}

.article-takeaways__title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-ink);
    margin: 0;
}

.article-takeaways__list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.article-takeaways__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-ink);
}

.article-takeaways__item svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.article-takeaways__reading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    padding-top: var(--space-md);
    border-top: 1px solid #bbf7d0;
}

/* ---------- MOBILE TOC ---------- */
.article-toc-mobile {
    display: none;
    margin-bottom: var(--space-2xl);
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.article-toc-mobile__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-ink);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.article-toc-mobile__toggle::-webkit-details-marker {
    display: none;
}

.article-toc-mobile__chevron {
    margin-left: auto;
    transition: transform var(--transition);
}

.article-toc-mobile[open] .article-toc-mobile__chevron {
    transform: rotate(180deg);
}

.article-toc-mobile__list {
    list-style: none;
    padding: 0 var(--space-lg) var(--space-lg);
    margin: 0;
}

.article-toc-mobile__item a {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-ink-light);
    padding: var(--space-xs) 0;
    transition: color var(--transition);
}

.article-toc-mobile__item a:hover {
    color: var(--color-accent);
}

.article-toc-mobile__item--h3 {
    padding-left: var(--space-lg);
}

/* ---------- ARTICLE CONTENT BODY ---------- */
.article-content__body {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    color: var(--color-ink);
    line-height: 1.8;
}

.article-content__body > * + * {
    margin-top: var(--space-lg);
}

.article-content__body h2 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-top: var(--space-3xl);
    margin-bottom: var(--space-md);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    letter-spacing: -0.01em;
    scroll-margin-top: 90px;
}

.article-content__body h2:first-child {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.article-content__body h3 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-top: var(--space-2xl);
    margin-bottom: var(--space-sm);
    scroll-margin-top: 90px;
}

.article-content__body p {
    margin: 0 0 var(--space-lg);
    color: var(--color-ink);
}

.article-content__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: rgba(200,85,61,0.3);
    text-underline-offset: 3px;
    transition: all var(--transition);
}

.article-content__body a:hover {
    text-decoration-color: var(--color-accent);
}

.article-content__body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    margin: var(--space-xl) auto;
    display: block;
}

/* Prevent WordPress images from upscaling beyond natural size */
.article-content__body img.size-full,
.article-content__body img.size-large {
    width: auto;
    max-width: 100%;
}

.article-content__body blockquote {
    border-left: 4px solid var(--color-accent);
    padding: var(--space-lg) var(--space-xl);
    margin: var(--space-xl) 0;
    background: var(--color-accent-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
    color: var(--color-ink);
}

.article-content__body blockquote p:last-child {
    margin-bottom: 0;
}

.article-content__body ul,
.article-content__body ol {
    padding-left: var(--space-xl);
    margin: var(--space-lg) 0;
}

.article-content__body li {
    margin-bottom: var(--space-sm);
    line-height: 1.7;
}

.article-content__body pre {
    background: var(--color-bg-dark);
    color: var(--color-ink-inverse);
    padding: var(--space-xl);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: var(--space-xl) 0;
}

.article-content__body code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    background: var(--color-bg-warm);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--color-accent);
}

.article-content__body pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.article-content__body table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-xl) 0;
    font-size: 0.9375rem;
}

.article-content__body th,
.article-content__body td {
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-border);
    text-align: left;
}

.article-content__body th {
    background: var(--color-bg-warm);
    font-weight: 600;
    font-family: var(--font-display);
}

.article-content__body figure {
    margin: var(--space-xl) 0;
}

.article-content__body figcaption {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    text-align: center;
    margin-top: var(--space-sm);
    font-style: italic;
}

/* WordPress Block Editor Styles */
.article-content__body .wp-block-quote {
    border-left: 4px solid var(--color-accent);
    padding: var(--space-lg) var(--space-xl);
    background: var(--color-accent-bg);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.article-content__body .wp-block-separator {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-3xl) auto;
    max-width: 100px;
}

/* ---------- ARTICLE TAGS ---------- */
.article-tags {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-3xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.article-tags__label {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink-light);
    padding-top: var(--space-xs);
}

.article-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.article-tags__tag {
    font-size: 0.8125rem;
    color: var(--color-ink-light);
    background: var(--color-bg-warm);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}

.article-tags__tag:hover {
    background: var(--color-accent-bg);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* ---------- AUTHOR BOX ---------- */
.article-author {
    background: var(--color-bg-warm);
    padding: var(--space-3xl) 0;
    border-top: 1px solid var(--color-border);
}

.article-author__card {
    display: flex;
    gap: var(--space-2xl);
    max-width: 860px;
}

.article-author__avatar-wrap {
    flex-shrink: 0;
}

.article-author__avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--color-border);
    box-shadow: var(--shadow-md);
}

.article-author__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.article-author__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
}

.article-author__label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.article-author__name {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 2px 0 0;
}

.article-author__name a {
    color: var(--color-ink);
    transition: color var(--transition);
}

.article-author__name a:hover {
    color: var(--color-accent);
}

.article-author__count {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    background: var(--color-bg-card);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    white-space: nowrap;
}

.article-author__bio {
    font-size: 0.9375rem;
    color: var(--color-ink-light);
    line-height: 1.7;
    margin: 0;
}

.article-author__expertise {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.article-author__tag {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-bg);
    padding: 3px var(--space-sm);
    border-radius: var(--radius-sm);
}

.article-author__social {
    display: flex;
    gap: var(--space-md);
}

.article-author__social-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-ink-light);
    padding: var(--space-xs) var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-card);
    transition: all var(--transition);
}

.article-author__social-link:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-bg);
}

/* ---------- RELATED POSTS (Contextual Vectoring) ---------- */
.article-related {
    padding: var(--space-3xl) 0 var(--space-4xl);
    background: var(--color-bg);
}

.article-related__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.article-related__card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    transition: all var(--transition);
}

.article-related__card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

/* House ratio, was 16/10 — that trimmed ~13% off the sides of every related-post thumbnail,
   which is what cut "Vinted" and "evomag" in half in the "Aprofundează subiectul" row. */
.article-related__img-wrap {
    aspect-ratio: var(--card-media, 16 / 10);
    overflow: hidden;
    background: var(--color-bg-warm);
}

.article-related__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease-out);
}

.article-related__card:hover .article-related__img {
    transform: scale(1.05);
}

.article-related__body {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    flex: 1;
}

.article-related__cat {
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-accent);
}

.article-related__title {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-related__meta {
    display: flex;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
    margin-top: auto;
}

/* ---------- POST NAVIGATION ---------- */
.article-nav {
    border-top: 1px solid var(--color-border);
    padding: var(--space-xl) 0;
    background: var(--color-bg-warm);
}

.article-nav__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.article-nav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    transition: all var(--transition);
    text-decoration: none;
}

.article-nav__link:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}

.article-nav__link--next {
    text-align: right;
}

.article-nav__direction {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.article-nav__link--next .article-nav__direction {
    justify-content: flex-end;
}

.article-nav__title {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    /* Article page responsive */
    .article-body__grid {
        grid-template-columns: 200px 1fr;
        gap: var(--space-xl);
    }

    .article-related__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .article-author__card {
        gap: var(--space-xl);
    }

    /* Nothing to override: the base grid is already 4 columns and the tiles size themselves from
       aspect-ratio rather than a fixed row height, so the whole mosaic scales with the container
       and holds its shape. This block previously had to restate the columns because the base was
       6 and the rows were a clamp. */

    .hero-grid {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero-card--primary {
        min-height: 400px;
    }

    .hero-sidebar {
        flex-direction: row;
    }

    .hero-card--secondary {
        min-height: 260px;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    /* Article page mobile */
    .article-body__grid {
        grid-template-columns: 1fr;
    }

    /* The rail cannot exist at this width, but hiding the whole aside took the share buttons
       with it — a mobile reader had no way to share the article at all, and the TOC was the
       only part with a mobile equivalent (.article-toc-mobile below). So the aside stays in
       flow and only the desktop-shaped parts are dropped: the sticky rail becomes a normal
       block, the TOC hides in favour of the collapsible one, and Distribuie survives. */
    .article-sidebar {
        position: static;
        margin: 0 0 var(--space-xl);
    }

    .article-sidebar__inner {
        position: static;
    }

    .article-sidebar .article-toc {
        display: none;
    }

    /* Share and stats sit side by side rather than stacked — together they are shorter than
       either the TOC or a full-width stack would be, and they stay above the article text. */
    .article-sidebar .article-share {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        flex-wrap: wrap;
    }

    .article-sidebar .article-share__title {
        margin: 0;
    }

    .article-toc-mobile {
        display: block;
    }

    .article-hero__title {
        font-size: 1.5rem;
    }

    .article-hero__meta {
        gap: var(--space-md);
    }

    .article-hero__dates {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .article-related__grid {
        grid-template-columns: 1fr;
    }

    .article-nav__grid {
        grid-template-columns: 1fr;
    }

    .article-author__card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: var(--space-lg);
    }

    .article-author__header {
        flex-direction: column;
        align-items: center;
    }

    .article-author__expertise {
        justify-content: center;
    }

    .article-author__social {
        justify-content: center;
        flex-wrap: wrap;
    }

    .article-takeaways {
        padding: var(--space-lg);
    }

    .article-content__body {
        font-size: 1rem;
    }

    .article-content__body h2 {
        font-size: 1.25rem;
    }

    .article-content__body h3 {
        font-size: 1.1rem;
    }

    /* Mobile share bar (fixed bottom) */
    .article-share-mobile {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm);
        padding: var(--space-sm) var(--space-md);
        background: var(--color-bg-card);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -4px 16px rgba(0,0,0,0.08);
    }

    .top-strip__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* ⚠️ At two columns the hero must declare its OWN ratio and stop spanning rows.
       On the wider grids it gets its height for free: it spans two rows that the small tiles
       beside it have already sized via their aspect-ratio. Here it spans BOTH columns, so
       nothing shares those rows — they collapse to zero and the tile renders 342x8. Full width
       at the house ratio instead: 342x187, with the four smalls in two rows of two beneath. */
    .top-strip__card:nth-child(1) {
        grid-column: span 2;
        grid-row: span 1;
        aspect-ratio: var(--card-media, 768 / 419);
    }

    .top-strip__title {
        font-size: 0.85rem;
        -webkit-line-clamp: 2;
    }

    .header-bar__toggle {
        display: flex;
    }

    /* Back to flex on mobile: the hamburger becomes visible here, which would be a 4th
       child in the 3-column desktop grid and wrap onto its own row. The nav itself is
       position:fixed off-canvas at this width, so it is out of flow either way. */
    .header-bar__inner {
        display: flex;
        gap: var(--space-md);
    }

    /* 360px phones (Galaxy A-series and most budget Androids) have 312px of content box after
       the container padding, and the row wants 44 + 129 logo + 118 icons = 291 of it. Two 16px
       gaps do not fit; two 8px gaps do, with room to spare. Nothing here is allowed to shrink —
       the logo is text and the toggle is a fixed 44px target — so the gap is what gives. */
    @media (max-width: 380px) {
        .header-bar__inner {
            gap: var(--space-sm);
        }
    }

    /* Off-canvas panel is only 300px wide, so the split pill becomes two stacked rows. */
    .menu-item--questions .mega-trigger__link {
        border-radius: 0 !important;
    }

    .menu-item--add {
        margin-left: 0;
    }

    .nav-menu > .menu-item--add > .nav-add {
        height: auto;
        margin: 0;
        padding: var(--space-md) var(--space-xl);
        border-radius: 0;
        box-shadow: none;
        background: var(--color-bg-warm);
        color: var(--color-accent);
        border-bottom: 1px solid var(--color-border);
    }

    .nav-menu > .menu-item--add > .nav-add:hover,
    .nav-menu > .menu-item--add > .nav-add:focus-visible {
        background: var(--color-accent-bg);
        color: var(--color-accent);
    }

    /* Right-hand controls were overflowing off-screen. The Facebook label alone is 179px
       wide, which pushed the search button to x431 inside a 390px viewport — measured
       unreachable (elementFromPoint reported it offscreen). Both controls already carry an
       aria-label, so dropping the visible text costs nothing for assistive tech. */
    .header-bar__social span,
    .header-bar__search span,
    .header-bar__login span,
    .header-bar__account-toggle > span,
    .header-bar__account-chev {
        display: none;
    }

    .header-bar__social,
    .header-bar__search,
    .header-bar__login,
    .header-bar__account-toggle {
        width: 34px;
        padding: 0;
        justify-content: center;
    }

    /* The panel is anchored to a 34px icon at the right edge, so it must not be allowed to run
       past the viewport. Capped to the screen with a gutter rather than left at min-width. */
    .header-bar__account-menu {
        min-width: 0;
        width: max-content;
        max-width: calc(100vw - var(--space-xl));
    }

    .header-bar__right {
        gap: var(--space-sm);
    }

    .header-bar__nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background: var(--color-bg-card);
        z-index: 1000;
        border-left: 1px solid var(--color-border);
        transition: right var(--transition);
        overflow-y: auto;
        padding-top: var(--space-4xl);
    }

    .header-bar__nav.is-open {
        right: 0;
    }

    .nav-menu {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-menu > .menu-item > a {
        height: auto;
        padding: var(--space-md) var(--space-xl);
        color: var(--color-ink);
        border-bottom: 1px solid var(--color-border);
    }

    .nav-menu > .menu-item > a:hover {
        background: var(--color-bg-warm);
        color: var(--color-accent);
    }

    .nav-menu > .menu-item > .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        background: var(--color-bg-warm);
    }

    /* Mega menu mobile */
    .mega-menu {
        position: static;
        width: 100%;
        max-width: none;
        left: auto;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-radius: 0;
        display: none;
    }

    .menu-item--mega.is-open .mega-menu {
        display: block;
    }

    .mega-menu__inner {
        grid-template-columns: 1fr;
        height: auto;
    }

    .mega-menu__parents {
        border-bottom: 1px solid var(--color-border-dark);
        background: rgba(0,0,0,0.08);
    }

    .mega-menu__subcats {
        border-left: none;
        border-right: none;
        border-bottom: 1px solid var(--color-border-dark);
    }

    .mega-menu__articles {
        grid-template-columns: 1fr;
        padding: var(--space-md);
        height: auto;
    }

    .hero-sidebar {
        flex-direction: column;
    }

    .hero-card--secondary {
        min-height: 220px;
    }

    .articles-grid {
        grid-template-columns: 1fr;
    }

    /* 130px, measured. At 390px the title gets whatever the thumb leaves, and the wrapping is
       what decides this number, not the picture: 150px averaged 4.5 title lines with one card
       at 6, while 130px averages 3.6 with a max of 5. Going down to 120px gains nothing more
       (identical line counts) and only shrinks the image, so 130 is where the trade stops
       paying. Thumb is 130x71 at the house ratio. */
    .article-card:not(.article-card--featured) .article-card__link {
        grid-template-columns: 130px 1fr;
    }

    .categories-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2xl);
    }

    .stat-item:not(:last-child)::after {
        display: none;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-bottom__inner {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }
}

@media (max-width: 480px) {
    .hero-card--primary {
        min-height: 320px;
    }

    .hero-card--primary .hero-card__content {
        padding: var(--space-lg);
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- UTILITY: OVERLAY for mobile nav ---------- */
/* z-index must stay BELOW .site-header (100).
   .site-header is position:sticky with a z-index, so it creates a stacking context and the
   mobile nav panel inside it can never escape that context — its own z-index:1000 resolves
   against the header's 100, not the root. At 999 this overlay therefore painted OVER the
   open mobile menu, dimming it and swallowing every tap (verified: Playwright reported
   "<div id="nav-overlay"> intercepts pointer events" on the menu links).
   99 keeps it above page content and below the header, so the panel is usable.
   Raising .site-header instead would push it above .search-overlay (200) and break that. */
.nav-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15,15,20,0.5);
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
}

.nav-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

/* ---------- ACCESSIBILITY ---------- */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ---------- ARTICLE LEAD IMAGE ----------
   Replaces the removed full-bleed .article-featured. It lives inside .article-content, above the
   takeaways panel, so it spans the reading column instead of the whole container — the point of
   dropping the hero was that a screen-height picture pushed the article itself below the fold. */
/* Capped at 800px and centred, NOT stretched to the reading column.
   The column is ~1292px at a 1440 viewport, which rendered this image 1292x698 — it filled the
   first screen on its own, which is the problem removing the hero was meant to solve. 800px is
   also just under the 806px these uploads are natively, so the image is never upscaled. */
.article-lead {
    max-width: 800px;
    margin: 0 auto var(--space-xl);
}

.article-lead__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
    background: var(--color-bg-warm);
}

.article-lead__caption {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-ink-muted);
}

/* ==========================================================================
   Mobile navigation — push-stack of horizontally sliding lists
   (template-parts/mobile-nav.php)

   One list on screen at a time. Opening a branch slides the next list in from the right and
   parks the current one to the left; Back reverses it. Replaces the old arrangement, which
   was the desktop mega menu's three columns folded into a 300px drawer — 87 links deep,
   with the hierarchy flattened out of them.
   ========================================================================== */

.mnav {
    position: fixed;
    inset: 0;
    /* Above CookieGuard's "Preferințe cookie-uri" pill (999998), which is fixed bottom-left and
       otherwise floats over the menu's own rows. Deliberately NOT above the consent banner
       itself (999999, rendered later in the document and so still painted on top): a visitor
       who has not answered it should answer it first. */
    z-index: 999999;
    display: none;
}

.mnav.is-open {
    display: block;
}

/* The scrim. Tapping it closes, same as the X. */
.mnav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20, 20, 28, 0.55);
    opacity: 0;
    transition: opacity var(--transition);
}

.mnav.is-visible::before {
    opacity: 1;
}

.mnav__sheet {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(86vw, 380px);
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card, #fff);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.mnav.is-visible .mnav__sheet {
    transform: none;
}

/* --- title bar --- */
.mnav__bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
    padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg-card, #fff);
}

.mnav__heading {
    flex: 1;
    min-width: 0;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-ink);
    /* The heading is whatever list is open, and category names run long. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mnav__back,
.mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-xs);
    border: none;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-ink-light);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

/* The hidden attribute is display:none from the UA sheet, and the author display above beats
   it — without this the Back button stays on screen at the root level. */
.mnav__back[hidden] {
    display: none;
}

.mnav__back {
    /* Sits left of the heading and must not squeeze it. */
    flex-shrink: 0;
    margin-left: calc(var(--space-md) * -1 + var(--space-xs));
    padding-right: var(--space-xs);
}

.mnav__back:active,
.mnav__close:active {
    background: var(--color-bg-warm);
}

/* --- the sliding lists --- */
.mnav__viewport {
    position: relative;
    flex: 1;
    /* Panels are absolutely positioned inside here, so this is what clips the one sliding in
       and stops it widening the sheet. */
    overflow: hidden;
}

.mnav__panel {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: var(--space-sm) 0 var(--space-2xl);
    list-style: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--color-bg-card, #fff);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1), visibility 0.26s;
}

.mnav__panel.is-active {
    transform: none;
    visibility: visible;
}

/* Parked to the left, slightly behind — the parallax is what reads as "this went back". */
.mnav__panel.is-parent {
    transform: translateX(-28%);
    visibility: hidden;
}

.mnav__row {
    margin: 0;
}

.mnav__link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    min-height: 52px;
    padding: var(--space-sm) var(--space-md);
    border: none;
    background: none;
    text-align: left;
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--color-ink);
    text-decoration: none;
    cursor: pointer;
}

.mnav__link:active {
    background: var(--color-bg-warm);
}

.mnav__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.mnav__label {
    flex: 1;
    min-width: 0;
}

.mnav__arrow {
    flex-shrink: 0;
    color: var(--color-ink-muted);
}

.mnav__count {
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

/* "Toate articolele" / "Tot din X" — the escape hatch at the top of every branch. */
.mnav__link--all {
    color: var(--color-accent);
    font-weight: 600;
}

.mnav__link--cta {
    color: var(--color-accent);
    font-weight: 700;
}

.mnav__row:has(.mnav__link--all) {
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-xs);
}

/* Above the breakpoint the desktop mega menu is in charge. */
@media (min-width: 769px) {
    .mnav,
    .mnav.is-open {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mnav::before,
    .mnav__sheet,
    .mnav__panel {
        transition: none;
    }
}