/* =====================================================================
   EDITORIAL SYSTEM
   Badges, source attribution, disclosures, independence, review dates.

   Reuses the theme's existing design tokens and the established
   "editorial block" idiom (soft background + 2px left rule) already used
   by .tldr-block, .who-for and .key-insights. No new design language.

   Badge colours are exposed as custom properties so they can be
   overridden from style.css or a child theme without touching PHP.

   Contrast against white text, measured:
     Original   #3f3f46  10.44:1  AAA
     Press      #3b5a7a   7.17:1  AAA
     Sponsored  #b35a3d   4.72:1  AA    (the theme's own --accent)
     Default    #5a534b   ~7.2:1  AAA   (inherited by new content types)
   ===================================================================== */

:root {
    --lb-editorial-badge-default:       #5a534b;
    --lb-editorial-badge-original:      #3f3f46;
    --lb-editorial-badge-press-release: #3b5a7a;
    --lb-editorial-badge-sponsored:     #b35a3d;
    --lb-editorial-badge-text:          #ffffff;
}


/* =====================
   BADGE
   One per article, above the title, linked to its taxonomy archive.
   New content types inherit the default colour until given their own.
===================== */
.lb-editorial-badge-row {
    display: block;
    margin: 0 0 var(--s-3);
}

/* Preserve the existing header rhythm without editing components.css.
   .article__eyebrow already carries margin-bottom: var(--s-3). When a badge
   follows it, pull the badge up by the difference so the spacing reads as
   eyebrow (16px) badge (24px) title, rather than two full 24px gaps.
   Scoped to badged posts only — unclassified posts render pixel-identically
   to before this module existed. */
.article__eyebrow + .lb-editorial-badge-row {
    margin-top: calc(-1 * (var(--s-3) - var(--s-2)));
}

.lb-editorial-badge {
    display: inline-block;
    padding: 4px 12px 3px;
    border-radius: 999px;
    background: var(--lb-editorial-badge-default);
    color: var(--lb-editorial-badge-text);
    font-family: var(--mono);
    font-size: 10px;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    transition: opacity 0.15s ease;
}

.lb-editorial-badge:hover,
.lb-editorial-badge:focus {
    color: var(--lb-editorial-badge-text);
    text-decoration: none;
    opacity: 0.82;
}

.lb-editorial-badge:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

/* Structural hook — lets you swap the label for an icon, or truncate on
   narrow screens, without changing the badge box itself. */
.lb-editorial-badge__text {
    display: inline-block;
    vertical-align: baseline;
}

.lb-editorial-badge--original      { background: var(--lb-editorial-badge-original); }
.lb-editorial-badge--press-release { background: var(--lb-editorial-badge-press-release); }

/* Sponsored carries slightly more weight than the other two — the one
   badge a reader must not miss. Emphasis comes from weight and tracking,
   not from a louder hue. */
.lb-editorial-badge--sponsored {
    background: var(--lb-editorial-badge-sponsored);
    font-weight: 500;
    letter-spacing: 0.16em;
}


/* =====================
   EDITORIAL FOOTER
   Wrapper for dates, source, disclosure and independence.
===================== */
.lb-editorial {
    display: block;
    max-width: var(--reading);
    margin: var(--s-5) auto 0;
}

.lb-editorial > * + * {
    margin-top: var(--s-2);
}

/* Shared block idiom, matching .tldr-block / .who-for / .key-insights */
.lb-editorial-dates,
.lb-editorial-source,
.lb-editorial-disclosure,
.lb-editorial-independence {
    padding: var(--s-3) var(--s-4);
    background: var(--bg-soft);
    border-left: 2px solid var(--ink-faint);
}

.lb-editorial-disclosure__heading,
.lb-editorial-independence__heading {
    display: block;
    margin: 0 0 var(--s-2);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
}

