/* Toptenpick — the entire site chrome, replacing ~15 WordPress stylesheets.
 *
 * What this deliberately does NOT include, and why:
 *   dashicons.min.css      WordPress ADMIN icons. Never used by a reader.
 *   wp-block-library CSS   Gutenberg editor styles for blocks we don't emit.
 *   wp-emoji-release.js    Replaces emoji with images from s.w.org. Pointless
 *                          and a third-party request on every page load.
 *   theme JS               Menu toggles for a nav we no longer render.
 *
 * The articles themselves are NOT styled here. Every post carries its own
 * <style> block scoped to .entry-content, generated by enrich.render_html.
 * That is why this file can be small: it only has to style the shell.
 *
 * Two variables below are load-bearing. The article CSS references
 * --wp--preset--font-family--karla and --lora 40 times across the corpus; drop
 * them and 2,600 articles lose their typography. They are the only WordPress
 * presets the content actually depends on.
 */

:root {
	--wp--preset--font-family--karla: Karla, system-ui, -apple-system, "Segoe UI", sans-serif;
	--wp--preset--font-family--lora: Lora, Georgia, "Times New Roman", serif;

	--bg: #0B0F1A;
	--surface: #121729;
	--border: #262C42;
	--text: #ECEDF3;
	--muted: #A6ABC2;
	--brass: #D9AE66;

	/* Taken from the live theme, not invented: it set
	 *   --wp--style--global--content-size: 720px
	 *   --wp--style--global--wide-size:    1200px
	 * The article CSS declares no widths of its own — every .ttp-* element is
	 * width:100% of its container — so the container is the only thing deciding
	 * how an article reads. A single mid-width wrap gets both cases wrong at
	 * once: prose lines too long, tables narrower than they were designed for.
	 */
	--wide-page: 1600px;  /* curated full-width pages */
	--measure: 720px;
	--wide: 1200px;
	--wrap: 1200px;
}

@font-face {
	font-family: Karla; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/wp-content/themes/cm-blog/assets/fonts/karla/Karla-Regular.woff2) format("woff2");
}
@font-face {
	font-family: Karla; font-style: normal; font-weight: 600; font-display: swap;
	src: url(/wp-content/themes/cm-blog/assets/fonts/karla/Karla-SemiBold.woff2) format("woff2");
}
@font-face {
	font-family: Karla; font-style: normal; font-weight: 700; font-display: swap;
	src: url(/wp-content/themes/cm-blog/assets/fonts/karla/Karla-Bold.woff2) format("woff2");
}
@font-face {
	font-family: Lora; font-style: normal; font-weight: 400; font-display: swap;
	src: url(/wp-content/themes/cm-blog/assets/fonts/lora/Lora-Regular.woff2) format("woff2");
}
@font-face {
	font-family: Lora; font-style: normal; font-weight: 600; font-display: swap;
	src: url(/wp-content/themes/cm-blog/assets/fonts/lora/Lora-SemiBold.woff2) format("woff2");
}

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

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--wp--preset--font-family--karla);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---------------------------------------------------------------- header */

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	position: sticky; top: 0; z-index: 50;
}
.site-header .wrap {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px; padding-top: 14px; padding-bottom: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.brand img { width: 40px; height: 40px; display: block; }
.brand span { font-weight: 700; font-size: 1.15rem; letter-spacing: .2px; white-space: nowrap; }

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.site-nav a:hover { color: var(--text); }
.site-nav .cta {
	color: var(--bg); background: var(--brass); padding: 8px 16px;
	border-radius: 6px; font-weight: 600;
}
.site-nav .cta:hover { background: #E8C685; color: var(--bg); }

/* ---------------------------------------------------------------- content */

main { padding: 34px 0 56px; }
main .wrap { max-width: var(--wide); }

/* Replicates the theme's is-layout-constrained behaviour. */
.entry-content > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }

/* Curated grid pages (homepage, guides hub) are laid out to fill the width.
 * They were authored as full-width WordPress blocks, not constrained ones, so
 * capping them at the article wide-size (1200px) squeezes the hero and drops
 * the featured-picks grid a column. They get their own, much larger bound. */
body.wide main .wrap { max-width: var(--wide-page); }
body.wide .entry-content > * { max-width: none; }

.page-title {
	font-family: var(--wp--preset--font-family--lora);
	font-size: clamp(1.9rem, 4vw, 2.6rem);
	line-height: 1.2; margin: 0 0 22px;
}

/* ---------------------------------------------------------------- footer */

.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--border);
	padding: 34px 0;
	color: var(--muted);
	font-size: .92rem;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 16px; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brass); }
.site-footer .legal { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 4px; }

@media (max-width: 640px) {
	.site-header .wrap { flex-wrap: wrap; }
	.site-nav { gap: 14px; }
	body { font-size: 16px; }
}