/* ==========================================================================
   Balds — visual design system
   ==========================================================================
   Brief: a hair-loss reference site. Most visitors arrive from a search, mildly
   anxious, having already been advertised at by clinics and supplement brands. So the
   design has two jobs: read as CREDIBLE EDITORIAL rather than a clinic funnel, and stay
   calm.

   Decisions and why:
   - Warm neutral paper, not clinical white-and-blue. Clinical blue is the house style of
     every hair-transplant landing page; avoiding it is positioning, not taste.
   - Deep evergreen accent. Trustworthy and health-adjacent without being medical-blue,
     and it sits well against the warm cream imagery the site generates.
   - Serif headings (Source Serif 4) over sans body (Inter). The standard editorial
     pairing — it signals "publication" in a way a single geometric sans does not.
   - Effects are restrained: 150ms transitions, small lifts, a slow image scale. This is
     an ad-supported reading site, so nothing may compete with the text or shift layout.
   - Fonts are SELF-HOSTED. A Google Fonts CDN call is a third-party request on every
     page load and a privacy disclosure we would then owe the reader.
   ========================================================================== */

/* ---------- fonts ---------- */
@font-face {
    font-family: 'Source Serif 4';
    src: url('/wp-content/uploads/fonts/sourceserif.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'InterVar';
    src: url('/wp-content/uploads/fonts/inter.woff2') format('woff2-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}


/* ---------- latin-ext faces ----------
   Google splits each family into per-subset files with complementary unicode-ranges. Shipping
   only the `latin` file meant Łódź, Gdańsk, Brașov and Poznań fell back to a system font
   MID-WORD — invisible unless you happen to render one of those words. Shipping only
   `latin-ext` is worse: it has no a, e, o, comma or full stop at all.
   The correct construction is BOTH, sharing a family name, each with its own unicode-range —
   the browser downloads the ext file only when a page actually needs those glyphs. */
@font-face {
    font-family: 'Source Serif 4';
    src: url('/wp-content/uploads/fonts/sourceserif-ext.woff2') format('woff2-variations');
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'InterVar';
    src: url('/wp-content/uploads/fonts/inter-ext.woff2') format('woff2-variations');
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- tokens ---------- */
:root {
    --b-paper:      #fbf9f5;
    --b-surface:    #ffffff;
    --b-surface-2:  #f4f0e9;
    --b-ink:        #1e1c19;
    --b-ink-2:      #46423c;
    --b-muted:      #6f6a62;
    --b-rule:       #e6e0d5;
    --b-accent:     #1f5c4b;       /* evergreen */
    --b-accent-ink: #17453a;
    --b-warm:       #a9743f;       /* brass, for small accents only */
    --b-radius:     4px;
    --b-shadow:     0 1px 2px rgba(30,28,25,.05), 0 6px 20px -8px rgba(30,28,25,.10);
    --b-shadow-lift:0 2px 4px rgba(30,28,25,.06), 0 14px 34px -10px rgba(30,28,25,.16);
    --b-ease:       cubic-bezier(.22,.61,.36,1);
}

/* ---------- base ---------- */
body {
    background: var(--b-paper);
    color: var(--b-ink);
    font-family: 'InterVar', ui-sans-serif, system-ui, -apple-system, sans-serif;
    font-size: 17px;
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .main-title {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    color: var(--b-ink);
    letter-spacing: -0.005em;
}
h1 { font-weight: 600; line-height: 1.15; }
h2, h3 { font-weight: 600; }

a { color: var(--b-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover, a:focus { color: var(--b-accent-ink); }

/* ---------- header ---------- */
.site-header {
    background: var(--b-surface);
    border-bottom: 1px solid var(--b-rule);
}
.main-title { font-size: 1.75rem !important; font-weight: 700; letter-spacing: -0.02em; }
.main-title a { color: var(--b-ink) !important; text-decoration: none; }
.site-description {
    font-family: 'InterVar', sans-serif;
    color: var(--b-muted);
    font-size: .875rem;
    letter-spacing: .01em;
}

.main-navigation { background: var(--b-surface); border-bottom: 1px solid var(--b-rule); }
.main-navigation a {
    font-family: 'InterVar', sans-serif;
    font-size: .9375rem;
    font-weight: 500;
    color: var(--b-ink-2) !important;
    text-decoration: none;
    position: relative;
    transition: color .15s var(--b-ease);
}
.main-navigation a:hover { color: var(--b-accent) !important; }
/* A sliding rule instead of a background swap — quieter, and it does not reflow. */
.main-navigation .main-nav > ul > li > a::after {
    content: ''; position: absolute; left: 20px; right: 20px; bottom: 12px; height: 2px;
    background: var(--b-accent); transform: scaleX(0); transform-origin: left;
    transition: transform .2s var(--b-ease);
}
.main-navigation .main-nav > ul > li > a:hover::after,
.main-navigation .main-nav > ul > li.current-menu-item > a::after { transform: scaleX(1); }
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--b-accent) !important; }
.main-navigation .sub-menu {
    background: var(--b-surface); border: 1px solid var(--b-rule);
    box-shadow: var(--b-shadow); border-radius: var(--b-radius); padding: 6px 0;
}
.main-navigation .sub-menu a { color: var(--b-ink-2) !important; font-size: .9rem; }
.main-navigation .sub-menu a:hover { background: var(--b-surface-2); }

/* ---------- article container ---------- */
.site-content .content-area { padding-top: 8px; }
.inside-article, .page .inside-article {
    background: var(--b-surface);
    border: 1px solid var(--b-rule);
    border-radius: var(--b-radius);
    box-shadow: var(--b-shadow);
    padding: 0 0 34px;
    overflow: hidden;
}
.inside-article > *:not(.post-image):not(.featured-image) { padding-left: 34px; padding-right: 34px; }
@media (max-width: 600px) {
    .inside-article > *:not(.post-image):not(.featured-image) { padding-left: 20px; padding-right: 20px; }
}

/* featured image = banner, capped (see balds.md: at natural size it pushed the title and the
   opening answer below the fold, and the first ad unit with them) */
.post-image, .featured-image { margin: 0 0 26px; overflow: hidden; }
.post-image img, .featured-image img, .page-header-image img {
    max-height: 300px; width: 100%; object-fit: cover; display: block;
}
@media (max-width: 768px) { .post-image img, .featured-image img { max-height: 200px; } }

.entry-title { font-size: 2.15rem; margin: 26px 0 10px; }
@media (max-width: 600px) { .entry-title { font-size: 1.6rem; } }
.entry-meta {
    font-family: 'InterVar', sans-serif; font-size: .8125rem; color: var(--b-muted);
    letter-spacing: .01em; padding-bottom: 4px;
}
.entry-meta a { color: var(--b-muted); }
.entry-meta a:hover { color: var(--b-accent); }

/* ---------- article body rhythm ---------- */
.entry-content { font-size: 1.0625rem; line-height: 1.78; color: var(--b-ink-2); }
.entry-content > p:first-of-type {
    font-size: 1.1875rem; line-height: 1.65; color: var(--b-ink);
    border-left: 3px solid var(--b-accent); padding-left: 18px !important;
    margin-left: 34px; margin-right: 34px; margin-bottom: 30px;
}
@media (max-width: 600px) {
    .entry-content > p:first-of-type { margin-left: 20px; margin-right: 20px; font-size: 1.09rem; }
}
.entry-content h2 {
    font-size: 1.5rem; margin-top: 2.4em; margin-bottom: .55em;
    padding-top: .7em; border-top: 1px solid var(--b-rule);
}
.entry-content h3 { font-size: 1.175rem; margin-top: 1.9em; margin-bottom: .4em; color: var(--b-ink); }
.entry-content p { margin-bottom: 1.35em; }
.entry-content ul, .entry-content ol { margin-bottom: 1.5em; }
.entry-content li { margin-bottom: .55em; }
.entry-content li::marker { color: var(--b-warm); }
.entry-content strong { color: var(--b-ink); font-weight: 600; }
.entry-content a { font-weight: 500; }

.entry-content table {
    width: 100%; border-collapse: collapse; margin: 1.9em 0; font-size: .96rem;
    display: block; overflow-x: auto;               /* wide tables scroll, page never does */
}
.entry-content th, .entry-content td {
    border: 1px solid var(--b-rule); padding: .7em .85em; text-align: left; vertical-align: top;
}
.entry-content th {
    background: var(--b-surface-2); font-family: 'InterVar', sans-serif;
    font-weight: 600; font-size: .875rem; letter-spacing: .02em; color: var(--b-ink);
}

.entry-content figure { margin: 2em 0; }
.entry-content figure img {
    width: 100%; max-height: 420px; object-fit: cover;
    border-radius: var(--b-radius); border: 1px solid var(--b-rule);
}

/* The closing editorial disclaimer. Set apart so it reads as a standing commitment rather
   than boilerplate — it is the thing the About page promises appears on every article. */
.entry-content > p:last-child em,
.entry-content > p:last-of-type em {
    display: block; padding: 16px 18px; background: var(--b-surface-2);
    border-left: 3px solid var(--b-warm); border-radius: 0 var(--b-radius) var(--b-radius) 0;
    font-style: normal; font-size: .9375rem; line-height: 1.65; color: var(--b-ink-2);
}

/* "Keep reading" / "Related reading" blocks appended by the agent */
.entry-content h2.wp-block-heading + p { font-size: 1rem; }

/* ---------- hero (front page only — owner rule: never on inner pages) ---------- */
.balds-hero {
    position: relative; margin: 0 0 30px; border-radius: var(--b-radius);
    overflow: hidden; border: 1px solid var(--b-rule); background: var(--b-surface-2);
    min-height: 260px; display: flex; align-items: flex-end;
}
.balds-hero__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.balds-hero__scrim {
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(20,18,16,.06) 0%, rgba(20,18,16,.30) 42%, rgba(20,18,16,.74) 100%);
}
.balds-hero__inner { position: relative; z-index: 2; padding: 40px 34px 30px; color: #fff; }
.balds-hero__eyebrow {
    font-family: 'InterVar', sans-serif; font-size: .75rem; font-weight: 600;
    letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82);
    margin: 0 0 10px;
}
.balds-hero__title {
    font-family: 'Source Serif 4', Georgia, serif; font-weight: 600;
    font-size: clamp(1.7rem, 4.6vw, 2.5rem); line-height: 1.14; color: #fff; margin: 0 0 12px;
    text-wrap: balance;
}
.balds-hero__sub {
    font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,.9);
    margin: 0; max-width: 46ch;
}
@media (max-width: 600px) {
    .balds-hero { min-height: 220px; }
    .balds-hero__inner { padding: 28px 20px 22px; }
}

/* ---------- topic cards ---------- */
.balds-cards {
    list-style: none; margin: 0 0 8px; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(212px, 100%), 1fr)); gap: 16px;
}
.balds-cards li { margin: 0; }
.balds-card {
    display: flex; flex-direction: column; height: 100%;
    background: var(--b-surface); border: 1px solid var(--b-rule);
    border-radius: var(--b-radius); overflow: hidden; text-decoration: none;
    transition: transform .18s var(--b-ease), box-shadow .18s var(--b-ease),
                border-color .18s var(--b-ease);
}
.balds-card:hover, .balds-card:focus-visible {
    transform: translateY(-2px); box-shadow: var(--b-shadow-lift);
    border-color: #d8cfbe;
}
.balds-card__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--b-surface-2); }
.balds-card__media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .5s var(--b-ease);
}
.balds-card:hover .balds-card__media img { transform: scale(1.04); }
.balds-card__body { padding: 15px 16px 17px; display: flex; flex-direction: column; gap: 6px; }
.balds-card__title {
    font-family: 'Source Serif 4', Georgia, serif; font-size: 1.06rem; font-weight: 600;
    line-height: 1.28; color: var(--b-ink); margin: 0;
}
.balds-card:hover .balds-card__title { color: var(--b-accent); }
.balds-card__desc { font-size: .875rem; line-height: 1.55; color: var(--b-muted); margin: 0; }
.balds-card__count {
    font-family: 'InterVar', sans-serif; font-size: .6875rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--b-warm); margin: 2px 0 0;
}

