:root {
    /* Brand Colors (Vance Medical palette — teal family) */
    --primary-color: #008080;       /* Vance teal (replaced legacy SLA orange) */
    --primary-hover: #006666;       /* derived darker teal for hover (palette has no hover stop) */
    --primary-light: #78bfbf;       /* palette light teal */
    --primary-pale:  #aedbdb;       /* palette pale teal */
    --primary-wash:  #def4f4;       /* palette teal wash — use for chip/pill backgrounds */
    --secondary-color: #0A1929;     /* navy retained — pairs with teal */
    --accent-color:  #F3F4F6;

    /* Text Colors */
    --text-main: #1F2937;
    --text-light: #6B7280;
    --text-white: #FFFFFF;

    /* Typography */
    --font-main: 'Inter', system-ui, -apple-system, sans-serif;
    --font-heading: 'Outfit', sans-serif;

    /* Spacing */
    --container-width: 1200px;
    --header-height: 80px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    /* --- Corner radius scale ------------------------------------------------
       The homepage spotlight hero is the reference for the whole site's corner
       language, and it already carries three steps:

           CTA buttons ......  6px  ->  --radius-control
           search field ..... 10px  ->  --radius-field
           trust card ....... 14px  ->  --radius-surface

       Everything rounds. The single deliberate exception is the article card —
       post tiles stay square so an editorial grid reads as a wall of articles
       rather than a tray of widgets. That exception is enforced in one place
       (see "Article cards stay square" below), never by ad-hoc zeroes.

       Thin elements need no special casing: CSS clamps a radius that exceeds
       half the box, so a 4px accent bar given --radius-control renders as a
       pill on its own. */
    --radius-control: 6px;   /* buttons, icon tiles, chips, badges, avatars   */
    --radius-field:   10px;  /* inputs, selects, search bars, dropdown menus  */
    --radius-surface: 14px;  /* cards, panels, modals, banners, media boxes   */
    --radius-pill:    999px; /* deliberately-round pills and toggles          */
    --radius-article: 0;     /* article cards — the one square exception      */

    /* Legacy aliases. ~43 call sites already reference these and they split
       cleanly along the new scale: --radius-md sits on buttons, links and list
       rows; --radius-lg on cards, panels and wrappers. Keeping the names means
       those sites inherit the system without being touched. */
    --radius-md: var(--radius-control);
    --radius-lg: var(--radius-surface);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Global corner-radius default.

   `img` is deliberately absent. An image should take its shape from whatever
   clips it — a rounded card with `overflow: hidden`, or an explicit rule for
   an avatar — so giving every image a radius of its own only fights those
   containers. This selector list previously carried `border-radius: 0
   !important`, which is why several components downstream still re-declare
   their radius with `!important`; those declarations remain correct, they are
   simply no longer load-bearing. */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    border-radius: var(--radius-control);
}

body {
    font-family: var(--font-main);
    color: var(--text-main);
    background-color: #FFFFFF;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s;
}

ul {
    list-style: none;
}

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

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5em;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    font-size: 14px;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

/* Header "My Dashboard" CTA — boxed button: white bg, teal border/text,
   inverts (teal bg, white text) on hover. Was a plain underline-on-hover
   text link; requested 2026-08-11 to read as a button next to VANCE-Ai. */
.header-dashboard-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px; /* matches .vance-nav-askai (vance-askai.css) exactly — global
                     box-sizing:border-box means this border is absorbed inside
                     the height instead of adding to it. Requested 2026-08-11:
                     "same dimensions as the vance-ai [button]". */
    color: var(--primary-color);
    background: #fff;
    border: 1.5px solid var(--primary-color);
    font-weight: 700;
    font-size: 14px;
    padding: 0 16px;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
    border-radius: var(--radius-control);
}

.header-dashboard-link:hover {
    background: var(--primary-color);
    color: #fff;
}

.btn-outline {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
}

.btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* Header */
.site-header {
    background: white;
    height: var(--header-height);
    display: flex;
    align-items: center;
    border-bottom: 1px solid #2f4f6f;
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Promotes the sticky header to its own compositing layer. Sticky elements
       sitting directly above an overflow:hidden section (the hero) are a known
       Chromium trigger for a stale-paint flash beneath the header on first
       render, which clears on the repaint scroll/click forces. */
    transform: translateZ(0);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* logo.png is the VANCE wordmark on a padded 16:9 canvas (~28% transparent
   margin above and below the mark — see the same note in vance-askai.css by
   .vance-askai-intro__logo-img). .logo-area is the crop viewport: fixed to
   the wordmark's actual visible size with overflow:hidden, while
   the <img> inside keeps its full natural width (125px, height auto ≈70px)
   — align-items:center + the overflow clip crop away the top/bottom padding
   symmetrically, the same as object-fit:cover would, but by rasterizing the
   image at its full natural size and only clipping the paint, not by asking
   the browser to decode straight down to a ~32px-tall target. A first pass
   at this fix used object-fit:cover sized directly to the target box, which
   was pixelated — that tiny a target gave the compositor very little to
   antialias the wordmark's diagonal arrow edge with, especially inside
   .site-header's transform:translateZ(0) GPU layer (see that rule's note).
   Corrected 2026-07-28; +10% (114→125) requested same day.
   2026-08-11: the box height was tightened to the wordmark's *exact* pixel
   bounding box (measured from logo.png's alpha channel — no soft/antialiased
   fringe, a hard edge right at the crop line), leaving zero rounding margin.
   Sub-pixel layout rounding then clipped the arrow tip's peak in production
   (reported as "logo cut off at the top of the V"). +4px on both breakpoints
   restores a safety margin without visibly growing the logo. */
.logo-area {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 24px;
    font-family: var(--font-heading);
    width: 125px; /* +10% from 114px */
    height: 36px; /* +4px safety margin, from 32px — see note above */
    overflow: hidden;
}

.logo-area img {
    width: 125px;
    height: auto;
}

/* Desktop-only: logo sits inline with the menu here, so size is scoped to
   min-width:768px to avoid overflowing the fixed 70px mobile header.
   2026-07-24: per request, the nav is dropped to align with the BOTTOM of the
   logo instead of being vertically centred. .header-content stays
   align-items:center (logo remains centred); .main-nav and .header-actions are
   pinned to flex-end. The reduced link bottom-padding pulls the menu text down
   so its baseline meets the logo's bottom edge. This only lines up now that
   the logo box above is cropped to its visible content (see note there) —
   with the old object-fit:contain box, "the logo's bottom edge" was ~20px of
   transparent padding below the actual mark, and the flex-end nav lined up
   with that instead, reading as dropped far below the logo (reported
   2026-07-28). Mobile is untouched — the mobile nav is
   a fixed off-canvas drawer, not a flex child, so align-self has no effect there. */
@media (min-width: 768px) {
    .logo-area {
        width: 145px; /* +15% from 125px, same glyph aspect ratio */
        height: 40px; /* +4px safety margin, from 36px — see note above */
    }
    .logo-area img {
        width: 145px;
        height: auto;
    }
    /* Drop the primary nav to the bottom of the header row (logo's baseline). */
    .main-nav {
        align-self: flex-end;
    }
    .main-nav a {
        padding-bottom: 2px; /* was 8px — lower the text to meet the logo bottom */
    }
    /* 2026-08-11: header-actions (social icons, VANCE-Ai button, My Dashboard
       link) was still centred in the row via .header-content's align-items,
       sitting ~5px above the nav/logo bottom edge — reported as not lining up
       with the menu. align-self drops the whole cluster to the row bottom.
       Its children also need their own align-items:flex-end (icons/button/
       link are different heights, so each needs its OWN bottom edge on the
       baseline, not just the tallest child's) — that override lives with
       .header-actions's base rule further down the file; see the note there
       for why it can't live in this block. */
    .header-actions {
        align-self: flex-end;
    }
    /* Mega Menu Pro renders inside .main-nav; if its wrapper is ever hoisted to a
       direct flex child, keep it bottom-aligned too. Nudge its bar down to match. */
    #mega-menu-wrap-primary-menu {
        align-self: flex-end;
    }
    #mega-menu-wrap-primary-menu #mega-menu-primary-menu {
        margin-bottom: 2px;
    }
    /* The .main-nav a padding-bottom trick above only reaches the plain
       wp_nav_menu fallback markup — Mega Menu Pro's real top-level link sets
       its own line-height (currently 40px, matching the menu bar's full
       height) with no padding, which CENTERS the text in that box instead of
       sitting it at the bottom. The bar itself was correctly bottom-aligned
       to the logo, but the text inside it wasn't, reading as "the menu is
       too high" / not level with the logo's underline (reported 2026-07-28).
       Same double-ID + !important specificity as the font-weight override
       below: switch the link to a flex container so its text sits flush
       against the bottom of the bar regardless of the plugin's line-height. */
    #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link {
        display: flex !important;
        align-items: flex-end !important;
        /* height:100% was circular — the <li> derives ITS height from this
           same link's line-height, so shrinking line-height below also
           shrank the 100% target. Pin to the plugin's own original 40px
           instead, so flex-end has the full bar to push the text against. */
        height: 40px !important;
        line-height: 1.2 !important;
        padding-bottom: 2px !important;
    }
    /* Fallout from the rule above, reported 2026-08-28 as "a down arrow
       floating above the menu item".

       The dropdown caret is a <span class="mega-indicator"> child of that
       link, and the plugin gives it an explicit height:38px — nearly the
       whole 40px bar. Its glyph renders at the TOP of that 38px box while
       the flex-end rule above pins the link's TEXT to the bottom, so the
       caret ended up floating ~10px clear of the word it belongs to.
       Measured before/after on the live bar: offset 10px -> -1px, i.e. dead
       level with the text.

       height:auto lets the span shrink to its glyph so the parent's
       align-items:flex-end can seat it on the same baseline as the text.
       Do not set a fixed height here — that is what caused this. */
    #mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link > span.mega-indicator {
        height: auto !important;
        line-height: inherit !important;
    }
}

.main-nav ul {
    display: flex;
    gap: 24px;
}

.main-nav a {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-main);
    padding: 8px 0;
}

.main-nav > ul > li > a {
    font-weight: 700;
}

/* Live nav is rendered by Mega Menu Pro (body.mega-menu-primary-menu), which
   replaces the plain wp_nav_menu markup above with its own #mega-menu-primary-menu
   structure — top-level items are `li > a.mega-menu-link` directly under the
   menu ul; sub-menu items sit inside a nested ul.mega-sub-menu two levels deeper,
   so this child-combinator selector still targets only the top level.
   Mega Menu Pro's own plugin CSS sets font-weight:400 on this same top-level
   link via a double-ID selector (#mega-menu-wrap-primary-menu #mega-menu-primary-menu
   > li.mega-menu-item > a.mega-menu-link), which outranks a single-ID selector —
   match that specificity (plus !important, since load order between the plugin's
   stylesheet and this one isn't guaranteed) to win reliably. */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li > a.mega-menu-link {
    font-weight: 700 !important;
}

.main-nav a:hover {
    color: var(--primary-color);
}

/* The header nav is actually rendered by the Max Mega Menu plugin
   (#mega-menu-primary-menu / .mega-menu-link), not .main-nav — the rule above
   never matches it. The plugin's own generated stylesheet has no hover-state
   color at all for top-level items and colors the open/active state orange
   (#FF6105, a pre-rebrand leftover), so this overrides both to the brand teal.
   Selector specificity matches the plugin's own generated CSS; !important
   guards against load-order with that generated/cached stylesheet. */
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item > a.mega-menu-link:focus,
#mega-menu-wrap-primary-menu #mega-menu-primary-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    color: var(--primary-color) !important;
}

/* WordPress Standard Menu Classes */
.menu-item-has-children {
    position: relative;
}

.main-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 220px;
    padding: 12px 0;
    border-radius: var(--radius-field);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    margin: 0;
    list-style: none;
    border: 1px solid #f0f0f0;
}

/* Ensure sub-menu stays open when hovering down */
.main-nav .menu-item-has-children::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
}

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

.sub-menu li {
    width: 100%;
}

.sub-menu li a {
    display: block !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
    transition: all 0.2s !important;
    position: static !important;
    border: none !important;
    background: transparent !important;
}

.sub-menu li a:hover {
    background: var(--accent-color) !important;
    color: var(--primary-color) !important;
    padding-left: 28px !important;
}

/* Dropdown Caret */
.menu-item-has-children>a {
    display: flex;
    align-items: center;
    gap: 6px;
}

.menu-item-has-children>a::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.2s;
}

.menu-item-has-children:hover>a::after {
    transform: rotate(-135deg);
    margin-top: 3px;
}

/* Legacy prototype classes (keeping for compatibility) */
.nav-dropdown {
    position: relative;
}

.nav-dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 200px;
    padding: 12px 0;
    border-radius: var(--radius-field);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s;
    z-index: 100;
}

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

.header-actions {
    display: flex;
    gap: 16px;
    align-items: center;
}

/* Desktop: overrides align-items:center above so each header-actions child
   (social icons, VANCE-Ai button, My Dashboard link) sits on its own bottom
   edge, matching .main-nav/.logo-area's baseline (2026-08-11).
   MUST come after the unconditional rule above — a @media block earlier in
   the file loses to a later same-specificity unconditional rule regardless
   of the media query, so putting align-items:flex-end in the min-width:768px
   block up near .logo-area (where .main-nav's own flex-end rule lives) was
   silently overridden by the plain .header-actions rule above it in source
   order. Keeping this one physically after fixes the cascade. */
@media (min-width: 768px) {
    .header-actions {
        align-items: flex-end;
    }
}

/* Hero Section */
.hero {
    background-color: #0A1929;
    /* Darker blue as per mockup */
    background: linear-gradient(135deg, #05101C 0%, #0A1929 100%);
    color: white;
    padding: 100px 0 160px;
    min-height: 460px;
    position: relative;
    overflow: hidden;
    /* Own paint containment: without this, Chromium occasionally leaves stale
       pixels from elsewhere on the page briefly visible in this section on
       first paint (right under the sticky header), clearing on the repaint
       that scroll/click triggers. contain:paint forces the section to always
       paint from its own layer instead of reusing/blending a neighbouring one. */
    contain: paint;
}

/* Homepage hero only (scoped via body.home) — cumulatively -15% twice from the
   shared .hero defaults above (which are also used by page-patients.php,
   page-healthcare-professionals.php etc. via the same "hero patient-hero"
   classes). 100/160/460 → 85/136/391 (first -15%) → 72/116/332 (second -15%). */
body.home .hero {
    padding: 72px 0 116px; /* -15% from 85px/136px */
    min-height: 332px; /* -15% from 391px */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
}

/* Shared hero sizing for about/heritage pages */
.vance-about-hero,
.vance-contact-hero {
    min-height: 460px;
    display: flex;
    align-items: flex-start;
}

/* Hero is a flex row; force .container to fill width so shrink-to-content
   doesn't shift text blocks horizontally based on title length. */
.vance-about-hero > .container,
.vance-contact-hero > .container {
    width: 100%;
    flex: 1 1 auto;
}

.tag-label {
    background: rgba(255, 255, 255, 0.08);
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #cbd5e1;
}

/* Section-level tag — same box-outline shape as .tag-label, defaults tuned for light section backgrounds.
   Inline styles from the Customizer override background/colour/border per-section. */
.tag-section {
    background: rgba(0, 128, 128, 0.08);
    display: inline-block;
    padding: 8px 16px;
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 128, 128, 0.25);
    color: var(--primary-color, #008080);
}

.hero h1 {
    font-size: 64px;
    line-height: 1.1;
    margin-bottom: 32px;
    letter-spacing: -1.5px;
    font-weight: 800;
}

.hero h1 .highlight {
    color: var(--primary-color);
}

.hero p {
    font-size: 20px;
    color: #e2e8f0;
    margin-bottom: 40px;
    line-height: 1.6;
    max-width: 700px;
}

/* Category Cards Section */
.category-cards-section {
    position: relative;
    margin-top: -80px;
    z-index: 20;
    padding-bottom: 60px;
}

.category-cards-grid {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    overflow-x: auto;
    padding: 10px 4px 20px;
    scrollbar-width: none;
    /* Firefox */
}

.category-cards-grid::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.category-card {
    background: white;
    min-width: 120px;
    flex: 1;
    padding: 24px 12px;
    border-radius: var(--radius-surface);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    text-align: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.category-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.05);
}

