/*
Theme Name: TDN Magazine
Theme URI: https://trevordecker.com
Author: Trevor Decker News
Author URI: https://trevordecker.com
Description: Custom magazine theme for Trevor Decker News — entertainment coverage of TV, film, music and pop culture. v3.0 "Aurora" brings a modernized design system with dark mode, fluid typography, refined motion, and accessibility upgrades.
Version: 3.0.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: tdn-magazine
*/

/* ═════════════════════════════════════════════════════════════════
   TDN MAGAZINE v3.0 — "AURORA"
   Modernized design system with dark mode, fluid typography,
   and semantic color tokens.

   THEMING MODEL
   ─────────────
   Brand tokens (--tdn-red, --tdn-gold, etc.) stay constant across
   light and dark modes. Semantic tokens (--color-bg, --color-fg,
   --color-surface, etc.) are what every component should consume.
   Components that reference semantic tokens get dark mode for free.
   ═════════════════════════════════════════════════════════════════ */

:root {
    /* ── Brand (immutable across modes) ───────────────────── */
    --tdn-red:            #e51a3e;
    --tdn-red-dark:       #b0102d;
    --tdn-red-hover:      #c9163a;
    --tdn-red-glow:       rgba(229, 26, 62, .18);
    --tdn-red-soft:       rgba(229, 26, 62, .08);

    --tdn-gold:           #c8922a;
    --tdn-gold-lt:        #e8b84b;
    --tdn-gold-glow:      rgba(200, 146, 42, .20);

    /* Category accent colors */
    --cat-tv:             #0066cc;
    --cat-film:           #7b2d8b;
    --cat-music:          #00875a;
    --cat-celebrity:      #c8922a;

    /* ── Absolute neutrals (used by semantic tokens below) ── */
    --tdn-black:          #0c0c0c;
    --tdn-black-soft:     #181818;
    --tdn-white:          #ffffff;

    /* ── Semantic tokens — LIGHT MODE (default) ───────────── */
    --color-bg:           #ffffff;
    --color-bg-alt:       #fafafa;
    --color-bg-soft:      #f5f5f7;
    --color-surface:      #ffffff;
    --color-surface-alt:  #f8f8fa;
    --color-surface-hover:#f1f1f4;
    --color-surface-elevated: #ffffff;

    --color-fg:           #0c0c0c;
    --color-fg-soft:      #2d2d2d;
    --color-fg-muted:     #5a5a5a;
    --color-fg-subtle:    #999999;

    --color-border:       #e2e2e6;
    --color-border-soft:  #ebebef;
    --color-border-strong:#0c0c0c;

    --color-link:         #0c0c0c;
    --color-link-hover:   var(--tdn-red);

    --color-accent:       var(--tdn-red);
    --color-accent-hover: var(--tdn-red-dark);

    /* Backwards-compat aliases — older CSS still references these */
    --tdn-muted:          var(--color-fg-muted);
    --tdn-muted-lt:       var(--color-fg-subtle);
    --tdn-bg-soft:        var(--color-bg-soft);
    --tdn-bg-warm:        var(--color-bg-alt);
    --tdn-border:         var(--color-border);
    --tdn-border-lt:      var(--color-border-soft);

    /* ── Typography ───────────────────────────────────────── */
    --font-display:       'DM Serif Display', 'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-headline:      'Barlow Condensed', 'Arial Narrow', sans-serif;
    --font-ui:            'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono:          'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Fluid type scale — clamps to (min, preferred, max).
       Preferred uses vw so text scales smoothly across viewports. */
    --fs-xs:              0.75rem;
    --fs-sm:              0.875rem;
    --fs-base:            1rem;
    --fs-md:              clamp(1rem, .95rem + .3vw, 1.125rem);
    --fs-lg:              clamp(1.125rem, 1rem + .5vw, 1.25rem);
    --fs-xl:              clamp(1.25rem, 1.1rem + .8vw, 1.5rem);
    --fs-2xl:             clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
    --fs-3xl:             clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);
    --fs-4xl:             clamp(2.25rem, 1.75rem + 2.5vw, 3.25rem);
    --fs-5xl:             clamp(2.75rem, 2rem + 3.5vw, 4.25rem);

    --lh-tight:           1.15;
    --lh-snug:            1.3;
    --lh-normal:          1.5;
    --lh-relaxed:         1.65;
    --lh-loose:           1.8;

    /* ── Spacing scale (4px-based) ────────────────────────── */
    --space-1:            4px;
    --space-2:            8px;
    --space-3:            12px;
    --space-4:            16px;
    --space-5:            20px;
    --space-6:            24px;
    --space-8:            32px;
    --space-10:           40px;
    --space-12:           48px;
    --space-16:           64px;
    --space-20:           80px;

    /* ── Layout ───────────────────────────────────────────── */
    --container:          1200px;
    --container-narrow:   760px;
    --gutter:             24px;

    /* ── Radii (slightly softer in v3) ─────────────────────── */
    --radius:             4px;
    --radius-md:          8px;
    --radius-lg:          12px;
    --radius-xl:          16px;
    --radius-full:        999px;

    /* ── Header ───────────────────────────────────────────── */
    --header-height:      152px;
    --header-mobile:      64px;

    /* ── Elevation / shadows ──────────────────────────────── */
    --shadow-sm:          0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:          0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
    --shadow-lg:          0 10px 40px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
    --shadow-xl:          0 20px 60px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.10);
    --shadow-card:        0 2px 8px rgba(0,0,0,.05), 0 1px 3px rgba(0,0,0,.03);
    --shadow-card-hover:  0 12px 32px rgba(0,0,0,.14), 0 4px 12px rgba(0,0,0,.06);
    --shadow-focus:       0 0 0 3px rgba(229, 26, 62, .35);

    /* ── Motion ───────────────────────────────────────────── */
    --ease-out:           cubic-bezier(.22, 1, .36, 1);
    --ease-in-out:        cubic-bezier(.4, 0, .2, 1);
    --ease-spring:        cubic-bezier(.34, 1.56, .64, 1);
    --dur-fast:           120ms;
    --dur-normal:         220ms;
    --dur-slow:           420ms;

    --transition:         all var(--dur-normal) var(--ease-in-out);
    --transition-slow:    all var(--dur-slow) var(--ease-in-out);

    /* ── Hero / cinematic ────────────────────────────────── */
    --gradient-cinematic: linear-gradient(
        to top,
        rgba(0,0,0,.97) 0%,
        rgba(0,0,0,.78) 40%,
        rgba(0,0,0,.28) 75%,
        transparent 100%
    );
    --gradient-brand:     linear-gradient(135deg, var(--tdn-red) 0%, #ff3a5e 100%);
    --gradient-gold:      linear-gradient(135deg, var(--tdn-gold) 0%, var(--tdn-gold-lt) 100%);
    --gradient-aurora:    linear-gradient(135deg, var(--tdn-red) 0%, var(--tdn-gold) 100%);
}