/* ---------- archive / blog post cards ---------- */
.blog .site-main, .archive .site-main, .page-template-blog .site-main {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 20px;
}
.blog .site-main > .post, .archive .site-main > .post {
    margin-bottom: 0 !important; border-bottom: 0 !important;
}
.blog .site-main .inside-article, .archive .site-main .inside-article {
    height: 100%; display: flex; flex-direction: column; padding-bottom: 20px;
    transition: transform .18s var(--b-ease), box-shadow .18s var(--b-ease),
                border-color .18s var(--b-ease);
}
.blog .site-main .post:hover .inside-article,
.archive .site-main .post:hover .inside-article {
    transform: translateY(-2px); box-shadow: var(--b-shadow-lift); border-color: #d8cfbe;
}
.blog .site-main .post-image, .archive .site-main .post-image { margin-bottom: 16px; }
.blog .site-main .post-image img, .archive .site-main .post-image img {
    max-height: 168px; transition: transform .5s var(--b-ease);
}
.blog .site-main .post:hover .post-image img,
.archive .site-main .post:hover .post-image img { transform: scale(1.04); }
.blog .site-main .entry-title, .archive .site-main .entry-title {
    font-size: 1.16rem; line-height: 1.3; margin: 0 0 8px;
}
.blog .site-main .entry-title a, .archive .site-main .entry-title a {
    color: var(--b-ink); text-decoration: none;
}
.blog .site-main .post:hover .entry-title a,
.archive .site-main .post:hover .entry-title a { color: var(--b-accent); }
.blog .site-main .entry-summary, .archive .site-main .entry-summary {
    font-size: .9rem; line-height: 1.6; color: var(--b-muted);
}
.blog .site-main .entry-summary p:last-child { margin-bottom: 0; }
/* Grid children must not each try to be a full-width column. */
.blog .site-main > *, .archive .site-main > * { min-width: 0; }
.blog .site-main .paging-navigation, .archive .site-main .paging-navigation {
    grid-column: 1 / -1;
}

