/* ============================================================================
   /assets/css/news-and-updates-details.css
   ----------------------------------------------------------------------------
   Newsroom-style detail page for /news-and-updates/{slug}. Deliberately
   distinct from the service detail page:

     · service.css uses cream-amber gradients EVERYWHERE, gold-foil
       hairlines on every card, ·NN· markers prefixing every heading,
       corner-bracket ornaments, and a magazine column rule down the body.
     · this file goes the other way — clean white surface with single
       horizontal amber rules, Reuters-style byline, Lora serif body for
       the prose, no foil, no corner brackets, no column rule, no drop-cap.

   Class prefix .zc-naud-{section}__*. Brand grammar: amber + navy on snow,
   no italic in chrome (italic is allowed inside Lora prose only because
   editors will paste real <em> in DB content), no em-dashes in chrome
   copy.
   ============================================================================ */

/* §0  Page reset — kill the inherited content-wrap padding */
body .content-wrap.my-wrap-no-padding,
body .container { /* legacy theme containers are wide-open here */ }


/* ============================================================================
   §1   READING PROGRESS BAR
   Sits flush at the very top, fills as the user scrolls the article body.
   Single-pixel amber gradient — newsroom touch, not present on /service.
   ============================================================================ */
.zc-naud-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    z-index: 999;
    background: rgba(207, 138, 63, 0.08);
    pointer-events: none;
}
.zc-naud-progress > span {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, var(--zc-amber), var(--zc-amber-dk));
    box-shadow: 0 0 12px rgba(207, 138, 63, 0.55);
    transition: width 0.05s linear;
}


/* ============================================================================
   §2   NEWSPAPER MASTHEAD — front-page editorial header.
        Top folio strip → plain breadcrumb → section stamp + datelined rule
        → big editorial title → dek → flat single-line byline.
        No pill chips, no boxed byline, no eyebrow dots — deliberately a
        different rhythm from the magazine masthead on /service.
   ============================================================================ */
.zc-naud-mast {
    background: var(--zc-white);
    padding-bottom: clamp(20px, 2.4vw, 32px);
    border-bottom: 1px solid var(--zc-linen);
}

/* — TOP FOLIO STRIP ———————————————————————————————————————————— */
.zc-naud-mast__folio {
    position: relative;
    background: linear-gradient(180deg, #fbf7ee 0%, var(--zc-white) 100%);
    border-bottom: 1px solid var(--zc-linen);
    padding: 12px 0;
}
.zc-naud-mast__folio::before {
    /* Gold-foil hairline at the very top — the only foil on this page,
       reserved for the masthead so it acts as the "you are reading the
       newsroom" signal. */
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zc-amber-dk) 18%,
        var(--zc-amber-lt) 50%,
        var(--zc-amber-dk) 82%,
        transparent 100%);
}
.zc-naud-mast__folio-inner {
    /* Mark on the left, date pinned to the right, rule fills the
       space between them — classic newspaper folio strip. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(14px, 1.6vw, 22px);
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}
.zc-naud-mast__folio-mark {
    display: inline-flex; align-items: center; gap: 10px;
    color: var(--zc-warm-dk);
}
.zc-naud-mast__folio-logo {
    /* Real brand logo (was a stylized "Z" letter mark). Override the
       site-wide .lazy max-width:40% trap with explicit dimensions. */
    width: 32px !important;
    height: 32px !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain;
    display: inline-block;
    flex-shrink: 0;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.zc-naud-mast__folio-pub {
    font-family: var(--zc-f-heading);
    font-size: 11px; font-weight: 700;
    letter-spacing: 2.4px; text-transform: uppercase;
    color: var(--zc-charcoal);
}
.zc-naud-mast__folio-rule {
    height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-a45), transparent);
}
.zc-naud-mast__folio-date {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.4px; text-transform: uppercase;
    color: var(--zc-warm-mid);
    flex-shrink: 0;
}
.zc-naud-mast__folio-dot {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--zc-amber-dk);
    opacity: 0.6;
}
@media (max-width: 720px) {
    /* Single-row folio on mobile: logo + name on the left, date on
       the right. The rule between them is hidden so the row stays
       compact — no wrap to a second line. */
    .zc-naud-mast__folio {
        padding: 8px 0;
    }
    .zc-naud-mast__folio-inner {
        /* 2-column layout on mobile: mark on left, date on right.
           The rule between them is hidden via visibility (NOT display:none)
           so its grid cell still occupies the middle track and pushes the
           date to the far right. */
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 8px;
    }
    .zc-naud-mast__folio-rule { visibility: hidden; }
    .zc-naud-mast__folio-date { justify-self: end; }
    .zc-naud-mast__folio-mark { gap: 7px; }
    .zc-naud-mast__folio-logo {
        width: 22px !important;
        height: 22px !important;
    }
    .zc-naud-mast__folio-pub {
        font-size: 9px;
        letter-spacing: 1.4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .zc-naud-mast__folio-date {
        font-size: 8.5px;
        letter-spacing: 0.8px;
        gap: 5px;
        flex-shrink: 0;
    }
    .zc-naud-mast__folio-dot { width: 3px; height: 3px; }
}

/* — PLAIN-TEXT BREADCRUMB ————————————————————————————————————— */
.zc-naud-mast__crumb {
    padding: clamp(16px, 1.8vw, 22px) var(--zc-pad-x) 0;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 8px;
    font-family: var(--zc-f-heading);
    font-size: 11.5px; font-weight: 500;
    letter-spacing: 0.4px;
    color: var(--zc-warm-mid);
}
.zc-naud-mast__crumb a {
    color: var(--zc-warm-dk);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease);
}
.zc-naud-mast__crumb a:hover {
    color: var(--zc-amber-dk);
    border-bottom-color: var(--zc-amber-a45);
}
.zc-naud-mast__crumb > span[aria-hidden="true"] {
    color: var(--zc-stone);
    opacity: 0.6;
}
.zc-naud-mast__crumb-current {
    color: var(--zc-charcoal);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 50ch;
}

/* — TITLE BLOCK INNER ————————————————————————————————————————— */
.zc-naud-mast__inner {
    padding: clamp(20px, 2.4vw, 32px) var(--zc-pad-x) 0;
}

