/* Rakish Light — global CSS (Phase 2). Tokens come from theme.json. */

:root {
	--rl-ink: var(--wp--preset--color--ink);
	--rl-paper: var(--wp--preset--color--paper);
	--rl-muted: var(--wp--preset--color--muted);
	--rl-rule: var(--wp--preset--color--rule);
	--rl-accent: var(--wp--preset--color--accent);
	--rl-press: var(--wp--preset--color--press);
	--rl-mech: var(--wp--preset--font-family--mechanical);
	--rl-band-bg: var(--wp--custom--band--background);
	--rl-band-text: var(--wp--custom--band--text);
	--rl-band-muted: var(--wp--custom--band--muted);
	--rl-band-line: var(--wp--custom--band--line);
}

/* --------------------------------------------------------------------- */
/* Per-page colours (set in the editor: Page colours panel).              */
/* functions.php puts --rl-page-bg / --rl-page-text on <body> and adds     */
/* body.rl-page-colors. Header and footer bands are not affected.          */
/* --------------------------------------------------------------------- */
body.rl-page-colors {
	background-color: var(--rl-page-bg, var(--rl-paper)) !important;
	color: var(--rl-page-text, var(--rl-ink));
	--rl-muted: color-mix(in srgb, var(--rl-page-text, var(--rl-ink)) 72%, var(--rl-page-bg, var(--rl-paper)));
	--rl-rule: color-mix(in srgb, var(--rl-page-text, var(--rl-ink)) 35%, var(--rl-page-bg, var(--rl-paper)));
}
body.rl-page-colors main,
body.rl-page-colors main :is(h1, h2, h3, h4, h5, h6, .wp-block-post-title, .wp-block-post-title a, .wp-block-query-title) { color: var(--rl-page-text, var(--rl-ink)); }
body.rl-page-colors main :is(.wp-element-caption, figcaption, .wp-block-post-date, .rl-label, dl.rl-meta dt) { color: var(--rl-muted); }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

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

/* Titles of works within prose: EB Garamond italic is the default <em>/<i>. */

/* Links ---------------------------------------------------------------- */
a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover, a:focus { text-decoration-thickness: 2px; }

/* Visible focus everywhere */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Separator: one hairline */
.wp-block-separator {
	border: 0;
	border-top: var(--wp--custom--rule-width) solid var(--rl-rule);
	height: 0;
	background: none !important;
	opacity: 1;
}
.wp-block-separator,
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) { width: 100%; max-width: none; }

/* Skip link (core prints it for block themes; make it ours) */
.skip-link.screen-reader-text:focus {
	background: var(--rl-ink);
	color: var(--rl-paper);
	font-family: var(--rl-mech);
	clip-path: none;
}

/* --------------------------------------------------------------------- */
/* TEXT OVER IMAGES — the one rule                                         */
/* --------------------------------------------------------------------- */

/* Panel: solid press-green box, white text, yellow links (7.1:1). */
.wp-block-group.is-style-rl-panel {
	background-color: var(--rl-press);
	color: var(--rl-paper);
	padding: var(--wp--preset--spacing--40);
}
.wp-block-group.is-style-rl-panel :is(h1, h2, h3, h4, h5, h6, p, li) { color: var(--rl-paper); }
.is-style-rl-panel a { color: var(--rl-accent); }
.is-style-rl-panel .wp-element-button,
.is-style-rl-panel .wp-block-button__link {
	background: var(--rl-accent);
	color: var(--rl-ink);
}

/* Scrim: cover overlay is always ink at >= 72%. Worst case (white image)
   gives white text 6.7:1. Yellow is NOT allowed on a scrim. */
.wp-block-cover.is-style-rl-scrim { color: var(--rl-paper); }
.wp-block-cover.is-style-rl-scrim .wp-block-cover__background,
.wp-block-cover.is-style-rl-scrim .wp-block-cover__gradient-background {
	background: var(--rl-ink) !important;
	opacity: 0.72 !important;
}
.wp-block-cover.is-style-rl-scrim .wp-block-cover__inner-container,
.wp-block-cover.is-style-rl-scrim .wp-block-cover__inner-container * { color: var(--rl-paper); }
.wp-block-cover.is-style-rl-scrim a { color: var(--rl-paper); }

