/*
Theme Name: Xena Central
Theme Author: Ariane
Theme Author URI: https://www.unloved-heart.net
Description: A warrior-and-bard fansite theme — weathered stone surfaces, a bronze-to-teal accent gradient echoing armor and battle-worn leather, and carved-stone display type built around a bundled banner image.
Version: 1.0.0
*/

/* =========================================================
   Tokens
   ========================================================= */

:root {
    /* gradient stops (bronze -> gold -> sage -> teal, echoing the
       banner's armor bronze and Gabrielle's teal-green top) */
    --xc-bronze-deep: #7a4a1c;
    --xc-bronze:      #a3672e;
    --xc-gold:        #c9974d;
    --xc-sage:        #8fa084;
    --xc-teal:        #3f7d6e;
    --xc-teal-deep:   #2b5c50;

    --xc-grad: linear-gradient(90deg,
        #7a4a1c 0%, #a3672e 18%, #c9974d 36%,
        #b3a878 50%, #8fa084 64%, #57907f 80%,
        #3f7d6e 92%, #2b5c50 100%);

    /* A plainer two-stop version of the gradient above (lighter
       red/orange to lighter green/blue) for small accents — nav-item
       hover, the current-page pagination pill — where the full 7-stop
       bronze-to-teal sweep would be too busy crammed into a couple
       inches of width. */
    --xc-accent-grad-light: linear-gradient(90deg, #e88a5c 0%, #5cb3c2 100%);

    /* surfaces — warm parchment, echoing the banner's weathered-stone
       texture without literally tiling it behind every page */
    --xc-bg:          #f6f1e7;
    --xc-bg-alt:      #ede3cd;
    --xc-bg-card:     #fffdf8;
    --xc-border:      #ddd0b3;
    --xc-border-med:  #c6b48c;

    /* text */
    --xc-text:        #2a2420;
    --xc-text-mid:    #5c5044;
    --xc-text-muted:  #93866f;

    /* accents */
    --xc-warm:        #a3672e;
    --xc-warm-light:  #f6e6d2;
    --xc-cool:        #3f7d6e;
    --xc-cool-light:  #dfeee9;

    /* tag palette — cycled across the gradient's bronze/teal family plus
       a rust-red and an olive outlier, so a tag cloud reads as lively
       rather than a wall of identically-colored pills. */
    --xc-tag-1: #954c1f;
    --xc-tag-2: #b98420;
    --xc-tag-3: #5c7a4a;
    --xc-tag-4: #2f7a72;
    --xc-tag-5: #1f5c66;
    --xc-tag-6: #8a3f3f;

    /* type — Cinzel for the carved-stone display headings (matching the
       banner's own engraved title treatment), EB Garamond for body copy,
       Nunito Sans for UI chrome */
    --xc-font-display: 'Cinzel', Georgia, serif;
    --xc-font-body:    'EB Garamond', Georgia, serif;
    --xc-font-ui:      'Nunito Sans', system-ui, sans-serif;

    --xc-ease: cubic-bezier(.4, 0, .2, 1);

    /* aliases used by shared component rules below */
    --lp-bg: var(--xc-bg);
    --lp-bg-alt: var(--xc-bg-alt);
    --lp-text: var(--xc-text);
    --lp-text-muted: var(--xc-text-muted);
    --lp-border: var(--xc-border);
    --lp-accent: var(--xc-warm);
    --lp-accent-hover: var(--xc-bronze-deep);
    --lp-radius: 8px;
    --lp-max-width: 1160px;
    --lp-font-body: var(--xc-font-body);
    --lp-font-size-base: 16pt;
    --lp-line-height-base: 1.7;
    --lp-success-bg: #eef6ee;
    --lp-success-border: #4f8f5b;
    --lp-success-text: #2c5233;
    --lp-error-bg: #fbeeee;
    --lp-error-border: #b8483f;
    --lp-error-text: #6e2a24;

    /* LP-016's fixed font-color palette (both editors) — see the
       .has-{color}-color rules below for why this is a hardcoded set of
       named colors rather than a free-pick color. */
    --lp-color-red: #a3402f;
    --lp-color-orange: #b98420;
    --lp-color-yellow: #93801f;
    --lp-color-green: #5c7a4a;
    --lp-color-blue: #2f7a72;
    --lp-color-purple: #6a5b8a;
    --lp-color-gray: #5c5044;
}

/*
 * LP-117: dark tokens declared twice on purpose — once gated by
 * prefers-color-scheme (default, no explicit visitor choice), once under
 * :root[data-theme="dark"] (an explicit choice via the header toggle,
 * regardless of system setting). The :not([data-theme="light"]) guard
 * stops an explicit Light choice from being overridden by a dark system
 * preference. Mirrors the default theme's/admin.css's identical pattern.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --xc-bg:        #1a1815;
        --xc-bg-alt:    #221f1a;
        --xc-bg-card:   #26221c;
        --xc-border:    #3c362b;
        --xc-border-med:#4f4736;
        --xc-text:      #ede4d2;
        --xc-text-mid:  #c7b99e;
        --xc-text-muted:#96876e;
        --xc-warm:      #d99a52;
        --xc-warm-light:#3a2c17;
        --xc-cool:      #5cb3a0;
        --xc-cool-light:#173330;

        --xc-tag-1: #d9884f;
        --xc-tag-2: #e0b25c;
        --xc-tag-3: #93c17f;
        --xc-tag-4: #63c4b6;
        --xc-tag-5: #5fb0c2;
        --xc-tag-6: #d38686;

        --lp-bg: var(--xc-bg);
        --lp-bg-alt: var(--xc-bg-alt);
        --lp-text: var(--xc-text);
        --lp-text-muted: var(--xc-text-muted);
        --lp-border: var(--xc-border);
        --lp-accent: var(--xc-warm);
        --lp-accent-hover: #f0b06e;
        --lp-success-bg: #1c2a1e;
        --lp-success-border: #4f8f5b;
        --lp-success-text: #9bd7a6;
        --lp-error-bg: #2c1917;
        --lp-error-border: #b8483f;
        --lp-error-text: #eba39c;

        /* Lightened for contrast against the dark surface tokens above. */
        --lp-color-red: #e08a75;
        --lp-color-orange: #e0b25c;
        --lp-color-yellow: #d9c565;
        --lp-color-green: #93c17f;
        --lp-color-blue: #63c4b6;
        --lp-color-purple: #a89bd6;
        --lp-color-gray: #c7b99e;
    }
}

:root[data-theme="dark"] {
    --xc-bg:        #1a1815;
    --xc-bg-alt:    #221f1a;
    --xc-bg-card:   #26221c;
    --xc-border:    #3c362b;
    --xc-border-med:#4f4736;
    --xc-text:      #ede4d2;
    --xc-text-mid:  #c7b99e;
    --xc-text-muted:#96876e;
    --xc-warm:      #d99a52;
    --xc-warm-light:#3a2c17;
    --xc-cool:      #5cb3a0;
    --xc-cool-light:#173330;

    --xc-tag-1: #d9884f;
    --xc-tag-2: #e0b25c;
    --xc-tag-3: #93c17f;
    --xc-tag-4: #63c4b6;
    --xc-tag-5: #5fb0c2;
    --xc-tag-6: #d38686;

    --lp-bg: var(--xc-bg);
    --lp-bg-alt: var(--xc-bg-alt);
    --lp-text: var(--xc-text);
    --lp-text-muted: var(--xc-text-muted);
    --lp-border: var(--xc-border);
    --lp-accent: var(--xc-warm);
    --lp-accent-hover: #f0b06e;
    --lp-success-bg: #1c2a1e;
    --lp-success-border: #4f8f5b;
    --lp-success-text: #9bd7a6;
    --lp-error-bg: #2c1917;
    --lp-error-border: #b8483f;
    --lp-error-text: #eba39c;

    --lp-color-red: #e08a75;
    --lp-color-orange: #e0b25c;
    --lp-color-yellow: #d9c565;
    --lp-color-green: #93c17f;
    --lp-color-blue: #63c4b6;
    --lp-color-purple: #a89bd6;
    --lp-color-gray: #c7b99e;
}