.lb-editorial-disclosure__text,
.lb-editorial-independence__statement,
.lb-editorial-independence__closing {
    margin: 0;
    font-family: var(--serif);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.lb-editorial-disclosure__text + .lb-editorial-disclosure__text {
    margin-top: var(--s-2);
}


/* =====================
   SOURCE ATTRIBUTION
===================== */
.lb-editorial-source__label {
    margin-right: var(--s-1);
}

.lb-editorial-source__name {
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
}

a.lb-editorial-source__name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}


/* =====================
   INDEPENDENCE
   The statement is always visible; the standing policy sits inside a
   native <details> so it stays one click away without adding ~200 words
   of boilerplate to every review. No JavaScript.
===================== */
.lb-editorial-independence__details {
    margin-top: var(--s-2);
}

.lb-editorial-independence__summary {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-mute);
    cursor: pointer;
}

.lb-editorial-independence__summary:hover {
    color: var(--ink);
}

.lb-editorial-independence__summary:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

.lb-editorial-independence__principles {
    margin: var(--s-2) 0 0;
    padding-left: var(--s-3);
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink-soft);
}

.lb-editorial-independence__principles li + li {
    margin-top: 6px;
}

.lb-editorial-independence__closing {
    margin-top: var(--s-2);
    font-size: 14px;
}


/* =====================
   REVIEW DATES
===================== */
.lb-editorial-dates__reviewed {
    margin: 0;
    font-family: var(--serif);
    font-size: 15px;
    color: var(--ink);
}

.lb-editorial-dates__label {
    margin-right: var(--s-1);
}

.lb-editorial-dates__history-heading {
    display: block;
    margin: var(--s-3) 0 var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--rule);
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--ink-mute);
}

.lb-editorial-dates__history {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* No heading rendered (config override) — keep the dividing rule. */
.lb-editorial-dates__reviewed + .lb-editorial-dates__history {
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--rule);
}

.lb-editorial-dates__entry {
    font-family: var(--serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
}

.lb-editorial-dates__entry + .lb-editorial-dates__entry {
    margin-top: 6px;
}

.lb-editorial-dates__entry-date {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.lb-editorial-dates__entry-note {
    font-family: var(--serif);
    color: var(--ink-soft);
}


/* =====================
   NARROW SCREENS
===================== */
@media (max-width: 600px) {
    .lb-editorial-dates,
    .lb-editorial-source,
    .lb-editorial-disclosure,
    .lb-editorial-independence {
        padding: var(--s-2) var(--s-3);
    }

    .lb-editorial-disclosure__text,
    .lb-editorial-independence__statement,
    .lb-editorial-source__name,
    .lb-editorial-dates__reviewed {
        font-size: 14px;
    }
}


/* =====================
   DARK MODE
   Inert today — the theme has no dark mode. Present so the editorial
   system needs no changes if one is added later.
===================== */
@media (prefers-color-scheme: dark) {
    :root {
        --lb-editorial-badge-default:       #8d857a;
        --lb-editorial-badge-original:      #9b9ba4;
        --lb-editorial-badge-press-release: #8fb3d9;
        --lb-editorial-badge-sponsored:     #e39a7c;
        --lb-editorial-badge-text:          #1a1714;
    }
}


/* =====================
   PRINT
   The badge and every disclosure must survive a printed or PDF'd article,
   since that's how sponsored content most often gets forwarded.

   Note: a closed <details> stays closed in print — CSS can't force it
   open. The independence STATEMENT always prints because it sits outside
   the <details>; only the standing policy bullets may be omitted. If you
   need them printed too, set independence.principles_open to true in
   config.php.
===================== */
@media print {
    .lb-editorial-badge {
        background: transparent;
        color: #000;
        border: 1px solid #000;
    }

    .lb-editorial-dates,
    .lb-editorial-source,
    .lb-editorial-disclosure,
    .lb-editorial-independence {
        background: transparent;
        border-left: 2px solid #000;
        break-inside: avoid;
    }
}