/* Section stamp on a horizontal rule — newsroom section bar */
.zc-naud-mast__topline {
    display: flex; align-items: center;
    gap: 14px;
    margin-bottom: clamp(14px, 1.6vw, 22px);
}
.zc-naud-mast__section {
    display: inline-block;
    padding: 4px 10px;
    background: var(--zc-charcoal);
    color: var(--zc-amber-lt);
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.6;
    flex-shrink: 0;
    border-radius: 1px;
}
.zc-naud-mast__topline-rule {
    flex: 1;
    height: 2px;
    background:
        linear-gradient(90deg, var(--zc-amber-dk) 0%, var(--zc-amber-lt) 100%);
    border-radius: 999px;
}
.zc-naud-mast__dateline {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10px; font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--zc-warm-mid);
    flex-shrink: 0;
}
.zc-naud-mast__dateline i { color: var(--zc-amber-dk); font-size: 11px; }

/* Big editorial title — newspaper weight, tight tracking */
.zc-naud-mast__title {
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 2.6vw + 14px, 52px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -1.2px;
    color: var(--zc-charcoal);
    margin: 0 0 clamp(14px, 1.6vw, 22px) 0;
}
@media (max-width: 720px) {
    .zc-naud-mast__title {
        font-size: 18px;
        line-height: 1.22;
        letter-spacing: -0.4px;
        margin-bottom: 10px;
    }
    .zc-naud-mast__dek {
        font-size: 11px;
        line-height: 1.5;
        padding-left: 8px;
        border-left-width: 2px;
        margin-bottom: 14px;
    }
    /* Byline laid out as a single-row horizontal scroller on mobile.
       Items sit in one line; tall thin amber dividers separate each
       of the four facts (writer · updated · read time · words).
       Scrollbar is hidden — momentum-touch swipe handles overflow. */
    .zc-naud-mast__byline {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 14px !important;
        padding: 12px 0 !important;
        margin: 0 0 14px 0 !important;
        font-size: 11px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .zc-naud-mast__byline::-webkit-scrollbar { display: none !important; }

    /* Vertical divider between items (was display:none). Tall thin
       amber hairline — the "premium" rule used elsewhere. */
    .zc-naud-mast__byline-sep {
        display: inline-block !important;
        width: 1px !important;
        height: 22px !important;
        background: var(--zc-amber-a35) !important;
        border-radius: 0 !important;
        opacity: 1 !important;
        flex-shrink: 0 !important;
    }

    .zc-naud-mast__byline-author {
        font-size: 11px !important;
        gap: 7px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .zc-naud-mast__byline-init {
        width: 22px !important;
        height: 22px !important;
        font-size: 10px !important;
        flex-shrink: 0 !important;
    }
    .zc-naud-mast__byline-author b,
    .zc-naud-mast__byline-meta b {
        font-size: 11px !important;
    }
    .zc-naud-mast__byline-meta {
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
}

/* Dek — sans-serif lead summary */
.zc-naud-mast__dek {
    font-family: var(--zc-f-body);
    font-size: clamp(13px, 0.3vw + 11px, 15px);
    font-weight: 400;
    line-height: 1.55;
    color: var(--zc-warm-dk);
    margin: 0 0 clamp(20px, 2.4vw, 32px) 0;
    max-width: 64ch;
    padding-left: 14px;
    border-left: 3px solid var(--zc-amber-dk);
}

/* Flat byline — single line, no boxed background, hairline rules above
   and below for a newspaper credit-line feel */
.zc-naud-mast__byline {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 12px;
    padding: 12px 0;
    border-top: 1px solid var(--zc-linen);
    border-bottom: 1px solid var(--zc-linen);
    font-family: var(--zc-f-body);
    font-size: 12.5px;
    color: var(--zc-warm-mid);
}
.zc-naud-mast__byline-author {
    display: inline-flex; align-items: center; gap: 9px;
    color: var(--zc-warm-dk);
}
.zc-naud-mast__byline-init {
    /* Avatar host — initial letter fills until a real photo
       (manage_user.image) overlays it via position:absolute. */
    position: relative;
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-family: var(--zc-f-display);
    font-size: 12px; font-weight: 600;
    line-height: 1;
    box-shadow: 0 4px 8px -2px var(--zc-amber-a35);
    flex-shrink: 0;
}
.zc-naud-mast__byline-img {
    /* Real writer photo. Overrides site-wide .lazy max-width:40%
       trap so the photo fills the avatar circle edge-to-edge. */
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.zc-naud-mast__byline-author b {
    font-family: var(--zc-f-display);
    font-weight: 500;
    color: var(--zc-charcoal);
    margin-left: 2px;
}
.zc-naud-mast__byline-meta {
    display: inline-flex; align-items: center;
    gap: 4px;
}
.zc-naud-mast__byline-meta b {
    font-family: var(--zc-f-display);
    font-weight: 500;
    color: var(--zc-charcoal);
}
.zc-naud-mast__byline-sep {
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--zc-amber-dk);
    opacity: 0.5;
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .zc-naud-mast__byline-meta--hide-mb,
    .zc-naud-mast__byline-sep--hide-mb { display: none; }
}


/* ============================================================================
   §3   COVER IMAGE — sits at the top of the article column (LEFT).
   ----------------------------------------------------------------------------
   The cover photograph now lives inside .zc-naud-body__main, so its width
   is naturally constrained by the article column (~7fr of the body grid)
   instead of stretching full-bleed. Smaller, more proportional, framed
   by thin amber rules above and below — print-spread feel, no full-page
   weight.
   ============================================================================ */
.zc-naud-cover {
    position: relative;
    margin: 0 0 clamp(22px, 2.4vw, 32px) 0;
    padding: clamp(10px, 1.2vw, 16px) 0;
}
.zc-naud-cover::before,
.zc-naud-cover::after {
    /* Thin amber rules top + bottom — print-spread frame, only as wide
       as the article column (no longer span across the section). */
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--zc-amber-a45) 14%,
        var(--zc-amber-dk) 50%,
        var(--zc-amber-a45) 86%,
        transparent 100%);
}
.zc-naud-cover::before { top: 0; }
.zc-naud-cover::after  { bottom: 0; }
.zc-naud-cover__img,
.zc-naud-cover__img.lazy {
    display: block;
    width: 100% !important;
    /* 16:9 (1920×1080) — column-width image, balanced with the body type. */
    aspect-ratio: 16 / 9;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover;
    border-radius: 6px;
    border: 0 !important;
    box-shadow: 0 14px 32px -22px rgba(46, 75, 113, 0.22);
}
.zc-naud-cover__cap {
    margin-top: 10px;
    padding-left: 14px;
    border-left: 2px solid var(--zc-amber-dk);
    font-family: var(--zc-f-body);
    font-size: 12.5px;
    color: var(--zc-warm-mid);
    line-height: 1.5;
    font-style: normal;
}


/* ============================================================================
   §4   BODY — article column + sticky sidebar
   ============================================================================ */
.zc-naud-body {
    background: var(--zc-white);
    padding: clamp(36px, 4vw, 64px) 0 clamp(40px, 4.6vw, 76px);
}
.zc-naud-body__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
    gap: clamp(28px, 3vw, 56px);
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
    align-items: start;
}
@media (max-width: 980px) {
    .zc-naud-body__inner { grid-template-columns: 1fr; }
}