/* =========================================================
   Reset & base
   ========================================================= */

* {
    box-sizing: border-box;
}

body.lp-site {
    background: var(--xc-bg);
    color: var(--xc-text);
    font-family: var(--xc-font-body);
    font-size: var(--lp-font-size-base);
    line-height: var(--lp-line-height-base);
    margin: 0;
}

/*
 * A fixed, full-viewport grain overlay for the weathered-stone surface
 * this theme is built around — two hairline cross-hatched
 * repeating-linear-gradients at an extremely low opacity, the same
 * "pure CSS, no image asset" technique used elsewhere for this exact
 * effect. White lines at this opacity read as a faint grain on both the
 * light parchment and dark palettes without needing per-theme color
 * tuning. Fixed positioning + a single shared element (rather than
 * tiling a background-image on every surface) keeps this a one-time
 * paint cost regardless of page length. pointer-events: none and a
 * z-index below every real UI element keep it purely decorative.
 */
.xc-noise {
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255, 255, 255, 0.5) 0,
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px,
            transparent 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.5) 0,
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px,
            transparent 3px
        );
    inset: 0;
    opacity: 0.02;
    pointer-events: none;
    position: fixed;
    z-index: 1;
}

a {
    color: var(--xc-warm);
}

a:hover,
a:focus {
    color: var(--xc-bronze-deep);
}

img {
    height: auto;
    max-width: 100%;
}

.lp-skip-link {
    background: var(--xc-warm);
    color: #fff;
    left: -9999px;
    padding: 0.5em 1em;
    position: absolute;
    top: 0;
    z-index: 100;
}

.lp-skip-link:focus {
    left: 0;
}

/* =========================================================
   Header
   ========================================================= */

.lp-site-header {
    background: var(--xc-bg-card);
    border-bottom: 3px solid transparent;
    border-image: var(--xc-grad) 1;
    position: sticky;
    top: 0;
    z-index: 200;
}

.lp-site-header__inner {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    max-width: var(--lp-max-width);
    min-height: 56px;
    padding: 0 1.5rem;
    /* LP-117: anchors the absolutely-positioned toggle below without
       disturbing the centered nav, which is this bar's only other
       child. */
    position: relative;
}

/*
 * No site-title/logo block and no search form in this theme's header
 * bar (a deliberate design choice — see header.php's own docblock) —
 * .lp-site-header__nav is the bar's only child, so it no longer needs
 * flex:1/space-between to share room with siblings that aren't there.
 */
.lp-site-header__nav {
    max-width: 100%;
    overflow-x: auto;
}

/* Scoped to the header bar only — .lp-nav-menu is shared with the
   footer nav and the Navigation Menu widget, neither of which should
   center. */
.lp-site-header__nav .lp-nav-menu {
    justify-content: center;
}

@media (max-width: 780px) {
    .lp-site-header__inner {
        padding: 0.85rem 1.5rem;
    }

    .lp-nav-menu {
        flex-wrap: wrap;
    }
}

/* LP-117 — positioned absolutely (rather than as a normal flex sibling)
   so it doesn't disturb the header nav's centering, this theme's own
   deliberate layout choice above. */
.lp-theme-toggle {
    align-items: center;
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    font-size: 0.95rem;
    height: 2.1rem;
    justify-content: center;
    line-height: 1;
    padding: 0;
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    transition: border-color 0.15s var(--xc-ease);
    width: 2.1rem;
}

.lp-theme-toggle:hover,
.lp-theme-toggle:focus-visible {
    border-color: var(--xc-warm);
}

.lp-theme-toggle:focus-visible {
    outline: 2px solid var(--xc-warm);
    outline-offset: 2px;
}

.lp-theme-toggle__icon--light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .lp-theme-toggle__icon--dark {
        display: none;
    }

    :root:not([data-theme="light"]) .lp-theme-toggle__icon--light {
        display: inline;
    }
}

:root[data-theme="dark"] .lp-theme-toggle__icon--dark {
    display: none;
}

:root[data-theme="dark"] .lp-theme-toggle__icon--light {
    display: inline;
}

/* =========================================================
   Banner (bundled images/header.png) — a classic "custom header
   image" band beneath the slim brand bar, framed like a weathered
   plaque: rounded corners and a soft drop shadow so it reads as a
   deliberate art placement rather than a stretched-edge-to-edge photo.
   Light mode keeps its original solid-color `outline` frame; dark mode
   gets its own override below (a slim bronze-to-teal gradient frame —
   the .xc-banner__link background peeking out through its own padding,
   since border-image doesn't support border-radius — plus a warmer
   glowing shadow), because both the flat outline color (--xc-bg-card)
   and the original elevation shadow (built for casting on a light
   surface) go nearly invisible against the dark palette.
   ========================================================= */

.xc-banner {
    background: var(--xc-bg-alt);
    border-bottom: 1px solid var(--xc-border);
    padding: 1.5rem 1.5rem 2rem;
}

.xc-banner__link {
    display: block;
    margin: 0 auto;
    max-width: var(--lp-max-width);
}

.xc-banner__link:focus-visible {
    border-radius: 16px;
    outline: 2px solid var(--xc-warm);
    outline-offset: 4px;
}

.xc-banner__image {
    border-radius: 14px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 36px rgba(42, 33, 20, 0.28);
    display: block;
    margin: 0 auto;
    max-width: var(--lp-max-width);
    outline: 3px solid var(--xc-bg-card);
    outline-offset: -3px;
    width: 100%;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .xc-banner__link {
        background: var(--xc-grad);
        border-radius: 16px;
        padding: 3px;
    }

    :root:not([data-theme="light"]) .xc-banner__image {
        border-radius: 13px;
        box-shadow:
            0 1px 0 rgba(255, 255, 255, 0.08) inset,
            0 18px 40px rgba(0, 0, 0, 0.55),
            0 0 42px -10px rgba(217, 154, 82, 0.4),
            0 0 42px -10px rgba(92, 179, 160, 0.25);
        outline: none;
    }
}

:root[data-theme="dark"] .xc-banner__link {
    background: var(--xc-grad);
    border-radius: 16px;
    padding: 3px;
}

:root[data-theme="dark"] .xc-banner__image {
    border-radius: 13px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 18px 40px rgba(0, 0, 0, 0.55),
        0 0 42px -10px rgba(217, 154, 82, 0.4),
        0 0 42px -10px rgba(92, 179, 160, 0.25);
    outline: none;
}

@media (max-width: 780px) {
    .xc-banner {
        padding: 1rem 1rem 1.5rem;
    }

    .xc-banner__image {
        border-radius: 10px;
    }
}

@media (max-width: 780px) and (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .xc-banner__link {
        border-radius: 12px;
        padding: 2px;
    }

    :root:not([data-theme="light"]) .xc-banner__image {
        border-radius: 10px;
    }
}

@media (max-width: 780px) {
    :root[data-theme="dark"] .xc-banner__link {
        border-radius: 12px;
        padding: 2px;
    }

    :root[data-theme="dark"] .xc-banner__image {
        border-radius: 10px;
    }
}

/* =========================================================
   Navigation menus
   ========================================================= */

