/*
 * Temperature Zero — Interior Pages (tz-interior) — v1.0
 *
 * Interior-page scaffold built on the site-wide tz-system layer (palette,
 * tokens, keyframes, header, footer all come from tz-system.1.0.css). Enqueued
 * for every page EXCEPT the front page. Scoped under body.tz-interior so it can
 * never touch the homepage.
 *
 * Gives static pages, archives, single posts, search and 404 the dashboard
 * design language: a scaled module-header page hero (shimmer kicker + large
 * title + lede + hairline), an ambient multi-hue glow, and aligned reading
 * prose — matching the homepage modules.
 *
 * Versioned filename bypasses CF ?ver= stripping. Rollback = dequeue tz-interior.
 */

/* ════════════════════════════════════════════════════════════
   1. Ambient glow — soft multi-hue field behind interior pages
   (the homepage equivalent of .tz-landing::before, gentler).
   ════════════════════════════════════════════════════════════ */
body.tz-interior { position: relative; background: var(--tz-bg); }
body.tz-interior::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(720px 420px at 8% 0%,  rgba(74,240,200,0.06),  transparent 60%),
        radial-gradient(680px 440px at 94% 3%, rgba(171,81,231,0.06),  transparent 62%),
        radial-gradient(900px 720px at 72% 58%, rgba(85,171,234,0.035), transparent 66%);
    animation: tz-ambiance 14s ease-in-out infinite alternate;
}
body.tz-interior .tz-header,
body.tz-interior .site-main,
body.tz-interior .tz-footer { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
    body.tz-interior::before { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   2. Page hero — scaled dashboard module header
   (kicker shimmer + large title + lede + bottom hairline rule).
   Reuses the .tz-page-header / .tz-page-title markup classes so the
   existing page-id overrides (3716 LO, 3097 About) still resolve.
   ════════════════════════════════════════════════════════════ */
.tz-interior .tz-page-header {
    position: relative;
    padding: 3.6rem 0 0;
    border-bottom: none;          /* hairline moves onto the inner wrap */
    overflow: visible;
}
.tz-interior .tz-page-header .tz-wrap--narrow {
    position: relative;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--tz-border);
}
/* faint radial bloom behind the title, anchored left */
.tz-interior .tz-page-header .tz-wrap--narrow::before {
    content: '';
    position: absolute;
    left: 0; top: -1.5rem;
    width: 340px; height: 220px;
    background: radial-gradient(closest-side, rgba(74,240,200,0.10), transparent 75%);
    pointer-events: none;
    z-index: -1;
}

.tz-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.9rem;
}
.tz-page-kicker__mark {
    width: 7px; height: 7px;
    transform: rotate(45deg);
    border-radius: 1px;
    background: var(--tz-c-cyan);
    box-shadow: 0 0 8px var(--tz-c-cyan);
    flex: 0 0 auto;
}
/* the text span also carries .tz-module-kicker → animated shimmer from tz-system */
.tz-page-kicker__text {
    font-family: var(--tz-mono);
    font-size: 11px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.tz-interior .tz-page-title {
    font-family: var(--tz-sans);
    font-size: clamp(2rem, 4.4vw, 3rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--tz-heading);
    margin: 0;
}
.tz-page-lede {
    font-family: var(--tz-sans);
    color: var(--tz-muted);
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 0.95rem 0 0;
    max-width: 56ch;
}

/* ════════════════════════════════════════════════════════════
   3. Body / prose rhythm
   ════════════════════════════════════════════════════════════ */
.tz-interior .tz-page-content {
    padding-top: 2.5rem;
    padding-bottom: 4.5rem;
}
/* lift the cyan accent on the first strong-lede paragraph if present */
.tz-interior .entry-content > p:first-of-type { color: var(--tz-text); }

/* ════════════════════════════════════════════════════════════
   4. Reusable interior panel + module header (sectioned pages)
   For pages that group content into cards (Topics, Support, etc.).
   ════════════════════════════════════════════════════════════ */
.tz-panel {
    background: var(--tzr-card);
    border: 1px solid var(--tz-border);
    border-radius: var(--tzr-radius);
    padding: 1.5rem 1.6rem;
    transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.tz-panel:hover {
    border-color: rgba(74,240,200,0.28);
    box-shadow: 0 0 26px -8px rgba(74,240,200,0.4);
}
.tz-panel__title {
    font-family: var(--tz-sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--tz-heading);
    margin: 0 0 0.5rem;
}
.tz-panel__body { color: var(--tz-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* ════════════════════════════════════════════════════════════
   5. Archive / search headers — bring eyebrow + title into the
   module-header look (shimmer eyebrow, hairline, glow).
   ════════════════════════════════════════════════════════════ */
.tz-interior .tz-archive-header {
    position: relative;
    border-bottom: 1px solid var(--tz-border);
    overflow: visible;
}
.tz-interior .tz-archive-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 420px; height: 240px;
    background: radial-gradient(closest-side, rgba(74,240,200,0.09), transparent 75%);
    pointer-events: none;
    z-index: 0;
}
/* shimmer the eyebrow to match module kickers */
.tz-interior .tz-eyebrow {
    background: var(--tzr-grad);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: tz-shimmer 7s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
    .tz-interior .tz-eyebrow { animation: none; }
}

/* ════════════════════════════════════════════════════════════
   6. Single-post hero — align category pills + meta with palette
   (single.php hero is image-driven; this is a light touch only).
   ════════════════════════════════════════════════════════════ */
.tz-interior .tz-pill {
    border-color: rgba(74,240,200,0.3);
}
.tz-interior .tz-pill:hover {
    border-color: var(--tz-c-cyan);
    color: var(--tz-c-cyan);
}