.zc-naud-body__main {
    min-width: 0;
}


/* ----------------------------------------------------------------------------
   §4.1   PROSE — DB-rendered content. Body type matches the service detail
          (Figtree 16px, line-height 1.75, warm-dk colour, amber-highlighter
          on <em>, amber-underlined links). Newsroom distinctions kept: no
          drop-cap, no magazine column rule, simpler heading ornaments.
   ---------------------------------------------------------------------------- */
.zc-naud-prose {
    font-family: var(--zc-f-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--zc-warm-dk);
    letter-spacing: 0.05px;
}
.zc-naud-prose p {
    margin: 0 0 14px 0;
    font-family: var(--zc-f-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.75;
    color: var(--zc-warm-dk);
}
/* Lead paragraph — gently bumped, charcoal so it reads as the dek */
.zc-naud-prose > p:first-of-type {
    font-size: 17.5px;
    line-height: 1.65;
    color: var(--zc-charcoal);
    font-weight: 500;
}
/* Bold inside paragraphs picks up the same charcoal accent service uses */
.zc-naud-prose p b,
.zc-naud-prose p strong,
.zc-naud-prose b,
.zc-naud-prose strong {
    font-family: var(--zc-f-body);
    font-weight: 600;
    color: var(--zc-charcoal);
}
/* <em> rendered as an amber highlighter, NOT italic (per Zivah copy rules) */
.zc-naud-prose em {
    font-style: normal;
    background: linear-gradient(transparent 60%, var(--zc-amber-a18) 60%);
    padding: 0 2px;
    color: var(--zc-charcoal);
}
.zc-naud-prose h1,
.zc-naud-prose h2,
.zc-naud-prose h3,
.zc-naud-prose h4,
.zc-naud-prose h5,
.zc-naud-prose h6 {
    font-family: var(--zc-f-display);
    color: var(--zc-charcoal);
    line-height: 1.2;
    letter-spacing: -0.4px;
    margin: 1.5em 0 0.6em;
    font-weight: 500;
}
.zc-naud-prose h2 {
    font-size: clamp(22px, 1.4vw + 14px, 28px);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--zc-amber-a25);
}
.zc-naud-prose h3 {
    font-size: clamp(18px, 0.8vw + 12px, 21px);
    color: var(--zc-amber-dk);
    font-weight: 600;
}
.zc-naud-prose h4 {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-family: var(--zc-f-heading);
    font-weight: 700;
    color: var(--zc-warm-dk);
}

/* Links — amber-dk text + 1px amber underline border, matches service */
.zc-naud-prose a,
.zc-naud-prose p a {
    color: var(--zc-amber-dk) !important;
    border-bottom: 1px solid var(--zc-amber-a35);
    text-decoration: none;
    transition: color 0.3s var(--zc-ease), border-color 0.3s var(--zc-ease);
}
.zc-naud-prose a:hover,
.zc-naud-prose p a:hover {
    color: var(--zc-amber) !important;
    border-bottom-color: var(--zc-amber);
}

/* === LISTS — same premium pattern as the service detail page.
   The WYSIWYG editor injects inline `style="list-style-type: ..."`
   on UL/OL elements, which would paint native bullets next to our
   custom ::before markers. We force-remove ALL native list styling
   (including inline-attribute variants) and kill ::marker entirely,
   then draw our own premium markers via ::before:
     · UL → amber-gradient glowing dot
     · OL → Courier mono "01, 02, 03..." counter
   ======================================================================= */
.zc-naud-prose ul,
.zc-naud-prose ol {
    margin: 14px 0;
    padding: 0;
    list-style: none;
}
.zc-naud-prose ul,
.zc-naud-prose ol,
.zc-naud-prose ul[style],
.zc-naud-prose ol[style] {
    list-style: none !important;
    list-style-type: none !important;
}
.zc-naud-prose ul li::marker,
.zc-naud-prose ol li::marker {
    content: '';
    color: transparent;
    font-size: 0;
}
.zc-naud-prose ul li,
.zc-naud-prose ol li {
    position: relative;
    padding: 6px 0 6px 30px;
    margin: 0;
    font-family: var(--zc-f-body);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--zc-warm-dk);
}
.zc-naud-prose ul li + li,
.zc-naud-prose ol li + li {
    border-top: 1px dashed var(--zc-linen);
}
.zc-naud-prose ul li::before {
    content: '';
    position: absolute;
    left: 8px; top: 1.05em;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber-lt), var(--zc-amber-dk));
    box-shadow: 0 0 8px var(--zc-amber-a35);
}
.zc-naud-prose ol {
    counter-reset: zc-naud-ol;
}
.zc-naud-prose ol li {
    counter-increment: zc-naud-ol;
}
.zc-naud-prose ol li::before {
    content: counter(zc-naud-ol, decimal-leading-zero);
    position: absolute;
    left: 0; top: 0.55em;
    width: 24px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--zc-amber-dk);
    text-align: left;
}
/* Nested lists keep the same rhythm but indent. */
.zc-naud-prose ul ul,
.zc-naud-prose ol ol,
.zc-naud-prose ul ol,
.zc-naud-prose ol ul {
    margin: 6px 0 6px 12px;
}
.zc-naud-prose ul li strong,
.zc-naud-prose ol li strong {
    color: var(--zc-charcoal);
    font-weight: 600;
}
.zc-naud-prose ul li strong a {
    color: var(--zc-amber-dk) !important;
    border-bottom: 1px solid var(--zc-amber-a35);
}

.zc-naud-prose blockquote {
    margin: 1.4em 0;
    padding: 18px 22px 18px 26px;
    border-left: 4px solid var(--zc-amber-dk);
    background: linear-gradient(90deg, rgba(207, 138, 63, 0.06), transparent 70%);
    font-family: var(--zc-f-display);
    font-size: 18px;
    line-height: 1.55;
    font-style: normal;
    font-weight: 500;
    color: var(--zc-charcoal);
    letter-spacing: -0.2px;
}
.zc-naud-prose blockquote p { margin: 0; }
.zc-naud-prose blockquote p + p { margin-top: 0.5em; }

.zc-naud-prose img,
.zc-naud-prose img.lazy {
    display: block;
    max-width: 100% !important;
    max-height: none !important;
    height: auto !important;
    width: auto;
    border-radius: 6px;
    border: 1px solid var(--zc-linen);
    box-shadow: 0 16px 32px -22px rgba(106, 70, 24, 0.24);
    margin: 1.4em 0;
}