/* ═════════════════════════════════════════════════════════════════
   DARK MODE
   Activated by [data-theme="dark"] on <html> (manual toggle) OR by
   OS preference when no explicit choice has been saved. The
   [data-theme="light"] attribute forces light mode even on dark OS.
   ═════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --color-bg:           #0a0a0b;
        --color-bg-alt:       #101012;
        --color-bg-soft:      #141416;
        --color-surface:      #141416;
        --color-surface-alt:  #1a1a1d;
        --color-surface-hover:#212125;
        --color-surface-elevated: #1e1e21;

        --color-fg:           #f2f2f4;
        --color-fg-soft:      #d8d8dc;
        --color-fg-muted:     #a2a2a8;
        --color-fg-subtle:    #6e6e74;

        --color-border:       #2a2a2f;
        --color-border-soft:  #1f1f23;
        --color-border-strong:#f2f2f4;

        --color-link:         #f2f2f4;
        --color-link-hover:   #ff5e7a;

        --color-accent:       #ff3a5e;
        --color-accent-hover: #ff5e7a;

        --tdn-muted:          var(--color-fg-muted);
        --tdn-muted-lt:       var(--color-fg-subtle);
        --tdn-bg-soft:        var(--color-bg-soft);
        --tdn-bg-warm:        var(--color-bg-alt);
        --tdn-border:         var(--color-border);
        --tdn-border-lt:      var(--color-border-soft);

        /* Same pragmatic override as in the manual [data-theme=dark] rule —
           remap brand black to light foreground so legacy color: var(--tdn-black)
           rules read correctly in dark mode. */
        --tdn-black:          #f2f2f4;
        --tdn-black-soft:     #d8d8dc;

        --shadow-sm:          0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
        --shadow-md:          0 4px 12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
        --shadow-lg:          0 10px 40px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
        --shadow-card:        0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.25);
        --shadow-card-hover:  0 12px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35);
    }
}