.lp-nav-menu {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-nav-menu__item a {
    border-radius: var(--lp-radius);
    color: var(--xc-text-mid);
    display: inline-block;
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    padding: 0.4rem 0.85rem;
    text-decoration: none;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s;
}

.lp-nav-menu__item a:hover,
.lp-nav-menu__item a:focus {
    background: var(--xc-accent-grad-light);
    color: #fff;
}

.lp-nav-menu__item {
    position: relative;
}

.lp-nav-menu__submenu {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    box-shadow: 0 8px 24px rgba(42, 33, 20, 0.14);
    display: none;
    left: 0;
    list-style: none;
    margin: 0;
    min-width: 12rem;
    padding: 0.6rem 0;
    position: absolute;
    top: 100%;
    z-index: 10;
}

.lp-nav-menu__item--has-children:hover > .lp-nav-menu__submenu,
.lp-nav-menu__item--has-children:focus-within > .lp-nav-menu__submenu {
    display: block;
}

.lp-nav-menu__submenu .lp-nav-menu__item a {
    display: block;
    padding: 0.45rem 1.1rem;
    text-transform: none;
}

.lp-nav-menu__submenu .lp-nav-menu__submenu {
    left: 100%;
    top: 0;
}

.lp-widget__nav-menu .lp-nav-menu__submenu {
    background: none;
    border: none;
    box-shadow: none;
    display: block;
    padding: 0.35rem 0 0 1rem;
    position: static;
}

/* =========================================================
   Search form (site header) — pill input with a leading
   magnifying-glass icon that widens on focus; the submit button
   stays in the DOM for keyboard/no-JS submission but is visually
   hidden, since a single search icon already communicates intent.
   ========================================================= */

.lp-search-form {
    flex-shrink: 0;
    position: relative;
}

.lp-search-form__label {
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.lp-search-form::before {
    background: var(--xc-text-muted);
    content: "";
    height: 14px;
    left: 0.75rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}

.lp-search-form__input {
    background: var(--xc-bg-alt);
    border: 1px solid var(--xc-border);
    border-radius: 999px;
    color: var(--xc-text);
    font-family: var(--xc-font-ui);
    font-size: 0.82rem;
    padding: 0.4rem 1rem 0.4rem 2.2rem;
    transition: width 0.3s var(--xc-ease, ease), border-color 0.2s;
    width: 170px;
}

.lp-search-form__input::placeholder {
    color: var(--xc-text-muted);
}

.lp-search-form__input:focus {
    border-color: var(--xc-teal);
    outline: none;
    width: 230px;
}

/* =========================================================
   Layout
   ========================================================= */

.lp-layout {
    align-items: start;
    display: grid;
    gap: 3rem;
    grid-template-columns: minmax(0, 1fr) 300px;
    margin: 0 auto;
    max-width: var(--lp-max-width);
    padding: 2.5rem 1.5rem;
}

@media (max-width: 780px) {
    .lp-layout {
        grid-template-columns: 1fr;
    }
}

.lp-main {
    min-width: 0;
}

/* LP-009 Hierarchy UI breadcrumbs — page.php only renders this for a
   page with at least one ancestor; a top-level page shows no trail. */

.lp-breadcrumbs {
    font-size: 0.9rem;
    margin: 0 0 1rem;
}

.lp-breadcrumbs__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-breadcrumbs__item {
    align-items: center;
    display: inline-flex;
    gap: 0.4em;
}

.lp-breadcrumbs__link {
    color: var(--xc-text-mid);
    text-decoration: underline;
}

.lp-breadcrumbs__link:hover {
    color: var(--xc-warm);
}

.lp-breadcrumbs__separator {
    color: var(--xc-text-muted);
}

.lp-breadcrumbs__item--current {
    color: var(--xc-text);
    font-weight: 600;
}

.lp-page-title {
    color: var(--xc-text);
    font-family: var(--xc-font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.lp-page-intro {
    color: var(--xc-text-mid);
    font-style: italic;
    margin: 0 0 2rem;
    max-width: 60ch;
}

.lp-empty-state {
    color: var(--xc-text-muted);
    font-style: italic;
}

.lp-archive__image {
    display: block;
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: var(--lp-radius);
    margin: -0.5rem 0 1.5rem;
}

.lp-archive__description {
    color: var(--xc-text-mid);
    margin: -0.5rem 0 1.5rem;
    max-width: 68ch;
}

/* =========================================================
   Maintenance mode
   ========================================================= */

.lp-maintenance {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    margin: 3rem auto;
    max-width: 60ch;
    padding: 2.5rem 2rem;
    text-align: center;
}

@media (max-width: 720px) {
    .lp-maintenance {
        padding: 1.5rem;
    }
}

.lp-maintenance .lp-page-title {
    margin-bottom: 0.75rem;
}

.lp-maintenance__message {
    color: var(--xc-text-mid);
    font-size: 1.1rem;
    margin: 0 auto;
    max-width: 60ch;
}

.lp-maintenance__return-at {
    color: var(--xc-text-muted);
    margin-top: 0.75rem;
}

/* =========================================================
   Single post / page
   ========================================================= */

/*
 * Same lighter card treatment as .lp-post-list__item (bg-card surface,
 * hairline border, matching radius) — the single post/page view
 * previously sat flush against the page background with nothing to
 * distinguish it, unlike every card-based listing elsewhere in this
 * theme.
 */
/* No max-width here — the card fills .lp-main's own column width, same
   as .lp-post-list__item does; .lp-post__content below keeps its own
   68ch cap so body copy still reads at a comfortable line length even
   though the surrounding card is wider. */
.lp-post,
.lp-page {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    padding: 2rem;
}

@media (max-width: 720px) {
    .lp-post,
    .lp-page {
        padding: 1.25rem;
    }
}

.lp-post__title {
    font-family: var(--xc-font-display);
    font-size: 2.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

.lp-post__meta,
.lp-post-list__meta {
    color: var(--xc-text-muted);
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    margin: 0 0 1.5rem;
}

.lp-post__categories a,
.lp-post-list__categories a {
    color: var(--xc-warm);
    text-decoration: none;
}

.lp-post__categories a:hover,
.lp-post__categories a:focus,
.lp-post-list__categories a:hover,
.lp-post-list__categories a:focus {
    color: var(--xc-bronze-deep);
    text-decoration: underline;
}

/* comments_link() rendered inline in the post-list meta line. */
a.lp-post-list__comments {
    color: var(--xc-warm);
    text-decoration: none;
}

a.lp-post-list__comments:hover,
a.lp-post-list__comments:focus {
    color: var(--xc-bronze-deep);
    text-decoration: underline;
}

.lp-post-list__comments--closed {
    color: var(--lp-text-muted);
}

.lp-post__content {
    font-size: 1.08rem;
    max-width: 68ch;
}

/* Only ever rendered when edit_post_link()/edit_page_link() actually
   returned a URL for the current visitor — a quiet top-bordered footer
   note inside the post/page card, not a prominent button, since it's
   only ever meant for the signed-in author/editor, not readers. */
.lp-post__edit-link {
    border-top: 1px solid var(--xc-border);
    color: var(--xc-text-muted);
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    margin: 2rem 0 0;
    padding-top: 1.25rem;
}

.lp-post__edit-link a {
    color: var(--xc-warm);
    font-weight: 600;
    text-decoration: none;
}

.lp-post__edit-link a:hover,
.lp-post__edit-link a:focus {
    color: var(--xc-bronze-deep);
    text-decoration: underline;
}

.lp-post__thumbnail {
    margin: 0 0 2rem;
}

.lp-post__thumbnail img {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    box-shadow: 0 12px 32px rgba(42, 33, 20, 0.16);
    display: block;
    height: auto;
    max-width: 100%;
}

/* "Show featured image above title" Theme Option — same full-width
   banner treatment as .lp-post-list__thumbnail's own hero-banner
   image, applied to a single post/page instead of a listing card. */
.lp-post__thumbnail--hero {
    width: 100%;
}

.lp-post__thumbnail--hero img {
    width: 100%;
    height: 320px;
    object-fit: cover;
}

@media (max-width: 720px) {
    .lp-post__thumbnail--hero img {
        height: 200px;
    }
}

/* =========================================================
   Rendered post/page content — typography for everything the
   content renderer can produce: headings, code, blockquotes,
   tables, task lists, footnotes, and the [[toc]] table of
   contents.
   ========================================================= */

.lp-post__content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--xc-text);
    font-family: var(--xc-font-display);
    font-weight: 600;
    line-height: 1.3;
    margin: 1.5em 0 0.5em;
}

.lp-post__content :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.lp-post__content p {
    margin: 0 0 1.1em;
}

/*
 * strong/em/u/del/s — the only inline emphasis tags HtmlSanitizer
 * allows through (see app/Core/Content/HtmlSanitizer.php). Given a
 * deliberate look here rather than leaving them at plain browser
 * defaults: bold is painted with the theme's bronze-to-teal accent
 * gradient, italics get the theme's teal accent solid (echoing the
 * gradient's own cool end), and underline/strikethrough get a
 * heavier, offset decoration line in
 * those same hues so they read as a considered mark rather than a
 * stray browser default squeezed between paragraphs.
 */
.lp-post__content :is(strong, b),
.lp-welcome-message :is(strong, b) {
    background: var(--xc-accent-grad-light);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 900;
}

.lp-post__content :is(em, i),
.lp-welcome-message :is(em, i) {
    color: var(--xc-teal);
}

.lp-post__content u {
    text-decoration-color: var(--xc-warm);
    text-decoration-line: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.lp-post__content :is(del, s) {
    color: var(--xc-text-muted);
    text-decoration-color: var(--xc-tag-1);
    text-decoration-line: line-through;
    text-decoration-thickness: 2px;
}

.lp-post__content a {
    color: var(--xc-warm);
    text-decoration-color: var(--xc-border-med);
}

.lp-post__content a:hover {
    color: var(--xc-bronze-deep);
}

.lp-post__content img {
    border-radius: var(--lp-radius);
    height: auto;
    max-width: 100%;
}

.lp-post__content img.alignleft {
    float: left;
    margin: 0.25em 1.5em 1em 0;
}

.lp-post__content img.alignright {
    float: right;
    margin: 0.25em 0 1em 1.5em;
}

.lp-post__content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*
 * WordPress Importer's [caption] shortcode conversion (LPP-004) wraps a
 * migrated image and its caption text in <figure class="lp-caption
 * {align}"><img ...><figcaption>...</figcaption></figure> — the align.*
 * rules here mirror the plain img.align* rules above so a captioned
 * image floats/centers exactly like an unwrapped one would.
 */
.lp-post__content figure.lp-caption {
    margin: 0 0 1em;
    max-width: 100%;
}

.lp-post__content figure.lp-caption img {
    display: block;
    height: auto;
    margin: 0;
    max-width: 100%;
}

.lp-post__content figure.lp-caption.alignleft {
    float: left;
    margin: 0.25em 1.5em 1em 0;
}

.lp-post__content figure.lp-caption.alignright {
    float: right;
    margin: 0.25em 0 1em 1.5em;
}

.lp-post__content figure.lp-caption.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.lp-post__content figure.lp-caption figcaption {
    color: var(--xc-text-muted);
    font-size: 0.85em;
    margin-top: 0.35em;
    text-align: center;
}

.lp-post__content code {
    background: var(--xc-bg-alt);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    padding: 0.15em 0.4em;
}

.lp-post__content pre {
    background: var(--xc-bg-alt);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    margin: 0 0 1.1em;
    overflow-x: auto;
    padding: 1.1em;
}

.lp-post__content pre code {
    background: none;
    font-size: 0.85em;
    padding: 0;
}

.lp-post__content blockquote {
    border-left: 3px solid var(--xc-warm);
    color: var(--xc-text-mid);
    font-style: italic;
    margin: 0 0 1.1em;
    padding: 0.4em 1.25em;
}

.lp-post__content hr {
    border: none;
    border-top: 1px solid var(--xc-border);
    margin: 2.5em 0;
    text-align: center;
}

.lp-post__content :is(ul, ol) {
    margin: 0 0 1.1em;
    padding-left: 1.5em;
}

.lp-post__content li {
    margin: 0.3em 0;
}

.lp-post__content .lp-task-list-item {
    list-style: none;
    margin-left: -1.5em;
}

.lp-post__content .lp-task-list-item input[type="checkbox"] {
    margin-right: 0.4em;
}

.lp-post__content table {
    border-collapse: collapse;
    margin: 0 0 1.1em;
    width: 100%;
}

.lp-post__content :is(th, td) {
    border: 1px solid var(--xc-border);
    padding: 0.55em 0.8em;
    text-align: left;
}

.lp-post__content th {
    background: var(--xc-bg-alt);
    font-family: var(--xc-font-ui);
}

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

.lp-post__content .lp-align-right {
    text-align: right;
}

.lp-post__content .has-text-align-left {
    text-align: left;
}

.lp-post__content .has-text-align-center {
    text-align: center;
}

.lp-post__content .has-text-align-right {
    text-align: right;
}

.lp-post__content .has-text-align-justify {
    text-align: justify;
}

/*
 * LP-016's fixed font-color palette (both editors) — a hardcoded set of
 * named colors rather than a free-pick color, applied as a class on a
 * <span> instead of an inline style="color:..." since HtmlSanitizer
 * never allows a style attribute at all. Colors are the --lp-color-*
 * tokens defined above so dark mode can lighten them for contrast.
 */
.lp-post__content .has-red-color {
    color: var(--lp-color-red);
}

.lp-post__content .has-orange-color {
    color: var(--lp-color-orange);
}

.lp-post__content .has-yellow-color {
    color: var(--lp-color-yellow);
}

.lp-post__content .has-green-color {
    color: var(--lp-color-green);
}

.lp-post__content .has-blue-color {
    color: var(--lp-color-blue);
}

.lp-post__content .has-purple-color {
    color: var(--lp-color-purple);
}

.lp-post__content .has-gray-color {
    color: var(--lp-color-gray);
}

.lp-post__content .lp-toc {
    background: var(--xc-bg-alt);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    margin: 0 0 1.5em;
    padding: 1.1em 1.4em;
}

.lp-post__content .lp-toc ol {
    list-style: decimal;
    margin: 0.5em 0 0;
    padding-left: 1.25em;
}

.lp-post__content .lp-toc__level-2 { margin-left: 1em; }
.lp-post__content .lp-toc__level-3 { margin-left: 2em; }
.lp-post__content .lp-toc__level-4 { margin-left: 3em; }
.lp-post__content .lp-toc__level-5 { margin-left: 4em; }
.lp-post__content .lp-toc__level-6 { margin-left: 5em; }

.lp-post__content .lp-footnotes {
    border-top: 1px solid var(--xc-border);
    color: var(--xc-text-muted);
    font-size: 0.9em;
    margin-top: 2em;
    padding-top: 1em;
}

.lp-post__content .lp-footnote-backref {
    margin-left: 0.35em;
    text-decoration: none;
}

/* get_the_tags()/the_tags() rendered as a pill list below a single
   post's own content. Reuses .lp-widget__tag-cloud-item's nth-child(6n)
   color-cycling technique (--xc-tag-1..6, defined above with their own
   dark-mode values) without sharing its class — distinct component,
   same palette. */
.lp-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
}

.lp-post__tags-item a {
    background: var(--xc-bg-alt);
    border: 1px solid var(--xc-border);
    border-radius: 999px;
    color: var(--xc-text-mid);
    display: inline-block;
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.lp-post__tags-item:nth-child(6n+1) a { background: color-mix(in srgb, var(--xc-tag-1) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-1) 30%, transparent); color: var(--xc-tag-1); }
.lp-post__tags-item:nth-child(6n+2) a { background: color-mix(in srgb, var(--xc-tag-2) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-2) 30%, transparent); color: var(--xc-tag-2); }
.lp-post__tags-item:nth-child(6n+3) a { background: color-mix(in srgb, var(--xc-tag-3) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-3) 30%, transparent); color: var(--xc-tag-3); }
.lp-post__tags-item:nth-child(6n+4) a { background: color-mix(in srgb, var(--xc-tag-4) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-4) 30%, transparent); color: var(--xc-tag-4); }
.lp-post__tags-item:nth-child(6n+5) a { background: color-mix(in srgb, var(--xc-tag-5) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-5) 30%, transparent); color: var(--xc-tag-5); }
.lp-post__tags-item:nth-child(6n)   a { background: color-mix(in srgb, var(--xc-tag-6) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-6) 30%, transparent); color: var(--xc-tag-6); }