.zc-naud-prose figure { margin: 1.6em 0; }
.zc-naud-prose figcaption {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--zc-amber-a45);
    font-family: var(--zc-f-body);
    font-size: 13px;
    color: var(--zc-warm-mid);
}

.zc-naud-prose hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-a45), transparent);
    margin: 2em 0;
}

/* Tables — newsroom data grid. The first row is promoted to <thead><th> by
   lazyizeContent() so the header treatment fires automatically. Header
   uses a dark-charcoal band with amber-foil text — distinct from the
   service page's amber-cream header band, but legible as a head row at
   a glance. */
.zc-naud-prose table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.4em 0;
    font-family: var(--zc-f-body);
    font-size: 14.5px;
    border: 1px solid var(--zc-linen);
    border-radius: 8px;
    overflow: hidden;
    background: var(--zc-white);
    box-shadow: 0 14px 28px -22px rgba(46, 75, 113, 0.20);
}
.zc-naud-prose table thead {
    background: linear-gradient(180deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
}
.zc-naud-prose table thead tr {
    /* Top thin amber accent line above the header text */
    border-top: none;
}
.zc-naud-prose table thead th,
.zc-naud-prose table thead td {
    position: relative;
    padding: 14px 18px;
    text-align: left;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    /* !important defeats the theme's global `th { color: ... }` and any
       legacy `.services-body th` rule that paints header text dark. */
    color: var(--zc-amber-lt) !important;
    background: transparent !important;
    border: 0 !important;
    white-space: nowrap;
}
.zc-naud-prose table thead th *,
.zc-naud-prose table thead td * {
    /* Inline content (b, strong, span, a) inherits the amber-lt header
       colour instead of falling back to the theme's body-link defaults. */
    color: var(--zc-amber-lt) !important;
}
.zc-naud-prose table thead th + th,
.zc-naud-prose table thead td + td {
    border-left: 1px dashed rgba(207, 138, 63, 0.30) !important;
}
/* Subtle gold-foil accent line under the entire header band */
.zc-naud-prose table thead tr::after {
    content: '';
    display: block;
}
.zc-naud-prose table thead {
    box-shadow: inset 0 -2px 0 var(--zc-amber);
}
.zc-naud-prose table td {
    padding: 13px 18px;
    border-bottom: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    line-height: 1.55;
}
.zc-naud-prose table tr:last-child td { border-bottom: none; }
.zc-naud-prose table tbody tr:nth-child(even) td { background: rgba(46, 75, 113, 0.025); }
.zc-naud-prose table tbody tr:hover td { background: rgba(207, 138, 63, 0.06); }
.zc-naud-prose table td b,
.zc-naud-prose table td strong { color: var(--zc-charcoal); font-weight: 600; }

/* === TABLE SCROLL WRAPPER — horizontal scroll for wide DB tables ======
   Inline scripts in news-and-updates-details.php and blog-details.php
   wrap every <table> inside .zc-naud-prose with <div class="zc-table-scroll">.
   Wide tables stay readable on mobile by scrolling horizontally
   instead of squashing. Scoped to .zc-naud-prose so it never affects
   static tables elsewhere on the site. */
.zc-naud-prose .zc-table-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    margin: 1.4em 0;
    border-radius: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--zc-amber-a35) transparent;
}
.zc-naud-prose .zc-table-scroll::-webkit-scrollbar { height: 6px; }
.zc-naud-prose .zc-table-scroll::-webkit-scrollbar-track { background: transparent; }
.zc-naud-prose .zc-table-scroll::-webkit-scrollbar-thumb {
    background: var(--zc-amber-a35);
    border-radius: 3px;
}
.zc-naud-prose .zc-table-scroll > table,
.zc-naud-prose .zc-table-scroll > table[style] {
    margin: 0 !important;
    /* Desktop default: fill the column, even column distribution. */
    width: 100% !important;
    min-width: 0;
}
/* Mobile / small screen: tables that FIT the viewport should still
   fill the column (so the right side isn't an empty white strip);
   tables WIDER than the viewport should scroll horizontally inside
   the wrapper. Trick: width:100% asks the table to fill the column,
   and min-width:max-content stops it shrinking smaller than its
   natural content width — so wide tables overflow and scroll, while
   narrow ones expand to 100%. */
@media (max-width: 768px) {
    .zc-naud-prose .zc-table-scroll {
        margin: 1em 0;
    }
    .zc-naud-prose .zc-table-scroll > table,
    .zc-naud-prose .zc-table-scroll > table[style] {
        width: 100% !important;
        min-width: max-content;
    }
}

/* === TABLE — fully ignore writer-injected inline styles ================
   Writers occasionally add inline style="color/background/width/border/
   font-size/etc." on table / tr / td / th via the WYSIWYG editor. We
   re-declare every visual property with !important so OUR design is
   the single source of truth for table presentation regardless of
   what the inline attributes try to set. */
.zc-naud-prose table,
.zc-naud-prose table[style] {
    width: 100% !important;
    background: var(--zc-white) !important;
    border: 1px solid var(--zc-linen) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    color: var(--zc-warm-dk) !important;
    font-family: var(--zc-f-body) !important;
}
.zc-naud-prose table tr,
.zc-naud-prose table tr[style] {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: inherit !important;
    height: auto !important;
}
.zc-naud-prose table td,
.zc-naud-prose table th,
.zc-naud-prose table td[style],
.zc-naud-prose table th[style] {
    padding: 13px 18px !important;
    background-color: transparent !important;
    background-image: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    color: var(--zc-warm-dk) !important;
    font-family: var(--zc-f-body) !important;
    font-size: 14.5px !important;
    line-height: 1.55 !important;
    text-align: left !important;
    vertical-align: top !important;
    border-color: var(--zc-linen) !important;
}
/* thead — re-assert the dark navy header band with amber-lt text. */
.zc-naud-prose table thead th,
.zc-naud-prose table thead td,
.zc-naud-prose table thead th[style],
.zc-naud-prose table thead td[style] {
    font-family: var(--zc-f-heading) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 1.6px !important;
    text-transform: uppercase !important;
    color: var(--zc-amber-lt) !important;
    background: transparent !important;
    border: 0 !important;
}
/* Preserve zebra striping + hover despite the transparent override. */
.zc-naud-prose table tbody tr:nth-child(even) td,
.zc-naud-prose table tbody tr:nth-child(even) td[style] {
    background-color: rgba(46, 75, 113, 0.025) !important;
}
.zc-naud-prose table tbody tr:hover td,
.zc-naud-prose table tbody tr:hover td[style] {
    background-color: rgba(207, 138, 63, 0.06) !important;
}


