body.logged-in #inkube-root {
    margin-top: 32px;
}

/* =====================================================================
   ACCESSIBILITY FIXES (Lighthouse 2026-05-18). CSS-only; loaded after
   main.css so these override without touching the base stylesheet.
   ===================================================================== */

/* Issue 2 — Contrast. The genre name used #3989AD on a white/near-white
   background (~3.0:1 — fails WCAG AA for normal text). #2A6F8E keeps the
   brand teal hue but reaches ~5.6:1 on white. !important is required
   because main.css sets this colour in several higher-specificity rules. */
.post-genre .genre-name,
.genre-name.ff-zilla-SemiBold.fs-18px {
    color: #2A6F8E !important;
}

/* Issue 4 — Touch targets must be at least 44×44px. These are inline
   text links, so we grow the hit area with min-height + vertical padding
   and make them inline-block (flow is preserved; only a few px of extra
   vertical space). */
.post-genre,
a.post-genre {
    display: inline-block;
    min-height: 44px;
    line-height: 1.2;
    padding-top: 10px;
    padding-bottom: 10px;
}
.lh-1.ttl_hover,
a.lh-1.ttl_hover {
    display: inline-block;
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Contrast (round 2). #3989AD on white ≈ 3.0:1 (fails AA). #2A6D8A ≈ 4.6:1.
   Covers the "all articles" link and the Indepth Analytics link. The Indepth
   link sets color inline (style="color:#3989AD"), so !important is needed for
   the stylesheet to win over the inline declaration. */
.all-articles-link,
a.all-articles-link,
a[href*="indepth-analytics"],
a[href*="indepth-analytics"] * {
    color: #2A6D8A !important;
}

/* .style-card-description used font-weight:300 on a light grey on white —
   thin low-contrast text. Bump to 400 and darken to a WCAG-AA grey
   (#595959 ≈ 7:1 on #fff). */
.style-card-description,
.style-card-description.fw-300,
.fw-300.style-card-description {
    font-weight: 400 !important;
    color: #595959 !important;
}
/* =====================================================================
   Header over a black article (article_class contains "bg-black").
   The nav keeps its place in the flow, the article slides up under it
   so the black shows through the transparent header, and the header's
   dark icons/text turn white. --site-header-h is set by header.js;
   185px is the desktop fallback until it runs. The search screen and
   the expanded menu keep their own white panels.
   ===================================================================== */
#inkube-root > nav.site_header:has(~ article.bg-black:first-of-type) {
    background-color: transparent;
    border-bottom-color: transparent;
    z-index: 100;
}
#inkube-root > nav.site_header ~ article.bg-black:first-of-type {
    margin-top: calc(-1 * var(--site-header-h, 185px)) !important;
    padding-top: calc(var(--site-header-h, 185px) + 3rem);
}
#inkube-root > nav.site_header:has(~ article.bg-black:first-of-type) :is([fill="#1F333E"], [fill="#1A171B"], .inkyfada-text .text):not(#search-screen *, #expanded-nav *) {
    fill: #fff !important;
}
#inkube-root > nav.site_header:has(~ article.bg-black:first-of-type) [stroke="#181818"]:not(#search-screen *, #expanded-nav *) {
    stroke: #fff;
}
#inkube-root > nav.site_header:has(~ article.bg-black:first-of-type) :is(.selected-language, .nav-link, .user-name):not(#search-screen *, #expanded-nav *) {
    color: #fff !important;
}
#inkube-root > nav.site_header:has(~ article.bg-black:first-of-type) .selected-language::after {
    border-color: #fff;
}

/* Black article: no "Save" (bookmark) button or its label in the share bar. */
article.bg-black .share-bzuttons_container > span:first-child,
article.bg-black .share-bzuttons_container > .share-bzuttons:has(.save-post-toggle) {
    display: none !important;
}