/*
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.1.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-black:      #121212;
    --tdn-white:      #ffffff;
    --tdn-muted:      #666666;
    --tdn-muted-lt:   #999999;
    --tdn-bg-soft:    #f5f5f5;
    --tdn-border:     #e8e8e8;
    --tdn-border-lt:  #f0f0f0;

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

    --container:      1200px;
    --gutter:         24px;
    --radius:         4px;

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

    --shadow-sm:      0 1px 4px rgba(0,0,0,.06);
    --shadow-md:      0 4px 16px rgba(0,0,0,.10);
    --shadow-lg:      0 8px 32px rgba(0,0,0,.14);
}

/* ─── 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.6;
    color: var(--tdn-black);
    background: var(--tdn-white);
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
}

@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: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--radius);
    white-space: nowrap;
    transition: background .15s;
    text-decoration: none;
}
.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: 3px solid var(--tdn-black);
}
.tdn-section-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--tdn-black);
    white-space: nowrap;
    flex-shrink: 0;
}
.tdn-section-rule {
    flex: 1;
    height: 1px;
    background: var(--tdn-border);
}
.tdn-section-more {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--tdn-red);
    white-space: nowrap;
    transition: color .15s;
}
.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;
}