/* Any cover holding text gets the same floor, even without the style. */
.wp-block-cover:not(.is-style-rl-scrim):has(.wp-block-cover__inner-container :is(p, h1, h2, h3, h4, h5, h6, a)) .wp-block-cover__background {
	background-color: var(--rl-ink) !important;
	opacity: 0.72 !important;
}
.wp-block-cover:not(.is-style-rl-scrim):has(.wp-block-cover__inner-container :is(p, h1, h2, h3, h4, h5, h6, a)) .wp-block-cover__inner-container { color: var(--rl-paper); }

/* --------------------------------------------------------------------- */
/* Lists                                                                   */
/* --------------------------------------------------------------------- */
ul.is-style-rl-plain, ol.is-style-rl-plain { list-style: none; padding-left: 0; }

/* --------------------------------------------------------------------- */
/* Utilities for template authors (4C / 4D)                                */
/* --------------------------------------------------------------------- */

/* Project details / meta block: mechanical face, small. Works on a <dl>,
   a list or a group. */
.rl-meta {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
}
dl.rl-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); margin: 0; }
dl.rl-meta dt { color: var(--rl-muted); }
dl.rl-meta dd { margin: 0; }

.rl-label {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--rl-muted);
	letter-spacing: 0.02em;
}

.rl-visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------- */
/* Header / footer (parts)                                                 */
/* --------------------------------------------------------------------- */
.rl-header {
	background-color: var(--rl-band-bg);
	color: var(--rl-band-text);
	border-bottom: var(--wp--custom--rule-width) solid var(--rl-band-line);
}
.rl-header a, .rl-header .wp-block-site-title a, .rl-header .wp-block-navigation a { color: var(--rl-band-text); }
.rl-header .wp-block-navigation__responsive-container-open,
.rl-header .wp-block-navigation__responsive-container-close { color: var(--rl-band-text); }
.rl-header .wp-block-navigation-item__content[aria-current="page"],
.rl-header .current-menu-item > .wp-block-navigation-item__content { text-decoration: underline; text-underline-offset: 0.3em; }
.rl-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--rl-band-bg) !important;
	color: var(--rl-band-text) !important;
	font-size: var(--wp--preset--font-size--large);
}

.rl-footer {
	background-color: var(--rl-band-bg);
	color: var(--rl-band-text);
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.rl-footer p { margin: 0; }
.rl-footer a { color: var(--rl-band-text); }
.rl-footer .rl-label { color: var(--rl-band-muted); }
.wp-site-blocks > footer { margin-block-start: 0; }
.rl-footer address { font-style: normal; }

/* Images in content: no rounding, no shadow, ever */
.wp-block-image img, .wp-block-cover img, .wp-block-post-featured-image img { border-radius: 0; box-shadow: none; }

/* Embeds/video fill their container */
.wp-block-embed iframe, .wp-block-video video { width: 100%; }

/* --------------------------------------------------------------------- */
/* Motion                                                                  */
/* --------------------------------------------------------------------- */
a, .wp-element-button { transition: color var(--wp--custom--transition), background-color var(--wp--custom--transition); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------- */
/* rakishlight-core plugin blocks (markup from Phase 3; styles live here)  */
/* --------------------------------------------------------------------- */
.wp-block-rakishlight-project-video { margin: 0; aspect-ratio: 16 / 9; }
.wp-block-rakishlight-project-video iframe,
.wp-block-rakishlight-project-video video { width: 100%; height: 100%; border: 0; display: block; }
.wp-block-rakishlight-press-links {
	font-family: var(--rl-mech);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}
.wp-block-rakishlight-press-links.is-style-rl-plain { list-style: none; padding-left: 0; }