/* ============================================================
   NYT-Inspired Design System — Color Tokens & Base Styles
   ============================================================ */

/* Light Theme (default — NYT is light-first) */
:root,
:root[data-theme="light"],
html[data-theme="light"] {
    /* Core surfaces */
    --nyt-bg: #ffffff;
    --nyt-surface: #f7f7f7;

    /* Text */
    --nyt-text-primary: #121212;
    --nyt-text-secondary: #5a5a5a;
    --nyt-text-muted: #999999;

    /* Borders */
    --nyt-border: #e2e2e2;
    --nyt-border-strong: #ccc;

    /* Accents */
    --nyt-accent: #567b95;
    --nyt-accent-hover: #326891;
    --nyt-live: #d0021b;

    /* Hover */
    --nyt-hover-bg: #f0f0f0;

    /* Legacy compatibility — OVERRIDE parent theme vars */
    --background-color: #ffffff;
    --surface-color: #f7f7f7;
    --text-primary: #121212;
    --text-secondary: #5a5a5a;
    --text-muted: #999999;
    --border-color: #e2e2e2;
    --primary-color: #567b95;
    --primary-hover: #326891;
    --color-primary: #567b95;

    /* Override parent theme News Axis variables */
    --light-body: #ffffff;
    --dark-body: #ffffff;
    --primary-500: #567b95;
    --primary-600: #326891;
    --color-primary-rgb: 86, 123, 149;
}

/* Dark Theme */
:root[data-theme="dark"],
html[data-theme="dark"] {
    --nyt-bg: #121212;
    --nyt-surface: #1a1a1a;

    --nyt-text-primary: #e8e8e8;
    --nyt-text-secondary: #999999;
    --nyt-text-muted: #666666;

    --nyt-border: #333333;
    --nyt-border-strong: #555;

    --nyt-accent: #7eb8da;
    --nyt-accent-hover: #a8d4f0;
    --nyt-live: #ff6b6b;

    --nyt-hover-bg: #1e1e1e;

    --background-color: #121212;
    --surface-color: #1a1a1a;
    --text-primary: #e8e8e8;
    --text-secondary: #999999;
    --text-muted: #666666;
    --border-color: #333333;
    --primary-color: #7eb8da;
    --primary-hover: #a8d4f0;
    --color-primary: #7eb8da;

    --light-body: #121212;
    --dark-body: #121212;
}

/* ---- Base Styles — Force override parent theme ---- */
body,
html body,
html[data-theme="light"] body,
.site {
    background-color: var(--nyt-bg) !important;
    color: var(--nyt-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

html[data-theme="dark"] body,
html[data-theme="dark"] .site {
    background-color: #121212 !important;
    color: #e8e8e8 !important;
}

/* Content Area — Force override */
.site-main,
#primary,
#content,
.content-area {
    background-color: var(--nyt-bg) !important;
}

html[data-theme="dark"] .site-main,
html[data-theme="dark"] #primary,
html[data-theme="dark"] #content,
html[data-theme="dark"] .content-area,
html[data-theme="dark"] .container,
html[data-theme="dark"] .row,
html[data-theme="dark"] .col,
html[data-theme="dark"] .col-md-8,
html[data-theme="dark"] .col-lg-8,
html[data-theme="dark"] .col-md-4,
html[data-theme="dark"] .col-lg-4,
html[data-theme="dark"] section,
html[data-theme="dark"] main,
html[data-theme="dark"] aside,
html[data-theme="dark"] #secondary,
html[data-theme="dark"] .widget-area,
html[data-theme="dark"] .site-content,
html[data-theme="dark"] .pxm-style1,
html[data-theme="dark"] .main-nav1,
html[data-theme="dark"] .mt-5 {
    background-color: #121212 !important;
}

/* Override parent theme's dark mode on page wrapper */
.site,
#page,
#page.site {
    background-color: var(--nyt-bg) !important;
}

html[data-theme="dark"] #page,
html[data-theme="dark"] #page.site {
    background-color: #121212 !important;
}

/* ---- Override parent theme error/404 page styles ---- */
.error-404 .page-title,
.error404 .page-title,
.not-found .page-title {
    color: var(--nyt-text-primary) !important;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-size: 2rem;
    font-weight: 700;
}

.error-404 .page-content p,
.error404 .page-content p,
.not-found .page-content p {
    color: var(--nyt-text-secondary) !important;
}

/* Post Titles — editorial serif style */
.entry-title,
.entry-title a,
h1.entry-title,
h2.entry-title,
h3.entry-title,
.post-title,
.post-title a,
article .entry-title,
article .entry-title a,
.site-main .entry-title,
.site-main .entry-title a {
    color: var(--nyt-text-primary) !important;
    font-family: 'Playfair Display', 'nyt-cheltenham', Georgia, 'Times New Roman', serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.25;
    transition: color 0.2s ease;
}

