/*
Theme Name: Academy 2026
Theme URI: https://journalism.academy/
Author: CMR Nepal Journalism Academy
Author URI: https://journalism.academy/
Description: A ground-up, fully independent modern theme for CMR Nepal Journalism Academy - an editorial, masthead-inspired design system (hairline rules, serif display type, flat bordered cards), accessible (WCAG 2.2 AA) and performance-first, with Customizer support for colors, typography, logo and homepage content, full Gutenberg support, and dedicated single-post/single-page templates.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cmr-academy
Tags: education, one-column, two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-patterns, accessibility-ready, dark-mode

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
*/

/* =======================================================================
   1. CSS RESET / BASE
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

img, picture, svg {
	max-width: 100%;
	display: block;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

/* =======================================================================
   2. DESIGN TOKENS
   ========================================================================= */

:root {
	/* Brand - masthead red, drawn from the academy's existing identity */
	--color-brand: #a32620;
	--color-brand-dark: #7a1b17;
	--color-brand-light: #d8564d;
	--color-gold: #8a661f; /* secondary accent, used sparingly (tags, dividers); tuned for 4.5:1+ on paper */

	/* Neutrals / surfaces (light mode default) - warm paper, not stark white */
	--color-ink: #1c1a17;
	--color-ink-soft: #5b564f;
	--color-bg: #f7f5f1;
	--color-surface: #ffffff;
	--color-surface-alt: #efece5;
	--color-border: #e2ded6;
	--color-on-brand: #ffffff;

	--color-focus: #2563eb;

	/* Typography - editorial serif display paired with a technical sans body
	   and a monospace face for labels/data (self-hosted, see functions.php) */
	--font-display: 'Newsreader', Georgia, 'Iowan Old Style', serif;
	--font-body: 'IBM Plex Sans', 'Segoe UI', sans-serif;
	--font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

	--fs-hero: clamp(2.3rem, 4vw + 1rem, 3.75rem);
	--fs-h1: clamp(1.9rem, 2.6vw + 1rem, 2.75rem);
	--fs-h2: clamp(1.5rem, 1.8vw + 1rem, 2.1rem);
	--fs-h3: clamp(1.2rem, 1vw + 1rem, 1.4rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--lh-tight: 1.15;
	--lh-normal: 1.7;

	/* Spacing scale */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 9rem;

	/* Shape / elevation - hairline-rule editorial aesthetic: small radii,
	   restrained shadows. --radius-pill is reserved for genuinely circular
	   controls (icon buttons, dots), never for rectangular buttons/cards. */
	--radius-sm: 3px;
	--radius-md: 6px;
	--radius-lg: 10px;
	--radius-pill: 999px;
	--shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.05), 0 1px 1px rgba(28, 26, 23, 0.04);
	--shadow-md: 0 6px 20px rgba(28, 26, 23, 0.08);
	--shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.12);
	--ease: cubic-bezier(0.16, 1, 0.3, 1);
	--speed-fast: 200ms;
	--speed-med: 400ms;
	--speed-slow: 700ms;

	--container: 1180px;
	/* Sized to comfortably fit the fixed 150px-tall logo (.site-branding
	   img) plus its white card's padding - see main.css. Doesn't shrink on
	   scroll like a typical sticky header would, since the logo itself is
	   a fixed height rather than one that scales down. */
	--header-h: 182px;
	--header-h-scrolled: 182px;

	/* Fixed-dark "ink panel" tokens - deliberately do NOT flip with light/
	   dark mode. Used for bands designed to always read as a dark strip
	   (utility bar, stats band, footer, CTA pattern) regardless of the
	   site's current color scheme, so they never invert to a pale panel
	   with mismatched text when --color-ink flips in dark mode. */
	--color-inverse-bg: #1c1a17;
	--color-inverse-text: #f2ede3;
	--color-inverse-text-soft: rgba(242, 237, 227, 0.7);
	--color-inverse-border: rgba(255, 255, 255, 0.12);
	--color-inverse-accent: #d8564d;
}

/* Dark mode: system preference, then explicit override via data-theme
   attribute set by assets/js/dark-mode.js (persisted in localStorage). */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--color-ink: #f1ece2;
		--color-ink-soft: #b8ada0;
		--color-bg: #16130f;
		--color-surface: #211d18;
		--color-surface-alt: #1c1812;
		--color-border: rgba(255, 255, 255, 0.14);
		--color-brand: #df6058;
		--color-brand-dark: #ea8079;
		--color-gold: #d3ad63;
	}
}

:root[data-theme="dark"] {
	--color-ink: #f1ece2;
	--color-ink-soft: #b8ada0;
	--color-bg: #16130f;
	--color-surface: #211d18;
	--color-surface-alt: #1c1812;
	--color-border: rgba(255, 255, 255, 0.14);
	--color-brand: #df6058;
	--color-brand-dark: #ea8079;
	--color-gold: #d3ad63;
}

body {
	background: var(--color-bg);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-normal);
	transition: background var(--speed-med) var(--ease), color var(--speed-med) var(--ease);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: var(--lh-tight);
	color: var(--color-ink);
}

/* Visible keyboard focus, hidden for mouse users (focus-visible). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -1000px;
	left: 0;
	z-index: 100000;
	padding: 16px 24px;
	background: var(--color-ink);
	color: var(--color-bg);
	font-weight: 700;
	border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
	top: 0;
}