/* ----------------------------------------------------------------------------
   §4.2   FAQ — premium accordion
   ---------------------------------------------------------------------------- */
.zc-naud-faq {
    margin-top: clamp(32px, 3.4vw, 48px);
    padding-top: clamp(28px, 3vw, 40px);
    border-top: 1px solid var(--zc-linen);
}
.zc-naud-faq__head {
    display: flex; align-items: center; gap: 14px;
    margin-bottom: clamp(18px, 2vw, 26px);
}
.zc-naud-faq__head-rule {
    width: 40px; height: 1px;
    background: linear-gradient(90deg, var(--zc-amber-dk), transparent);
}
.zc-naud-faq__head-mark {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px; font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--zc-amber-dk);
}
.zc-naud-faq__title {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: clamp(22px, 1.4vw + 12px, 28px);
    font-weight: 500;
    letter-spacing: -0.4px;
    color: var(--zc-charcoal);
}
.zc-naud-faq__list {
    display: flex; flex-direction: column; gap: 8px;
}
.zc-naud-faq__item {
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 6px;
    overflow: hidden;
    transition: border-color 0.3s var(--zc-ease), box-shadow 0.3s var(--zc-ease);
}
.zc-naud-faq__item[open] {
    border-color: var(--zc-amber-a45);
    box-shadow: 0 12px 24px -16px rgba(207, 138, 63, 0.30);
}
.zc-naud-faq__q {
    list-style: none;
    cursor: pointer;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
}
.zc-naud-faq__q::-webkit-details-marker { display: none; }
.zc-naud-faq__q:hover { background: rgba(207, 138, 63, 0.05); }
.zc-naud-faq__q-num {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px; font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--zc-amber-dk);
    opacity: 0.7;
}
.zc-naud-faq__item[open] .zc-naud-faq__q-num { opacity: 1; }
.zc-naud-faq__q-text {
    font-family: var(--zc-f-display);
    font-size: 15.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
}
.zc-naud-faq__item[open] .zc-naud-faq__q-text { color: var(--zc-amber-dk); }
.zc-naud-faq__q-toggle {
    display: grid; place-items: center;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    color: var(--zc-amber-dk);
    font-size: 11px;
}
.zc-naud-faq__q-ic-close { display: none; }
.zc-naud-faq__item[open] .zc-naud-faq__q-toggle {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
}
.zc-naud-faq__item[open] .zc-naud-faq__q-ic-open  { display: none; }
.zc-naud-faq__item[open] .zc-naud-faq__q-ic-close { display: inline-block; }
.zc-naud-faq__a {
    padding: 0 16px 14px 64px;
    font-family: var(--zc-f-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--zc-warm-dk);
}
.zc-naud-faq__a p { margin: 0 0 0.6em 0; }
.zc-naud-faq__a p:last-child { margin-bottom: 0; }


/* ----------------------------------------------------------------------------
   §4.3   ARTICLE FOOTER — tags + share row
   ---------------------------------------------------------------------------- */