/* ---------- archive headers ---------- */
.page-header, .archive .page-header {
    background: var(--b-surface); border: 1px solid var(--b-rule);
    border-radius: var(--b-radius); padding: 24px 28px; margin-bottom: 22px;
    box-shadow: var(--b-shadow);
}
.page-header h1, .archive .page-header h1 { font-size: 1.8rem; margin: 0 0 6px; }
.page-header .taxonomy-description p { margin: 0; color: var(--b-muted); font-size: .96rem; }

/* ---------- pagination ---------- */
.paging-navigation .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px; margin: 0 4px 8px 0;
    background: var(--b-surface); border: 1px solid var(--b-rule);
    border-radius: var(--b-radius); color: var(--b-ink-2); text-decoration: none;
    font-size: .9375rem; font-weight: 500;
    transition: background .15s var(--b-ease), color .15s var(--b-ease),
                border-color .15s var(--b-ease);
}
.paging-navigation .page-numbers:hover {
    background: var(--b-surface-2); border-color: #d8cfbe; color: var(--b-accent);
}
.paging-navigation .page-numbers.current {
    background: var(--b-accent); border-color: var(--b-accent); color: #fff;
}

/* ---------- ads ---------- */
/* Ad units get a hairline and a quiet label so they are unmistakably not article content —
   that distinction is what "ads mistaken for content" enforcement is about. */