.lp-post__tags-item:nth-child(6n+1) a:hover { background: color-mix(in srgb, var(--xc-tag-1) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-1); }
.lp-post__tags-item:nth-child(6n+2) a:hover { background: color-mix(in srgb, var(--xc-tag-2) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-2); }
.lp-post__tags-item:nth-child(6n+3) a:hover { background: color-mix(in srgb, var(--xc-tag-3) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-3); }
.lp-post__tags-item:nth-child(6n+4) a:hover { background: color-mix(in srgb, var(--xc-tag-4) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-4); }
.lp-post__tags-item:nth-child(6n+5) a:hover { background: color-mix(in srgb, var(--xc-tag-5) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-5); }
.lp-post__tags-item:nth-child(6n)   a:hover { background: color-mix(in srgb, var(--xc-tag-6) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-6); }

/* the_related_posts(), rendered under a single post's own article,
   before comments. Cards mirror .lp-post-list__item's own treatment so
   a related post reads as a small version of the same story card used
   on the homepage/archives. */
.lp-related-posts {
    border-top: 1px solid var(--xc-border);
    margin: 2.5rem 0 0;
    padding-top: 1.75rem;
}

.lp-related-posts__title {
    font-family: var(--xc-font-display);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 1rem;
}

.lp-related-posts__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-related-posts__item {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    flex: 1 1 160px;
    max-width: 200px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lp-related-posts__item:hover {
    border-color: var(--xc-border-med);
    box-shadow: 0 12px 28px rgba(42, 33, 20, 0.1);
}

.lp-related-posts__thumbnail {
    display: block;
}

.lp-related-posts__thumbnail img {
    display: block;
    height: 120px;
    object-fit: cover;
    width: 100%;
}

.lp-related-posts__link {
    color: var(--xc-text-mid);
    display: block;
    font-family: var(--xc-font-ui);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem;
    text-decoration: none;
}

.lp-related-posts__link:hover,
.lp-related-posts__link:focus {
    color: var(--lp-accent);
}

/* =========================================================
   Post list (homepage & archives) — story-card style
   ========================================================= */

.lp-post-list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

/* Full-width, above-the-title featured image — the image sits flush
   against the card's own top edge/radius (padding moved off the item
   itself and onto .lp-post-list__body instead), so the banner reads as
   part of the card rather than an inset thumbnail. */
.lp-post-list__item {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.lp-post-list__item:hover {
    border-color: var(--xc-border-med);
    box-shadow: 0 12px 28px rgba(42, 33, 20, 0.1);
}

.lp-post-list__thumbnail {
    display: block;
    width: 100%;
}

.lp-post-list__thumbnail img {
    display: block;
    height: 320px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 720px) {
    .lp-post-list__thumbnail img {
        height: 200px;
    }
}

.lp-post-list__body {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
}

.lp-post-list__title {
    font-family: var(--xc-font-display);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 0.3rem;
}

.lp-post-list__title a {
    color: var(--xc-text);
    text-decoration: none;
}

.lp-post-list__title a:hover,
.lp-post-list__title a:focus {
    color: var(--xc-warm);
}

.lp-post-list__excerpt {
    color: var(--xc-text-mid);
    margin: 0 0 0.85rem;
}

.lp-post-list__content {
    margin: 0 0 0.85rem;
}

.lp-post-list__more {
    color: var(--xc-warm);
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.lp-post-list__more::after {
    content: " \2192";
}

.lp-post-list__more:hover,
.lp-post-list__more:focus {
    color: var(--xc-bronze-deep);
}

/* =========================================================
   Search results
   ========================================================= */

.lp-search-results {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.lp-search-results__item {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
}

.lp-search-results__thumbnail {
    flex-shrink: 0;
}

.lp-search-results__thumbnail img {
    border: 1px solid var(--lp-border);
    border-radius: 6px;
    display: block;
    height: 120px;
    object-fit: cover;
    width: 120px;
}

.lp-search-results__body {
    flex: 1;
    min-width: 0;
}

.lp-search-results__type {
    color: var(--xc-warm);
    font-family: var(--xc-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin: 0 0 0.3rem;
    text-transform: uppercase;
}

.lp-search-results__title {
    font-family: var(--xc-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 0.35rem;
}

.lp-search-results__title a {
    color: var(--xc-text);
    text-decoration: none;
}

.lp-search-results__title a:hover,
.lp-search-results__title a:focus {
    color: var(--xc-warm);
}

.lp-search-results__meta {
    color: var(--xc-text-muted);
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    margin: 0 0 0.5rem;
}

.lp-search-results__excerpt {
    color: var(--xc-text-mid);
    margin: 0;
}

.lp-search-highlight {
    background: var(--xc-warm-light);
    border-radius: 3px;
    color: var(--xc-bronze-deep);
    padding: 0 0.15em;
}

/* =========================================================
   Pagination
   ========================================================= */

.lp-pagination {
    margin-top: 2.5rem;
}

.lp-pagination__list {
    display: flex;
    flex-wrap: wrap;
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-pagination__item a,
.lp-pagination__item span {
    border: 1px solid var(--xc-border);
    border-radius: 999px;
    color: var(--xc-text);
    display: inline-block;
    min-width: 2.25rem;
    padding: 0.4rem 0.7rem;
    text-align: center;
    text-decoration: none;
}

.lp-pagination__item a:hover,
.lp-pagination__item a:focus {
    border-color: var(--xc-warm);
    color: var(--xc-warm);
}

.lp-pagination__item.is-current span {
    background: var(--xc-accent-grad-light);
    border-color: transparent;
    color: #fff;
}

.lp-pagination__item--nav a,
.lp-pagination__item--nav span {
    font-weight: 700;
}

.lp-pagination__item--nav.is-disabled span {
    color: var(--xc-border);
    cursor: not-allowed;
}

.lp-pagination__item--ellipsis span {
    border: none;
    color: var(--xc-border);
    min-width: 1.5rem;
    padding: 0.4rem 0.2rem;
}

/* =========================================================
   Sidebar & widgets
   ========================================================= */

.lp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lp-widget {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: 12px;
    overflow: hidden;
}

/* LP-123: the optional Welcome Message, either below the header banner (a
   full-width band) or inside .lp-sidebar (styled like a .lp-widget so it
   matches the surrounding cards there). */
.lp-welcome-message {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--xc-warm-light) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--xc-warm) 40%, transparent);
    border-radius: 12px;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--xc-warm) 12%, transparent);
    color: var(--xc-text);
    font-size: 16pt;
    margin: 1.5rem auto;
    max-width: var(--lp-max-width);
    padding: 1.25rem 1.5rem;
    -webkit-backdrop-filter: blur(10px);
}

.lp-sidebar .lp-welcome-message {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: 12px;
    margin: 0;
    max-width: none;
    padding: 1.25rem 1.4rem;
}

/*
 * A full-bleed title bar (background tint + bottom border), distinct from
 * the card body beneath it. .lp-widget itself carries no padding — each
 * possible widget body element (.lp-widget__content, .lp-widget__list,
 * .lp-widget__nav-menu, .lp-widget__tag-cloud, .lp-widget__social-links,
 * the Search widget's .lp-search-form) gets its own matching padding
 * below instead of one shared `.lp-widget > *` rule, since that selector's
 * specificity would outrank — and silently break — each of those
 * elements' own `padding: 0`/flex layout rules.
 */
.lp-widget__title {
    align-items: center;
    background: var(--xc-bg-alt);
    border-bottom: 1px solid var(--xc-border);
    color: var(--xc-text);
    display: flex;
    font-family: var(--xc-font-display);
    font-size: 1rem;
    font-weight: 600;
    gap: 0.6rem;
    margin: 0;
    padding: 0.9rem 1.4rem;
}

.lp-widget__title::before {
    background: var(--xc-grad);
    border-radius: 50%;
    content: "";
    display: inline-block;
    flex-shrink: 0;
    height: 8px;
    width: 8px;
}

.lp-widget__content {
    color: var(--xc-text-mid);
    font-size: 0.95rem;
    padding: 1.1rem 1.4rem;
}

/*
 * Text/HTML widget WYSIWYG output (LP-112), plus the Custom HTML widget's
 * hand-authored markup — both render into this same .lp-widget__content
 * wrapper. Mirrors the default theme's own addition for the same ticket,
 * using xena-theme's own tokens.
 */
.lp-widget__content :is(h1, h2, h3, h4, h5, h6) {
    color: var(--xc-text);
    line-height: 1.3;
    margin: 1em 0 0.4em;
}

.lp-widget__content :is(h1, h2, h3, h4, h5, h6):first-child {
    margin-top: 0;
}

.lp-widget__content p {
    margin: 0 0 0.85em;
}

.lp-widget__content p:last-child {
    margin-bottom: 0;
}

.lp-widget__content a {
    color: var(--xc-warm);
    text-decoration-color: var(--xc-border-med);
}

.lp-widget__content a:hover {
    color: var(--xc-bronze-deep);
}

.lp-widget__content :is(ul, ol) {
    margin: 0 0 0.85em;
    padding-left: 1.35em;
}

.lp-widget__content blockquote {
    border-left: 3px solid var(--xc-warm);
    font-style: italic;
    margin: 0 0 0.85em;
    padding: 0.2em 0.85em;
}

.lp-widget__content hr {
    border: none;
    border-top: 1px solid var(--xc-border);
    margin: 1.25em 0;
}

.lp-widget__content .has-text-align-left {
    text-align: left;
}

.lp-widget__content .has-text-align-center {
    text-align: center;
}

.lp-widget__content .has-text-align-right {
    text-align: right;
}

.lp-widget__content .has-text-align-justify {
    text-align: justify;
}

.lp-widget__list {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.4rem;
}

.lp-widget__list a {
    color: var(--xc-text-mid);
    text-decoration: none;
}

.lp-widget__list a:hover {
    color: var(--xc-warm);
}

.lp-widget__count {
    color: var(--xc-text-muted);
    font-size: 0.85em;
}

/* Nested Pages/Categories widget output (LP-104) */

.lp-widget__list--nested {
    border-left: 1px solid var(--xc-border);
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.lp-widget__nav-menu {
    display: flex;
    flex-direction: column;
    font-size: 0.92rem;
    gap: 0.6rem;
    list-style: none;
    margin: 0;
    padding: 1.1rem 1.4rem;
}

.lp-widget__tag-cloud {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1.1rem 1.4rem;
}

.lp-widget__tag-cloud-item {
    background: var(--xc-bg-alt);
    border: 1px solid var(--xc-border);
    border-radius: 999px;
    color: var(--xc-text-mid);
    display: inline-block;
    font-family: var(--xc-font-ui);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/*
 * Cycles each tag through a fixed 6-color palette (--xc-tag-1..6, defined
 * alongside the other tokens above, with their own dark-mode values) so a
 * tag cloud reads as lively rather than a wall of identical pills — tags
 * carry no semantic category to key off, so the cycle is purely
 * positional. color-mix() blends each hue into the card background for
 * the resting pill so it still sits quietly against the sidebar; hover
 * deepens the mix and swaps to a solid border in the same hue.
 */
.lp-widget__tag-cloud-item:nth-child(6n+1) { background: color-mix(in srgb, var(--xc-tag-1) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-1) 30%, transparent); color: var(--xc-tag-1); }
.lp-widget__tag-cloud-item:nth-child(6n+2) { background: color-mix(in srgb, var(--xc-tag-2) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-2) 30%, transparent); color: var(--xc-tag-2); }
.lp-widget__tag-cloud-item:nth-child(6n+3) { background: color-mix(in srgb, var(--xc-tag-3) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-3) 30%, transparent); color: var(--xc-tag-3); }
.lp-widget__tag-cloud-item:nth-child(6n+4) { background: color-mix(in srgb, var(--xc-tag-4) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-4) 30%, transparent); color: var(--xc-tag-4); }
.lp-widget__tag-cloud-item:nth-child(6n+5) { background: color-mix(in srgb, var(--xc-tag-5) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-5) 30%, transparent); color: var(--xc-tag-5); }
.lp-widget__tag-cloud-item:nth-child(6n)   { background: color-mix(in srgb, var(--xc-tag-6) 14%, var(--xc-bg-card)); border-color: color-mix(in srgb, var(--xc-tag-6) 30%, transparent); color: var(--xc-tag-6); }