.zc-naud-foot {
    margin-top: clamp(32px, 3.4vw, 48px);
    padding-top: clamp(22px, 2.4vw, 32px);
    border-top: 1px solid var(--zc-linen);
    display: flex; flex-direction: column;
    gap: 18px;
}
.zc-naud-foot__tags {
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.zc-naud-foot__tags-label {
    font-family: var(--zc-f-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-right: 6px;
}
.zc-naud-foot__tag {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(46, 75, 113, 0.05);
    border: 1px solid var(--zc-navy-a25);
    color: var(--zc-deep);
    font-family: var(--zc-f-body);
    font-size: 12px;
    text-decoration: none;
    transition: all 0.3s var(--zc-ease);
}
.zc-naud-foot__tag:hover {
    background: var(--zc-deep);
    color: var(--zc-white);
    border-color: var(--zc-deep);
}
.zc-naud-foot__share {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.zc-naud-foot__share-label {
    font-family: var(--zc-f-heading);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--zc-warm-mid);
    margin-right: 4px;
}
.zc-naud-foot__share-btn {
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    color: var(--zc-warm-dk);
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s var(--zc-ease-spring);
}
.zc-naud-foot__share-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    border-color: transparent;
    color: var(--zc-white);
    box-shadow: 0 10px 20px -8px var(--zc-amber-a45);
}
.zc-naud-foot__share-btn.is-copied {
    background: linear-gradient(135deg, #2e6b56, #1f4f3f);
    border-color: transparent;
    color: var(--zc-white);
}


/* ============================================================================
   §5   SIDEBAR — sticky rail (helpful resources, related news, CTA)
   ============================================================================ */
.zc-naud-side-wrap {
    align-self: start;
    min-width: 0;
}
.zc-naud-side {
    display: flex; flex-direction: column;
    gap: clamp(14px, 1.6vw, 20px);
    padding-bottom: 4px;
}

/* Generic sidebar card */
.zc-naud-side__card {
    position: relative;
    padding: clamp(18px, 2vw, 24px);
    background: var(--zc-white);
    border: 1px solid var(--zc-linen);
    border-radius: 8px;
    box-shadow: 0 14px 28px -22px rgba(106, 70, 24, 0.18);
}
.zc-naud-side__card-head {
    margin-bottom: 14px;
}
.zc-naud-side__card-tag {
    display: inline-block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 6px;
}
.zc-naud-side__card-h {
    margin: 0;
    font-family: var(--zc-f-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.3px;
    color: var(--zc-charcoal);
}
.zc-naud-side__card-h span {
    color: var(--zc-amber-dk);
    font-weight: 600;
}

/* Helpful Resources card variant — emphasized */
.zc-naud-side__card--res {
    background:
        radial-gradient(ellipse at 100% 0%, rgba(207, 138, 63, 0.08) 0%, transparent 60%),
        var(--zc-white);
    border-color: var(--zc-amber-a25);
}

/* A group inside Helpful Resources (per heading: Services / Blog / etc.) */
.zc-naud-res {
    padding: 12px 0;
    border-bottom: 1px dashed var(--zc-amber-a25);
}
.zc-naud-res:last-child { border-bottom: none; padding-bottom: 0; }
.zc-naud-res:first-of-type { padding-top: 4px; }
.zc-naud-res__h {
    margin: 0 0 8px 0;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--zc-deep);
}
.zc-naud-res__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 2px;
}
.zc-naud-res__list a {
    display: block;
    padding: 8px 10px 8px 14px;
    border-radius: 6px;
    border-left: 2px solid transparent;
    text-decoration: none;
    transition: border-color 0.3s var(--zc-ease), background 0.3s var(--zc-ease), padding-left 0.3s var(--zc-ease);
}
.zc-naud-res__list a:hover {
    background: rgba(207, 138, 63, 0.06);
    border-left-color: var(--zc-amber-dk);
    padding-left: 18px;
}
.zc-naud-res__t {
    display: block;
    font-family: var(--zc-f-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: var(--zc-charcoal);
    margin-bottom: 3px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.zc-naud-res__list a:hover .zc-naud-res__t { color: var(--zc-amber-dk); }
.zc-naud-res__d {
    display: block;
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--zc-warm-mid);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Related news list */
.zc-naud-side__rel {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-direction: column;
}
.zc-naud-side__rel li {
    border-bottom: 1px dashed var(--zc-linen);
}
.zc-naud-side__rel li:last-child { border-bottom: none; }
.zc-naud-side__rel a {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
    padding: 12px 0;
    text-decoration: none;
    color: inherit;
    transition: padding-left 0.3s var(--zc-ease);
}
.zc-naud-side__rel a:hover { padding-left: 4px; }
.zc-naud-side__rel-img {
    position: relative;
    width: 72px; height: 54px;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--zc-linen);
    background: var(--zc-amber-a08);
    flex-shrink: 0;
}
.zc-naud-side__rel-img img,
.zc-naud-side__rel-img img.lazy {
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    max-width: none !important; max-height: none !important;
    object-fit: cover;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}
.zc-naud-side__rel-text {
    display: flex; flex-direction: column;
    gap: 3px;
    line-height: 1.3;
    min-width: 0;
}
.zc-naud-side__rel-text small {
    font-family: var(--zc-f-heading);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    color: var(--zc-amber-dk);
}
.zc-naud-side__rel-text b {
    font-family: var(--zc-f-display);
    font-size: 13px;
    font-weight: 500;
    color: var(--zc-charcoal);
    line-height: 1.3;
    letter-spacing: -0.2px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s var(--zc-ease);
}
.zc-naud-side__rel a:hover b { color: var(--zc-amber-dk); }
.zc-naud-side__rel-date {
    font-family: var(--zc-f-body);
    font-size: 11px;
    color: var(--zc-warm-mid);
}

/* Stay-in-the-loop CTA */
.zc-naud-side__card--cta {
    background: linear-gradient(160deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    border-color: transparent;
    color: rgba(255, 255, 255, 0.92);
    text-align: center;
    padding: clamp(22px, 2.4vw, 28px);
}
.zc-naud-side__cta-mark {
    display: inline-grid; place-items: center;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-size: 22px;
    margin-bottom: 12px;
    box-shadow: 0 12px 22px -8px var(--zc-amber-a45);
}
.zc-naud-side__cta-h {
    margin: 0 0 8px 0;
    font-family: var(--zc-f-display);
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.3px;
    color: var(--zc-white);
}
.zc-naud-side__cta-p {
    margin: 0 0 16px 0;
    font-family: var(--zc-f-body);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.zc-naud-side__cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white) !important;
    text-decoration: none;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    box-shadow: 0 8px 18px -4px var(--zc-amber-a45);
    transition: transform 0.3s var(--zc-ease-spring);
    margin-bottom: 10px;
}
.zc-naud-side__cta-btn i { color: var(--zc-white) !important; }
.zc-naud-side__cta-btn:hover { transform: translateY(-2px); }
.zc-naud-side__cta-link {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--zc-f-heading);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--zc-amber-lt);
    text-decoration: none;
    transition: gap 0.3s var(--zc-ease);
}
.zc-naud-side__cta-link:hover {
    gap: 9px;
    color: var(--zc-amber-lt);
}


/* ============================================================================
   §6   CLOSING CTA — full-width navy band
   ============================================================================ */
.zc-naud-cta {
    position: relative;
    padding: clamp(48px, 5vw, 88px) 0;
    background:
        radial-gradient(ellipse at 8% 8%, rgba(207, 138, 63, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at 92% 92%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        linear-gradient(160deg, var(--zc-charcoal) 0%, var(--zc-deep) 100%);
    overflow: hidden;
    color: rgba(255, 255, 255, 0.92);
}
.zc-naud-cta::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk) 18%, var(--zc-amber-lt) 50%, var(--zc-amber-dk) 82%, transparent);
}
.zc-naud-cta__inner {
    position: relative; z-index: 1;
    text-align: center;
    padding-left: var(--zc-pad-x);
    padding-right: var(--zc-pad-x);
}
.zc-naud-cta__eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--zc-amber-lt);
}
.zc-naud-cta__title {
    font-family: var(--zc-f-display);
    font-size: clamp(24px, 2.4vw + 12px, 40px);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.6px;
    color: var(--zc-white);
    margin: 0 0 12px 0;
}
.zc-naud-cta__title span {
    display: block;
    color: var(--zc-amber-lt);
    font-weight: 500;
}
.zc-naud-cta__sub {
    margin: 0 auto 24px;
    max-width: 56ch;
    font-family: var(--zc-f-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}
.zc-naud-cta__btns {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center;
}
.zc-naud-cta__btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.3s var(--zc-ease-spring), box-shadow 0.3s var(--zc-ease);
}
.zc-naud-cta__btn--primary {
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white) !important;
    box-shadow: 0 10px 22px -6px var(--zc-amber-a45);
}
.zc-naud-cta__btn--primary i { color: var(--zc-white) !important; }
.zc-naud-cta__btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 28px -6px var(--zc-amber-a45);
}
.zc-naud-cta__btn--ghost {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(207, 138, 63, 0.30);
    color: rgba(255, 255, 255, 0.92);
}
.zc-naud-cta__btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(207, 138, 63, 0.45);
    color: var(--zc-amber-lt);
    transform: translateY(-2px);
}


/* ==========================================================================
   TABLE OF CONTENTS — auto-built from .zc-naud-prose H2/H3 by the
   inline script at the foot of news-and-updates-details.php. Mirrors
   the blog page's TOC grammar: numbered counter prefix, indent step
   for H3 entries, amber-accent hover state. The empty list stays
   hidden until the script appends >= 2 entries.
   ========================================================================== */