.category-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 4px;
}

.category-card label {
    font-size: 13px;
    font-weight: 700;
    color: #374151;
    line-height: 1.3;
    cursor: pointer;
}

/* EPAVANCE Banner */
.epavance-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 32px;
    background: linear-gradient(135deg, #008080 0%, #006666 50%, #0A1929 100%);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: white;
    transition: transform 0.2s, box-shadow 0.2s;
}

.epavance-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,128,128, 0.3);
}

/* Search Section — brand teal gradient */
.search-section {
    padding: 60px 0;
    background: linear-gradient(135deg, #008080, #006666);
}

/* Content Hub */
.content-hub {
    padding: 60px 0;
    background: #FAFAFA;
}

.category-block {
    margin-bottom: 100px;
    scroll-margin-top: 120px;
    padding: 60px;
    background: white;
    border-radius: var(--radius-surface);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
    padding-bottom: 24px;
    border-bottom: 1px solid #2f4f6f;
}

.category-title-group {
    flex: 1;
}

.category-header h2 {
    font-size: 36px;
    color: var(--secondary-color);
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.category-description {
    font-size: 16px;
    color: var(--text-light);
    margin: 0;
    max-width: 600px;
}

.category-bar {
    width: 4px;
    height: 28px;
    border-radius: var(--radius-control);
}

.view-all-link {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    transition: all 0.2s;
    white-space: nowrap;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    background: rgba(0,128,128, 0.05);
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-all-link:hover {
    color: var(--primary-hover);
    background: rgba(0,128,128, 0.1);
    transform: translateX(2px);
}

.view-all-link svg {
    transition: transform 0.2s;
}

.view-all-link:hover svg {
    transform: translateX(2px);
}

/* Card Grids */
.card-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

/* Content Cards */
.content-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
}

.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Knowledge Card Improvements */
.knowledge-card {
    position: relative;
}

.knowledge-card .card-link-wrapper {
    display: block;
    text-decoration: none;
    color: inherit;
}

.knowledge-card .card-image {
    position: relative;
    overflow: hidden;
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.knowledge-card:hover .card-overlay {
    opacity: 1;
}

.knowledge-card .card-content h3 {
    transition: color 0.2s;
}

.knowledge-card:hover .card-content h3 {
    color: var(--primary-color);
}

/* Empty State */
.empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: #F9FAFB;
    border-radius: var(--radius-md);
    border: 2px dashed #E5E7EB;
}

.empty-state p {
    color: var(--text-light);
    font-size: 16px;
    margin: 0;
}

.card-image {
    height: 180px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 4px 12px;
    border-radius: var(--radius-control);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
}

.card-content {
    padding: 24px;
    border: 1px solid #E5E7EB;
    border-top: none;
}

.card-content h3 {
    font-size: 17px;
    margin-bottom: 10px;
    color: var(--secondary-color);
    line-height: 1.4;
}

.card-content h3 a:hover {
    color: var(--primary-color);
}

.card-content p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 16px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================================
   Article card: category eyebrow + bottom meta footer
   Shared across every card variant (homepage grids, category /
   archive pages, sub-category archives, single "Read Next").
   ============================================================ */

/* Category eyebrow — pinned to the top-left corner of the thumbnail.
   Background colour is set inline per-post to match that post's hero
   overlay colour (vance_card_eyebrow_html()). */
.card-eyebrow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    display: inline-block;
    max-width: calc(100% - 24px);
    padding: 6px 14px;
    font-family: 'Outfit', sans-serif;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Make news-cards flex columns so the meta footer pins to the bottom and
   footers line up across a row regardless of title/excerpt length. */
.news-card { display: flex; flex-direction: column; position: relative; }
.news-card .card-content { display: flex; flex-direction: column; flex: 1 1 auto; }

/* Whole-card click target: the title link is stretched via ::after to cover
   the entire card (image, excerpt, meta footer), so clicking anywhere on the
   card navigates, not just the title text. Taxonomy chips are real nested
   links, so they're raised above the stretch layer to stay independently
   clickable. */
.news-card .card-stretched-link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
.news-card .va-card-chip {
    position: relative;
    z-index: 2;
}

/* Date · read-time · views, divided by hairline rules, at the card bottom. */
.card-meta-footer {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #2f4f6f;
    font-size: 12px;
    font-weight: 500;
    color: #94a3b8;
    white-space: nowrap;
}
.card-meta-footer .card-meta-item {
    padding: 0 10px;
    line-height: 1.5;
    white-space: nowrap;
}
.card-meta-footer .card-meta-item:first-child { padding-left: 0; }
.card-meta-footer .card-meta-item:last-child { padding-right: 0; }
.card-meta-footer .card-meta-item + .card-meta-item { border-left: 1px solid #2f4f6f; }

.card-meta {
    font-size: 12px;
    color: #9CA3AF;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #2f4f6f;
    padding-top: 12px;
    gap: 12px;
}

.card-meta .author,
.card-meta .date {
    display: flex;
    align-items: center;
}

.card-meta .date::before {
    content: '•';
    margin-right: 4px;
}

.card-meta .author,
.card-meta .date {
    display: flex;
    align-items: center;
    gap: 4px;
}

.card-meta .date::before {
    content: '•';
    margin-right: 4px;
}

/* Course Card Badge */
.course-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #16a34a;
    padding: 4px 10px;
    border-radius: var(--radius-control);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}

.course-status {
    color: var(--primary-color);
    font-weight: 600;
}

/* Rating Badge */
.rating-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.95);
    color: #f59e0b;
    padding: 4px 10px;
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 700;
}

/* Download Grid */
.download-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.download-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
}

.download-item:hover {
    border-color: #10b981;
    box-shadow: var(--shadow-sm);
}

.download-icon {
    width: 48px;
    height: 48px;
    background: #ecfdf5;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.download-info {
    flex: 1;
}

.download-info h4 {
    font-size: 15px;
    color: var(--secondary-color);
    margin-bottom: 4px;
}

.download-meta {
    font-size: 12px;
    color: var(--text-light);
}

.download-action {
    width: 36px;
    height: 36px;
    background: #10b981;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: transform 0.2s;
}

.download-item:hover .download-action {
    transform: scale(1.1);
}

/* News Featured Layout */
.news-featured-layout {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 24px;
}

.featured-news .card-image {
    height: 280px;
}

.news-sidebar-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.news-list-item {
    display: flex;
    padding: 16px;
    background: white;
    border-radius: var(--radius-md);
    border-left: 4px solid #f59e0b;
    transition: all 0.2s;
}

.news-list-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.news-list-content h4 {
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 6px;
    line-height: 1.4;
}

.news-list-content span {
    font-size: 12px;
    color: var(--text-light);
}

/* Media Grid */
.media-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.media-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
}

.media-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.media-thumb {
    height: 140px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media-play-icon {
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
}

.media-card:hover .media-play-icon {
    transform: scale(1.1);
    background: var(--primary-color);
}

.media-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: white;
    padding: 2px 8px;
    border-radius: var(--radius-control);
    font-size: 11px;
    font-weight: 600;
}

.media-info {
    padding: 16px;
}

.media-type {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ec4899;
    margin-bottom: 6px;
    display: block;
}

.media-info h4 {
    font-size: 14px;
    color: var(--secondary-color);
    line-height: 1.4;
    margin: 0;
}

/* Infographic Grid */
.infographic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.infographic-card {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.2s;
    border: 1px solid #E5E7EB;
}

.infographic-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #84cc16;
}

.infographic-preview {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.infographic-info {
    padding: 16px;
}

.infographic-info h4 {
    font-size: 14px;
    color: var(--secondary-color);
    margin-bottom: 4px;
    line-height: 1.3;
}

.infographic-info span {
    font-size: 12px;
    color: var(--text-light);
}

/* Tools Grid */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tool-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.2s;
    border: 1px solid #E5E7EB;
}

.tool-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: #6366f1;
}

.tool-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tool-info h4 {
    font-size: 15px;
    color: var(--secondary-color);
    margin-bottom: 6px;
}

.tool-info p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
    line-height: 1.4;
}

/* EPAVANCE Banner Inline */
.epavance-banner-inline {
    display: block;
    background: linear-gradient(135deg, #0A1929 0%, #112240 100%);
    border-radius: var(--radius-lg);
    padding: 40px;
    margin-bottom: 60px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s;
}

.epavance-banner-inline:hover {
    transform: translateY(-3px);
}

.epavance-glow {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0,128,128, 0.3) 0%, transparent 70%);
}

.epavance-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}

.epavance-cta {
    background: var(--primary-color);
    color: white;
    padding: 14px 28px;
    border-radius: var(--radius-md);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.epavance-banner-inline:hover .epavance-cta {
    background: var(--primary-hover);
}

/* EPAVANCE Banner Footer */
.epavance-banner-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(0,128,128, 0.1) 0%, rgba(0,128,128, 0.05) 50%, rgba(0,128,128, 0.1) 100%);
    border: 1px solid rgba(0,128,128, 0.2);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: border-color 0.2s;
}

.epavance-banner-footer:hover {
    border-color: rgba(0,128,128, 0.4);
}

/* Footer */
.main-footer {
    padding: 80px 0 40px;
    background: white;
    border-top: 1px solid #2f4f6f;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 64px;
}

.footer-brand p {
    margin-top: 24px;
    font-size: 14px;
    color: var(--text-light);
    line-height: 1.6;
    max-width: 300px;
}

.footer-col h4 {
    font-size: 14px;
    text-transform: uppercase;
    margin-bottom: 24px;
    color: var(--secondary-color);
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul li a {
    font-size: 14px;
    color: var(--text-light);
    padding: 8px 0;
    display: block;
}

.footer-col ul li a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    margin-top: 64px;
    padding-top: 32px;
    border-top: 1px solid #2f4f6f;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #9CA3AF;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a:hover {
    color: var(--primary-color);
}

/* ============================================
   OP-ED TEMPLATE STYLES
   ============================================ */

.oped-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(135deg, #0A1929 0%, #112240 100%);
    overflow: hidden;
}

.oped-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.oped-hero-placeholder {
    background: linear-gradient(135deg, #0A1929 0%, #1e3a5f 50%, #112240 100%);
}

.oped-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top,
            rgba(10, 25, 41, 0.95) 0%,
            rgba(10, 25, 41, 0.7) 40%,
            rgba(10, 25, 41, 0.3) 100%);
    z-index: 2;
}

.oped-hero .container {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 80px 20px;
}

.oped-hero-content {
    /* Post title container, narrowed by 5 characters' worth of width, plus 10px. */
    max-width: calc(800px - 5ch - 10px);
}

.oped-meta-tags {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.oped-category-tag {
    background: var(--primary-color);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-control);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.oped-read-time {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

.oped-title {
    font-family: var(--font-heading);
    font-size: 48px;
    font-weight: 700;
    color: white;
    line-height: 1.15;
    margin-bottom: 32px;
    letter-spacing: -1px;
}

.oped-author-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.oped-author-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oped-author-name {
    color: white;
    font-weight: 600;
    font-size: 15px;
}

.oped-date {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
}

/* Op-Ed Content Layout */
.oped-content-section {
    padding: 60px 0 80px;
    background: #FAFAFA;
}

.oped-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

.oped-main-content {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.oped-article-body {
    padding: 48px;
    font-size: 17px;
    line-height: 1.85;
    color: var(--text-main);
}

.oped-article-body p {
    margin-bottom: 24px;
}

.oped-article-body h2 {
    font-size: 22px;
    margin-top: 32px;
    margin-bottom: 16px;
    color: var(--secondary-color);
}

.oped-article-body h3 {
    font-size: 19px;
    margin-top: 28px;
    margin-bottom: 14px;
    color: var(--secondary-color);
}

.oped-article-body blockquote {
    border-left: 4px solid #008080;
    padding: 16px 24px;
    margin: 32px 0;
    background: #def4f4;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-style: italic;
}

.oped-article-body ul {
    margin-bottom: 24px;
    padding-left: 24px;
    list-style: disc;
}

.oped-article-body li {
    margin-bottom: 8px;
}

/* Op-Ed Assets */
.oped-asset {
    border-top: 1px solid #2f4f6f;
    padding: 32px 48px 40px;
}

.oped-asset-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.oped-asset-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #def4f4 0%, #FFECE3 100%);
    color: var(--primary-color);
}

.oped-asset-icon.oped-icon-video {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    color: #2563EB;
}

.oped-asset-icon.oped-icon-quiz {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    color: #16A34A;
}

.oped-asset-header h3 {
    font-size: 20px;
    color: var(--secondary-color);
    margin: 0;
}

.oped-placeholder-infographic {
    background: linear-gradient(135deg, #def4f4, #FFECE3);
    padding: 60px 40px;
    border-radius: var(--radius-lg);
    text-align: center;
}

.oped-infographic-link {
    display: block;
    position: relative;
}

.oped-expand-hint {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(10, 25, 41, 0.85);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-control);
    font-size: 13px;
    opacity: 0;
    transition: opacity 0.3s;
}

.oped-infographic-link:hover .oped-expand-hint {
    opacity: 1;
}

.oped-video-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.oped-quiz-wrapper {
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
    border-radius: var(--radius-lg);
    padding: 24px;
    border: 1px solid #E2E8F0;
}

.quiz-question h4 {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.quiz-option {
    padding: 12px 16px;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 14px;
    background: white;
}

.quiz-option:hover {
    border-color: var(--primary-color);
    background: #def4f4;
}

/* Author Bio */
.oped-author-bio-section {
    border-top: 1px solid #2f4f6f;
    padding: 40px 48px;
    background: #F8FAFC;
}

.oped-bio-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 16px;
}

.oped-bio-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.oped-bio-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-light);
    font-weight: 600;
}

.oped-bio-info h4 {
    font-size: 22px;
    color: var(--secondary-color);
    margin: 0;
}

.oped-bio-text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-light);
    margin: 0;
}

/* Sidebar */
.oped-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.oped-sidebar-block {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.oped-sidebar-block h4 {
    font-size: 16px;
    color: var(--secondary-color);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.oped-audio-summary {
    background: linear-gradient(135deg, #0A1929 0%, #112240 100%);
}

.oped-audio-summary h4 {
    color: white;
}

.oped-share-buttons {
    display: flex;
    gap: 12px;
}

.oped-share-btn {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    color: var(--text-main);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.oped-share-btn:hover {
    transform: translateY(-2px);
}

.oped-share-twitter:hover {
    background: #000;
    color: white;
}

.oped-share-linkedin:hover {
    background: #0077B5;
    color: white;
}

.oped-share-email:hover {
    background: var(--primary-color);
    color: white;
}

.oped-share-copy:hover,
.oped-share-copy.copied {
    background: #10B981;
    color: white;
}

.oped-related-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #2f4f6f;
}

.oped-related-item:last-child {
    border-bottom: none;
}

.oped-related-thumb {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
    flex-shrink: 0;
}

.oped-related-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}

.oped-related-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.4;
}

.oped-related-date {
    font-size: 12px;
    color: var(--text-light);
}

/* Navigation */
.oped-navigation {
    background: white;
    border-top: 1px solid #2f4f6f;
    padding: 40px 0;
    border-radius: var(--radius-surface);
}

.oped-nav-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.oped-nav-link {
    padding: 24px;
    border-radius: var(--radius-lg);
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s;
}

.oped-nav-link:hover {
    background: #F1F5F9;
    transform: translateY(-2px);
}

.oped-nav-prev {
    text-align: left;
}

.oped-nav-next {
    text-align: right;
    margin-left: auto;
}

.oped-nav-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-light);
    font-weight: 500;
}