.entry-title a:hover,
.post-title a:hover,
article .entry-title a:hover,
.site-main .entry-title a:hover {
    color: var(--nyt-accent) !important;
    text-decoration: none;
}

/* Navigation links */
.nav-links a {
    color: var(--nyt-text-primary);
}

.nav-links a:hover {
    color: var(--nyt-accent);
}

/* Widgets */
.widget {
    background-color: var(--nyt-bg) !important;
    border: 1px solid var(--nyt-border);
}

.widget-title {
    color: var(--nyt-text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Sidebar */
.widget-area,
#secondary {
    background-color: var(--nyt-bg) !important;
}

/* Comments */
.comment-body {
    background-color: var(--nyt-bg) !important;
    border: 1px solid var(--nyt-border);
}

.comment-metadata a {
    color: var(--nyt-text-secondary);
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea,
select {
    background-color: var(--nyt-bg) !important;
    border: 1px solid var(--nyt-border) !important;
    color: var(--nyt-text-primary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    border-color: var(--nyt-accent) !important;
    outline: none;
    box-shadow: 0 0 0 1px var(--nyt-accent);
}

/* Buttons — override parent theme */
.search-submit,
button[type="submit"],
input[type="submit"] {
    background-color: var(--nyt-text-primary) !important;
    color: var(--nyt-bg) !important;
    border: none !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 8px 20px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.search-submit:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    opacity: 0.85;
}

/* Tables */
table {
    background-color: var(--nyt-bg);
    border: 1px solid var(--nyt-border);
}

th, td {
    border: 1px solid var(--nyt-border);
}

/* Blockquotes — NYT editorial style */
blockquote {
    background-color: transparent !important;
    border-left: 3px solid var(--nyt-text-primary);
    padding: 0 0 0 20px;
    margin: 24px 0;
    font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--nyt-text-secondary);
}

/* Code Blocks */
pre, code {
    background-color: var(--nyt-surface) !important;
    border: 1px solid var(--nyt-border);
}

/* Horizontal Rule */
hr {
    border: none;
    border-top: 1px solid var(--nyt-border);
}

/* Links — NYT uses blue links */
a {
    color: var(--nyt-accent);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--nyt-accent-hover);
}

/* Selection */
::selection {
    background-color: var(--nyt-accent);
    color: white;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--nyt-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--nyt-border);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--nyt-text-muted);
}

/* ---- Override ALL parent theme dark mode leaks ---- */
/* The parent theme (news-axis) applies dark bg via various selectors */
[data-theme="light"] .site-main,
[data-theme="light"] .content-area,
[data-theme="light"] .widget-area,
[data-theme="light"] body,
[data-theme="light"] .site {
    background-color: #ffffff !important;
    color: #121212 !important;
}

/* Parent theme sidebar overrides */
[data-theme="light"] .widget,
[data-theme="light"] aside {
    background-color: #ffffff !important;
}

/* Parent theme may use these classes for dark backgrounds */
.pxm-style1,
.main-nav1,
.pxms1-ticker,
.news-axis-ticker {
    background-color: var(--nyt-bg) !important;
}

/* Ensure the entire page respects light/dark properly */
html[data-theme="light"],
html[data-theme="light"] body {
    background: #ffffff !important;
    color: #121212 !important;
}

html[data-theme="dark"],
html[data-theme="dark"] body {
    background: #121212 !important;
    color: #e8e8e8 !important;
}

/* ---- Override parent theme page title/banner (black box fix) ---- */
.xpost-item,
.xpost-text,
.page-header,
.entry-header-wrapper,
.breadcrumb-area,
.page-title-area,
.page-title-wrap,
.page-banner,
.inner-banner,
.banner-area,
.news-axis-breadcrumb,
.breadcrumb-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.xpost-item *,
.page-header *,
.page-title-area * {
    color: var(--nyt-text-primary, #121212) !important;
    text-shadow: none !important;
}

/* Hide parent theme breadcrumbs on pages */
.breadcrumb,
.breadcrumbs,
nav.breadcrumb,
.news-axis-breadcrumb {
    display: none !important;
}

/* Override parent theme dark page title overlays */
.page-header::before,
.page-header::after,
.page-title-area::before,
.page-title-area::after,
.xpost-item::before,
.xpost-item::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

/* Dark mode versions */
[data-theme="dark"] .xpost-item *,
[data-theme="dark"] .page-header * {
    color: #e8e8e8 !important;
}