.sc-ad {
    border-top: 1px solid var(--b-rule); border-bottom: 1px solid var(--b-rule);
    padding: 18px 0; background: var(--b-paper);
}

/* ---------- footer ---------- */
.balds-footer-wrap, .site-info {
    background: var(--b-surface); border-top: 1px solid var(--b-rule);
    color: var(--b-muted); font-size: .875rem;
}
.site-info a { color: var(--b-ink-2); }
.site-info a:hover { color: var(--b-accent); }
.balds-footer {
    max-width: 820px; margin: 0 auto; padding: 34px 20px 6px;
    display: grid; grid-template-columns: 1.6fr 1fr; gap: 26px;
}
@media (max-width: 600px) { .balds-footer { grid-template-columns: 1fr; gap: 18px; } }
.balds-footer__brand {
    font-family: 'Source Serif 4', Georgia, serif; font-size: 1.2rem; font-weight: 700;
    color: var(--b-ink); margin: 0 0 8px;
}
.balds-footer__blurb { margin: 0; font-size: .875rem; line-height: 1.65; color: var(--b-muted); }
.balds-footer__heading {
    font-family: 'InterVar', sans-serif; font-size: .6875rem; font-weight: 600;
    letter-spacing: .1em; text-transform: uppercase; color: var(--b-ink); margin: 0 0 10px;
}
.balds-footer__links { list-style: none; margin: 0; padding: 0; }
.balds-footer__links li { margin-bottom: 7px; }
.balds-footer__links a { text-decoration: none; font-size: .9rem; }
.balds-footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- accessibility + motion ---------- */
a:focus-visible, button:focus-visible, .balds-card:focus-visible {
    outline: 2px solid var(--b-accent); outline-offset: 2px; border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: .01ms !important; animation-duration: .01ms !important;
    }
    .balds-card:hover { transform: none; }
    .balds-card:hover .balds-card__media img { transform: none; }
}