.oped-nav-next .oped-nav-label {
    justify-content: flex-end;
}

.oped-nav-title {
    font-size: 18px;
    color: var(--secondary-color);
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE STYLES
   ============================================ */

@media (max-width: 1200px) {
    .quick-nav-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1023.98px) {
    .quick-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

    .media-grid-4,
    .infographic-grid,
    .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-featured-layout {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .oped-layout {
        grid-template-columns: 1fr;
    }

    .oped-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {
    .hero h1 {
        font-size: 36px;
    }

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

    .quick-nav-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .quick-nav-card {
        padding: 12px 8px;
    }

    .quick-nav-card span {
        font-size: 10px;
    }

    .card-grid-3 {
        grid-template-columns: 1fr;
    }

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

    .media-grid-4,
    .infographic-grid,
    .tools-grid {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .epavance-banner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }

    .epavance-content {
        flex-direction: column;
        gap: 24px;
        text-align: center;
    }

    .oped-title {
        font-size: 32px;
    }

    .oped-article-body {
        padding: 24px;
    }

    .oped-asset {
        padding: 24px;
    }

    .oped-sidebar {
        grid-template-columns: 1fr;
    }

    .oped-nav-wrapper {
        grid-template-columns: 1fr;
    }

    .main-nav ul {
        gap: 12px;
    }

    .main-nav a {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .hero {
        padding: 60px 0 100px;
    }

    .hero h1 {
        font-size: 28px;
    }

    .quick-nav-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .category-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .tool-card {
        flex-direction: column;
        text-align: center;
    }
}

/* Portal Cards Section */
.portal-section {
    position: relative;
    margin-top: -60px;
    z-index: 10;
    padding-bottom: 80px;
}

.portal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.portal-card {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    position: relative;
    border: 1px solid #F1F5F9;
    overflow: hidden;
}

.portal-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--primary-color);
}

.portal-card.patient::before {
    background: var(--secondary-color);
}

.portal-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
    border-color: rgba(0,128,128, 0.2);
}

.portal-card.patient:hover {
    border-color: rgba(10, 25, 41, 0.2);
}

.portal-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: #def4f4;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.portal-card:hover .portal-icon {
    transform: scale(1.1) rotate(5deg);
}

.portal-card.patient .portal-icon {
    background: #F0F9FF;
    color: var(--secondary-color);
}

.portal-label {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 1px;
    margin-bottom: 8px;
    font-weight: 600;
}

.portal-card h3 {
    font-size: 24px;
    margin-bottom: 16px;
    color: var(--secondary-color);
}

.portal-card p {
    color: var(--text-light);
    margin-bottom: 24px;
    font-size: 15px;
}

.feature-list {
    margin-bottom: 32px;
}

.feature-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 14px;
    color: var(--text-main);
}

.feature-list li svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.portal-link {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.portal-link svg {
    transition: transform 0.3s ease;
}

.portal-link:hover {
    color: var(--primary-hover);
    gap: 12px;
}

.portal-link:hover svg {
    transform: translateX(4px);
}

/* ============================================
   MOSAIC / BENTO GRID STYLES
   ============================================ */

.bento-grid-news {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: repeat(2, 220px);
    gap: 24px;
}

.bento-cell-featured {
    grid-row: 1 / -1;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--secondary-color);
    color: white;
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.bento-cell-featured:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.bento-cell-featured img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.6;
    transition: transform 0.5s ease;
}

.bento-cell-featured:hover img {
    transform: scale(1.05);
}

.bento-content-overlay {
    position: relative;
    z-index: 2;
    padding: 40px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.4) 60%, transparent 100%);
    width: 100%;
}

.bento-cell-side {
    background: white;
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #E5E7EB;
    transition: all 0.2s ease;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--shadow-sm);
}

.bento-cell-side:hover {
    border-color: var(--primary-color);
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

/* Reviews Asymmetric Grid */
.bento-grid-reviews {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 24px;
}

.review-card-wide {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.review-card-wide:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.review-card-wide .review-img {
    height: 220px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.review-card-standard {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
}

.review-card-standard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* Expert Opinions "Poster" Grid */
.bento-grid-opinions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.opinion-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    border: 1px solid #E5E7EB;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.opinion-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.opinion-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--primary-color);
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-control);
    background: #E5E7EB;
    margin: 0 auto 20px;
    border: 4px solid #F9FAFB;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    object-fit: cover;
}

@media (max-width: 1023.98px) {

    .bento-grid-news,
    .bento-grid-reviews,
    .bento-grid-opinions {
        grid-template-columns: 1fr 1fr;
    }

    .bento-grid-news {
        grid-template-rows: auto;
    }

    .bento-cell-featured {
        grid-row: auto;
        grid-column: 1 / -1;
        min-height: 300px;
    }
}

@media (max-width: 767.98px) {

    .bento-grid-news,
    .bento-grid-reviews,
    .bento-grid-opinions {
        grid-template-columns: 1fr;
    }
}

/* MOBILE OVERRIDES */
@media (max-width: 767.98px) {
    h1 {
        font-size: 32px !important;
    }
}

/* MOBILE OVERRIDES START */
@media (max-width: 767.98px) {
    .site-header {
        height: 70px !important;
        position: fixed !important;
        top: 0;
        width: 100%;
        z-index: 1000;
    }

    .site-logo {
        /* This "+20% from 220px" width bump never actually changed how big the
           logo looked: with the old object-fit:contain, a box wider than the
           scaled image needed to be is pure invisible letterbox, so only
           .logo-area's height (the crop viewport, unaffected by this rule)
           drove visual size. Kept matching the base .logo-area img rule's
           125px (114→125, +10% requested 2026-07-28) — no !important height
           here, since the img needs its natural aspect ratio (height:auto)
           for .logo-area's overflow:hidden crop to work; forcing a height on
           the img itself would squash it. */
        width: 125px !important;
    }

    .main-nav {
        position: fixed !important;
        top: 70px !important;
        left: 0;
        width: 100%;
        height: calc(100vh - 70px);
        background: white;
        transform: translateX(100%);
        transition: 0.3s;
        z-index: 999;
        display: block !important;
        padding: 40px 24px;
    }

    .main-nav.active {
        transform: translateX(0) !important;
    }

    .main-nav ul {
        flex-direction: column !important;
        gap: 0 !important;
    }

    .main-nav ul li a {
        display: block;
        padding: 15px 0;
        border-bottom: 1px solid #2f4f6f;
        font-size: 18px;
    }

    /* Mobile Sub-menus */
    .main-nav .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background: transparent;
        padding: 0 0 10px 20px;
        border: none;
        display: block;
        width: 100%;
        margin: 0;
    }

    .main-nav .sub-menu li a {
        font-size: 16px !important;
        font-weight: 500 !important;
        color: var(--text-light) !important;
        padding: 10px 0 !important;
        border-bottom: 1px solid #f9f9f9 !important;
    }

    .menu-item-has-children>a::after {
        margin-left: auto;
    }

    .header-actions {
        display: none !important;
    }

    .hero {
        padding: 40px 0 !important;
        text-align: center !important;
    }

    .hero h1 {
        font-size: 32px !important;
    }

    .hero p {
        font-size: 15px !important;
    }

    .hero-actions {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .category-cards-grid {
        justify-content: flex-start !important;
        padding: 0 10px 20px !important;
    }

    .category-card {
        min-width: 110px !important;
    }

    .portal-grid {
        grid-template-columns: 1fr !important;
    }

    .content-hub h2 {
        font-size: 26px !important;
    }

    .category-block {
        padding: 20px !important;
        margin-bottom: 30px !important;
    }

    .bento-grid-news,
    .bento-grid-reviews,
    .bento-grid-opinions,
    .infographic-grid {
        grid-template-columns: 1fr !important;
    }

    .bento-cell-featured {
        min-height: 250px !important;
    }
}


@media (max-width: 767.98px) {
    .main-nav {
        display: none !important;
    }

    .main-nav.active {
        display: block !important;
    }
}

.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: #0A1929;
    cursor: pointer;
    padding: 10px;
    z-index: 1100;
    border-radius: var(--radius-control);
}

.mobile-menu-toggle svg {
    width: 30px;
    height: 30px;
}

.mobile-menu-toggle .hidden {
    display: none;
}

