/*
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. Features homepage magazine layout, single post templates, category archives, lazy video loading, offline banner, and social icons. No layout plugins required.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 8.0
License: Proprietary
Text Domain: tdn-magazine
*/

/* ─── Design tokens ──────────────────────────────────────────────── */
:root {
    --tdn-red:        #e51a3e;
    --tdn-red-dark:   #b0102d;
    --tdn-red-hover:  #c9163a;
    --tdn-red-glow:   rgba(229,26,62,.18);
    --tdn-black:      #0f0f0f;
    --tdn-black-soft: #1a1a1a;
    --tdn-white:      #ffffff;
    --tdn-muted:      #5a5a5a;
    --tdn-muted-lt:   #999999;
    --tdn-bg-soft:    #f6f6f7;
    --tdn-bg-warm:    #fafafa;
    --tdn-border:     #e4e4e7;
    --tdn-border-lt:  #f0f0f2;

    --font-display:   'Playfair Display', 'Times New Roman', Georgia, serif;
    --font-ui:        'Inter', system-ui, -apple-system, sans-serif;

    --container:      1200px;
    --gutter:         24px;
    --radius:         3px;
    --radius-md:      6px;

    --header-height:  118px; /* 78px top + 40px nav */
    --header-mobile:  64px;

    --shadow-sm:      0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:      0 4px 12px rgba(0,0,0,.09), 0 2px 6px rgba(0,0,0,.05);
    --shadow-lg:      0 10px 40px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
    --shadow-card:    0 2px 8px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04);

    --transition:     all .18s cubic-bezier(.4,0,.2,1);
    --transition-slow:all .35s cubic-bezier(.4,0,.2,1);
}

/* ─── Reset & base ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.65;
    color: var(--tdn-black);
    background: var(--tdn-white);
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

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

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

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--tdn-red); }
ul, ol { list-style: none; }
button { font-family: var(--font-ui); cursor: pointer; }

/* ─── Screen reader only ─────────────────────────────────────────── */
.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;
}

/* ─── Container ──────────────────────────────────────────────────── */
.tdn-container {
    max-width: var(--container);
    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: 9.5px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 8px 2px;
    border-radius: 2px;
    white-space: nowrap;
    transition: background .15s;
    text-decoration: none;
    line-height: 1.5;
}
.tdn-badge:hover { background: var(--tdn-red-dark); color: var(--tdn-white); }

/* ─── Section headers ────────────────────────────────────────────── */
.tdn-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--tdn-black);
    position: relative;
}
.tdn-section-header::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 48px;
    height: 2px;
    background: var(--tdn-red);
}
.tdn-section-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tdn-black);
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: -.01em;
}
.tdn-section-rule {
    flex: 1;
    height: 1px;
    background: var(--tdn-border);
}
.tdn-section-more {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--tdn-red);
    white-space: nowrap;
    transition: color .15s;
    display: flex;
    align-items: center;
    gap: 4px;
}
.tdn-section-more::after {
    content: '→';
    font-size: .8rem;
}
.tdn-section-more:hover { color: var(--tdn-red-dark); }

/* ─── Meta / byline ──────────────────────────────────────────────── */
.tdn-meta {
    font-size: .8rem;
    color: var(--tdn-muted);
    font-weight: 500;
}
.tdn-byline {
    font-size: .8rem;
    color: var(--tdn-muted);
}
.tdn-author { color: var(--tdn-red); font-weight: 600; }
.tdn-author:hover { color: var(--tdn-red-dark); }

/* ─── 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: 38px;
    height: 38px;
    padding: 0 10px;
    border: 1.5px solid var(--tdn-border);
    border-radius: var(--radius);
    font-size: .875rem;
    font-weight: 600;
    color: var(--tdn-black);
    transition: all .15s;
}
.tdn-pagination .page-numbers:hover,
.tdn-pagination .page-numbers.current {
    background: var(--tdn-red);
    border-color: var(--tdn-red);
    color: var(--tdn-white);
}
.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;
}