:root[data-theme="dark"] {
    --color-bg:           #0a0a0b;
    --color-bg-alt:       #101012;
    --color-bg-soft:      #141416;
    --color-surface:      #141416;
    --color-surface-alt:  #1a1a1d;
    --color-surface-hover:#212125;
    --color-surface-elevated: #1e1e21;

    --color-fg:           #f2f2f4;
    --color-fg-soft:      #d8d8dc;
    --color-fg-muted:     #a2a2a8;
    --color-fg-subtle:    #6e6e74;

    --color-border:       #2a2a2f;
    --color-border-soft:  #1f1f23;
    --color-border-strong:#f2f2f4;

    --color-link:         #f2f2f4;
    --color-link-hover:   #ff5e7a;

    --color-accent:       #ff3a5e;
    --color-accent-hover: #ff5e7a;

    --tdn-muted:          var(--color-fg-muted);
    --tdn-muted-lt:       var(--color-fg-subtle);
    --tdn-bg-soft:        var(--color-bg-soft);
    --tdn-bg-warm:        var(--color-bg-alt);
    --tdn-border:         var(--color-border);
    --tdn-border-lt:      var(--color-border-soft);

    /* Pragmatic override: many existing component files use --tdn-black
       as a generic foreground color (for headlines, body, meta). In
       dark mode we remap it to the light foreground so those rules
       read correctly without rewriting every file. Rules that need
       genuine black (e.g. brand stamp backgrounds) should use #0c0c0c
       directly — we don't reference --tdn-black for those. */
    --tdn-black:          #f2f2f4;
    --tdn-black-soft:     #d8d8dc;

    --shadow-sm:          0 1px 3px rgba(0,0,0,.4), 0 1px 2px rgba(0,0,0,.3);
    --shadow-md:          0 4px 12px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg:          0 10px 40px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.35);
    --shadow-card:        0 2px 8px rgba(0,0,0,.4), 0 1px 3px rgba(0,0,0,.25);
    --shadow-card-hover:  0 12px 32px rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.35);

    color-scheme: dark;
}

:root[data-theme="light"] {
    color-scheme: light;
}

/* ═════════════════════════════════════════════════════════════════
   RESET & BASE
   ═════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

body {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
    line-height: var(--lh-relaxed);
    color: var(--color-fg);
    background: var(--color-bg);
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--dur-normal) var(--ease-in-out),
                color var(--dur-normal) var(--ease-in-out);
}

@media (max-width: 768px) {
    body { padding-top: var(--header-mobile); }
}

/* Admin bar offset */
.admin-bar body { padding-top: calc(var(--header-height) + 32px); }
@media screen and (max-width: 782px) {
    .admin-bar body { padding-top: calc(var(--header-mobile) + 46px); }
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-in-out);
}
a:hover { color: var(--color-link-hover); }

ul, ol { list-style: none; }

