/*
Theme Name: The National Review
Theme URI: https://thenational-review.com
Author: The National Review
Author URI: https://thenational-review.com
Description: A fast, accessible, JS-free news theme for The National Review. Classic editorial layout with a responsive grid, dark mode via prefers-color-scheme, and AMP-friendly markup.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: national-review
Tags: news, blog, editorial, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
   Design tokens
   All visual decisions flow from these. Change here, changes everywhere.
   ------------------------------------------------------------------------- */
:root {
	/* Brand */
	--tnr-black:       #1a1a1a;
	--tnr-green:       #1a7a3a;
	--tnr-red:         #c8102e;
	--tnr-yellow:      #f5c518;

	/* Surfaces (light) */
	--tnr-bg:          #fafaf7;
	--tnr-surface:     #ffffff;
	--tnr-surface-alt: #f2f1ec;
	--tnr-border:      #e2e1db;

	/* Text */
	--tnr-text:        #1a1a1a;
	--tnr-text-muted:  #5a5a55;
	--tnr-text-faint:  #8a8a85;

	/* Accent used for links, kicker rules, focus */
	--tnr-accent:      var(--tnr-green);
	--tnr-accent-hover: #14602e;

	/* Typography */
	--font-headline: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--font-body:     'Source Serif 4', Georgia, serif;
	--font-ui:       'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

	/* Layout */
	--wrap:          1200px;
	--wrap-narrow:   720px;
	--gutter:        clamp(1rem, 2.5vw, 2rem);
	--radius:        2px;

	/* Rhythm */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2rem;
	--space-6: 3rem;
	--space-7: 4rem;

	/* Chrome */
	--rule-thick: 3px;
	--rule-thin:  1px;
}

/* Dark mode — respects the OS setting, no JS needed */
@media (prefers-color-scheme: dark) {
	:root {
		--tnr-bg:          #121212;
		--tnr-surface:     #1b1b1b;
		--tnr-surface-alt: #232323;
		--tnr-border:      #2e2e2e;

		--tnr-text:        #ececec;
		--tnr-text-muted:  #a8a8a3;
		--tnr-text-faint:  #7a7a75;

		--tnr-accent:      #3ec46d;
		--tnr-accent-hover: #5ad183;
	}
}

/* -------------------------------------------------------------------------
   Minimal reset — full styles live in assets/css/main.css
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--tnr-bg);
	color: var(--tnr-text);
	font-family: var(--font-body);
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--tnr-accent); text-decoration: none; }
a:hover { color: var(--tnr-accent-hover); }

/* Screen-reader-only utility (used by skip-link, icon labels) */
.sr-only,
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 9999;
	width: auto; height: auto;
	padding: var(--space-2) var(--space-3);
	clip: auto;
	background: var(--tnr-black);
	color: #fff;
	border-radius: var(--radius);
}