@media (max-width: 767.98px) {
    .mobile-menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

.site-logo {
    width: 390px; /* +20% from 325px */
    height: auto;
    display: block;
}

@media (max-width: 767.98px) {
    .site-logo {
        /* Never actually enlarged the logo under the old object-fit:contain
           (see the duplicate rule earlier in this file for why) — kept
           matching the base .logo-area img rule's 125px (114→125, +10%
           requested 2026-07-28). No !important height: the img needs
           height:auto so .logo-area's overflow:hidden crop (not the img
           itself) is what controls the visible size. */
        width: 125px !important;
    }
}

/* REFINING IMPORTANT FLAGS */
@media (max-width: 767.98px) {
    .search-section form {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .hero h1 {
        font-size: 30px !important;
    }

    .hero p {
        font-size: 15px !important;
    }

    .ad-section .epavance-banner {
        flex-direction: column !important;
        text-align: center !important;
    }

    .ad-section .epavance-banner div {
        justify-content: center !important;
    }
}

/* UTILITY GRIDS */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}

.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

@media (max-width: 1023.98px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767.98px) {

    .grid-4,
    .grid-3,
    .grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hero h1 {
        font-size: 34px !important;
    }
}

/* PAGE SPECIFIC MOBILE REFINEMENTS */
@media (max-width: 767.98px) {

    .hcp-hero,
    .patient-hero {
        min-height: 350px !important;
        padding: 60px 0 !important;
    }

    .hcp-register-form,
    .patient-subscribe-form {
        flex-direction: column !important;
        width: 100% !important;
    }

    .hcp-register-form input,
    .hcp-register-form select,
    .patient-subscribe-form input {
        width: 100% !important;
    }

    .topics-container {
        padding: 32px 16px !important;
    }

    .topics-grid {
        gap: 32px !important;
    }

    .service-grid>div {
        padding: 24px 16px !important;
    }

    .resource-grid>div {
        flex-direction: column !important;
        padding: 24px !important;
    }
}

/* MORE RESPONSIVE UTILITIES */
.section-padding {
    padding: 80px 0;
}

.text-center {
    text-align: center;
}

.max-600 {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.margin-b-60 {
    margin-bottom: 60px;
}

@media (max-width: 767.98px) {
    .section-padding {
        padding: 50px 0 !important;
    }

    .margin-b-60 {
        margin-bottom: 30px !important;
    }

    .container h2 {
        font-size: 28px !important;
    }

    .container p {
        font-size: 16px !important;
    }
}

/* OP-ED & MISC RESPONSIVENESS */
@media (max-width: 1023.98px) {
    .oped-layout {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .oped-sidebar {
        position: static !important;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
}

@media (max-width: 767.98px) {
    .oped-sidebar {
        grid-template-columns: 1fr !important;
    }

    .premium-subscribe {
        padding: 40px 20px !important;
        text-align: center !important;
    }

    .premium-subscribe h2 {
        font-size: 28px !important;
    }

    .subscribe-form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .subscribe-form input {
        width: 100% !important;
    }
}

/* SOCIAL LINKS HOVER */
.social-link:hover {
    opacity: 1 !important;
    color: var(--primary-color) !important;
    transform: translateY(-2px);
}

@media (max-width: 767.98px) {
    .header-social-links {
        display: none !important;
    }

    .main-nav.active+.header-actions .header-social-links {
        display: flex !important;
        margin: 20px 0;
        justify-content: center;
    }
}

/* Category Card Animations (Phase 7) */
.vance-category-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vance-category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-color) !important;
}

/* Ensure images inside cards scale slightly or have effect if needed */
.vance-category-card:hover img {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* =====================================================================
   Sub-category grouped archives (Clinical Reviews & Gastro Living)
   Drives template-parts/subcategory-grouped-archive.php. Four selectable
   layouts per sub-category: Standard Grid, Bento, Asymmetric, Posters.
   ===================================================================== */

.va-subcat-group {
    margin-bottom: 64px;
}
.va-subcat-group:last-of-type {
    margin-bottom: 0;
}

/* --- Group header + description block --- */
.va-subcat-head {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 2px solid #2f4f6f;
}
.va-subcat-title {
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    color: var(--secondary-color, #0a1929);
    margin: 0 0 8px;
}
.va-subcat-desc {
    max-width: 760px;
    color: var(--text-light, #475569);
    font-size: 16px;
    line-height: 1.65;
}
.va-subcat-desc p {
    margin: 0 0 8px;
}
.va-subcat-desc p:last-child {
    margin-bottom: 0;
}
.va-subcat-viewall {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--primary-color, #008080);
    text-decoration: none;
}
.va-subcat-viewall:hover {
    text-decoration: underline;
}

/* --- Shared card hover for the standard news-card used in these grids --- */
.va-sub-grid .news-card {
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.va-sub-grid .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -10px rgba(10, 25, 41, 0.25);
}

/* --- 1. Standard Grid --- */
.va-layout-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
/* Per-sub-category "Grid columns" option (3 default, or 4 / 5). */
.va-layout-grid.va-grid--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.va-layout-grid.va-grid--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

/* --- 2. Bento: one large main feature + 2 or 4 small cards beside it --- */
/* Layout is driven by markup (.va-bento-main / .va-bento-side), not by nth-child,
   so card content height never overflows its cell (the old bug). */
.va-bento {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 22px;
    align-items: stretch;
}
.va-bento--right {
    grid-template-columns: 1fr 2fr;
}
.va-bento--right .va-bento-main { order: 2; }
.va-bento--right .va-bento-side { order: 1; }
.va-bento--solo {
    grid-template-columns: 1fr;
}

/* Main feature fills the full height of the side column */
.va-bento-main { display: flex; }
.va-bento-main .news-card {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.va-bento-main .card-image {
    flex: 1 1 auto;
    min-height: 340px;
}
.va-bento-main .entry-title a { font-size: 24px !important; }

/* Side column: 2 cards stacked, or 4 cards in a 2x2 grid */
.va-bento-side {
    display: grid;
    gap: 22px;
    grid-template-rows: repeat(2, 1fr);
}
.va-bento--count-4 .va-bento-side {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}
.va-bento-side .news-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.va-bento-side .card-image { height: 120px; }
.va-bento-side .card-content { padding: 14px 16px; }
.va-bento-side .entry-title a { font-size: 15px !important; }
/* Side cards are title + meta only — the excerpt lives on the main feature. */
.va-bento-side .entry-content { display: none; }

/* Bento cards are outside .va-sub-grid, so give them the same lift-on-hover
   animation and full-card click affordance as the standard grid cards. */
.va-bento .news-card {
    background: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.va-bento .news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px -10px rgba(10, 25, 41, 0.25);
}

/* Overflow row beneath the bento feature */
.va-bento-overflow { margin-top: 22px; }

/* --- 3. Asymmetric: alternating wide/narrow two-column rhythm --- */
.va-layout-asymmetric {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 28px;
}
.va-layout-asymmetric .va-sub-item:nth-child(4n + 1),
.va-layout-asymmetric .va-sub-item:nth-child(4n + 4) {
    grid-column: 1;
}
.va-layout-asymmetric .va-sub-item:nth-child(4n + 2),
.va-layout-asymmetric .va-sub-item:nth-child(4n + 3) {
    grid-column: 2;
}

/* --- 4. Posters: tall image-dominant cards with overlaid title --- */
.va-layout-posters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
/* "Posters per row" option — 3 default, or 4/5. Used by both the sub-category
   grouped archives and the homepage Knowledge Base poster layout. */
.va-layout-posters.va-posters--cols-4 {
    grid-template-columns: repeat(4, 1fr);
}
.va-layout-posters.va-posters--cols-5 {
    grid-template-columns: repeat(5, 1fr);
}
.va-poster-card {
    position: relative;
    border-radius: var(--radius-md, 10px);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.va-poster-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px -12px rgba(10, 25, 41, 0.45);
}
.va-poster-link {
    display: block;
    position: relative;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    background-color: #1e293b;
    text-decoration: none;
}
.va-poster-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 25, 41, 0) 35%, rgba(10, 25, 41, 0.85) 100%);
}
.va-poster-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px;
    z-index: 2;
}
.va-poster-meta {
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.va-poster-title {
    color: #fff;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0;
}
/* Homepage Knowledge Base poster cards use a slightly smaller title (-4px) than
   the sub-category archive posters. Scoped to .kb-content-wrapper so the
   sub-category grouped archives keep the 22px above. */
.kb-content-wrapper .va-poster-title {
    font-size: 18px;
}
.va-poster-card:hover .va-poster-title {
    text-decoration: underline;
}

/* --- 5. Featured + List: one large hero article beside a compact list of the
   rest (the homepage "Latest" bento, minus the Featured Tools column). --- */
.va-featured-list {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: stretch;
    border: 1.5px solid #e2e8f0;
}
.va-featured-list--solo {
    grid-template-columns: 1fr;
}
/* Hero cell: zooming image behind a gradient shade + overlaid copy. */
.va-fl-featured {
    position: relative;
    display: block;
    min-height: 400px;
    overflow: hidden;
    background-color: #1e293b;
    text-decoration: none;
}
.va-fl-media {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}
.va-fl-featured:hover .va-fl-media {
    transform: scale(1.06);
}
.va-fl-shade {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(10, 25, 41, 0) 30%, rgba(10, 25, 41, 0.88) 100%);
}
.va-fl-featured-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 28px;
}
.va-fl-featured-title {
    color: #fff;
    font-size: 26px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 10px;
}
.va-fl-featured:hover .va-fl-featured-title {
    text-decoration: underline;
}
.va-fl-featured-excerpt {
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.va-fl-featured-meta {
    color: rgba(255, 255, 255, 0.8);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
/* Side list: category eyebrow + title + postage-stamp thumbnail per row. */
.va-fl-list {
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}
.va-fl-item {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    text-decoration: none;
    border-bottom: 1px solid #2f4f6f;
    transition: background 0.2s ease;
}
.va-fl-item:last-child { border-bottom: none; }
.va-fl-item:hover { background: #f8fafc; }
.va-fl-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.va-fl-cat {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color, #008080);
    line-height: 1.2;
}
.va-fl-title {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: #0f172a;
    transition: color 0.2s ease;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.va-fl-item:hover .va-fl-title { color: var(--primary-color, #008080); }
.va-fl-thumb {
    width: 56px;
    height: 56px;
    object-fit: cover;
    /* Square: this is the thumbnail of an article card. */
    border-radius: var(--radius-article);
    flex-shrink: 0;
}
.va-fl-overflow { margin-top: 22px; }

/* --- Responsive --- */
/* 5-across grids need room; step 5 -> 4 on laptops before the tablet collapse. */
@media (max-width: 1200px) {
    .va-layout-grid.va-grid--cols-5,
    .va-layout-posters.va-posters--cols-5 {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 900px) {
    .va-layout-grid,
    .va-layout-posters {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Two-class selectors need their own collapse or they out-specify the above. */
    .va-layout-posters.va-posters--cols-4,
    .va-layout-posters.va-posters--cols-5,
    .va-layout-grid.va-grid--cols-4,
    .va-layout-grid.va-grid--cols-5 {
        grid-template-columns: repeat(2, 1fr);
    }
    /* Stack the hero above the list. */
    .va-featured-list {
        grid-template-columns: 1fr;
    }
    /* Bento: stack main above the side cards; side becomes a 2-up row */
    .va-bento,
    .va-bento--right {
        grid-template-columns: 1fr;
    }
    .va-bento--right .va-bento-main { order: 1; }
    .va-bento--right .va-bento-side { order: 2; }
    .va-bento-main .card-image { min-height: 220px; }
    .va-bento-side,
    .va-bento--count-4 .va-bento-side {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
    .va-layout-asymmetric {
        grid-template-columns: 1fr;
    }
    .va-layout-asymmetric .va-sub-item {
        grid-column: 1 !important;
    }
}
@media (max-width: 560px) {
    .va-layout-grid,
    .va-layout-posters {
        grid-template-columns: 1fr;
    }
    .va-layout-posters.va-posters--cols-4,
    .va-layout-posters.va-posters--cols-5,
    .va-layout-grid.va-grid--cols-4,
    .va-layout-grid.va-grid--cols-5 {
        grid-template-columns: 1fr;
    }
    .va-bento-side,
    .va-bento--count-4 .va-bento-side {
        grid-template-columns: 1fr;
    }
    .va-subcat-title {
        font-size: 24px;
    }
}

/* =====================================================================
   VANCE GLASSMORPHISM DESIGN SYSTEM  (added 2026-07-24)
   Shared frosted-glass surfaces, inverted-teal buttons, and expand/collapse
   affordances used by the dashboard result cards, saved meal-plan cards, the
   unified tool modal, and the category promo block.

   Light UI on white pages: a pure translucent-white glass is nearly invisible
   on a white background, so surfaces use a white -> teal-wash gradient fill plus
   a soft layered shadow. The frost reads best over varied backdrops (the modal
   scrim, coloured sections); on plain white it degrades gracefully to a premium
   frosted-white card.

   NOTE: the `!important` on the radii below is historical. It existed to beat
   a `border-radius:0 !important` reset that this file used to apply to
   buttons/img/.btn; that reset is now the rounded default at the top of the
   file, so these declarations are merely redundant rather than load-bearing.
   ===================================================================== */
:root {
    --glass-fill:        linear-gradient(135deg, rgba(255,255,255,0.80) 0%, rgba(222,244,244,0.62) 100%);
    --glass-fill-strong: linear-gradient(135deg, rgba(255,255,255,0.92) 0%, rgba(222,244,244,0.78) 100%);
    --glass-border:      1px solid rgba(255,255,255,0.65);
    --glass-border-tint: 1px solid rgba(0,128,128,0.18);
    --glass-shadow:      0 8px 32px rgba(10,25,41,0.12), inset 0 1px 0 rgba(255,255,255,0.7);
    --glass-shadow-lg:   0 24px 64px rgba(10,25,41,0.28), inset 0 1px 0 rgba(255,255,255,0.7);
    --glass-blur:        blur(16px) saturate(120%);
    --glass-radius:      var(--radius-surface); /* glass panels are surfaces */
}

/* --- Glass surfaces --- */
.vance-glass {
    background: var(--glass-fill);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: var(--glass-border-tint);
    box-shadow: var(--glass-shadow);
    border-radius: var(--glass-radius) !important;
}
.vance-glass--strong { background: var(--glass-fill-strong); }
.vance-glass--interactive { transition: transform .2s ease, box-shadow .2s ease; }
.vance-glass--interactive:hover { transform: translateY(-2px); box-shadow: var(--glass-shadow-lg); }

/* Frosted panel for modals — heavier shadow, floats above the scrim */
.vance-glass-panel {
    background: var(--glass-fill-strong);
    -webkit-backdrop-filter: blur(24px) saturate(130%);
    backdrop-filter: blur(24px) saturate(130%);
    border: var(--glass-border);
    box-shadow: var(--glass-shadow-lg);
    border-radius: var(--radius-surface) !important;
}

/* Modal scrim — teal->navy wash so a frosted panel reads clearly on top */
.vance-glass-scrim {
    background: radial-gradient(120% 120% at 30% 12%, rgba(0,128,128,0.34) 0%, rgba(10,25,41,0.74) 68%);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

/* --- Buttons --- */
/* Inverted (filled) teal button: teal fill / white text, large touch target */
.vance-btn-inverted {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 26px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--radius-control) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 4px 14px rgba(0,128,128,0.28);
}
.vance-btn-inverted:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,128,128,0.34);
}
.vance-btn-inverted:active { transform: translateY(0); }
.vance-btn-inverted:focus-visible { outline: 3px solid var(--primary-pale); outline-offset: 2px; }

/* Glass (secondary) button: frosted, teal text -> fills teal on hover */
.vance-btn-glass {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 13px 24px;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    color: var(--primary-color);
    background: rgba(255,255,255,0.55);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(0,128,128,0.35);
    border-radius: var(--radius-control) !important;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}
.vance-btn-glass:hover {
    background: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
}
.vance-btn-glass:focus-visible { outline: 3px solid var(--primary-pale); outline-offset: 2px; }
.vance-btn-inverted.vance-btn--sm,
.vance-btn-glass.vance-btn--sm { min-height: 40px; padding: 9px 18px; font-size: 14px; }
.vance-btn-inverted.vance-btn--block,
.vance-btn-glass.vance-btn--block { display: flex; width: 100%; }

/* --- Expand / collapse affordance (JS sets max-height to scrollHeight) --- */
.vance-expand-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    color: var(--primary-color);
    font-weight: 700;
}
.vance-expand-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    transition: transform .25s ease;
}
.vance-expand-toggle[aria-expanded="true"] .vance-expand-chevron { transform: rotate(180deg); }
.vance-expand-panel {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .32s ease, opacity .25s ease;
}
.vance-expand-panel.is-open { opacity: 1; }

/* --- Accessibility fallbacks --- */
/* Opaque fallback where backdrop-filter is unsupported (older browsers) */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .vance-glass, .vance-glass--strong, .vance-glass-panel, .vance-btn-glass { background: #ffffff; }
    .vance-glass-scrim { background: rgba(10,25,41,0.92); }
}
/* Respect the OS "reduce transparency" setting */
@media (prefers-reduced-transparency: reduce) {
    .vance-glass, .vance-glass--strong, .vance-glass-panel {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .vance-btn-glass {
        background: #ffffff !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
    .vance-glass-scrim {
        background: rgba(10,25,41,0.94) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
@media (prefers-reduced-motion: reduce) {
    .vance-btn-inverted, .vance-btn-glass,
    .vance-glass--interactive,
    .vance-expand-chevron, .vance-expand-panel { transition: none !important; }
}

/* --- Knowledge Base "Standard Grid" layouts (front-page.php 'kb-content') ---
   Two column counts off one card. The minimum track width is what sets the
   count: in the 1160px container with a 24px gap, 260px gives four per row and
   200px gives five, and auto-fill sheds a column by itself as the viewport
   narrows. The 4-col values are lifted verbatim from the inline style this
   replaced, so that layout renders byte-identically to before. */
.va-kb-grid { display: grid; gap: 24px; }
.va-kb-grid--min-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.va-kb-grid--min-200 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
@media (max-width: 599.98px) {
    /* Left to itself the 200px track still fits two columns down to ~464px,
       where the 260px track has already dropped to one. Below 600px the
       five-column grid borrows the four-column sizing so both collapse at the
       same point and phones never get a pair of 208px cards. */
    .va-kb-grid--min-200 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
}

/* Homepage knowledgebase cards run the meta on two rows: the date alone, then
   read-time and view count together beneath it.

   It also fixes a clipping bug. The five-column track lands the card at ~212px
   and the three segments need ~248px on one nowrap line, so the view count was
   cut off the right edge. No font or padding trim closes a 76px gap -- even at
   9px the row still overruns -- but split across two rows the second line comes
   to ~132px and fits at the normal 12px.

   Scoped to .va-kb-grid, which only front-page.php emits, so the wider cards on
   archives, search and single keep their one-line meta.

   Sequenced with :first-child / :nth-child rather than a wrapper element
   because vance_card_meta_footer_html() drops the read-time segment when it is
   unavailable and can omit views entirely; addressing positions keeps the rule
   correct for the two-segment cases, where the date still takes its own row and
   whatever follows sits below it without a leading divider. */
.va-kb-grid .card-meta-footer {
    flex-wrap: wrap;
    row-gap: 4px;
}

/* Full-basis date forces the rest of the row onto the next line. */
.va-kb-grid .card-meta-footer .card-meta-item:first-child {
    flex-basis: 100%;
}

/* Whatever starts the second row must not carry the divider it would inherit
   from `.card-meta-item + .card-meta-item` -- a border-left there hangs off the
   left edge with nothing before it. The divider between the second-row pair is
   kept. */
.va-kb-grid .card-meta-footer .card-meta-item:nth-child(2) {
    padding-left: 0;
    border-left: 0;
}

/* --- Category promo block (inc/category-promo.php) --- */
.vance-cat-promo { padding: 8px 0 28px; }
.vance-cat-promo__inner {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    padding: 32px 36px;
}
.vance-cat-promo__inner.has-image {
    grid-template-columns: minmax(220px, 320px) 1fr;
    padding: 0;
    align-items: stretch;
}
/* The promo photo fills its panel edge to edge, top and bottom.

   This deliberately reverses b1f4ff6, which had moved the panel to `contain` so
   product and lifestyle shots were never cropped. The two cannot both hold: the
   panel's height is set by the text column beside it (the grid is
   align-items: stretch), so an image whose aspect ratio differs from the panel's
   is either cropped or letterboxed. `contain` left a visible band of card
   surface above and below the photo, which read as a layout fault rather than as
   a deliberate fit.

   `center` keeps the loss symmetrical, which suits these photographs — the
   subject sits mid-frame in all of them. An asset that cannot survive a crop
   wants a re-crop to roughly the panel's ratio before upload, not a change here;
   changing it back re-opens the gap on every other promo block.

   background-repeat stays pinned. It is inert under `cover`, since the image
   always covers the box, but it is unset elsewhere and defaults to `repeat` —
   so it is the thing that stops the picture tiling if anyone moves this rule
   back toward `contain`. Same trap as the gastro condition tiles. */
.vance-cat-promo__media {
    min-height: 220px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.vance-cat-promo__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
}
.vance-cat-promo__inner.has-image .vance-cat-promo__body { padding: 32px 36px; }
.vance-cat-promo__eyebrow {
    font-size: 12px; font-weight: 800; letter-spacing: 1px;
    text-transform: uppercase; color: var(--primary-color);
}
.vance-cat-promo__title {
    font-family: 'Outfit', sans-serif; font-size: 26px; font-weight: 800;
    color: #0A1929; margin: 0; line-height: 1.15;
}
.vance-cat-promo__text { font-size: 15px; line-height: 1.6; color: #475569; margin: 0; max-width: 60ch; }
.vance-cat-promo__body .vance-btn-inverted { margin-top: 6px; }

/* --- Category promo layouts (vance_cat_promo_layout_choices()) ---------
   Five variants over one markup skeleton. `image_left` is the historical
   rendering and is what `.has-image` above already produces, so it needs no
   rules of its own — the four below are the deviations from it. */

/* Image right, text left. DOM order is unchanged (media first) so the picture
   still follows the heading for a screen reader; only the visual column
   order swaps. */
.vance-cat-promo__inner--image_right.has-image { grid-template-columns: 1fr minmax(220px, 320px); }
.vance-cat-promo__inner--image_right.has-image .vance-cat-promo__media { grid-column: 2; grid-row: 1; }
.vance-cat-promo__inner--image_right.has-image .vance-cat-promo__body { grid-column: 1; grid-row: 1; }

/* Image on top, copy beneath, both full width. */
.vance-cat-promo__inner--stacked.has-image { grid-template-columns: 1fr; }
.vance-cat-promo__inner--stacked.has-image .vance-cat-promo__media { min-height: 260px; }
.vance-cat-promo__inner--stacked.has-image .vance-cat-promo__body { padding: 28px 36px 32px; }

/* Full-width banner: copy sits over the photo, which is painted onto this
   element inline (see inc/category-promo.php) under a dark scrim. */
/* Doubled-up class on purpose: `.vance-cat-promo__inner.has-image` above is a
   two-class selector, so a single-class `--banner` rule would lose to it and
   the banner would inherit the two-column image grid. */
.vance-cat-promo__inner--banner,
.vance-cat-promo__inner--banner.has-image {
    grid-template-columns: 1fr;
    background-size: cover;
    background-position: center;
    padding: 0;
    min-height: 280px;
    align-items: center;
}
.vance-cat-promo__inner--banner .vance-cat-promo__body,
.vance-cat-promo__inner--banner.has-image .vance-cat-promo__body {
    padding: 40px 44px;
    max-width: 640px;
}
/* The scrim is what buys these their contrast, so they are only recoloured
   when an image is actually present. */
.vance-cat-promo__inner--banner.has-image .vance-cat-promo__eyebrow { color: #7fdcdc; }
.vance-cat-promo__inner--banner.has-image .vance-cat-promo__title { color: #ffffff; font-size: 32px; }
.vance-cat-promo__inner--banner.has-image .vance-cat-promo__text { color: rgba(255,255,255,0.88); }

/* Text only: a compact centred strip, for a category that wants an
   announcement rather than a picture. */
.vance-cat-promo__inner--text {
    padding: 26px 36px;
    text-align: center;
}
.vance-cat-promo__inner--text .vance-cat-promo__body {
    align-items: center;
    gap: 10px;
}
.vance-cat-promo__inner--text .vance-cat-promo__title { font-size: 22px; }
.vance-cat-promo__inner--text .vance-cat-promo__text { max-width: 68ch; }

@media (max-width: 767.98px) {
    .vance-cat-promo__inner.has-image { grid-template-columns: 1fr; }
    .vance-cat-promo__media { min-height: 160px; }
    .vance-cat-promo__inner,
    .vance-cat-promo__inner.has-image .vance-cat-promo__body { padding: 24px; }
    .vance-cat-promo__title { font-size: 22px; }

    /* Every side-by-side variant collapses to a single column, image first. */
    .vance-cat-promo__inner--image_right.has-image { grid-template-columns: 1fr; }
    .vance-cat-promo__inner--image_right.has-image .vance-cat-promo__media { grid-column: 1; grid-row: 1; }
    .vance-cat-promo__inner--image_right.has-image .vance-cat-promo__body { grid-column: 1; grid-row: 2; }
    .vance-cat-promo__inner--stacked.has-image .vance-cat-promo__media { min-height: 180px; }
    .vance-cat-promo__inner--stacked.has-image .vance-cat-promo__body { padding: 24px; }
    /* The banner keeps its scrim but loses the horizontal fade, which does not
       read at phone width — a flat overlay holds contrast at any crop. */
    .vance-cat-promo__inner--banner,
    .vance-cat-promo__inner--banner.has-image { min-height: 0; padding: 0; }
    .vance-cat-promo__inner--banner .vance-cat-promo__body,
    .vance-cat-promo__inner--banner.has-image .vance-cat-promo__body {
        padding: 28px 24px;
        background: rgba(10,25,41,0.72);
        max-width: none;
    }
    .vance-cat-promo__inner--banner.has-image .vance-cat-promo__title { font-size: 24px; }
    .vance-cat-promo__inner--text { padding: 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .vance-cat-promo .vance-glass--interactive { transition: none; }
    .vance-cat-promo .vance-glass--interactive:hover { transform: none; }
}

/* --- Promo block: featured-tool sidebar (inc/promo-block.php) -----------
   Optional second column, turned on per-instance via "Add a featured-tool
   sidebar" in the Customizer. The main promo keeps rendering its normal 5
   layouts inside the left column (.vance-promo-columns__main); the sidebar
   is always the same fixed card, so it does not inherit any of them.

   Both columns already get their own border from .vance-glass (applied to
   .vance-cat-promo__inner and to .vance-promo-tool-card below) — that is
   what makes them read as two separate containers rather than one card with
   a divider. The 25px is spacing between them, not inside either one. */
.vance-promo-columns {
    display: grid;
    grid-template-columns: 67fr 33fr;
    gap: 25px;
    align-items: stretch;
}
.vance-promo-columns__main { min-width: 0; }
.vance-promo-tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 15px;
    /* Right padding is 120px deeper than the other three sides on purpose —
       the dot graphic is anchored to the right edge (see background-position
       below) and bleeds furthest into the card there, so the text column
       needs the extra clearance to stay readable over it. */
    padding: 32px 148px 32px 28px;
    min-width: 0;
    /* The background-image itself (default dot graphic, or none when a
       background colour is chosen) is set inline per-instance — see
       vance_render_promo_block(). These three stay in CSS because they never
       change per-instance. The -125px pushes the pattern further right/out of
       the card than a plain "right" would, for the same reason as the padding
       above: less of it ends up under the text. */
    background-size: cover;
    background-position: right -125px top;
    background-repeat: no-repeat;
}
.vance-promo-tool-card__title {
    font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 800;
    color: #0A1929; margin: 0; line-height: 1.25;
}
.vance-promo-tool-card__desc { font-size: 14px; line-height: 1.6; color: #475569; margin: 0; }

@media (max-width: 767.98px) {
    /* The gap is horizontal spacing meant for side-by-side columns — stacked,
       it collapses with the column change rather than surviving as vertical
       margin between two full-width cards. */
    .vance-promo-columns { grid-template-columns: 1fr; gap: 24px; }
    .vance-promo-tool-card { padding: 28px 24px; }
}

/* =====================================================================
   HEADER SEARCH (header.php .vance-header-search)
   Icon button in .header-actions, to the right of "My Dashboard". Clicking
   it slides a search field open to its left, over the other header actions.

   Two notes on the choices here:

   - The field animates `width`, not a transform. scaleX would squash the
     placeholder and the caret, and there is no transform that grows a box
     from 0 while its text stays upright. It is a 260px element in its own
     compositing layer under the sticky header, so the layout cost is
     confined to .vance-header-search. prefers-reduced-motion is already
     handled globally in mobile-base.css §10.
   - The form is absolutely positioned so opening it never reflows the
     header row — the logo/nav baseline alignment worked out over several
     rounds (see the .header-actions notes above) must not move on click.
   ===================================================================== */
.vance-header-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Matches .header-dashboard-link / .vance-nav-askai exactly: 32px box, white
   fill, teal 1.5px border, inverting on hover. */
.vance-header-search__toggle {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    background: #fff;
    color: var(--primary-color);
    border: 1.5px solid var(--primary-color);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    border-radius: var(--radius-control);
}

.vance-header-search__toggle:hover {
    background: var(--primary-color);
    color: #fff;
}

.vance-header-search__toggle:focus-visible {
    outline: 2px solid var(--secondary-color);
    outline-offset: 2px;
}

.vance-header-search__icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

/* Magnifier when closed, X when open. */
.vance-header-search__icon--close,
.vance-header-search.is-open .vance-header-search__icon--open {
    display: none;
}

.vance-header-search.is-open .vance-header-search__icon--close {
    display: block;
}

.vance-header-search__form {
    position: absolute;
    z-index: 1;
    top: 50%;
    right: 32px; /* flush against the toggle's left edge */
    transform: translateY(-50%);
    width: 0;
    overflow: hidden;
    transition: width 0.28s ease;
}

.vance-header-search.is-open .vance-header-search__form {
    width: 260px;
}

.vance-header-search__field {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    background: #fff;
    color: var(--text-main);
    border: 1.5px solid var(--primary-color);
    border-right: none; /* butts into the toggle, reading as one control */
    font-family: var(--font-main);
    font-size: 14px;
    line-height: 32px;
    outline: none;
    border-radius: var(--radius-field);
}

/* While the field is open it overlays the rest of .header-actions. Hiding the
   neighbours with opacity (rather than display:none) keeps their space
   reserved, so the header never reflows on open, and pointer-events:none stops
   a click landing on the My Dashboard link now sitting under the field. Class
   is applied by assets/js/vance-header-search.js.

   Deliberately NOT transitioned: a `transition` shorthand on these children
   would need higher specificity than .header-dashboard-link / .vance-nav-askai,
   and would therefore REPLACE their own hover colour transitions rather than
   add to it — the buttons would start snapping between states on hover. An
   instant hide is the cheaper trade. */
.header-actions.vance-search-open > *:not(.vance-header-search) {
    opacity: 0;
    pointer-events: none;
}

.vance-header-search__field::placeholder {
    color: var(--text-light);
}

.vance-header-search__field:focus {
    border-color: var(--primary-hover);
}

/* Chrome/Safari draw their own clear button inside type=search; it collides
   with the X on the toggle. */
.vance-header-search__field::-webkit-search-decoration,
.vance-header-search__field::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 767.98px) {
    /* .header-actions is display:none on mobile (see the max-width:767.98px
       block above). Re-show the container for the search toggle ONLY — the
       social icons, VANCE-Ai and My Dashboard stay hidden, so the phone
       header keeps its current logo + hamburger layout with one icon added.
       .header-social-links carries an inline display:flex, hence !important;
       the extra `body` raises specificity over the .main-nav.active sibling
       rule further down the file, which would otherwise tie and win on
       source order. */
    body .site-header .header-actions {
        display: flex !important;
        align-items: center;
        gap: 0;
        order: 2;          /* between the logo and Mega Menu Pro's hamburger */
        margin-left: auto; /* absorbs the free space so the logo stays left */
        margin-right: 12px;
    }

    body .site-header .header-actions > *:not(.vance-header-search) {
        display: none !important;
    }

    body .site-header .main-nav {
        order: 3;
    }

    /* 44px minimum touch target on phones (mobile-base.css §4 sets the same
       floor for other buttons; this one needs the width too). */
    .vance-header-search__toggle {
        width: 44px;
        height: 44px;
        border: none;
        background: transparent;
        color: var(--secondary-color);
        border-radius: var(--radius-control);
    }

    .vance-header-search__toggle:hover {
        background: transparent;
        color: var(--primary-color);
    }

    .vance-header-search__icon {
        width: 22px;
        height: 22px;
    }

    /* Full-width drop-down bar under the fixed 70px header instead of a
       260px field squeezed into a 375px row. position:static here hands the
       containing block to .site-header (position:fixed on mobile). */
    .vance-header-search {
        position: static;
    }

    .vance-header-search__form {
        top: 100%;
        right: 0;
        left: 0;
        width: auto;
        max-height: 0;
        padding: 0 16px;
        transform: none;
        background: #fff;
        /* Zero-width while closed: max-height:0 collapses the content but a
           border sits OUTSIDE that box, so a 1px rule was left hanging under
           the header on every mobile page. */
        border-bottom: 0 solid #2f4f6f;
        transition: max-height 0.25s ease, padding 0.25s ease;
        border-radius: var(--radius-field);
    }

    .vance-header-search.is-open .vance-header-search__form {
        width: auto;
        max-height: 68px;
        padding: 12px 16px;
        border-bottom-width: 1px;
    }

    .vance-header-search__field {
        height: 44px;
        line-height: 44px;
        border-right: 1.5px solid var(--primary-color);
        font-size: 16px; /* < 16px makes iOS Safari zoom the whole page on focus */
    }
}

/* ---------------------------------------------------------------------
   Search results page (search.php)
   --------------------------------------------------------------------- */
.vance-search-again {
    display: flex;
    max-width: 520px;
    margin: 22px 0 0;
}

.vance-search-again__field {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    background: #fff;
    color: var(--text-main);
    border: 1.5px solid #fff;
    border-right: none;
    font-family: var(--font-main);
    font-size: 16px;
    outline: none;
    border-radius: var(--radius-field);
}

.vance-search-again__field:focus {
    border-color: var(--primary-light);
}

.vance-search-again__submit {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 24px;
    background: var(--primary-color);
    color: #fff;
    border: 1.5px solid var(--primary-color);
    font-family: var(--font-main);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
    border-radius: var(--radius-control);
}

.vance-search-again__submit:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
}

.vance-search-empty {
    max-width: 620px;
    margin: 0 auto;
    padding: 40px 0 20px;
    text-align: center;
}

.vance-search-empty h2 {
    color: var(--secondary-color);
    margin: 0 0 10px;
}

.vance-search-empty p {
    color: var(--text-light);
    margin: 0 0 24px;
}

.vance-search-empty__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.vance-search-empty__links a {
    display: inline-block;
    padding: 9px 16px;
    background: var(--primary-wash);
    color: var(--primary-hover);
    border: 1px solid var(--primary-pale);
    font-size: 14px;
    font-weight: 600;
    transition: background-color 0.2s, color 0.2s;
}

.vance-search-empty__links a:hover {
    background: var(--primary-color);
    color: #fff;
}

@media (max-width: 767.98px) {
    .search-hero h1 {
        font-size: 28px !important;
    }

    .vance-search-again {
        flex-direction: column;
        gap: 10px;
    }

    .vance-search-again__field {
        border-right: 1.5px solid #fff;
    }
}

/* ============================================================================
   HOMEPAGE HERO — "SPOTLIGHT" LAYOUT  (inc/hero-spotlight.php)
   ----------------------------------------------------------------------------
   The light, search-led hero. Deliberately does NOT reuse the .hero class: the
   shared .hero rules above hard-code a dark navy background, white text and a
   fixed min-height for the patient/HCP page heroes, and inheriting them here
   would mean overriding almost every declaration.

   Colours arrive as custom properties on the section's style attribute, set
   from the Customizer. The *-rgb pair carries the two background colours as
   bare "r, g, b" triples because the photograph's dissolve gradients need the
   same colour at both full and zero alpha, and `transparent` is not usable as
   the zero stop (it computes to rgba(0,0,0,0), so the ramp runs through grey).
   ========================================================================== */

.vhh-hero-spotlight {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, var(--vhh-hs-from, #ECF5F5) 0%, var(--vhh-hs-to, #F6F9FA) 100%);
    padding: clamp(44px, 5.4vw, 78px) 0 clamp(40px, 4.4vw, 64px);
}

/* The category cards row that normally follows the hero is pulled up 80px to
   overlap the dark hero's deep bottom padding. This hero has no such padding
   to overlap, so the same offset would slice the search field in half. */
.vhh-hero-spotlight + .category-cards-section {
    margin-top: 0;
}

/* --- Photograph ---------------------------------------------------------- */

.vhh-hero-spotlight__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 52%;
    z-index: -1;
    pointer-events: none;
}

.vhh-hero-spotlight__media img {
    width: 100%;
    height: 100%;
    /* 42% horizontally keeps the couple clear of the seam where the photo
       dissolves; 22% vertically keeps heads in frame when the box is shorter
       than the asset's 1.6:1. */
    object-fit: cover;
    object-position: 46% 14%;
    /* The photograph's paint position is DECLARED, not left to the painting
       algorithm. Without these two lines the img is an unpositioned in-flow
       box, so the ::before/::after dissolves cover it only as a side effect of
       being positioned. Anything that gives the img a stacking context of its
       own — a transform, an opacity below 1, a filter, will-change, or a
       browser extension injecting one — moves it up alongside the overlays,
       where tree order decides: ::before, img, ::after. The img then covers
       the LEFT dissolve and that edge goes hard. Pinning it to 0 against the
       overlays' 1 makes that impossible however the img is promoted.

       Reported 2026-09-10 by several people in the UK as "the feathered edge
       shows for half a second, then flicks to hard edges" — first paint has
       the gradients, the promoted layer arrives with the decoded image. Not
       reproducible on every machine, because layer promotion is a GPU and
       driver decision. */
    position: relative;
    z-index: 0;
}

/* These two overlays ARE the dissolve. They finish the photograph's left and
   bottom edges in the live background colour, measured against the rendered
   box, so the edges stay soft at every viewport width whatever object-fit:
   cover crops away.

   Only the homepage couple asset carries a baked alpha feather as well (see
   LOCAL/hero_couple_feather.py). Every other page sharing this block ships a
   flat RGB photograph with no alpha at all, so there these gradients are the
   ENTIRE effect. Verified 2026-09-10 against all three lobby-walk variants:
   mode=RGB, no alpha channel.

   z-index: 1 is load-bearing, not decoration — see the note on the img above.
   It cannot leak the gradients over the copy: .vhh-hero-spotlight__media
   carries z-index -1 on desktop and 0 at <=900px, and either value makes it a
   stacking context, so 1 is only ever "above the photograph inside this box". */
.vhh-hero-spotlight__media::before,
.vhh-hero-spotlight__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.vhh-hero-spotlight__media::before {
    background: linear-gradient(
        to right,
        rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 1) 0%,
        rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 0.55) 16%,
        rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 0) 38%
    );
}

/* The bottom dissolve. 17% was too short for a photograph whose bottom edge is
   dark: the recipes asset ends on a deep teal cabinet (mean RGB 136,150,147) at
   its very last row, and ramping that to #F6F9FA over 17% of the box read as a
   hard horizontal band rather than a fade. The stacked variant below had
   already been given 34% for the same reason.

   Multi-stop rather than a single 0-to-1 pair: a linear alpha ramp this long
   bands visibly against a flat ground, so the stops approximate an ease-out and
   put most of the travel in the first half. Lengthening only ever softens, so
   the thirteen other pages sharing this rule are safe. */
.vhh-hero-spotlight__media::after {
    background: linear-gradient(
        to top,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 1) 0%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0.97) 7%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0.85) 15%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0.60) 24%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0.32) 33%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0.11) 40%,
        rgba(var(--vhh-hs-to-rgb, 246, 249, 250), 0) 47%
    );
}

/* --- Layout -------------------------------------------------------------- */

.vhh-hero-spotlight__inner {
    position: relative;
    z-index: 1;
    display: grid;
    /* 1.25/0.75 with a 56px gutter reproduces the mockup's split: a copy
       column wide enough that the search field runs past the point where the
       photograph starts dissolving, and a card column of ~410px. */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 56px;
    align-items: end;
}

/* --- Type ---------------------------------------------------------------- */

.vhh-hero-spotlight__title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: clamp(32px, 3.9vw, 56px);
    line-height: 1.08;
    letter-spacing: -1px;
    color: var(--vhh-hs-title, #04504E);
    /* Holds the headline to the mockup's three lines at desktop widths instead
       of running the full width of the copy column, which the search field
       below deliberately does use. */
    max-width: 520px;
    margin: 0 0 20px;
}

.vhh-hero-spotlight__title .highlight {
    color: var(--primary-color, #008080);
}

.vhh-hero-spotlight__intro {
    font-size: 17px;
    line-height: 1.75;
    color: var(--vhh-hs-intro, #3F4B4E);
    max-width: 520px;
    margin: 0 0 32px;
}

/* --- CTAs ---------------------------------------------------------------- */

.vhh-hero-spotlight__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}

.vhh-hero-spotlight__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    /* 15px padding on a 15px/1.15 label clears the 44px minimum touch target
       without a min-height that would fight the ghost variant's border. */
    padding: 15px 26px;
    border-radius: var(--radius-control);
    border: 1.5px solid transparent;
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.15;
    text-decoration: none;
    cursor: pointer;
    background: var(--vhh-hs-cta-bg, #6B489E);
    color: var(--vhh-hs-cta-fg, #ffffff);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vhh-hero-spotlight__cta svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.vhh-hero-spotlight__cta:hover,
.vhh-hero-spotlight__cta:focus-visible {
    background: var(--vhh-hs-cta-hover, #583B82);
    color: var(--vhh-hs-cta-fg, #ffffff);
}

.vhh-hero-spotlight__cta--ghost {
    background: transparent;
    color: var(--vhh-hs-title, #04504E);
    /* #5E8F8D rather than the mockup's much paler hairline: at 3.3:1 against
       the mint background it clears the 3:1 non-text contrast minimum, which
       the lighter value did not. */
    border-color: #5E8F8D;
}

.vhh-hero-spotlight__cta--ghost:hover,
.vhh-hero-spotlight__cta--ghost:focus-visible {
    background: #ffffff;
    color: var(--vhh-hs-title, #04504E);
    border-color: var(--vhh-hs-title, #04504E);
}

.vhh-hero-spotlight__cta:focus-visible {
    outline: 3px solid var(--vhh-hs-title, #04504E);
    outline-offset: 3px;
}

/* --- Search -------------------------------------------------------------- */

/* __slot-label is the Contact/About equivalent: the prompt sitting above the
   white band that replaces the search field on those pages. */
.vhh-hero-spotlight__search-label,
.vhh-hero-spotlight__slot-label {
    display: block;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    color: var(--vhh-hs-title, #04504E);
    margin-bottom: 12px;
    cursor: pointer;
}

/* The white card treatment is shared with __slot, the Contact/About band, so
   the three heroes cannot drift apart on border, radius or shadow. __slot
   overrides `display` to grid further down; everything else it inherits. */
.vhh-hero-spotlight__search-form,
.vhh-hero-spotlight__slot {
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border: 1px solid #5E8F8D;
    border-radius: var(--radius-field);
    box-shadow: 0 6px 20px rgba(4, 80, 78, 0.07);
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.vhh-hero-spotlight__search-form:focus-within {
    border-color: var(--vhh-hs-title, #04504E);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18), 0 6px 20px rgba(4, 80, 78, 0.07);
}

.vhh-hero-spotlight__search-field {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: 18px 8px 18px 22px;
    font-family: var(--font-main);
    font-size: 16px;
    color: #1F2937;
    /* The wrapper carries the focus ring, so the field's own outline would
       double it up inside the rounded border. */
    outline: none;
    appearance: none;
}

.vhh-hero-spotlight__search-field::placeholder {
    /* Darker than the mockup's grey, which measured 3.6:1 on white. */
    color: #5F6B72;
    opacity: 1;
}

.vhh-hero-spotlight__search-field::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.vhh-hero-spotlight__search-submit {
    flex: 0 0 auto;
    width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--primary-color, #008080);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.vhh-hero-spotlight__search-submit svg {
    width: 24px;
    height: 24px;
}

.vhh-hero-spotlight__search-submit:hover {
    background: rgba(0, 128, 128, 0.08);
    color: var(--vhh-hs-title, #04504E);
}

.vhh-hero-spotlight__search-submit:focus-visible {
    outline: 3px solid var(--vhh-hs-title, #04504E);
    outline-offset: -3px;
}

/* --- Trust card ---------------------------------------------------------- */

.vhh-hero-spotlight__card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    width: 100%;
    max-width: 420px;
    margin-left: auto;
    padding: 26px 28px;
    border-radius: var(--radius-surface);
    background: var(--vhh-hs-card-bg, #E5F1F1);
    box-shadow: 0 10px 30px rgba(4, 80, 78, 0.08);
}

.vhh-hero-spotlight__card-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* A rounded square on the control step, not a circle -- it reads as an
       icon tile alongside the rest of the scale rather than as an avatar. */
    border-radius: var(--radius-control);
    background: #C1DFDE;
    color: var(--vhh-hs-title, #04504E);
}

.vhh-hero-spotlight__card-icon svg {
    width: 26px;
    height: 26px;
}

.vhh-hero-spotlight__card-title {
    font-family: var(--font-heading);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.28;
    color: var(--vhh-hs-title, #04504E);
    margin: 0 0 10px;
}

.vhh-hero-spotlight__card-text {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--vhh-hs-intro, #3F4B4E);
    margin: 0;
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1100px) {
    .vhh-hero-spotlight__media { width: 46%; }
    .vhh-hero-spotlight__title { max-width: 420px; }
    .vhh-hero-spotlight__inner { gap: 32px; }
}

@media (max-width: 900px) {
    .vhh-hero-spotlight {
        padding: 0 0 44px;
    }

    /* The photo drops out of absolute positioning and back into flow. It is
       first in source order, so it lands above the headline with no `order`
       and no second copy of the markup. */
    .vhh-hero-spotlight__media {
        position: relative;
        width: 100%;
        height: 240px;
        margin-bottom: 32px;
        z-index: 0;
    }

    .vhh-hero-spotlight__media img {
        object-position: 50% 20%;
    }

    /* Full-width now, so the single left dissolve becomes a symmetric pair —
       otherwise the feather baked into the asset's left edge reads as a wash
       on one side only. */
    .vhh-hero-spotlight__media::before {
        background: linear-gradient(
            to right,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 1) 0%,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 0) 15%,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 0) 85%,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 1) 100%
        );
    }

    .vhh-hero-spotlight__media::after {
        background: linear-gradient(
            to top,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 1) 0%,
            rgba(var(--vhh-hs-from-rgb, 236, 245, 245), 0) 34%
        );
    }

    .vhh-hero-spotlight__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .vhh-hero-spotlight__title,
    .vhh-hero-spotlight__intro {
        max-width: none;
    }

    /* Freed from the 420px cap, the headline can take a larger share of the
       viewport than the two-column clamp allows.

       Both selectors are doubled up, and both carry !important, to opt this
       hero out of the global mobile type normalisation: mobile-base.css and
       mobile-components.css load after this file and pin `h1` to 32px (28px
       below 480px) and `.container h2` to 28px, with !important, from 768px
       down. That is right for article and page bodies but flattens this hero
       — the trust card's 19px heading in particular lands at 28px, larger
       than the body copy sitting beside it. Among !important declarations the
       ordinary cascade applies, so the extra class wins on specificity. */
    .vhh-hero-spotlight .vhh-hero-spotlight__title {
        font-size: clamp(30px, 5.6vw, 44px) !important;
    }

    .vhh-hero-spotlight .vhh-hero-spotlight__card-title {
        font-size: 19px !important;
    }

    .vhh-hero-spotlight__card {
        max-width: none;
        margin-left: 0;
    }
}

@media (max-width: 560px) {
    .vhh-hero-spotlight__media { height: 190px; }
    .vhh-hero-spotlight__title { letter-spacing: -0.5px; }

    .vhh-hero-spotlight__actions {
        gap: 12px;
    }

    /* Full-width stacked CTAs — side by side they wrap to two lines of text
       inside a 26px-padded pill at this width. */
    .vhh-hero-spotlight__cta {
        width: 100%;
    }

    .vhh-hero-spotlight__search-field {
        padding: 16px 6px 16px 16px;
        /* Keep >= 16px so iOS Safari does not zoom the page on focus. */
        font-size: 16px;
    }

    .vhh-hero-spotlight__search-submit { width: 52px; }

    .vhh-hero-spotlight__card {
        flex-direction: column;
        gap: 14px;
        padding: 22px;
    }
}


/* ============================================================================
   PAGE HEROES — the spotlight layout, page variant
   (inc/page-hero-spotlight.php)
   ----------------------------------------------------------------------------
   Contact, About and the three free-tool pages — the Gastro Health Survey, the
   meal planner and the malnutrition calculator — render the SAME
   .vhh-hero-spotlight section as the homepage,
   so the band, the photograph's dissolve, the type scale, the CTAs, the card
   and the whole responsive ladder above are inherited rather than repeated —
   including the doubled-class !important rules that opt this hero out of the
   global mobile type normalisation.

   Only three things are genuinely new, and they are all in the block below:

     __eyebrow  the pill above the headline. The homepage hero has none; both
                page heroes have carried one for as long as they have existed
                ("Get in Touch", "About Vance Medical Hub").
     __slot     what fills the band where the homepage puts its search field —
                three direct-contact cells on Contact, three assurance badges
                on About. Its white card treatment is shared with
                __search-form higher up, so only the interior lives here.
     __card--stat  the card variant that leads on a figure instead of a
                heading, used by About to surface stat 1.
     __slot--tools the three tool pages' band, and Ask AI's and the User
                Guide's. Not a fourth band: it renders the lines markup
                unchanged and adds only the two things a tool name needs that
                an email address does not.
     __slot--pillars  Get Started Today's band. The badges markup unchanged,
                laid out two-by-two because it carries four cells.

   No page renders any of this until its own hero design is switched to
   Spotlight; all five default to the classic dark hero.
   ========================================================================== */

/* --- Eyebrow ------------------------------------------------------------- */

.vhh-hero-spotlight__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vhh-hs-title, #04504E);
    background: #DCEBEA;
    /* The same hairline as the ghost CTA and the search field, at 3.3:1 on the
       mint band. A paler tint reads as no border at all against #ECF5F5 — the
       chip's own fill is only 1.1:1 against it, so the border IS the edge. */
    border: 1px solid #5E8F8D;
    border-radius: var(--radius-control);
    padding: 7px 13px;
    margin: 0 0 20px;
}

/* --- Utility band -------------------------------------------------------- */

.vhh-hero-spotlight__slot {
    /* Overrides the flex inherited from the shared __search-form rule. */
    display: grid;
    /* Auto columns, NOT repeat(3, ...): both bands drop a cell whose setting is
       empty — clear the office phone and Contact renders two — and a fixed
       three-column track would leave the missing third as a blank slab of
       white. Auto-flow gives exactly as many equal columns as there are cells. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    /* The badge variant is a <ul>. */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The meal planner's band carries five cells, not three: the collection total
   plus one per meal slot. grid-auto-flow: column would give each a fifth of an
   already-narrow copy column and break "Breakfast" onto two lines, so this
   variant wraps instead — auto-fit keeps them on one row wherever there is
   room and folds to two rows when there is not, rather than squeezing. Scoped
   to the modifier so the three-cell bands elsewhere are untouched. */
.vhh-hero-spotlight__slot--recipestats {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
}

.vhh-hero-spotlight__slot--recipestats .vhh-hero-spotlight__line {
    /* Five cells cannot afford the three-cell padding and stay legible. */
    padding: 13px 12px;
    gap: 9px;
}

/* Contact — email / phone / opening hours */

.vhh-hero-spotlight__line {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    text-decoration: none;
    color: inherit;
    border-right: 1px solid #DCE9E8;
    transition: background-color 0.2s ease;
}

.vhh-hero-spotlight__line:last-child { border-right: 0; }

a.vhh-hero-spotlight__line { cursor: pointer; }
a.vhh-hero-spotlight__line:hover { background: #F3F9F9; }

a.vhh-hero-spotlight__line:focus-visible {
    /* Inset, because the cell sits flush inside the band's rounded overflow
       clip — an outset ring would be sliced off at the corners. */
    outline: 3px solid var(--vhh-hs-title, #04504E);
    outline-offset: -3px;
}

.vhh-hero-spotlight__line-ico {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--vhh-hs-card-bg, #E5F1F1);
    color: var(--vhh-hs-title, #04504E);
}

.vhh-hero-spotlight__line-ico svg { width: 17px; height: 17px; }

.vhh-hero-spotlight__line-body { min-width: 0; }

.vhh-hero-spotlight__line-k {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    /* 6.3:1 on white. The mockup's lighter grey measured 4.1:1, which this
       size cannot carry. */
    color: #4F6462;
    margin-bottom: 3px;
}

.vhh-hero-spotlight__line-v {
    display: block;
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    color: #143633;
    /* Email addresses have no break opportunities and the cell is a third of
       the band; without this one long address widens the whole grid. */
    overflow-wrap: anywhere;
}

a.vhh-hero-spotlight__line:hover .vhh-hero-spotlight__line-v {
    color: var(--vhh-hs-title, #04504E);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* About — the three assurance badges */

.vhh-hero-spotlight__badge {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 18px;
    border-right: 1px solid #DCE9E8;
}

.vhh-hero-spotlight__badge:last-child { border-right: 0; }

.vhh-hero-spotlight__badge-ico {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-control);
    background: var(--vhh-hs-title, #04504E);
    color: #ffffff;
}

.vhh-hero-spotlight__badge-ico svg { width: 15px; height: 15px; }

.vhh-hero-spotlight__badge-t {
    font-family: var(--font-heading);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #143633;
}

/* --- Figure card (About) ------------------------------------------------- */

.vhh-hero-spotlight__card--stat {
    /* Stacked rather than icon-beside-body: the figure is the point, so it
       gets the full width of the card instead of sharing a row. */
    flex-direction: column;
    gap: 14px;
}

.vhh-hero-spotlight__stat-fig {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 0;
}

.vhh-hero-spotlight__stat-num {
    font-family: var(--font-heading);
    font-size: 52px;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.02em;
    color: var(--vhh-hs-title, #04504E);
    /* "30+", "100%", "100,000+" — admins can put any of the three stats here,
       and the grouped forms need even digit widths. */
    font-variant-numeric: tabular-nums;
}

.vhh-hero-spotlight__stat-lab {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--vhh-hs-title, #04504E);
    max-width: 185px;
}

.vhh-hero-spotlight__stat-rule {
    display: block;
    width: 56px;
    height: 3px;
    background: #C1DFDE;
    border-radius: var(--radius-control);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
    /* The band's cells go from a row to a stack, so the dividers turn with
       them. grid-auto-flow has to be reset explicitly — it is what puts the
       cells side by side above this breakpoint. */
    .vhh-hero-spotlight__slot {
        grid-auto-flow: row;
        grid-auto-columns: auto;
        grid-template-columns: minmax(0, 1fr);
    }

    .vhh-hero-spotlight__line,
    .vhh-hero-spotlight__badge {
        border-right: 0;
        border-bottom: 1px solid #DCE9E8;
    }

    .vhh-hero-spotlight__line:last-child,
    .vhh-hero-spotlight__badge:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 560px) {
    /* The shared __card rule stacks to column at this width; the figure card
       is already a column, so it only needs its gap tightening. */
    .vhh-hero-spotlight__card--stat { gap: 12px; }

    .vhh-hero-spotlight__stat-num { font-size: 46px; }
}



/* --- The three free tools: the band of sibling tools ---------------------- */

/* Cells identical to Contact's direct lines, because the renderer emits the
   same markup for both -- so the icon tile, the caption/value pair, the
   dividers and the whole responsive stack are inherited, not repeated. Only
   what a tool NAME needs and an email address does not lives here. */

.vhh-hero-spotlight__slot--tools .vhh-hero-spotlight__line-v {
    /* The lines variant sets `overflow-wrap: anywhere` so that one unbreakable
       email address cannot widen the band. Tool names are ordinary words --
       "Gastro Recipes & Meal Planner" -- and that rule would break them
       mid-word, so it is wound back to normal wrapping here. */
    overflow-wrap: normal;
}

/* Every cell in THIS band is a link; in the lines band they are not (opening
   hours is plain text). So the affordance has to read as one before anybody
   hovers. Drawn from two borders rather than an arrow glyph: an empty
   pseudo-element is not announced, and the cell's own words already say where
   it goes. */
.vhh-hero-spotlight__slot--tools .vhh-hero-spotlight__line::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--vhh-hs-title, #04504E);
    opacity: 0.45;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.vhh-hero-spotlight__slot--tools a.vhh-hero-spotlight__line:hover::after,
.vhh-hero-spotlight__slot--tools a.vhh-hero-spotlight__line:focus-visible::after {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .vhh-hero-spotlight__slot--tools .vhh-hero-spotlight__line::after {
        transition: none;
    }
}



/* --- Get Started Today: the four evidence pillars ------------------------ */

/* The badges markup unchanged -- a tick beside a phrase -- with one more cell
   than any other band on the site and much longer phrases in them. Four equal
   columns inside the copy column measure under 130px each, which puts
   "Peer-Reviewed Science" on three lines, so this band goes two-by-two.

   Scoped to min-width 901px deliberately. The shared rule at max-width 900px
   collapses every band to a single stack, this block sits AFTER it in the file,
   and both selectors are one class deep -- so an unscoped grid-template-columns
   here would win at every width and the band would never stack on a phone. */
@media (min-width: 901px) {
    .vhh-hero-spotlight__slot--pillars {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The shared rule rules off the right of every cell but the last, which is
       right for one row and wrong for a 2x2 -- it leaves a hairline floating
       down the right of cell 3. Draw the grid's interior lines instead. */
    .vhh-hero-spotlight__slot--pillars .vhh-hero-spotlight__badge {
        border-right: 0;
        border-bottom: 1px solid #DCE9E8;
    }

    .vhh-hero-spotlight__slot--pillars .vhh-hero-spotlight__badge:nth-child(odd) {
        border-right: 1px solid #DCE9E8;
    }

    .vhh-hero-spotlight__slot--pillars .vhh-hero-spotlight__badge:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}


/* --- The motif that stands in for the photograph ------------------------- */

/* Two page heroes have no photograph: the Knowledgebase lobby and the 404.
   Neither is a page about people -- one is a body of material, the other is a
   state of the site -- and the five policy documents already settled what to do
   about that (inc/legal-hero.php). The motif is the same one, drawn by
   vance_page_hero_spotlight_motif().

   It is a DEFAULT, not a ceiling: both pages keep their Photograph control, and
   uploading one switches the renderer to the __media branch.

   inc/legal-hero.php declares this class inline as well, with identical values.
   That file is loaded only by the policy templates and is covered by its own
   suite, so it is left self-contained on purpose; if the two are ever merged,
   delete the inline copy at the same time. */

.vhh-hero-spotlight__motif {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%;
    /* Same stacking treatment as __media: behind the copy, inert to the
       pointer, and inside the section's `isolation: isolate` so the negative
       index cannot escape behind the page background. */
    z-index: -1;
    pointer-events: none;
}

.vhh-hero-spotlight__motif svg {
    display: block;
    width: 100%;
    height: 100%;
}


/* --- The 404: four places worth starting from ---------------------------- */

/* The `lines` markup unchanged -- icon tile, caption, value -- so the tile, the
   type, the dividers and the mobile stack all come from the shared rules. Two
   things are added, and they are the same two the tools band adds, written out
   rather than borrowed: __slot--tools belongs to the free-tools family, which
   is still being extended, and the 404 should not change shape because a tool
   page did. */

.vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line-v {
    /* The lines band sets `overflow-wrap: anywhere` so one unbreakable email
       address cannot widen the grid. Page names are ordinary words and that
       rule would break them mid-word. */
    overflow-wrap: normal;
}

/* Every cell here is a link, so the affordance has to read as one before
   anybody hovers -- and on this page more than any other, because the visitor
   arrived by following one that did not work. */
.vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--vhh-hs-title, #04504E);
    opacity: 0.45;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.vhh-hero-spotlight__slot--start a.vhh-hero-spotlight__line:hover::after,
.vhh-hero-spotlight__slot--start a.vhh-hero-spotlight__line:focus-visible::after {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line::after {
        transition: none;
    }
}

/* Four cells, always. Four equal columns inside the copy column measure under
   170px each, which puts "Gastro Health Survey" on three lines, so this band
   goes two-by-two -- the same answer the evidence pillars and the policy
   documents reached.

   Scoped to min-width 901px deliberately. The shared rule above collapses every
   band to a single stack at max-width 900px, this block sits AFTER it in the
   file, and both selectors are one class deep -- so an unscoped
   grid-template-columns here would win at every width and the band would never
   stack on a phone. */
@media (min-width: 901px) {
    .vhh-hero-spotlight__slot--start {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* The shared rule rules off the right of every cell but the last, which is
       right for one row and wrong for a 2x2 -- it leaves a hairline floating
       down the right of cell 3. Draw the grid's interior lines instead. */
    .vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line {
        border-right: 0;
        border-bottom: 1px solid #DCE9E8;
    }

    .vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line:nth-child(odd) {
        border-right: 1px solid #DCE9E8;
    }

    .vhh-hero-spotlight__slot--start .vhh-hero-spotlight__line:nth-last-child(-n + 2) {
        border-bottom: 0;
    }
}


/* --- Education & Courses: what the Hub teaches with today ----------------- */

/* Three cells in one row, so nothing here touches the grid -- the shared rule
   already lays that out and stacks it on a phone. Only the two additions any
   band of all-links needs.

   Written out rather than added to __slot--tools's selector list, for the same
   reason __slot--start was: that modifier belongs to the free-tools family,
   which is still being extended, and this band should not change shape because
   a tool page did. Third copy of the same two rules, and deliberately so. */

.vhh-hero-spotlight__slot--learn .vhh-hero-spotlight__line-v {
    /* The lines band sets `overflow-wrap: anywhere` so one unbreakable email
       address cannot widen the grid. "Free Health Tools" is ordinary words and
       that rule would break them mid-word. */
    overflow-wrap: normal;
}

/* Every cell here is a link, so the affordance has to read as one before
   anybody hovers. Two borders rather than an arrow glyph: an empty
   pseudo-element is not announced, and the cell's own words say where it goes. */
.vhh-hero-spotlight__slot--learn .vhh-hero-spotlight__line::after {
    content: "";
    flex: 0 0 auto;
    margin-left: auto;
    width: 7px;
    height: 7px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    color: var(--vhh-hs-title, #04504E);
    opacity: 0.45;
    transition: transform 0.18s ease, opacity 0.18s ease;
}

.vhh-hero-spotlight__slot--learn a.vhh-hero-spotlight__line:hover::after,
.vhh-hero-spotlight__slot--learn a.vhh-hero-spotlight__line:focus-visible::after {
    opacity: 1;
    transform: rotate(45deg) translate(2px, -2px);
}

@media (prefers-reduced-motion: reduce) {
    .vhh-hero-spotlight__slot--learn .vhh-hero-spotlight__line::after {
        transition: none;
    }
}


/* --- The motif pages on a phone ------------------------------------------ */

@media (max-width: 900px) {
    /* The shared rule zeroes this hero's TOP padding at this width, because
       that is where the photograph drops back into flow and provides the
       spacing itself. A motif is absolutely positioned at every width and never
       drops, so without this the headline jams against the site header. */
    /* Keyed off --has-motif, which the renderer emits whenever THIS render is
       drawing the motif. It used to name kblobby and e404 one by one, and
       Education became a third motif page and shipped flush under the site
       header on a phone, because a page list in a stylesheet is a thing
       somebody has to remember. It is also strictly more correct: a page whose
       config declares the motif but whose admin has uploaded a photograph gets
       the photograph's spacing now, where the page list gave it the motif's. */
    .vhh-hero-spotlight--has-motif {
        padding: 40px 0 44px;
    }

    /* Full width and further back: on one column the motif sits behind the copy
       rather than beside it. At this alpha the headline still measures over
       6:1 against the lightest point of the bloom. */
    .vhh-hero-spotlight--has-motif .vhh-hero-spotlight__motif {
        width: 100%;
        opacity: 0.55;
    }
}



/* ==========================================================================
   Medical review line
   ==========================================================================
   Sits between the article title and the first paragraph, and only renders
   when a clinician has actually been recorded against the post — see
   inc/medical-review.php. Quiet on purpose: this is a provenance note, not a
   badge, so it reads as a fact about the article rather than a trust seal.
   ========================================================================== */

.va-medical-review {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 6px;
    margin: 0 0 24px;
    padding: 10px 14px;
    border-left: 3px solid var(--color-primary, #008080);
    border-radius: 0 var(--radius-control, 6px) var(--radius-control, 6px) 0;
    background: rgba(0, 128, 128, 0.06);
    font-size: 14px;
    line-height: 1.5;
    color: #33484f;
}

.va-medical-review .va-review-label {
    font-weight: 600;
    color: var(--color-primary, #008080);
}

.va-medical-review a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.va-medical-review .va-review-date {
    color: #63757c;
}


/* ==========================================================================
   Mega menu arrows, drawn rather than typed
   ==========================================================================
   Max Mega Menu draws its dropdown arrow and its mobile close button as
   characters from the Dashicons font -- a private-use-area glyph on
   span.mega-indicator::after and .mega-close::before. Nothing in the markup
   says so: there is no dashicons class to find, only a font-family on a
   pseudo-element.

   That matters because inc/frontend-assets.php stops serving Dashicons to
   logged-out visitors, 34.7 KB of admin icon font on every page. When it was
   first dequeued the ten menu arrows and the close button turned into tofu
   boxes -- a crawl for `class="dashicons"` had found nothing, so the
   dependency was invisible to the check that was supposed to catch exactly
   this.

   Restoring the font for two glyphs would be a poor trade. These are a chevron
   and a multiplication sign, so they are drawn from borders and a Latin-1
   character instead: no webfont, nothing to fail to load, and they inherit
   currentColor so the existing hover and open states still apply.

   !important throughout, because the plugin generates its rules behind two ID
   selectors and matching that would mean hard-coding
   #mega-menu-wrap-primary-menu, which changes with the menu location. The
   generated rules carry no !important of their own, so this wins wherever it
   lands in the cascade.
   ========================================================================== */

.mega-menu .mega-indicator::after,
span.mega-indicator::after {
    content: "" !important;
    font-family: inherit !important;
    display: inline-block !important;
    width: 0.42em !important;
    height: 0.42em !important;
    border: 0 !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    transform-origin: center !important;
    position: relative !important;
    top: -0.16em !important;
    vertical-align: middle !important;
    transition: transform 0.18s ease;
}

/* Open state: the same chevron, pointed the other way. */
.mega-menu li.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after,
li.mega-toggle-on > a.mega-menu-link > span.mega-indicator::after {
    transform: rotate(-135deg) !important;
    top: 0.08em !important;
}

.mega-menu .mega-close::before,
.mega-close::before {
    content: "\00d7" !important;
    font-family: inherit !important;
    font-size: 1.6em;
    line-height: 1;
}


/* ==========================================================================
   Conditions covered by an article
   ==========================================================================
   Sits directly under the article body and links to the condition pillar
   page(s) the piece is about — see inc/article-conditions.php. Prints nothing
   for a general article, so an empty row never appears.

   Chips take --radius-control, which is what the token scale gives chips; they
   are controls that happen to be links, and they should read the same as the
   condition chips on the Gastro Health Explained lobby.
   ========================================================================== */

.va-article-conditions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: 32px 0 8px;
    padding: 16px 18px;
    border: 1px solid #dde5e5;
    border-radius: var(--radius-surface, 14px);
    background: #f7fafa;
}

.va-conditions-label {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #63757c;
}

.va-article-conditions .va-condition-link {
    display: inline-block;
    padding: 6px 12px;
    border: 1px solid var(--color-primary, #008080);
    border-radius: var(--radius-control, 6px);
    background: #fff;
    color: var(--color-primary, #008080);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.va-article-conditions .va-condition-link:hover,
.va-article-conditions .va-condition-link:focus {
    background: var(--color-primary, #008080);
    color: #fff;
}

.va-conditions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.va-category-backlink {
    margin: 16px 0 8px;
    font-size: 14px;
}

.va-category-backlink a {
    color: var(--color-primary, #008080);
    font-weight: 600;
    text-decoration: none;
}

.va-category-backlink a:hover,
.va-category-backlink a:focus {
    text-decoration: underline;
}

.va-related-articles {
    margin: 32px 0 8px;
    padding: 18px 20px;
    border: 1px solid #dde5e5;
    border-radius: var(--radius-surface, 14px);
    background: #f7fafa;
}

.va-related-articles__title {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
}

.va-related-articles__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.va-related-articles__item a {
    color: var(--color-primary, #008080);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.4;
}

.va-related-articles__item a:hover,
.va-related-articles__item a:focus {
    text-decoration: underline;
}


/* ==========================================================================
   Article cards stay square
   ==========================================================================
   The one deliberate exception to the radius scale. Every tile below is a
   post tile — its whole surface is a link to a permalink — and they are kept
   square so an editorial grid reads as a wall of articles rather than a tray
   of widgets.

   This block is the single enforcement point, and it lives at the end of the
   file on purpose: several of these selectors are also styled earlier with
   `var(--radius-lg)`, and at equal specificity the later rule wins. Add new
   post tiles here rather than scattering `border-radius: 0` through the
   component that renders them.

   Thumbnails are included because a card that clips its image would otherwise
   round the photo's top corners against a square frame.

   The line is drawn at card-shaped post previews, not at "does it link to a
   post". `.oped-related-item`, `.gi-cp-article` and `.latest-list-item` are
   sidebar list rows - flex, a hairline rule, no surface of their own - so they
   follow the ordinary scale. `.oped-readnext-item` looks like a sibling of
   those by name but is a real tile (200px thumb, shadow, overflow: hidden), so
   it belongs here. Moving that line means editing this list only. */
.news-card,
.news-card .card-image,
.news-card .card-image img,
.news-card .card-content,
.bento-cell-featured,
.bento-cell-side,
.vance-cw-card,
.vance-cw-side-card,
.vance-cw-bento-featured,
.va-poster-card,
.va-poster-card img,
.va-poster-link,
.va-fl-featured,
.va-fl-featured img,
.va-fl-item,
.va-fl-item img,
.va-fl-thumb,
.oped-readnext-item,
.oped-readnext-thumb {
    border-radius: var(--radius-article);
}

/* ============================================================================
   ARTICLE SIDEBAR — EXPLORE PANEL
   ----------------------------------------------------------------------------
   The article page's replacement for the inner category nav bar, which now
   renders on category archives only. Same eight categories, same source
   (vance_inner_nav_categories()), and deliberately the same button treatment as
   that bar -- transparent, #008080 border and label, white on hover, no
   animation -- so moving between an article and a category page does not feel
   like moving between two designs.

   Two columns rather than the bar's eight: the sidebar gives ~292px of content
   width, so each button gets ~140px, which fits the longest category name on
   two wrapped lines. Grid stretch equalises the heights, so all eight stay the
   same size however their labels break.
   ========================================================================== */

.va-jump-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-auto-rows: 1fr, not just stretch. Stretch equalises buttons
       WITHIN a row, so a row whose labels both fit on one line came out
       48px while a row with a wrapped label came out 52px -- eight
       buttons in two sizes. 1fr makes every row the height of the
       tallest, so all eight match. */
    grid-auto-rows: 1fr;
    gap: 8px;
}

.va-jump-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-height keeps a one-word button the same size as a three-line one when
       it is the only short label in the grid and nothing else stretches it. */
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #008080;
    border-radius: var(--radius-control, 6px);
    background: transparent;
    color: #008080;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    /* Explicit `none`: main.css sets `a { transition: color 0.2s }` sitewide and
       these would otherwise inherit it. Matches the nav bar, which is not
       animated either. */
    transition: none;
}

.va-jump-btn:hover,
.va-jump-btn:focus-visible {
    background: #ffffff;
    border-color: #008080;
    color: #008080;
}

.va-jump-btn:focus-visible {
    outline: 2px solid #008080;
    outline-offset: 2px;
}

/* The category this article belongs to, tinted like the nav bar's active item. */
.va-jump-btn.is-current {
    background: rgba(0, 128, 128, 0.10);
    font-weight: 700;
}

@media (max-width: 480px) {
    /* The sidebar is full width on a phone, so two columns would give very wide,
       very short buttons. One column reads better. */
    .va-jump-grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   PROMO BLOCK — band, width and the container-fluid fix
   ----------------------------------------------------------------------------
   The old .promo-* family is gone. The homepage, Knowledgebase and category
   promos now all render the .vance-cat-promo card (inc/promo-block.php), whose
   own styles live further up this file. What survives here is the part the
   homepage block had and the category one did not: an optional coloured band
   behind the card, and the full-width switch.

   .container-fluid is defined here for the first time. The homepage promo has
   offered a "Full Width" option for as long as it has existed and emitted this
   class for it, but NOTHING in the theme ever styled it -- picking Full Width
   produced an unstyled div, so the content ran to the very edge of the viewport
   with no gutter at all. It now behaves as the container does, minus the
   max-width.
   ========================================================================== */

.container-fluid {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
}

/* A promo carrying a band colour needs breathing room above and below it; one
   sitting transparently on the page (every category promo today) keeps the
   tighter rhythm .vance-cat-promo already sets. Keyed off the inline style the
   renderer only writes when a colour is set, so no extra class is needed. */
.vance-cat-promo[style*="background-color"] {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* ============================================================================
   HOMEPAGE SECTION SEAMS
   ----------------------------------------------------------------------------
   The homepage stacks bands of flat colour (white, #f9f9f9, #f4ffff, #dde2e6,
   #2f4f6f) plus a gradient hero, and every join between them was a hard 1px
   step. front-page.php emits an empty .vance-hp-seam between consecutive
   sections; this turns each one into a 50px cross-fade.

   backdrop-filter, not a gradient overlay. A gradient would have to know both
   colours, which means a rule per pair -- and it cannot do anything at all
   about a section whose background is a photo or a gradient. Blurring the
   BACKDROP works from whatever is actually painted there, so a colour, an
   image and a gradient all soften the same way, and a section recoloured in
   the Customizer needs no CSS change.

   Geometry: the seam itself is zero-height so it adds nothing to the flow, and
   its strip is pulled half its height up into the section above and half down
   into the one below, so the blur samples across the join.

   The strip must be MASKED, and taller than the blur reaches, or it draws the
   very edges it exists to remove. CSS blur(R) is a Gaussian with sigma = R/2
   and spreads visibly to about +/-2.5 sigma, so blur(24px) needs +/-30px. The
   first version gave it a 50px strip -- only +/-25px -- and switched the filter
   on and off at the strip edges with no mask. The colour jump there is tiny
   (~2/255), but the SLOPE jump is not: the fade is running at full tilt one
   pixel and is flat the next. That second-derivative break is what the eye
   reads as a line, and it is why the joins looked like deliberate separator
   bands with a hard rule down each side.

   Modelling the composite (blurred backdrop alpha-mixed back over the raw one)
   puts the worst slope break at 37.3/px^2, sitting exactly on the strip edge at
   y=+25px. Masking the filter instead -- fading it over the outer 22% at each
   end, inside a strip sized to contain the blur -- drops that by two orders of
   magnitude and moves it off the edge entirely.

   THE TWO NUMBERS ARE COUPLED. Changing --vance-seam-blur on its own re-creates
   the original bug, because the strip stops being able to contain the ramp:
   keep height >= 3.3 * blur. To resize the blend, scale BOTH by the same factor
   -- that holds the ratio, so the containment comes along for free, and it also
   measures best. The pair has been shortened twice from the 80px / 24px that
   first fixed the edges (x0.65, then x0.70); at each step the exact
   proportional pair beat every rounded alternative on the slope-break metric
   (36.4/10.92 scores 1.15/px^2 where 36/10.8 scores 1.56 and 38/11 scores 2.07),
   which is why these are odd numbers rather than tidy ones.

   Now at 36.4px / 10.92px: a ~18px visible fade, 45% of the original, with a
   1.15/px^2 break against the 37.3 of the unmasked version. Note the break does
   creep up as the pair shrinks -- the same shape over fewer pixels is steeper --
   so there is a floor to this. Much below ~30px of strip it stops reading as a
   blur and becomes a plain soft edge.

   z-index 11 clears .vance-testimonials-section (position: relative, z-index:
   10), which would otherwise paint over the seam above it. It stays far below
   the sticky header (1000) and the modals (9999+), and content painted below
   it is what the filter reads, so raising it does not remove anything from the
   backdrop.

   Browsers without backdrop-filter render an empty transparent strip: the
   joins simply stay as hard as they are today.
   ========================================================================== */

.vance-hp-seam {
    position: relative;
    z-index: 11;
    height: 0;
    pointer-events: none;
}

.vance-hp-seam::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--vance-seam-height, 36.4px) / -2);
    height: var(--vance-seam-height, 36.4px);
    -webkit-backdrop-filter: blur(var(--vance-seam-blur, 10.92px));
    backdrop-filter: blur(var(--vance-seam-blur, 10.92px));
    /* Feathers the filter itself, not a colour over it: the element's alpha is
       what the backdrop-filter is composited through, so a gradient mask ramps
       the blur from none, to full, to none. Without it the strip's own top and
       bottom edges are visible wherever the two sides differ. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}

/* ============================================================================
   JETPACK SHAREDADDY — TOUCH TARGET
   ----------------------------------------------------------------------------
   The plugin renders its share buttons at 30px tall (13px/23px label inside
   4px/3px padding), which made them the smallest controls on the site and
   short of the 44px minimum touch target. Sharedaddy exposes no size setting
   and its markup is generated, so the height is corrected here rather than by
   patching the plugin -- which a plugin update would undo.

   min-height + inline-flex, not extra padding: the buttons carry an icon and
   a label side by side, and vertical padding on an inline-block would push
   the two out of alignment with each other.
   ========================================================================== */

.sharedaddy .sd-content ul li a.sd-button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

/* ============================================================================
   COMMENTS
   ----------------------------------------------------------------------------
   Added 2026-09-10 with the recipe comment thread (comments.php). Styled here
   rather than inline like the rest of the recipe template because a thread is
   a list of unknown length -- the inline habit would repeat itself once per
   comment, and WordPress generates the <li> markup, so there is nowhere to put
   an inline style anyway.

   Everything is drawn from the site's existing tokens: Outfit for headings,
   Inter for body, the teal primary, the three-step radius scale. Nothing here
   introduces a colour the rest of the stylesheet does not already use.
   ========================================================================== */

.vance-comments {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid #e2e8f0;
}

.vance-comments__title {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: #0A1929;
    margin: 0 0 22px;
}

.vance-comments__title--form {
    margin-top: 34px;
}

.vance-comments__closed {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px;
}

/* --- The thread ---------------------------------------------------------- */

.vance-comments__list,
.vance-comments__list .children {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* One indent step per reply level, kept small so a deep thread on a phone does
   not walk its text off the right edge. */
.vance-comments__list .children {
    margin-left: 24px;
    padding-left: 18px;
    border-left: 2px solid #e2e8f0;
}

.vance-comments__list .comment,
.vance-comments__list .pingback {
    margin: 0 0 18px;
}

.vance-comments__list article.comment-body {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-surface, 14px);
    padding: 18px 20px;
}

/* An unapproved comment is visible only to its author, and must say so rather
   than looking like it posted normally. */
.vance-comments__list .comment-awaiting-moderation {
    display: block;
    margin-top: 10px;
    font-size: 13px;
    font-weight: 600;
    color: #b45309;
}

.vance-comments__list .comment-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.vance-comments__list .comment-author {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.vance-comments__list .comment-author img.avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-control, 6px);
    flex-shrink: 0;
}

/* Screen readers get "says" from the markup; showing it reads as a typo. */
.vance-comments__list .comment-author .says {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.vance-comments__list .comment-metadata {
    font-size: 12px;
    color: #64748b;
}

.vance-comments__list .comment-metadata a {
    color: #64748b;
    text-decoration: none;
}

.vance-comments__list .comment-metadata a:hover,
.vance-comments__list .comment-metadata a:focus-visible {
    color: var(--primary-color, #008080);
    text-decoration: underline;
}

.vance-comments__list .comment-content {
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}

.vance-comments__list .comment-content p {
    margin: 0 0 12px;
}

.vance-comments__list .comment-content p:last-child {
    margin-bottom: 0;
}

.vance-comments__list .reply {
    margin-top: 12px;
}

/* 44px tall so the reply link clears the minimum touch target, which a bare
   inline link at 13px does not. */
.vance-comments__list .comment-reply-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-control, 6px);
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color, #008080);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.vance-comments__list .comment-reply-link:hover,
.vance-comments__list .comment-reply-link:focus-visible {
    background: var(--primary-color, #008080);
    border-color: var(--primary-color, #008080);
    color: #ffffff;
}

/* --- The form ------------------------------------------------------------ */

.vance-comment-form {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-surface, 14px);
    padding: 22px 20px;
}

.vance-comment-form__notes,
.vance-comment-form .comment-notes {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 18px;
}

/* Shown in place of the whole form to logged-out visitors, since commenting
   requires an account. It is the only comment UI most readers will ever see,
   so it gets the form's own card rather than a bare line of text. */
.vance-comments__must-log-in {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-surface, 14px);
    padding: 18px 20px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #475569;
}

.vance-comments__must-log-in a {
    color: var(--primary-color, #008080);
    font-weight: 700;
    text-decoration: none;
}

.vance-comments__must-log-in a:hover,
.vance-comments__must-log-in a:focus-visible {
    text-decoration: underline;
}

.vance-comment-form p {
    margin: 0 0 16px;
}

.vance-comment-form label {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #0A1929;
    margin-bottom: 6px;
}

/* 16px, not smaller: iOS Safari zooms the whole page in on any focused field
   below 16px, which on a phone reads as the layout breaking. */
.vance-comment-form input[type="text"],
.vance-comment-form input[type="email"],
.vance-comment-form input[type="url"],
.vance-comment-form textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 14px;
    border: 1px solid #e2e8f0;
    border-radius: var(--radius-field, 10px);
    background: #ffffff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #0f172a;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.vance-comment-form textarea {
    resize: vertical;
}

.vance-comment-form input[type="text"]:focus-visible,
.vance-comment-form input[type="email"]:focus-visible,
.vance-comment-form input[type="url"]:focus-visible,
.vance-comment-form textarea:focus-visible {
    outline: none;
    border-color: var(--primary-color, #008080);
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.18);
}

.vance-comment-form .comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.vance-comment-form .comment-form-cookies-consent input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.vance-comment-form .comment-form-cookies-consent label {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: #64748b;
}

.vance-comment-form__submit,
.vance-comment-form input[type="submit"] {
    min-height: 44px;
    padding: 0 26px;
    border: 1px solid var(--primary-color, #008080);
    border-radius: var(--radius-control, 6px);
    background: var(--primary-color, #008080);
    color: #ffffff;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 200ms ease, border-color 200ms ease;
}

.vance-comment-form__submit:hover,
.vance-comment-form input[type="submit"]:hover,
.vance-comment-form__submit:focus-visible,
.vance-comment-form input[type="submit"]:focus-visible {
    background: #006A6A;
    border-color: #006A6A;
}

/* Core puts "Cancel reply" inside the form's own heading. */
.vance-comments #cancel-comment-reply-link {
    margin-left: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color, #008080);
}

.vance-comments__list .comment-respond {
    margin-top: 16px;
}

@media (max-width: 600px) {
    .vance-comments__list .children {
        margin-left: 10px;
        padding-left: 12px;
    }

    .vance-comments__list article.comment-body {
        padding: 16px 14px;
    }
}