/*
 * Brand design-system CSS for the Lurkus Ignoramus child theme.
 * Full design language documented in vault/01-Site-Docs/brand-design.md.
 * Color/radius tokens come from theme.json; this file adds things theme.json
 * can't express: a global curved-corners default, the reusable "Neon Window"
 * block style, the heading text treatment, and a CSS-only starfield stand-in.
 */

/* Curved elements over hard edges, applied broadly to common blocks. */
.wp-block-group,
.wp-block-cover,
.wp-block-image img,
.wp-block-button__link,
.wp-block-columns > .wp-block-column {
	border-radius: 14px;
}

/*
 * Responsive 16:9 embed wrapper — fixes a real bug found on the Twitch embed:
 * a plain iframe with fixed width/height attributes gets its rendered width
 * squeezed to fit the container by responsive-media CSS, but the height
 * attribute stays literally fixed, producing a non-16:9 box. The actual
 * video then letterboxes inside that mismatched box, and any border wrapped
 * around it reads as the wrong shape relative to the widescreen content.
 * This locks the box to a true 16:9 ratio regardless of container width.
 */
.embed-16x9 {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px;
}
.embed-16x9 iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * "Neon Window" block style — fluorescent-green bordered content container.
 * Usage: apply via the block's Styles panel (registered in functions.php).
 * One reusable style; "large" vs. "small" is just the block's own width/
 * height, not a separate style variant.
 */
.is-style-neon-window {
	background-color: var(--wp--preset--color--accent-3);
	border: 2px solid var(--wp--preset--color--accent-1);
	border-radius: 18px;
	box-shadow:
		0 0 8px var(--wp--preset--color--accent-1),
		0 0 20px color-mix(in srgb, var(--wp--preset--color--accent-1) 45%, transparent);
	padding: var(--wp--preset--spacing--40, 1.5rem);
}

/*
 * Tighter variant for wrapping a video embed specifically — the general
 * neon-window padding (1.5rem) is meant for arbitrary content and left
 * alone; this modifier (added alongside is-style-neon-window, not replacing
 * it) shrinks the gap so the border hugs the embed closely instead.
 */
.neon-window-embed {
	padding: 6px;
}

/*
 * "Smoke text" heading treatment — matches the real stream-asset font/colors:
 * McKloud Misty Regular, #00aa00 fill, #55007f outline. This is now the
 * DEFAULT treatment for every heading (h1-h6) site-wide, not just an opt-in
 * class — font-family and text color come from theme.json (the
 * "heading-display" font family + styles.elements.heading.color), which
 * already self-hosts the McKloud Misty Regular font file via @font-face.
 * This rule only adds what theme.json can't express: the purple text-stroke
 * outline (with a text-shadow fallback for browsers without text-stroke
 * support). ".smoke-text" is kept as an explicit class too, for applying the
 * same treatment to non-heading elements.
 *
 * Stroke/shadow widths are in `em`, not `px`, so they scale with each
 * heading's own font-size.
 *
 * font-weight is normalized to 400 here too: the real cause of the site
 * title looking much thicker than "Blog" wasn't font-size at all — it's that
 * .wp-block-site-title carries its own font-weight:700 (bold) from Twenty
 * Twenty-Five, while the generic heading style (used by "Blog") is 400
 * (regular). Bold letterforms are inherently chunkier, so the identical
 * stroke width reads as heavier on bold text regardless of em-tuning.
 * Forcing 400 here keeps the stroke's visual weight consistent wherever
 * smoke-text is used.
 */
.wp-site-blocks h1,
.wp-site-blocks h2,
.wp-site-blocks h3,
.wp-site-blocks h4,
.wp-site-blocks h5,
.wp-site-blocks h6,
.smoke-text {
	font-weight: 400;
	-webkit-text-stroke: 0.02em #55007f;
	text-stroke: 0.02em #55007f;
	text-shadow:
		0 0 0.012em #55007f,
		0 0 0.06em #55007f;
}

/* Explicit class still sets font/color directly, for use on non-heading elements. */
.smoke-text {
	font-family: 'McKloud Misty Regular', 'Baloo 2', 'Comic Sans MS', cursive, sans-serif;
	color: #00aa00;
}

/*
 * CSS-only starfield placeholder — a repeating dot pattern on a dark
 * background, standing in for the real psychedelic starfield (currently a
 * live composite of layered video files in OBS, not exportable as a static
 * asset — see brand-design.md). Swap this out once a real background
 * (video, exported frame, or generated art) is available.
 *
 * TODO: the real background also has a barely-visible cosmic cat worked
 * into it — no placeholder attempted here, deliberately left for when
 * actual artwork exists.
 */
.has-starfield-bg {
	background-color: var(--wp--preset--color--base);
	background-image:
		radial-gradient(1px 1px at 10% 20%, var(--wp--preset--color--contrast) 0, transparent 60%),
		radial-gradient(1px 1px at 30% 70%, var(--wp--preset--color--contrast) 0, transparent 60%),
		radial-gradient(2px 2px at 50% 40%, var(--wp--preset--color--accent-1) 0, transparent 60%),
		radial-gradient(1px 1px at 70% 15%, var(--wp--preset--color--contrast) 0, transparent 60%),
		radial-gradient(1px 1px at 85% 60%, var(--wp--preset--color--accent-2) 0, transparent 60%),
		radial-gradient(2px 2px at 92% 85%, var(--wp--preset--color--contrast) 0, transparent 60%);
	background-repeat: repeat;
	background-size: 220px 220px;
}

/*
 * TODO (placeholders, no artwork yet — see brand-design.md):
 * - Anthropomorphic weed-smoke-cloud mascot
 * - "Stoner" sloth mascot (neuroscience/quantum-physics expert)
 * Both are still in development; no illustration exists to place yet.
 */