.zc-naud-toc__list {
    list-style: none;
    margin: 0;
    padding: 8px 6px;
    /* H2 counter; H3 counter is reset on each H2 li so 03.1, 03.2… */
    counter-reset: zcNaudH2;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zc-naud-toc__list,
.zc-naud-toc__children { list-style: none; }
.zc-naud-toc__children {
    margin: 0;
    padding: 0;
    counter-reset: zcNaudH3;
    /* Closed by default — JS adds .is-open on the first H2 and on
       whichever H2 the user clicks. Smooth height-ish reveal via
       max-height (no exact-height calc needed for sidebar links). */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s var(--zc-ease),
                opacity 0.25s var(--zc-ease),
                margin 0.3s var(--zc-ease);
    margin: 0 0 0 0;
}
.zc-naud-toc__h2.is-open > .zc-naud-toc__children {
    max-height: 800px;
    opacity: 1;
    margin: 4px 0 6px 0;
}

.zc-naud-toc__h2 { counter-increment: zcNaudH2; }
.zc-naud-toc__h3 { counter-increment: zcNaudH3; }

/* H2 row: link on the left, chevron toggle on the right. */
.zc-naud-toc__row {
    display: flex;
    align-items: stretch;
    gap: 4px;
}
.zc-naud-toc__row > a {
    flex: 1;
    min-width: 0;
}
.zc-naud-toc__toggle {
    flex-shrink: 0;
    width: 30px;
    border: 0;
    background: transparent;
    color: var(--zc-warm-mid);
    cursor: pointer;
    border-radius: 6px;
    transition: color 0.2s var(--zc-ease),
                background 0.2s var(--zc-ease),
                transform 0.3s var(--zc-ease);
    display: inline-grid;
    place-items: center;
    padding: 0;
}
.zc-naud-toc__toggle i {
    font-size: 13px;
    transition: transform 0.3s var(--zc-ease-spring);
}
.zc-naud-toc__h2.is-open .zc-naud-toc__toggle i {
    transform: rotate(180deg);
    color: var(--zc-amber-dk);
}
.zc-naud-toc__toggle:hover { background: rgba(207, 138, 63, 0.08); color: var(--zc-amber-dk); }

/* Anchor styling — shared by H2 + H3 entries. */
.zc-naud-toc__list a {
    position: relative;
    display: block;
    padding: 8px 10px 8px 38px;
    border-left: 2px solid transparent;
    border-radius: 6px;
    font-family: var(--zc-f-display);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--zc-warm-dk) !important;
    text-decoration: none;
    transition: all 0.25s var(--zc-ease);
}
.zc-naud-toc__h2 > .zc-naud-toc__row > a::before {
    content: counter(zcNaudH2, decimal-leading-zero);
    position: absolute;
    left: 10px;
    top: 9px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--zc-amber-dk);
    opacity: 0.8;
}
.zc-naud-toc__list a:hover {
    background: rgba(207, 138, 63, 0.06);
    border-left-color: var(--zc-amber-dk);
    color: var(--zc-amber-dk) !important;
}

/* H3 entries — nested, slightly smaller, with parent.child numbering. */
.zc-naud-toc__children > .zc-naud-toc__h3 {
    margin-left: 18px;
}
.zc-naud-toc__children > .zc-naud-toc__h3 > a {
    padding-left: 44px;
    font-size: 12.5px;
    color: var(--zc-warm-mid) !important;
}
.zc-naud-toc__children > .zc-naud-toc__h3 > a::before {
    content: counter(zcNaudH2, decimal-leading-zero) "." counter(zcNaudH3);
    position: absolute;
    left: 8px;
    top: 9px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--zc-amber-dk);
    opacity: 0.7;
}
.zc-naud-toc__children > .zc-naud-toc__h3 > a:hover {
    padding-left: 48px;
}

/* Smooth-scroll the whole page when a hash link is clicked, and
   give each in-prose heading a scroll-margin so it lands BELOW
   the sticky top nav (was tucking under it on click, leaving just
   the paragraph visible). Tuned for the 80-ish px site header +
   ~24px breathing room. */
html { scroll-behavior: smooth; }
.zc-naud-prose h2,
.zc-naud-prose h3 {
    scroll-margin-top: 110px;
}


/* ==========================================================================
   MOBILE VERIFY-INLINE — "Medically reviewed by" lifted next to byline
   --------------------------------------------------------------------------
   On ≤991px the prose-enhance.js relocates .zc-naud-side__card--verify
   so it sits right after the .zc-naud-mast__byline strip, and adds the
   `--verify-inline` modifier. CSS reshapes it into a single-row compact
   author-style chip that mirrors the byline grammar — all the heavy card
   chrome (foil, header tag, role line, "Read profile" footer) is hidden.
   ========================================================================== */
.zc-naud-side__card--verify-inline {
    /* Premium chip-less design: no card background, no border,
       no shadow. Just a hairline divider above so it reads as a
       second byline row hanging off the masthead byline strip. */
    display: grid !important;
    grid-template-columns: 48px minmax(0, 1fr) auto !important;
    gap: 12px !important;
    align-items: center !important;
    padding: 10px 0 0 !important;
    margin: 6px 0 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--zc-amber-a25) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-decoration: none;
    overflow: visible !important;
    position: relative !important;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__foil,
.zc-naud-side__card--verify-inline .zc-naud-verify__head,
.zc-naud-side__card--verify-inline .zc-naud-verify__foot {
    display: none !important;
}

/* Flatten the inner body so its children become direct grid items
   of the inline card. */
.zc-naud-side__card--verify-inline .zc-naud-verify__body {
    display: contents !important;
}

/* Larger circular photo so the doctor reads as the visual anchor
   of the byline row — sized to match the full three-line text block. */
.zc-naud-side__card--verify-inline .zc-naud-verify__photo {
    position: relative !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--zc-amber-a45) !important;
    overflow: hidden !important;
    background: linear-gradient(135deg, var(--zc-charcoal), var(--zc-deep)) !important;
    flex-shrink: 0;
    align-self: center;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__init {
    position: absolute !important;
    inset: 0 !important;
    display: grid;
    place-items: center;
    color: var(--zc-amber-lt);
    font-family: var(--zc-f-display);
    font-size: 14px;
    font-weight: 500;
    z-index: 0;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 1;
}

/* Text block: tiny mono "Medically reviewed by" eyebrow, then
   name (display serif), then role + specialty on a single muted
   line separated by a dot. Block container so role/spec can flow
   inline on the same line (a flex column would stack them). */
