/**
 * CVG typography — one system, every page.
 *
 * THE PROBLEM THIS FIXES
 *
 * Text looked different from page to page because the CSS asked for fonts that were never loaded.
 * Six rules specified `Poppins, sans-serif` and two specified `Fira Code` — neither font is served
 * anywhere on the site, so every one of them silently fell back to whatever generic sans-serif or
 * monospace the visitor's device happened to pick. Meanwhile the three fonts that ARE loaded
 * (Space Grotesk, Inter, JetBrains Mono) were only used in a couple of places.
 *
 * So: three tokens, defined once, used everywhere. If a font needs changing later it changes here
 * and nowhere else.
 *
 * Scale matched to learnwithhasan.com, the reference: Space Grotesk for display, Inter for body at
 * 18px / 1.78 line-height, JetBrains Mono for code.
 */

:root {
	--cvg-font-display: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cvg-font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cvg-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', 'Menlo', monospace;

	/* Reading scale. 18px body is the reference's prose-lg; 1.78 line-height is what makes a long
	   troubleshooting guide readable rather than dense. */
	--cvg-text-base: 1.125rem;     /* 18px */
	--cvg-leading:   1.7777778;
	--cvg-text-sm:   0.9375rem;    /* 15px — meta, captions */
	--cvg-text-xs:   0.8125rem;    /* 13px — chips, badges */

	/* Heading scale, deliberately tight: a fix guide is scanned, and headings are landmarks rather
	   than decoration. Tight leading on large type stops h1/h2 looking airy and unanchored. */
	--cvg-h1: clamp( 1.875rem, 1.4rem + 2.1vw, 2.75rem );
	--cvg-h2: clamp( 1.5rem,   1.24rem + 1.1vw, 1.875rem );
	--cvg-h3: clamp( 1.25rem,  1.14rem + 0.5vw, 1.4rem );
	--cvg-leading-tight: 1.2;

	--cvg-ink:       #0D2451;      /* headings + body, the existing brand navy */
	--cvg-ink-muted: #5a6478;
	--cvg-accent:    #f37262;      /* the existing hover coral */
}

/* ── Body ─────────────────────────────────────────────────────────────────────
 *
 * Scoped to the content areas rather than a blanket `* { font-family }`, so plugin UIs (Yoast's
 * admin bar items, Contact Form 7, TablePress) keep their own styling instead of being fought.
 */
body,
.nv-content-wrap,
.entry-content,
.cvg-error-directory,
p, li, dd, dt, blockquote, figcaption, label, input, textarea, select, button {
	font-family: var(--cvg-font-body);
}

body {
	font-size: var(--cvg-text-base);
	line-height: var(--cvg-leading);
	color: var(--cvg-ink);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ── Headings ───────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6,
.cvg-site-name,
.error-card-title,
.error-section__title,
.error-dir-header h1,
.error-filter-block__title {
	font-family: var(--cvg-font-display);
	color: var(--cvg-ink);
	line-height: var(--cvg-leading-tight);
	letter-spacing: -0.015em;   /* Space Grotesk sets a little wide at display sizes. */
}

h1 { font-size: var(--cvg-h1); font-weight: 700; }
h2 { font-size: var(--cvg-h2); font-weight: 700; }
h3 { font-size: var(--cvg-h3); font-weight: 600; }
h4 { font-size: 1.125rem;      font-weight: 600; }

/* ── Code ─────────────────────────────────────────────────────────────────────
 *
 * Replaces the `Fira Code, Courier New, monospace` stack, whose first font was never loaded — so
 * every code block in every guide was actually rendering in Courier New.
 */
code, kbd, samp, pre,
.error-card-code code,
.error-title-code {
	font-family: var(--cvg-font-mono);
	font-variant-ligatures: none;   /* Ligatures turn != and => into glyphs you cannot copy-read. */
}

code {
	font-size: 0.875em;
}

pre {
	font-size: 0.9375rem;
	line-height: 1.6;
	overflow-x: auto;
	/* A long shell command must never widen the page on a phone. */
	max-width: 100%;
}

pre code {
	font-size: inherit;
}

/* ── Nav ──────────────────────────────────────────────────────────────────────
 *
 * The nav asked for Poppins, which is not loaded — so the menu was the most visibly "different"
 * text on the site, in a system fallback while everything near it used Inter.
 */
.cvg-nav .cvg-menu > li > a,
.cvg-nav .cvg-menu .sub-menu li a,
.cvg-btn {
	font-family: var(--cvg-font-body);
}

.cvg-nav .cvg-menu > li > a {
	font-weight: 600;
}

/* ── Small text ───────────────────────────────────────────────────────────────── */

.error-card-meta,
.error-card-excerpt,
.error-dir-subtitle,
.error-filter-block__note,
.cvg-search__meta {
	font-family: var(--cvg-font-body);
}

.error-card-meta,
.cvg-search__meta { font-size: var(--cvg-text-xs); }
.error-card-excerpt,
.error-filter-block__note { font-size: var(--cvg-text-sm); }