/* ---------- corrections found by looking at the rendered page ---------- */

/* The h2 top rule is a section divider between article sections. On the FIRST h2 it drew a
   stray line immediately under the card's top edge — a divider dividing nothing. */
.entry-content > h2:first-child,
.entry-content > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 1.1em; }

/* The homepage opens with an h2, not a paragraph, so the accented lead-paragraph treatment
   must not apply there — it was styling nothing and adding stray margin. */
.home .entry-content > p:first-of-type,
.page-id-156 .entry-content > p:first-of-type {
    font-size: 1.0625rem; color: var(--b-ink-2); border-left: 0;
    padding-left: 0 !important; margin-left: 0; margin-right: 0; margin-bottom: 1.35em;
}

/* Hero legibility: the generated artwork is deliberately pale, so the eyebrow and title sat on
   a bright wall at roughly 2.5:1 contrast. Deepened top-to-bottom and given the text a faint
   shadow — measured, not guessed (see balds.md). */
.balds-hero__scrim {
    background: linear-gradient(180deg, rgba(20,18,16,.42) 0%, rgba(20,18,16,.30) 30%,
                rgba(20,18,16,.52) 62%, rgba(20,18,16,.80) 100%);
}
.balds-hero__title, .balds-hero__eyebrow, .balds-hero__sub {
    text-shadow: 0 1px 14px rgba(20,18,16,.34);
}

/* Cards on the homepage sit inside the article container, so they need breathing room from the
   heading above and the next section below. */
.entry-content .balds-cards { margin-top: 1.1em; margin-bottom: 2.2em; }

/* ---------- width: reading measure vs directory measure ----------
   820px is a READING measure, chosen for articles, and it is right there. But the homepage,
   /articles/ and the category archives are directories of cards, not prose — at 820px the topic
   grid collapsed to 2 columns (measured: 670px of usable grid width against a 212px card
   minimum). Listing pages get a wider container; article pages keep the narrow one. */
.home .grid-container,
.blog .grid-container,
.archive .grid-container,
.page-template-blog .grid-container { max-width: 1120px; }

/* With the extra room, let the grids use it. */
.home .balds-cards { grid-template-columns: repeat(auto-fill, minmax(min(232px, 100%), 1fr)); gap: 18px; }
.home .balds-cards:first-of-type { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }

/* The article container's own inner padding is what actually squeezed the grid, so on the
   homepage the cards break out of it slightly rather than sitting inside two nested paddings. */
.home .inside-article > *:not(.post-image):not(.featured-image) {
    padding-left: 30px; padding-right: 30px;
}

/* ---------- archive card ordering ----------
   GeneratePress renders the featured image AFTER the entry header, so cards read
   title → meta → image → excerpt. For a card the image should lead. The listing cards are
   already flex columns, so this is a pure ordering change: the image stays a direct child of
   .inside-article (and therefore flush to the card edge, unlike rehooking it inside the
   <header>, which would inherit the body padding). */