.zc-naud-side__card--verify-inline .zc-naud-verify__meta {
    display: block !important;
    min-width: 0;
    line-height: 1.25;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__meta::before {
    content: "Medically reviewed by";
    display: block;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    margin-bottom: 2px;
    line-height: 1.2;
}
/* Name + role on the SAME line, separated by a dash; spec on a
   line of its own underneath. */
.zc-naud-side__card--verify-inline .zc-naud-verify__name {
    display: inline !important;
    font-family: var(--zc-f-display);
    font-size: 12px;
    font-weight: 500;
    color: var(--zc-charcoal);
    line-height: 1.25;
    letter-spacing: -0.1px;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__name::after {
    content: " - ";
    color: var(--zc-amber-a45);
    font-weight: 400;
    margin: 0 1px;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__role {
    display: inline !important;
    font-family: var(--zc-f-body);
    font-size: 9px;
    font-weight: 600;
    color: var(--zc-amber-dk);
    line-height: 1.25;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}
.zc-naud-side__card--verify-inline .zc-naud-verify__spec {
    display: block !important;
    font-family: var(--zc-f-body);
    font-size: 9.5px;
    font-weight: 400;
    color: var(--zc-warm-mid);
    line-height: 1.3;
    margin-top: 1px;
    letter-spacing: 0.1px;
}

/* Tiny chevron on the right so the chip reads as a link/CTA. */
.zc-naud-side__card--verify-inline::after {
    content: "\f135"; /* bi-arrow-up-right */
    font-family: 'bootstrap-icons';
    font-size: 12px;
    color: var(--zc-amber-dk);
    align-self: center;
}


/* ============================================================================
   §7   MOBILE RESPONSIVE
   ============================================================================ */
@media (max-width: 991px) {
    .zc-naud-mast__inner,
    .zc-naud-body__inner,
    .zc-naud-cta__inner {
        padding-left: var(--zc-pad-x-mb);
        padding-right: var(--zc-pad-x-mb);
    }

    /* Cover image inherits the body's padding — full width inside
       the article column, no extra inner padding on the cover itself. */
    .zc-naud-cover {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        /* Halve the vertical breathing room around the cover (was
           ~10px top/btm padding + ~22-32px bottom margin) so the
           image sits closer to the title block on mobile. */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        margin-bottom: 14px !important;
    }
    /* Halve the gap between the masthead and the image-bearing body
       on mobile — was clamp(36px,...) top padding, now ~18px. */
    .zc-naud-body {
        padding-top: 18px !important;
        padding-bottom: 22px !important;
    }
    /* Masthead inner: trim its top padding too so the entire above-
       image stack tightens proportionally. */
    .zc-naud-mast__inner {
        padding-top: 12px !important;
    }
    .zc-naud-prose { font-size: 16px; }
    .zc-naud-prose > p:first-of-type { font-size: 17.5px; }
}


/* ============================================================================
   §6   VERIFIED-BY CARD — sticky-sidebar trust badge that names the doctor
        who reviewed the article. Premium magazine slate:
          · gold-foil hairline at the top
          · patch-check icon + "Medically reviewed by" mono mark
          · circular photo with an initial-letter fallback painted behind
          · doctor name (serif) · role chip · specialty
          · "Read Dr. X's profile" link with an arrow that nudges right
        The whole card is the anchor — clicking anywhere goes to /dr-{slug}.
   ============================================================================ */
.zc-naud-side__card--verify {
    display: block;
    position: relative;
    padding: clamp(18px, 2vw, 24px);
    background:
        radial-gradient(ellipse at 0% 0%, rgba(207, 138, 63, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 100% 100%, rgba(46, 75, 113, 0.05) 0%, transparent 55%),
        var(--zc-white);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s var(--zc-ease-spring),
                box-shadow 0.3s var(--zc-ease),
                border-color 0.3s var(--zc-ease);
    overflow: hidden;
}
.zc-naud-side__card--verify:hover {
    transform: translateY(-2px);
    border-color: var(--zc-amber-a35);
    box-shadow: 0 22px 38px -22px rgba(207, 138, 63, 0.40),
                0 10px 20px -16px rgba(46, 75, 113, 0.16);
}

/* Gold-foil hairline pinned to the top edge */
.zc-naud-verify__foil {
    position: absolute;
    top: -1px; left: 22px; right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--zc-amber-dk) 50%, transparent);
}

/* Head row: patch-check + "Medically reviewed by" mark */
.zc-naud-verify__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.zc-naud-verify__check {
    display: inline-grid;
    place-items: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--zc-amber), var(--zc-amber-dk));
    color: var(--zc-white);
    font-size: 15px;
    box-shadow: 0 8px 16px -6px rgba(207, 138, 63, 0.55);
    flex-shrink: 0;
}
.zc-naud-verify__tag {
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}

/* Photo + meta row */
.zc-naud-verify__body {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
}
.zc-naud-verify__photo {
    position: relative;
    width: 76px; height: 76px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--zc-amber-dk), var(--zc-amber));
    color: var(--zc-white);
    box-shadow: 0 12px 24px -14px rgba(207, 138, 63, 0.55),
                inset 0 0 0 3px var(--zc-white);
}
/* Initial-letter fallback layered BEHIND the photo so a missing image
   never leaves a blank circle or leaks alt text into the layout. */
.zc-naud-verify__init {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--zc-f-display);
    font-size: 30px;
    font-weight: 600;
    color: var(--zc-white);
    letter-spacing: -0.5px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 0;
}
.zc-naud-verify__img {
    position: relative;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    z-index: 1;
}

.zc-naud-verify__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.zc-naud-verify__name {
    font-family: var(--zc-f-display);
    font-size: clamp(15px, 0.3vw + 13px, 17.5px);
    font-weight: 600;
    color: var(--zc-charcoal);
    letter-spacing: -0.3px;
    line-height: 1.2;
}
.zc-naud-side__card--verify:hover .zc-naud-verify__name {
    color: var(--zc-amber-dk);
}
.zc-naud-verify__role {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 9px;
    margin-top: 1px;
    background: var(--zc-amber-a08);
    border: 1px solid var(--zc-amber-a25);
    border-radius: 999px;
    font-family: 'Courier New', ui-monospace, monospace;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
}
.zc-naud-verify__spec {
    font-family: var(--zc-f-body);
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--zc-warm-mid);
    margin-top: 3px;
}

/* "Read profile →" footer */
.zc-naud-verify__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--zc-amber-a25);
    font-family: var(--zc-f-heading);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--zc-amber-dk);
    transition: gap 0.25s var(--zc-ease);
}
.zc-naud-verify__foot i {
    font-size: 13px;
    transition: transform 0.3s var(--zc-ease-spring);
}
.zc-naud-side__card--verify:hover .zc-naud-verify__foot { gap: 14px; }
.zc-naud-side__card--verify:hover .zc-naud-verify__foot i { transform: translateX(2px) translateY(-2px); }

/* Mobile — stack photo above meta so the name has room to breathe */
@media (max-width: 480px) {
    .zc-naud-verify__body { grid-template-columns: 1fr; row-gap: 12px; justify-items: start; }
}