.lp-widget__tag-cloud-item:nth-child(6n+1):hover { background: color-mix(in srgb, var(--xc-tag-1) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-1); }
.lp-widget__tag-cloud-item:nth-child(6n+2):hover { background: color-mix(in srgb, var(--xc-tag-2) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-2); }
.lp-widget__tag-cloud-item:nth-child(6n+3):hover { background: color-mix(in srgb, var(--xc-tag-3) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-3); }
.lp-widget__tag-cloud-item:nth-child(6n+4):hover { background: color-mix(in srgb, var(--xc-tag-4) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-4); }
.lp-widget__tag-cloud-item:nth-child(6n+5):hover { background: color-mix(in srgb, var(--xc-tag-5) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-5); }
.lp-widget__tag-cloud-item:nth-child(6n):hover   { background: color-mix(in srgb, var(--xc-tag-6) 26%, var(--xc-bg-card)); border-color: var(--xc-tag-6); }

.lp-widget__stats {
    font-family: var(--xc-font-ui);
}

.lp-widget__stats li {
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
}

.lp-widget__stats-label {
    color: var(--xc-text);
}

.lp-widget__social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.1rem 1.4rem;
}

.lp-widget__social-link {
    align-items: center;
    border: 1px solid var(--xc-border);
    border-radius: 50%;
    color: var(--xc-text);
    display: inline-flex;
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    height: 2.25rem;
    justify-content: center;
    text-decoration: none;
    width: 2.25rem;
}

