/**
 * zb-editorial.css — Icon system + upgraded homepage section visuals.
 * Loaded after zb-base.css / zb-components.css; only adds new rules,
 * does not override existing tool-page styles (zb-tools.css untouched).
 */

/* --- Single blog post ---
   .zb-post__* had NO dedicated CSS anywhere in the codebase - content
   was rendering full container width edge-to-edge (no reading-column
   constraint), the featured/inline images had no size cap so a raw
   900x600 upload displayed at native size, and there was no spacing
   between the head/meta/image/content blocks. This mirrors the
   already-working .zb-tool-page__layout grid (zb-tools.css) so blog
   posts get the same centered-column-with-sidebar-gutter treatment
   tool pages already have. */
.zb-post { padding-block: 1.5rem clamp(2rem, 4vw, 3rem); }
.zb-post__head { margin-bottom: 1.25rem; }
.zb-post__cats { margin-bottom: 0.75rem; }
.zb-post__title { margin: 0 0 0.5em; }
.zb-post__meta { display: flex; align-items: center; gap: 0.5em; color: var(--c-text-muted, #64748b); font-size: 0.9rem; }
.zb-post__sep { color: var(--c-border, #e2e8f0); }
.zb-post__featured { margin: 1.5rem 0; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-bg-subtle, #f8fafc); }
.zb-post__featured-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.zb-post__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2.5rem;
    margin-top: 2rem;
}
@media (max-width: 900px) { .zb-post__layout { grid-template-columns: 1fr; } }
.zb-post__content { font-size: 1.05rem; line-height: 1.7; }

/* --- Related articles section — was butting straight up against the
   content above with zero separation. --- */
.zb-related-posts {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border, #e2e8f0);
}
.zb-related-posts h2 { margin-bottom: 1.25rem; }

/* --- Table of contents ---
   The actually-rendered TOC markup (baked into post content) uses a
   different, hyphenated class set (zb-toc-list/zb-toc-sub/zb-toc-btn)
   than the unrelated BEM .zb-toc__item system defined elsewhere for
   the [zb_toc] shortcode - only the outer .zb-toc container happened
   to share a class name and inherit styling by coincidence. Nothing
   styled the inner structure, so h3 sub-items had no visual
   distinction from h2 items despite already being correctly marked
   with the "zb-toc-sub" class in the markup. */
.zb-toc-hd { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6em; }
.zb-toc-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-text-muted, #64748b); }
.zb-toc-btn { background: none; border: 0; cursor: pointer; color: var(--c-text-muted, #64748b); font-size: 1.1rem; line-height: 1; padding: 0.2em; }
.zb-toc-btn:hover { color: var(--c-text, #0f172a); }
.zb-toc-bd[hidden] { display: none; }
.zb-toc-list {
    list-style: none;
    counter-reset: zb-toc;
    padding: 0;
    margin: 0;
}
.zb-toc-list > li {
    counter-increment: zb-toc;
    padding: 0.25em 0;
}
.zb-toc-list > li::before {
    content: counter(zb-toc) '.';
    color: var(--c-primary, #0b0b0b);
    font-weight: 700;
    margin-right: 0.5em;
}
.zb-toc-list a { color: var(--c-text, #0f172a); }
.zb-toc-list a.is-active,
.zb-toc-list a.zb-toc-active { color: var(--c-primary, #0b0b0b); font-weight: 700; }
/* Sub-items (h3s under the preceding h2) - indented, no number of
   their own, smaller/muted so the h2-level items still read as the
   primary scan path. */
.zb-toc-list li.zb-toc-sub {
    counter-increment: none;
    padding-left: 1.5em;
    font-size: 0.92em;
}
.zb-toc-list li.zb-toc-sub::before {
    content: '\2013';
    color: var(--c-text-muted, #64748b);
    font-weight: 400;
}
.zb-toc-list li.zb-toc-sub a { color: var(--c-text-muted, #64748b); }
.zb-toc-list li.zb-toc-sub a.is-active,
.zb-toc-list li.zb-toc-sub a.zb-toc-active { color: var(--c-primary, #0b0b0b); }

/* --- Single object page ---
   Same gap as .zb-post__* before it was fixed: the entire
   .zb-object-page__* namespace had zero dedicated CSS. Less visually
   catastrophic than the blog post bug (no sidebar, smaller media box)
   but the visual/data columns had no grid, dimension table used bare
   browser-default table styling, and there was no spacing between the
   summary line, similar-size section, related section, and FAQ. */
.zb-object-page { padding-block: 1.5rem clamp(2rem, 4vw, 3rem); }
.zb-object-page__head { margin-bottom: 1.5rem; }
.zb-object-page__title { margin: 0 0 0.4em; }
.zb-object-page__cats { margin-bottom: 0.5rem; }

.zb-object-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 2rem;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
@media (max-width: 700px) { .zb-object-page__layout { grid-template-columns: 1fr; } }

.zb-object-page__summary {
    font-size: 1.05rem;
    padding: 0.9em 1.1em;
    background: var(--c-bg-subtle, #f8fafc);
    border-radius: 8px;
    margin-bottom: 1.25rem;
}
.zb-object-page__silhouette { text-align: center; color: var(--c-primary, #0b0b0b); }
.zb-object-page__silhouette svg { width: 100%; max-width: 240px; }
.zb-object-page__silhouette-view { font-size: 0.8rem; color: var(--c-text-muted, #64748b); margin-top: 0.5em; }

.zb-dim-table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; font-size: 0.95rem; }
.zb-dim-table th, .zb-dim-table td { padding: 0.65em 0.9em; text-align: left; border-bottom: 1px solid var(--c-border, #e2e8f0); }
.zb-dim-table th { width: 40%; font-weight: 600; color: var(--c-text-muted, #64748b); background: var(--c-bg-subtle, #f8fafc); }

.zb-object-source { font-size: 0.85rem; color: var(--c-text-muted, #64748b); margin-top: 0.75rem; }

.zb-object-page__content { margin-bottom: 2rem; }
.zb-object-page__similar,
.zb-object-page__related {
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid var(--c-border, #e2e8f0);
}
.zb-object-page__similar h2,
.zb-object-page__related h2 { margin-bottom: 1.25rem; }

/* Section headline scale — the base .zb-section__title (zb-base.css)
   falls back to plain <h2> sizing (22-30px), so left-aligned section
   heads (comparisons-strip, latest-posts, tools-section) rendered
   noticeably smaller than centered ones (why-us, faq, how-it-works),
   which had their own larger --center override. Unifying both to one
   bigger scale so every section headline carries the same weight. */
.zb-section__title {
    font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}
.zb-section__title--center {
    font-size: clamp(2rem, 1.5rem + 2.5vw, 3rem);
}

/* --- Primary nav dropdowns ---
   WP core's wp_nav_menu() outputs <ul class="sub-menu"> for children and
   tags the parent <li> with .menu-item-has-children automatically — no
   custom PHP needed, only the CSS to reveal/style it was missing. */
.zb-nav__item.menu-item-has-children > .zb-nav__link::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 6px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    opacity: 0.7;
}

@media (min-width: 901px) {
    .zb-nav__item .sub-menu {
        list-style: none;
        margin: 0;
        padding: 0.5rem;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: var(--c-surface, #fff);
        border: 1px solid var(--c-border, #e2e8f0);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(15, 23, 42, 0.18);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
        z-index: 200;
    }
    .zb-nav__item.menu-item-has-children:hover > .sub-menu,
    .zb-nav__item.menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .zb-nav__item .sub-menu .zb-nav__link {
        display: block;
        color: var(--c-text, #0f172a);
        padding: 0.55em 0.75em;
        border-radius: 8px;
        font-weight: 500;
    }
    .zb-nav__item .sub-menu .zb-nav__link:hover {
        background: var(--c-bg-subtle, #f8fafc);
        color: var(--c-primary, #4f46e5);
    }
    .zb-nav__item .sub-menu .zb-nav__link::after {
        content: none;
    }

    /* Third level (Guides > category > sub-category) — the "Guides"
       dropdown now nests a category tree, so items one level down
       (Length & Distance, Weight & Mass...) have their own children
       and need a flyout, unlike the plain leaf links the rules above
       were written for. */
    .zb-nav__item .sub-menu .menu-item-has-children {
        position: relative;
    }
    .zb-nav__item .sub-menu .menu-item-has-children > .zb-nav__link::after {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        margin-left: 6px;
        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;
        transform: translateY(-1px) rotate(-45deg);
        opacity: 0.6;
        float: right;
    }
    .zb-nav__item .sub-menu .sub-menu {
        position: absolute;
        top: -0.5rem;
        left: 100%;
        margin-left: 0.35rem;
    }
    /* The nav is right-aligned now, so the rightmost top-level item's
       (currently "Guides") third-level flyout has no room to open
       further right — it was running off-screen. Flip it to open
       left instead, just for the last item. */
    .zb-nav__list > .zb-nav__item:last-child .sub-menu .sub-menu {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 0.35rem;
    }
}

/* --- Tools mega-menu ---
   Scoped to the Tools nav item only (menu-item-170, the class WP
   auto-assigns from its post ID) - every other top-level item keeps
   the plain hover flyout above untouched. Tools now has 31 nested
   items across 3 levels (9 categories x their tools), too much for a
   ~220px hover flyout, so it gets its own click-triggered ("hamburger")
   wide panel instead - a small icon toggles it via JS (zb-main.js
   initToolsMegaMenu), not :hover. */
.zb-nav__tools-icon {
    display: inline-flex;
    flex-direction: column;
    gap: 3px;
    width: 14px;
    margin-left: 0.5em;
}
.zb-nav__tools-icon span {
    display: block;
    width: 100%;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
}
@media (min-width: 901px) {
    #zb-primary-nav .menu-item-170 > .sub-menu {
        display: none;
        position: fixed;
        top: 69px; /* header min-height (68px) + 1px border */
        left: 0;
        right: 0;
        min-width: 0;
        max-height: calc(100vh - 69px);
        overflow-y: auto;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        align-items: start;
        gap: 2rem;
        background: var(--c-surface, #fff);
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--c-border, #e2e8f0);
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
        padding: 2rem clamp(1.5rem, 4vw, 3rem);
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    #zb-primary-nav .menu-item-170.is-tools-open > .sub-menu {
        display: grid;
    }
    /* Category column header. */
    #zb-primary-nav .menu-item-170 > .sub-menu > .zb-nav__item > .zb-nav__link {
        display: block;
        padding: 0 0 0.5em;
        margin-bottom: 0.5em;
        border-bottom: 2px solid var(--c-accent, #ffcc00);
        color: var(--c-text, #0f172a);
        font-weight: 800;
        font-size: 1rem;
        border-radius: 0;
    }
    #zb-primary-nav .menu-item-170 > .sub-menu > .zb-nav__item > .zb-nav__link::after {
        content: none;
    }
    /* Individual tools under each category - static in-column list,
       not a flyout (overrides the generic third-level flyout rules
       above, which only apply outside #zb-primary-nav .menu-item-170). */
    #zb-primary-nav .menu-item-170 .sub-menu .sub-menu {
        position: static;
        list-style: none;
        margin: 0.15em 0 0.6em;
        padding: 0 0 0 0.85em;
        background: none;
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }
    #zb-primary-nav .menu-item-170 .sub-menu .sub-menu .zb-nav__link {
        font-weight: 400;
        font-size: 0.85rem;
        color: var(--c-text-muted, #64748b);
        padding: 0.25em 0;
    }
}

@media (max-width: 900px) {
    .zb-nav__item .sub-menu {
        list-style: none;
        margin: 0 0 0.5rem;
        padding-left: 1rem;
        border-left: 2px solid var(--c-border, #e2e8f0);
    }
    .zb-nav__item .sub-menu .zb-nav__link {
        font-size: 0.9rem;
        border-bottom: none;
        padding: 0.6em 0.5em;
    }
}

/* Section subtitle — supporting line under a .zb-section__title, used
   where a section needs to explain WHY it's there, not just label it. */
.zb-section__subtitle {
    color: var(--c-text-muted, #64748b);
    margin: 0.4rem 0 0;
    font-size: 1rem;
    max-width: 46ch;
}
.zb-tools-section__subtitle {
    text-align: center;
    color: var(--c-text-muted, #64748b);
    max-width: 52ch;
    margin: 0.5rem auto 0;
}

/* .zb-highlight styling (solid black box + yellow text) now lives in
   inc/zb-core-setup.php's zb_enqueue_token_overrides() — it needs to
   win over the parent plugin's global styles the same way every other
   section rule there does, so keeping a second, weaker definition here
   just risked exactly the specificity conflict it caused once already
   (a compound dark-section selector here beat the plain .zb-highlight
   override there, making highlighted text render invisible). */

/* Section backgrounds (flat tint + featured-tool's grid-paper) now
   live in inc/zb-core-setup.php's zb_enqueue_token_overrides() —
   every section uses the same grid-paper motif site-wide, so a single
   rule there covers all of them instead of a per-section one here. */

/* Article content tables — conversion charts, comparison tables — get
   real styling instead of unstyled browser-default table borders. */
.zb-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}
.zb-prose caption {
    text-align: left;
    font-size: 0.85rem;
    color: var(--c-text-muted, #64748b);
    margin-bottom: 0.5em;
}
.zb-prose th,
.zb-prose td {
    padding: 0.65em 0.9em;
    text-align: left;
    border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.zb-prose thead th {
    background: var(--c-bg-subtle, #f8fafc);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
    color: var(--c-text-muted, #64748b);
}
.zb-prose tbody tr:nth-child(even) {
    background: var(--c-bg-subtle, #f8fafc);
}
.zb-prose td:last-child,
.zb-prose th:last-child {
    font-family: var(--zb-font-mono, ui-monospace, monospace);
}

/* --- Content headings — more editorial weight than the plain h2/h3
   sizing in zb-base.css, plus a small brand-accent mark before each h2
   so section breaks read clearly at a glance while scanning. --- */
.zb-prose h2 {
    font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
    font-weight: 800;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 0.5em;
}
.zb-prose h2::before {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 1em;
    background: var(--c-accent, #ffcc00);
    border-radius: 2px;
    flex-shrink: 0;
}
.zb-prose h3 {
    font-size: 1.15rem;
    font-weight: 700;
}

/* --- Tip callout — distinct from .zb-quick-answer (the direct-answer
   summary): a filled amber box for supplementary advice/notes an
   author drops into content via the block editor (Group block ->
   Advanced -> Additional CSS Class(es) -> "zb-tip"). --- */
.zb-tip {
    background: color-mix(in srgb, var(--c-accent, #ffcc00) 12%, var(--c-surface, #fff));
    border: 1px solid color-mix(in srgb, var(--c-accent, #ffcc00) 45%, transparent);
    border-radius: 10px;
    padding: 1em 1.2em 1em 1em;
    display: flex;
    gap: 0.7em;
    align-items: flex-start;
}
.zb-tip::before {
    content: '\1F4A1';
    font-size: 1.2em;
    line-height: 1.3;
    flex-shrink: 0;
}
.zb-tip > *:last-child { margin-bottom: 0; }
.zb-tip p { margin: 0; }

/* --- Quote — the block editor's native Quote block (blockquote +
   optional cite), given real editorial presence: large decorative
   quotation mark instead of just an accent bar. --- */
.zb-prose blockquote {
    position: relative;
    background: var(--c-bg-subtle, #f8fafc);
    border-left: 4px solid var(--c-primary, #0b0b0b);
    border-radius: 0 10px 10px 0;
    padding: 1.1em 1.3em 1.1em 2.6em;
    font-size: 1.05rem;
    font-style: italic;
    color: var(--c-text, #0f172a);
}
.zb-prose blockquote::before {
    content: '\201C';
    position: absolute;
    left: 0.3em;
    top: 0.05em;
    font-size: 2.5em;
    font-style: normal;
    line-height: 1;
    color: var(--c-accent, #ffcc00);
    font-family: Georgia, serif;
}
.zb-prose blockquote cite {
    display: block;
    margin-top: 0.6em;
    font-size: 0.85rem;
    font-style: normal;
    font-weight: 600;
    color: var(--c-text-muted, #64748b);
}
.zb-prose blockquote cite::before { content: '\2014\00A0'; }

/* --- Lists — custom markers instead of the browser-default disc/
   decimal, matching the brand accent instead of looking unstyled. --- */
.zb-prose ul { list-style: none; padding-left: 0.2em; }
.zb-prose ul > li {
    position: relative;
    padding-left: 1.5em;
}
.zb-prose ul > li::before {
    content: '';
    position: absolute;
    left: 0.15em;
    top: 0.6em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--c-accent, #ffcc00);
    border: 1.5px solid var(--c-primary, #0b0b0b);
}
.zb-prose ol {
    list-style: none;
    padding-left: 0.2em;
    counter-reset: zb-ol;
}
.zb-prose ol > li {
    position: relative;
    padding-left: 2em;
    counter-increment: zb-ol;
}
.zb-prose ol > li::before {
    content: counter(zb-ol);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5em;
    height: 1.5em;
    border-radius: 50%;
    background: var(--c-primary, #0b0b0b);
    color: var(--c-accent, #ffcc00);
    font-size: 0.75rem;
    font-weight: 700;
}
.zb-prose li > ul, .zb-prose li > ol { margin-top: 0.5em; }

/* Quick-answer callout — the first thing a reader sees on comparison
   articles, styled distinctly so it reads as "the answer" at a glance. */
.zb-quick-answer {
    background: var(--c-bg-subtle, #f8fafc);
    border-left: 4px solid var(--c-accent, #06b6d4);
    border-radius: 8px;
    padding: 1.1em 1.3em;
    font-size: 1.05rem;
}

.zb-icon {
    display: inline-block;
    flex-shrink: 0;
}

/* Circular icon badge — used in why-us cards, trust-strip items, and
   the tools-showcase group headers already rely on a colored circle
   (zb-tool-group__icon); this class gives the same treatment to any
   new icon usage. */
.zb-icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    /* Was a diagonal gradient straight from --c-primary (black) to
       --c-accent (yellow) - blending black into yellow passes through
       a muddy dark-olive midpoint, and the white icon color read as
       low-contrast against the yellow end of that gradient. A solid
       dark chip with a yellow icon avoids the muddy blend entirely and
       keeps icon-to-background contrast high across the whole circle. */
    background: var(--c-primary, #0b0b0b);
    color: var(--c-accent, #ffcc00);
}
.zb-icon-circle--sm {
    width: 32px;
    height: 32px;
}
.zb-icon-circle--sm .zb-icon {
    width: 18px;
    height: 18px;
}

/* Trust strip — was plain text pills, now icon + label. */
.zb-trust-strip__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.zb-trust-strip__icon {
    color: var(--c-accent, #06b6d4);
    display: inline-flex;
}

/* Why-us cards — icon circle above title instead of emoji glyph. */
.zb-why-card__icon {
    margin-bottom: 16px;
}

/* Featured Tool section — padding intentionally NOT overridden here;
   the .zb-section base class (zb-base.css) already sets the site-wide
   vertical rhythm (clamp(2rem, 4vw, 3.5rem)) and every other homepage
   section relies on it unmodified. Background (with grid-paper motif)
   is defined once, above, near the other new backdrop rules. */
.zb-featured-tool__head {
    text-align: center;
    margin-bottom: 1.5rem; /* matches .zb-section__head elsewhere */
}
/* .zb-section__title--center carries a 3rem bottom margin site-wide,
   sized for titles with no subtitle directly beneath them. This is the
   one homepage section that pairs a title with a subtitle, so it needs
   a tighter title-to-subtitle gap than the site default. */
.zb-featured-tool__head .zb-section__title--center {
    margin-bottom: 0.5rem;
}
.zb-featured-tool__subtitle {
    color: var(--c-text-muted, #64748b);
    max-width: 560px;
    margin: 0.5rem auto 0;
}
.zb-featured-tool__widget {
    max-width: 640px;
    margin: 0 auto;
    background: var(--c-surface, #fff);
    border: 1px solid var(--c-border, #e2e8f0);
    border-radius: 20px; /* matches .zb-why-card / .zb-testimonial-card */
    padding: 2rem;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.zb-featured-tool__tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 24px;
}
.zb-featured-tool__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--c-border, #e2e8f0);
    background: var(--c-surface, #fff);
    color: var(--c-text-muted, #64748b);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.zb-featured-tool__tab:hover {
    border-color: var(--c-primary, #4f46e5);
    color: var(--c-primary, #4f46e5);
}
.zb-featured-tool__tab.is-active {
    background: var(--c-primary, #4f46e5);
    border-color: var(--c-primary, #4f46e5);
    color: #fff;
}
.zb-featured-tool__tab .zb-icon {
    width: 16px;
    height: 16px;
}

/* --- Header / nav polish --- */

/* Sticky header gets a blur so content scrolling under it stays legible
   without needing a heavier opaque bar. */
.zb-site-header {
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
}

/* Logo mark now wraps an actual SVG icon (see zb_logo_html()) instead of
   an empty decorative square — center it inside the existing square. */
.zb-logo__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.zb-logo__mark .zb-icon {
    position: relative;
    z-index: 1;
    color: #fff;
}

/* Active-page underline indicator, animates in on hover for every link. */
.zb-nav__link {
    position: relative;
}
.zb-nav__link::after {
    content: '';
    position: absolute;
    left: 0.85em;
    right: 0.85em;
    bottom: 4px;
    height: 2px;
    background: var(--c-accent, #06b6d4);
    border-radius: 1px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.15s ease;
}
.zb-nav__link:hover::after,
.zb-nav__link[aria-current="page"]::after {
    transform: scaleX(1);
}

/* Search submit icon needs an explicit color — dashicons inherited it
   automatically, inline SVG uses currentColor and needs the parent set. */
.zb-search-form__submit {
    color: #fff;
}
.zb-search-form__submit .zb-icon {
    color: #fff;
}

/* CTA button gets a touch more presence to match the rest of the
   redesigned homepage (shadow + slightly bolder weight). */
.zb-site-header__cta {
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(6, 182, 212, 0.25);
}

/* --- Tool card real photos ---
   .zb-tool-card has 1.2rem padding (zb-components.css); the media
   block bleeds out to the card edges with negative margins so the
   photo reaches the rounded corners, then the icon badge floats on
   top of it instead of sitting inline above the title. */
.zb-tool-card__media {
    position: relative;
    margin: -1.2rem -1.2rem 0.85rem;
    border-radius: 12px 12px 0 0;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    background: var(--c-bg-subtle, #f8fafc);
}
.zb-tool-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}
.zb-tool-card:hover .zb-tool-card__img {
    transform: scale(1.04);
}
.zb-tool-card__icon--badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    margin-bottom: 0;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.25);
}

/* --- Header: bolder brand presence --- */
.zb-site-header {
    background: linear-gradient(180deg, #0b0f1a 0%, #10152a 100%);
    border-bottom: 1px solid rgba(6, 182, 212, 0.15);
}
.zb-logo__mark {
    background: linear-gradient(135deg, var(--c-primary, #4f46e5), var(--c-accent, #06b6d4));
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.4);
}

/* --- Footer: visually distinct from the dark header, warmer surface
   with an accent top border instead of matching the header exactly. --- */
.zb-site-footer {
    background: #05070d;
    border-top: 2px solid var(--c-accent, #06b6d4);
}
.zb-site-footer a:hover {
    color: var(--c-accent, #06b6d4);
}