button {
    font-family: var(--font-ui);
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

::selection {
    background: var(--tdn-red);
    color: var(--tdn-white);
}

/* ═════════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═════════════════════════════════════════════════════════════════ */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Skip link — hidden until focused */
.tdn-skip-link {
    position: absolute;
    top: -40px;
    left: 8px;
    background: var(--tdn-red);
    color: var(--tdn-white);
    padding: 10px 16px;
    font-weight: 700;
    font-size: var(--fs-sm);
    border-radius: var(--radius-md);
    z-index: 100000;
    transition: top var(--dur-normal) var(--ease-out);
}
.tdn-skip-link:focus {
    top: 8px;
    color: var(--tdn-white);
    outline: 2px solid var(--tdn-white);
    outline-offset: 2px;
}

/* Unified focus-visible ring — every focusable gets one.
   Components can override by setting their own :focus-visible rule. */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═════════════════════════════════════════════════════════════════
   CONTAINER
   ═════════════════════════════════════════════════════════════════ */

.tdn-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--gutter);
}
.tdn-container--narrow {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* ═════════════════════════════════════════════════════════════════
   BADGES / CATEGORY CHIPS
   ═════════════════════════════════════════════════════════════════ */

.tdn-badge {
    display: inline-block;
    background: var(--tdn-red);
    color: var(--tdn-white);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 9px 3px;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background var(--dur-fast), transform var(--dur-fast);
    text-decoration: none;
    line-height: 1.5;
}
.tdn-badge:hover {
    background: var(--tdn-red-dark);
    color: var(--tdn-white);
    transform: translateY(-1px);
}
@media (max-width: 768px) {
    .tdn-badge { font-size: 12px; padding: 5px 10px 4px; letter-spacing: 1px; }
}

/* ═════════════════════════════════════════════════════════════════
   SECTION HEADERS
   ═════════════════════════════════════════════════════════════════ */

.tdn-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-border-strong);
    position: relative;
}
.tdn-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 56px;
    height: 3px;
    background: var(--tdn-red);
    border-radius: 1px;
}
.tdn-section-title {
    font-family: var(--font-headline);
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--color-fg);
    white-space: nowrap;
    flex-shrink: 0;
    text-transform: uppercase;
}
.tdn-section-rule {
    flex: 1;
    height: 1px;
    background: var(--color-border);
}
.tdn-section-more {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--color-accent);
    white-space: nowrap;
    transition: color var(--dur-fast), transform var(--dur-fast);
    display: flex;
    align-items: center;
    gap: 4px;
}
.tdn-section-more::after {
    content: '→';
    font-size: .8rem;
    transition: transform var(--dur-fast);
}
.tdn-section-more:hover {
    color: var(--color-accent-hover);
}
.tdn-section-more:hover::after {
    transform: translateX(3px);
}

/* ═════════════════════════════════════════════════════════════════
   META / BYLINE
   ═════════════════════════════════════════════════════════════════ */

.tdn-meta {
    font-size: .8rem;
    color: var(--color-fg-muted);
    font-weight: 500;
}
.tdn-byline {
    font-size: .8rem;
    color: var(--color-fg-muted);
}
.tdn-author {
    color: var(--color-accent);
    font-weight: 600;
}
.tdn-author:hover { color: var(--color-accent-hover); }

/* ═════════════════════════════════════════════════════════════════
   PAGINATION
   ═════════════════════════════════════════════════════════════════ */

.tdn-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 48px 0;
    flex-wrap: wrap;
}
.tdn-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-fg);
    background: var(--color-surface);
    transition: all var(--dur-fast);
}
.tdn-pagination .page-numbers:hover,
.tdn-pagination .page-numbers.current {
    background: var(--tdn-red);
    border-color: var(--tdn-red);
    color: var(--tdn-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.tdn-pagination .page-numbers.dots {
    border-color: transparent;
    background: transparent;
    pointer-events: none;
}

/* ═════════════════════════════════════════════════════════════════
   UTILITY
   ═════════════════════════════════════════════════════════════════ */

.tdn-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tdn-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ═════════════════════════════════════════════════════════════════
   FEATURED STORY PILL (sticky hero)
   ═════════════════════════════════════════════════════════════════ */

.hp-hero__featured-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--gradient-gold);
    color: #fff;
    font-family: var(--font-headline);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 10px 3px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    box-shadow: 0 2px 8px var(--tdn-gold-glow);
    white-space: nowrap;
}
.hp-hero__featured-label-icon {
    font-size: 8px;
    line-height: 1;
    opacity: .9;
}
@media (max-width: 768px) {
    .hp-hero__featured-label {
        font-size: 12px;
        padding: 5px 11px 4px;
        letter-spacing: 1.2px;
    }
    .hp-hero__featured-label-icon { font-size: 9px; }
}

/* ═════════════════════════════════════════════════════════════════
   SCROLL REVEAL — subtle fade-in as elements enter viewport
   Applied via IntersectionObserver in main.js. Respects reduced-motion.
   ═════════════════════════════════════════════════════════════════ */

.tdn-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
    will-change: opacity, transform;
}
.tdn-reveal.is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .tdn-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}