.blog .site-main .inside-article .post-image,
.archive .site-main .inside-article .post-image { order: -1; margin: 0 0 16px; }
.blog .site-main .inside-article .entry-header,
.archive .site-main .inside-article .entry-header { order: 0; }
.blog .site-main .inside-article .entry-summary,
.archive .site-main .inside-article .entry-summary { order: 1; }
.blog .site-main .inside-article .entry-meta,
.archive .site-main .inside-article .entry-meta { order: 2; }
/* Card titles carry the date+author already; the footer meta is just the category chip. */
.blog .site-main .entry-meta a, .archive .site-main .entry-meta a { text-decoration: none; }
.blog .site-main .entry-meta a:hover, .archive .site-main .entry-meta a:hover {
    text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- mobile overflow guard ----------
   Measured on a 375px viewport: the two "Start here" cards used a 320px grid floor while only
   ~275px was available inside the article padding, so the grid track was wider than its
   container and the whole page scrolled sideways. Every card floor is now min(Xpx, 100%) so it
   can collapse. This is the belt-and-braces check that the symptom cannot come back via some
   other wide child (a long URL, a table, an embed). */
html, body { max-width: 100%; overflow-x: clip; }
.entry-content > * { max-width: 100%; }

/* ---------- specificity fix: card grids are not prose lists ----------
   `.entry-content ul` (one class + one element = specificity 0,1,1) outranks `.balds-cards`
   (0,1,0), so the prose list padding-left was winning and pushing every card grid ~24px to the
   right — measured on mobile as a 111px left gap against a 61px right gap. The grids are laid
   out with CSS grid, not list indentation, so the prose rules are reset here explicitly. */
.entry-content ul.balds-cards {
    padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; list-style: none;
}
.entry-content ul.balds-cards > li { margin: 0; }
.entry-content ul.balds-cards > li::marker { content: none; }

/* ---------- homepage intro ----------
   The SEO/orientation lead. Sized up so it reads as an introduction rather than body copy, but
   with no accent bar: under a full-width hero, a second strong vertical rule is visual noise.
   Articles keep the barred lead treatment, where there is no hero above it. */
.balds-intro {
    font-size: 1.15rem !important; line-height: 1.62; color: var(--b-ink) !important;
    margin-bottom: 1.1em !important;
}
.balds-intro + p { color: var(--b-ink-2); }
.home .entry-content > h2:first-of-type { margin-top: 1.9em; }
@media (max-width: 600px) { .balds-intro { font-size: 1.08rem !important; } }

/* Pages with no featured image and (on the front page) no title have .entry-content as the very
   first child of the card, so the text sat flush against the card's top border. */
.inside-article > .entry-content:first-child { padding-top: 30px; }

/* ---------- hero must never become a grid item ----------
   On a posts-index front page the body carries the `blog` class, which turns .site-main into the
   archive CARD GRID — and the hero, being a child of .site-main, silently became a 333px grid
   cell beside the content instead of a full-width banner above it. Only showed up on
   europerealtor, whose front page is the post index; balds' static-page homepage never hit it.
   Spanning all columns is correct whether or not the grid rule applies. */
.site-main > .er-hero,
.site-main > .balds-hero { grid-column: 1 / -1; width: 100%; }

/* GeneratePress paints a solid BACKGROUND on the current menu item from its own dynamic CSS,
   which fought the sliding-underline treatment and rendered as a dark filled block behind
   "Home". The underline plus the accent colour is the whole indicator; kill the slab. */
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-item > a:hover,
.main-navigation .main-nav ul li.current_page_item > a,
.main-navigation .main-nav ul li[class*="current"] > a { background: transparent !important; }
.main-navigation .main-nav ul li.current-menu-item > a { color: var(--b-accent) !important; }

/* ---------- mobile menu toggle: white-on-white ----------
   GeneratePress colours the nav text white (its default assumes a dark nav bar). This design
   makes the nav bar WHITE, and the <button class="menu-toggle"> inherits that colour — so on
   mobile the toggle was present and 375x60 but completely invisible: an empty strip where the
   menu should be. Identical in kind to the nu-weight defect where an inherited white colour
   made a whole submenu disappear. Structural checks cannot see this; only a rendered page can. */
.main-navigation .menu-toggle,
.main-navigation .menu-toggle:hover,
.main-navigation .mobile-menu {
    color: var(--b-ink) !important;
    background: transparent !important;
    font-family: 'InterVar', sans-serif;
    font-weight: 600;
    letter-spacing: .02em;
}
.main-navigation .menu-toggle:hover { color: var(--b-accent) !important; }
/* The mobile dropdown panel sits on the same white surface — make sure its links are ink too. */
.main-navigation.toggled .main-nav > ul { background: var(--b-surface); }
.main-navigation.toggled .main-nav a { color: var(--b-ink-2) !important; }