.lp-widget__social-link:hover,
.lp-widget__social-link:focus {
    border-color: var(--xc-warm);
    color: var(--xc-warm);
}

.lp-widget__social-link--text {
    border-radius: var(--lp-radius);
    height: auto;
    padding: 0.35rem 0.75rem;
    width: auto;
}

/* The Search widget's form is a direct .lp-widget child too — same body
   padding as every other widget type's content, scoped so the header's
   own .lp-search-form (a flex-row sibling of the nav, not a widget) is
   unaffected. */
.lp-widget > .lp-search-form {
    display: block;
    padding: 1.1rem 1.4rem;
}

.lp-visually-hidden {
    height: 1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* =========================================================
   Buttons
   ========================================================= */

.lp-button {
    background: var(--xc-grad);
    border-radius: 999px;
    color: #fff;
    display: inline-block;
    font-family: var(--xc-font-ui);
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.6rem 1.4rem;
    text-decoration: none;
}

.lp-button:hover,
.lp-button:focus {
    color: #fff;
    opacity: 0.9;
}

.lp-button--primary {
    background: var(--xc-grad);
    color: #fff;
}

.lp-button--secondary {
    background: none;
    border: 1px solid var(--xc-border);
    color: var(--xc-text);
}

.lp-button--secondary:hover,
.lp-button--secondary:focus {
    border-color: var(--xc-warm);
    color: var(--xc-warm);
    opacity: 1;
}

/* =========================================================
   Forms & alerts
   ========================================================= */

.lp-field {
    margin: 0 0 1rem;
}

.lp-field label {
    color: var(--xc-text);
    display: block;
    font-family: var(--xc-font-ui);
    font-size: 0.82rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.lp-field input,
.lp-field textarea {
    background: var(--xc-bg);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    color: var(--xc-text);
    font-family: inherit;
    font-size: 1rem;
    padding: 0.6rem 0.8rem;
    width: 100%;
}

.lp-field input:focus,
.lp-field textarea:focus {
    outline: 2px solid var(--xc-warm);
    outline-offset: 1px;
}

.lp-field__hint {
    color: var(--xc-text-muted);
    font-size: 0.8rem;
    font-weight: normal;
}

.lp-field--checkbox {
    align-items: center;
    color: var(--xc-text-mid);
    display: flex;
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    gap: 0.5rem;
    margin: 0 0 1rem;
}

.lp-alert {
    border-radius: var(--lp-radius);
    font-size: 0.9rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1.1rem;
}

.lp-alert--success {
    background: var(--lp-success-bg);
    border: 1px solid var(--lp-success-border);
    color: var(--lp-success-text);
}

.lp-alert--error {
    background: var(--lp-error-bg);
    border: 1px solid var(--lp-error-border);
    color: var(--lp-error-text);
}

/* =========================================================
   Comments
   ========================================================= */

.lp-comments {
    border-top: 1px solid var(--xc-border);
    margin-top: 3.5rem;
    max-width: 68ch;
    padding-top: 2.5rem;
}

.lp-comments__title {
    font-family: var(--xc-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0 0 1.5rem;
}

.lp-comments__form-title {
    font-family: var(--xc-font-display);
    font-size: 1.2rem;
    font-weight: 600;
}

.lp-comments__closed {
    color: var(--xc-text-muted);
    font-style: italic;
}

.lp-comment-list {
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}

/*
 * Replies indent under their parent via a left border "spine" (already
 * the case before this) — now also connects visually to the parent
 * card's own left edge, so a reply thread reads as branching off the
 * comment it replies to rather than merely being pushed rightward.
 */
.lp-comment-list--replies {
    border-left: 2px solid var(--xc-border-med);
    margin: 1rem 0 0 1.5rem;
    padding-left: 1.25rem;
}

.lp-comment {
    margin-bottom: 1.25rem;
}

.lp-comment-list--replies > .lp-comment:last-child {
    margin-bottom: 0.25rem;
}

/*
 * Each comment gets its own card — background/border/radius matching
 * .lp-post-list__item's own lighter treatment. display: flow-root
 * gives the card a new block formatting context so its border/
 * background properly wraps the floated avatar inside, instead of the
 * card collapsing around it.
 */
.lp-comment__body {
    background: var(--xc-bg-card);
    border: 1px solid var(--xc-border);
    border-radius: var(--lp-radius);
    display: flow-root;
    padding: 1.25rem 1.5rem;
}

/* Nested replies get a slightly quieter card — the tinted surface plus
   thinner border reads as "one level in" without needing extra markup. */
.lp-comment-list--replies .lp-comment__body {
    background: var(--xc-bg-alt);
    padding: 1rem 1.25rem;
}

.lp-comment__avatar {
    border-radius: 50%;
    float: left;
    height: 48px;
    margin: 0 0.9rem 0.5rem 0;
    width: 48px;
}

.lp-comment__meta {
    align-items: baseline;
    display: flex;
    flex-wrap: wrap;
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    gap: 0.75rem;
    margin: 0 0 0.35rem;
}

.lp-comment__author {
    color: var(--xc-text);
    font-weight: 700;
}

.lp-comment__author a {
    color: var(--xc-text);
    text-decoration: none;
}

.lp-comment__date {
    color: var(--xc-text-muted);
}

.lp-comment__content {
    color: var(--xc-text-mid);
    overflow-wrap: break-word;
}

.lp-comment__reply {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.lp-comment__reply summary {
    color: var(--xc-warm);
    cursor: pointer;
    font-family: var(--xc-font-ui);
    font-size: 0.85rem;
    font-weight: 700;
}

.lp-comment__reply .lp-comment-form {
    margin-top: 0.75rem;
}

.lp-comment-form {
    max-width: 60ch;
}

.lp-comment-form__honeypot {
    left: -9999px;
    position: absolute;
}

.lp-comments__pagination {
    align-items: center;
    display: flex;
    font-family: var(--xc-font-ui);
    font-size: 0.9rem;
    gap: 1rem;
    justify-content: space-between;
    margin: 1.5rem 0;
}

.lp-comments__pagination-status {
    color: var(--xc-text-muted);
}

/* =========================================================
   Footer
   ========================================================= */

.lp-site-footer {
    background: var(--xc-bg-card);
    border-top: 1px solid var(--xc-border);
    margin-top: 3rem;
    position: relative;
}

.lp-site-footer__gradient {
    background: var(--xc-grad);
    height: 3px;
}

/* Widgets reuse .lp-widget/.lp-widget__* unchanged. */
.lp-site-footer__widgets {
    border-top: 1px solid var(--xc-border);
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin: 0 auto;
    max-width: var(--lp-max-width);
    padding: 2rem 1.5rem 0;
    text-align: left;
}

.lp-site-footer__widgets .lp-widget {
    flex: 1 1 220px;
}

.lp-site-footer__bottom {
    padding: 1.2rem 1.5rem;
    text-align: center;
}

.lp-site-footer__nav .lp-nav-menu {
    justify-content: center;
    margin: 0 0 0.75rem;
}

.lp-site-footer__powered-by {
    color: var(--xc-text-muted);
    font-family: var(--xc-font-ui);
    font-size: 0.72rem;
    margin: 0;
}

.lp-site-footer__powered-by a {
    color: inherit;
}

.lp-site-footer__privacy-link {
    color: var(--xc-text-muted);
    display: inline-block;
    font-family: var(--xc-font-ui);
    font-size: 0.72rem;
    margin-top: 0.4rem;
}

.lp-site-footer__privacy-link:hover,
.lp-site-footer__privacy-link:focus {
    color: var(--lp-accent);
}

/* LP-123: additional per-theme footer content, distinct from the
   fixed "Powered by Lumora Press" line above it. */
.lp-footer-html {
    border-top: 1px solid var(--xc-border);
    color: var(--xc-text-muted);
    font-family: var(--xc-font-ui);
    font-size: 0.72rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
}

/* =========================================================
   Media Viewer & Lightbox
   ========================================================= */

.lp-pswp-caption {
    background: rgba(0, 0, 0, 0.5);
    bottom: 0;
    color: #fff;
    font-size: 0.9rem;
    left: 0;
    padding: 0.75rem 1rem;
    pointer-events: none !important;
    position: absolute;
    right: 0;
    text-align: center;
}

.lp-pswp-meta {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 0.8rem;
    left: 0;
    padding: 0.5rem 1rem;
    pointer-events: none !important;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

.lp-pswp-slideshow--playing {
    color: var(--xc-warm);
}

/* =========================================================
   Embeds
   ========================================================= */

.lp-embed {
    margin: 1.75em 0;
}

.lp-embed__frame {
    background: var(--xc-bg-alt);
    border-radius: var(--lp-radius);
    overflow: hidden;
    position: relative;
}

.lp-embed--youtube .lp-embed__frame,
.lp-embed--vimeo .lp-embed__frame,
.lp-embed--codepen .lp-embed__frame {
    aspect-ratio: 16 / 9;
}

.lp-embed--soundcloud .lp-embed__frame {
    height: 166px;
}

.lp-embed--spotify .lp-embed__frame {
    height: 352px;
}

.lp-embed__frame iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

/* =========================================================
   Downloads List (LPP-007)
   ========================================================= */
/*
 * Rendered by the WordPress Importer plugin's DownloadsShortcode
 * (LPP-004/LPP-007) in place of a migrated [sdm_show_dl_from_category]
 * shortcode — one list per Folder, mixing real Media Manager downloads
 * with external-link Redirects. Same `--lp-*` tokens this theme already
 * maps to its own `--xc-*` palette above.
 */
.lp-downloads-list {
    background: var(--lp-bg-alt);
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    margin: 1.5em 0;
    padding: 1em 1.25em;
}

.lp-downloads-list__title {
    font-size: 1.1em;
    margin: 0 0 0.75em;
}

.lp-downloads-list__items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-downloads-list__item {
    border-top: 1px solid var(--lp-border);
    /* Contains a floated alignleft/alignright description image below
       so it doesn't bleed into the next item's border-top separator. */
    overflow: hidden;
    padding: 0.5em 0;
}

.lp-downloads-list__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.lp-downloads-list__link {
    font-weight: 700;
}

.lp-downloads-list__size {
    color: var(--lp-text-muted);
    font-size: 0.9em;
}

.lp-downloads-list__description {
    color: var(--lp-text-muted);
    font-size: 0.95em;
    margin-top: 0.25em;
}

.lp-downloads-list__description p {
    margin: 0 0 0.75em;
}

.lp-downloads-list__description p:last-child {
    margin-bottom: 0;
}

.lp-downloads-list__description img {
    height: auto;
    max-width: 100%;
}

.lp-downloads-list__description img.alignleft {
    float: left;
    margin: 0.25em 1.25em 1em 0;
}

.lp-downloads-list__description img.alignright {
    float: right;
    margin: 0.25em 0 1em 1.25em;
}

.lp-downloads-list__description img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================================
   Folder Gallery (LP-122)
   ========================================================= */
/*
 * Rendered by FolderGalleryShortcode for the [lumora_folder_gallery]
 * shortcode — inserted via the content editor's "Insert Folder" button
 * as a row of thumbnails for every image in a chosen Media folder.
 */
.lp-folder-gallery {
    margin: 1.5em 0;
}

.lp-folder-gallery__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    list-style: none;
    margin: 0;
    padding: 0;
}

.lp-folder-gallery__item {
    display: block;
}

.lp-folder-gallery__link,
.lp-folder-gallery__thumb {
    display: block;
}

/*
 * "img.lp-folder-gallery__thumb", not just ".lp-folder-gallery__thumb"
 * — this shortcode's output usually lands inside .lp-post__content,
 * whose own "img { max-width: 100%; height: auto; }" rule (above) is
 * equally specific to a single-class selector and would otherwise win
 * on source order alone, collapsing the fixed thumbnail crop back to
 * each image's natural aspect ratio. Matching its own "class + element"
 * specificity tier is what makes source order (this rule comes later)
 * decide it instead — the same mechanism .lp-downloads-list__description
 * img's own alignment rules above already rely on.
 */
img.lp-folder-gallery__thumb {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    height: 150px;
    object-fit: cover;
    width: 150px;
}

/* =========================================================
   Media Player (LP-150)
   ========================================================= */
/*
 * Rendered by MediaPlayerShortcode for the [lumora_audio]/[lumora_video]
 * shortcodes. Added additively alongside the default theme's own version
 * (CLAUDE.md's Custom Theme Rules) — same `--lp-*` tokens this theme
 * already uses throughout.
 */
.lp-audio-player,
.lp-video-player {
    margin: 1.5em 0;
}

.lp-audio-player .plyr,
.lp-video-player .plyr {
    --plyr-color-main: var(--lp-accent);
}

.lp-audio-player__audio {
    width: 100%;
}

.lp-video-player__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--lp-radius);
}

.lp-audio-player__caption,
.lp-video-player__caption {
    margin-top: 0.5em;
    font-size: 0.9rem;
    color: var(--lp-text-muted);
    text-align: center;
}

/* =========================================================
   Lumora Gallery Shortcodes (LPP-015)
   ========================================================= */
/*
 * Rendered by the optional Lumora Gallery Shortcodes plugin's
 * [lumora_gallery_album]/[lumora_gallery_newest] shortcodes — a row of
 * thumbnails pulled from a separately-installed Lumora Gallery site,
 * plus a "View album"/"View gallery" link back to it. Structured like
 * .lp-folder-gallery above (same item-grid + optional title shape).
 */
.lp-gallery-shortcode {
    margin: 1.5em 0;
}

.lp-gallery-shortcode__title {
    margin: 0 0 0.5em;
}

.lp-gallery-shortcode__items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    list-style: none;
    margin: 0 0 0.75em;
    padding: 0;
}

.lp-gallery-shortcode__item {
    display: block;
}

.lp-gallery-shortcode__link,
.lp-gallery-shortcode__thumb {
    display: block;
}

/* "img.lp-gallery-shortcode__thumb" — see img.lp-folder-gallery__thumb's
   own comment above for why the element selector is needed to win
   against .lp-post__content img's lower-specificity max-width rule. */
img.lp-gallery-shortcode__thumb {
    border: 1px solid var(--lp-border);
    border-radius: var(--lp-radius);
    object-fit: cover;
}

.lp-gallery-shortcode__view-link {
    color: var(--lp-accent);
    display: inline-block;
}

.lp-gallery-shortcode__view-link:hover {
    color: var(--lp-accent-hover);
}

@media (max-width: 720px) {
    img.lp-folder-gallery__thumb {
        height: 100px;
        width: 100px;
    }

    img.lp-gallery-shortcode__thumb {
        height: 100px;
        width: 100px;
    }
}

/* LP-119 — the reply chain's own margin/padding/card-padding/avatar
   size compound at each nesting level (comment_list()'s own $maxDepth
   cap still applies here — 5 levels by default); on a narrow phone that
   eats most of the content column by the deepest allowed level, so all
   of them shrink here. */
@media (max-width: 480px) {
    .lp-comment-list--replies {
        margin-left: 0.75rem;
        padding-left: 0.65rem;
    }

    .lp-comment__body {
        padding: 1rem 1.1rem;
    }

    .lp-comment-list--replies .lp-comment__body {
        padding: 0.85rem 1rem;
    }

    .lp-comment__avatar {
        height: 32px;
        margin: 0 0.6rem 0.35rem 0;
        width: 32px;
    }
}

/* =========================================================
   Contact Forms (LPP-003)
   ========================================================= */
/*
 * Rendered by the Contact Forms plugin's [contact_form] shortcode.
 * Added additively alongside the default theme's own version
 * (CLAUDE.md's Custom Theme Rules) — reuses this theme's existing
 * .lp-field/.lp-alert/.lp-button/.lp-comment-form__honeypot rules above
 * wherever they already fit; only what's genuinely new (the form
 * wrapper, a checkbox-field layout, and the CAPTCHA widget's spacing)
 * gets its own rule here, using the same `--lp-*` tokens throughout.
 */
.lp-contact-form {
    margin: 1.5em 0;
    max-width: 60ch;
}

.lp-contact-form__honeypot {
    left: -9999px;
    position: absolute;
}

.lp-contact-form__required {
    color: var(--lp-error-border);
}

.lp-contact-form__captcha {
    margin: 1em 0;
}

.lp-field--checkbox {
    align-items: center;
    display: flex;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: normal;
    gap: 0.5em;
}

.lp-field--checkbox input[type="checkbox"] {
    width: auto;
}