/*
 * Fifth Canvas — base layer.
 *
 * Design tokens, reset, typography and block content styles. Loaded on the
 * front end and inside the block editor (add_editor_style), so content looks
 * the same in both. Layout and components live in main.css.
 *
 * Raw values (palette, families, type sizes) are defined once in theme.json
 * and arrive as --wp--preset--* variables; this file maps them to semantic
 * tokens. Nothing else in the theme should use a raw colour or font value.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Colour: semantic roles. The default scheme is the light canvas; dark
	   sections (footer, production heroes) opt in with .fc-scheme-ink. */
	--color-frame: var(--wp--preset--color--marigold, #fec724);
	--color-background: var(--wp--preset--color--paper, #f5f2e5);
	--color-surface: var(--wp--preset--color--sand, #ebe6d6);
	--color-text: var(--wp--preset--color--ink, #141412);
	--color-muted: var(--wp--preset--color--stone, #6b665b);
	--color-border: #dcd6c4;
	--color-border-strong: #8f887a;
	--color-brand: var(--wp--preset--color--ember, #f4512c);
	--color-accent: var(--wp--preset--color--ochre, #c93a17);
	--color-accent-hover: #a92f11;
	--color-on-accent: #ffffff;
	--color-scrim: 20 20 18; /* RGB triplet of ink, for translucent overlays. */

	/* Type families. */
	--font-display: var(--wp--preset--font-family--display, Georgia, serif);
	--font-body: var(--wp--preset--font-family--body, system-ui, sans-serif);
	--font-script: var(--wp--preset--font-family--script, cursive);

	/* Type scale. Editor-facing sizes come from theme.json presets; display
	   sizes are theme-only so editors can't break hero compositions. */
	--text-2xs: 0.6875rem;
	--text-xs: clamp(0.75rem, 0.73rem + 0.1vw, 0.8125rem);
	--text-sm: var(--wp--preset--font-size--small, 0.9375rem);
	--text-md: var(--wp--preset--font-size--medium, 1.0625rem);
	--text-lg: var(--wp--preset--font-size--large, 1.5rem);
	--text-xl: var(--wp--preset--font-size--x-large, 2.25rem);
	--text-2xl: var(--wp--preset--font-size--xx-large, 3.5rem);
	--text-display: clamp(2.5rem, 1.4rem + 4.6vw, 5.5rem);
	--text-display-xl: clamp(3.25rem, 1.6rem + 6.6vw, 8rem);

	--weight-display: 700;
	--leading-tight: 0.95;
	--leading-snug: 1.15;
	--leading-body: 1.6;
	--tracking-display: -0.025em;
	--tracking-caps: 0.28em;
	--measure: 66ch;

	/* Space: fluid scale (shared with theme.json spacing presets). */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: var(--wp--preset--spacing--20, 0.75rem);
	--space-s: var(--wp--preset--spacing--30, 1.25rem);
	--space-m: var(--wp--preset--spacing--40, 2rem);
	--space-l: var(--wp--preset--spacing--50, 3.5rem);
	--space-xl: var(--wp--preset--spacing--60, 6rem);
	--space-2xl: clamp(5rem, 3.5rem + 7.5vw, 11rem);

	/* Containers. The page sits on a framed canvas: --frame is the coloured
	   margin around it, --gutter the canvas's own inner padding. */
	--frame: clamp(0.875rem, 0.35rem + 2.1vw, 3.25rem);
	--canvas-max: 116rem;
	--gutter: clamp(1.5rem, 0.45rem + 4.8vw, 6.25rem);
	--container-text: 42rem;
	--container-content: 84rem;
	--container-wide: 100rem;

	/* Shape and motion. */
	--radius-none: 0;
	--radius-sm: 2px;
	--radius-canvas: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
	--radius-pill: 999px;
	--transition-fast: 150ms cubic-bezier(0.2, 0, 0, 1);
	--transition-base: 320ms cubic-bezier(0.2, 0, 0, 1);
	--transition-slow: 900ms cubic-bezier(0.16, 1, 0.3, 1);

	/* Focus. */
	--focus-ring: 2px solid var(--color-accent);
	--focus-offset: 3px;

	/* Header height, used to offset anchors and the hero. */
	--header-height: 5rem;
}

/* Dark "ink" scheme: remaps roles only, so every component adapts. */
.fc-scheme-ink,
.is-style-ink {
	--color-background: var(--wp--preset--color--charcoal, #1b1b19);
	--color-surface: var(--wp--preset--color--graphite, #2e2d29);
	--color-text: var(--wp--preset--color--bone, #ece8dc);
	--color-muted: var(--wp--preset--color--ash, #a8a294);
	--color-border: #3a3934;
	--color-border-strong: #6b665b;
	--color-accent: var(--wp--preset--color--ember, #f4512c);
	--color-accent-hover: #ff6a47;
	--color-on-accent: var(--wp--preset--color--ink, #141412);

	background-color: var(--color-background);
	color: var(--color-text);
}

/* "Paper section" block style: a quieter sand panel on the canvas. */
.is-style-paper {
	--color-background: var(--wp--preset--color--sand, #ebe6d6);
	--color-border: #d3ccb8;

	background-color: var(--color-background);
	color: var(--color-text);
}

/* ==========================================================================
   2. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: var(--space-m);
}

body {
	margin: 0;
	background-color: var(--color-background);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--text-md);
	line-height: var(--leading-body);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

img,
video {
	height: auto;
}

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

/* Components set display; the hidden attribute must still win. */
[hidden] {
	display: none !important;
}

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

:where(ul, ol)[role="list"] {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: var(--leading-snug);
	letter-spacing: -0.015em;
	text-wrap: wrap; /* Natural line wrapping: no premature balance-induced breaks. */
}

h1 { font-size: var(--text-2xl); font-weight: var(--weight-display); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); }
h4 { font-size: var(--text-md); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
h5,
h6 { font-size: var(--text-sm); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.2em;
	transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
}

a:hover {
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
	border-radius: var(--radius-sm);
}

::selection {
	background: var(--color-accent);
	color: var(--color-on-accent);
}

strong,
b {
	font-weight: 600;
}

small {
	font-size: var(--text-sm);
}

/* Wide-tracked capitals: kickers, section labels, metadata. */
.fc-kicker,
.fc-label,
.fc-meta--kicker,
.has-small-caps {
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: var(--tracking-caps);
	line-height: 1.5;
	text-transform: uppercase;
}

.fc-label {
	color: var(--color-muted);
}

/* Brand full stop that closes display headlines ("…with intent."). */
.fc-dot {
	color: var(--color-brand);
}

.fc-kicker a {
	text-decoration: none;
}

.fc-kicker a:hover {
	color: var(--color-text);
}

.fc-caption,
.wp-element-caption,
figcaption {
	margin-top: var(--space-2xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	line-height: 1.5;
}

/* ==========================================================================
   4. Content (post content, pages, synopsis) — also the editor canvas
   ========================================================================== */

.fc-prose,
.editor-styles-wrapper .is-root-container {
	font-size: var(--text-md);
}

/* Flow: consistent rhythm between blocks. */
.fc-prose > * + *,
.editor-styles-wrapper .is-root-container > * + * {
	margin-block-start: var(--space-s);
}

.fc-prose > :where(h2, h3, h4),
.editor-styles-wrapper .is-root-container > :where(h2, h3, h4) {
	margin-block-start: var(--space-l);
}

.fc-prose > :where(h2, h3, h4) + *,
.editor-styles-wrapper .is-root-container > :where(h2, h3, h4) + * {
	margin-block-start: var(--space-xs);
}

/* Width: text runs at reading measure; wide/full alignments break out. */
.fc-prose > *,
.editor-styles-wrapper .is-root-container > * {
	max-width: var(--container-text);
	margin-inline: auto;
}

.fc-prose > .alignwide,
.editor-styles-wrapper .is-root-container > .alignwide {
	max-width: var(--container-content);
}

.fc-prose > .alignfull,
.editor-styles-wrapper .is-root-container > .alignfull {
	max-width: none;
}

/* Full-bleed blocks reach the edges of the canvas (which clips overflow). */
.fc-prose > .alignfull {
	margin-inline: calc(50% - min(50vw - var(--frame), var(--canvas-max) / 2));
}

.fc-prose > .alignleft {
	float: left;
	max-width: min(50%, 20rem);
	margin: 0.4em var(--space-m) var(--space-s) 0;
}

.fc-prose > .alignright {
	float: right;
	max-width: min(50%, 20rem);
	margin: 0.4em 0 var(--space-s) var(--space-m);
}

.fc-prose::after {
	content: "";
	display: table;
	clear: both;
}

.fc-prose :where(ul, ol):not([role="list"]) {
	padding-inline-start: 1.25em;
}

.fc-prose li + li {
	margin-top: var(--space-3xs);
}

.fc-prose img {
	height: auto;
}

/* Running text is set in the serif, as in print; legal copy stays in sans. */
.fc-prose:not(.fc-prose--legal),
.editor-styles-wrapper .is-root-container {
	font-family: var(--font-display);
}

/* Lede: first paragraph style and "Lede" block style. */
.is-style-lede,
.fc-prose--synopsis > p:first-child {
	font-size: var(--text-lg);
	line-height: 1.5;
	letter-spacing: -0.005em;
}

/* Legal pages: denser, numbered-friendly. */
.fc-prose--legal {
	font-size: var(--text-sm);
}

.fc-prose--legal > :where(h2, h3) {
	font-family: var(--font-body);
	font-size: var(--text-md);
	font-weight: 600;
	letter-spacing: 0;
}

/* Quotes. */
.wp-block-quote {
	border-inline-start: 1px solid var(--color-accent);
	padding-inline-start: var(--space-m);
	margin-block: var(--space-m);
}

.wp-block-quote p {
	font-family: var(--font-display);
	font-size: var(--text-lg);
	line-height: 1.35;
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--space-xs);
	color: var(--color-muted);
	font-size: var(--text-sm);
	font-style: normal;
}

.wp-block-pullquote {
	padding-block: var(--space-l);
	border-block: 1px solid var(--color-border);
	text-align: center;
}

.wp-block-pullquote blockquote p {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	line-height: 1.2;
}

/* Separator. */
.wp-block-separator,
hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin-block: var(--space-l);
}

/* Images, galleries and embeds inside content. */
.wp-block-image,
.wp-block-embed,
.wp-block-video {
	margin-block: var(--space-m);
}

.wp-block-embed iframe {
	width: 100%;
}

/* Tables (credits lists pasted into pages, legal tables). */
.wp-block-table table,
.fc-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--text-sm);
}

.wp-block-table :where(th, td),
.fc-prose :where(th, td) {
	padding: var(--space-2xs) var(--space-xs);
	border-bottom: 1px solid var(--color-border);
	text-align: start;
	vertical-align: top;
}

/* Credits list block style: role/name pairs set like an end roll. */
.is-style-credits {
	list-style: none;
	padding: 0 !important;
	text-align: center;
	font-family: var(--font-display);
	font-size: var(--text-lg);
}

.is-style-credits li + li {
	margin-top: var(--space-xs);
}

/* Section group block styles need inner spacing to read as a panel. */
.wp-block-group.is-style-paper,
.wp-block-group.is-style-ink {
	padding: var(--space-l) var(--gutter);
}

/* Columns breathe more than core default. */
.wp-block-columns {
	gap: var(--space-m);
}

/* ==========================================================================
   5. Buttons and forms (shared by core blocks and theme components)
   ========================================================================== */

.fc-button,
.wp-block-button__link,
.wp-element-button,
.search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.75em;
	min-height: 3rem;
	padding: 0.75rem 1.35rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background-color: var(--color-accent);
	color: var(--color-on-accent);
	font-family: var(--font-body);
	font-size: var(--text-2xs);
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.fc-button:hover,
.wp-block-button__link:hover,
.wp-element-button:hover,
.search-submit:hover {
	border-color: var(--color-accent-hover);
	background-color: var(--color-accent-hover);
	color: var(--color-on-accent);
}

/* Arrow glyph after a button label (decorative). */
.fc-button--arrow::after {
	content: "→";
	content: "→" / "";
	font-size: 1.35em;
	line-height: 0;
	letter-spacing: 0;
	transition: transform var(--transition-base);
}

.fc-button--arrow:hover::after {
	transform: translateX(0.2em);
}

.fc-button--ghost,
.is-style-outline .wp-block-button__link {
	border-color: var(--color-text);
	background-color: transparent;
	color: var(--color-text);
}

.fc-button--ghost:hover,
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--color-text);
	background-color: var(--color-text);
	color: var(--color-background);
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
	width: 100%;
	min-height: 2.875rem;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
	color: var(--color-muted);
	opacity: 1;
}

label {
	display: inline-block;
	margin-bottom: var(--space-3xs);
	font-size: var(--text-sm);
	font-weight: 500;
}

.search-form {
	display: flex;
	gap: var(--space-2xs);
	max-width: 32rem;
}

.search-form label {
	flex: 1;
	margin: 0;
}

/* ==========================================================================
   6. Accessibility utilities
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	width: auto;
	height: auto;
	z-index: 100000;
}

@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;
	}
}

@media (forced-colors: active) {
	.fc-button,
	.wp-block-button__link {
		border: 1px solid ButtonText;
	}
}