/*
 * Site footer (VISUAL_ACCEPTANCE.md F01–F07, reference R9).
 *
 * Column starts measured in R9 relative to the content row (7 % → 93 %):
 * menu at 43 %, statement at 72 %, so the grid is 43 : 29 : 28. On narrow
 * screens it stacks brand → menu → statement → legal (F06).
 *
 * Vertical rhythm: calibrated once against R9 (qa/reference-map.md §10), in
 * footer units u = the footer lock-up text size (22.5 px at 1440, 15 px at
 * 320). R9 is measured in panel pixels and converted through the mark: its
 * ink is 50 panel px tall there and 4.73 u here, so 1 panel px = 0.0946 u.
 * The footer therefore scales with its own content, not with the section
 * spacing of the page, which is what made it oversized (visual review
 * 2026-09-24, D-009).
 */

.fct-site-footer {
	--fct-footer-unit: calc(var(--wp--custom--lockup--size, 12px) * var(--wp--custom--lockup--footer-scale, 1.25));
	--fct-footer-wave: clamp(56px, 6.5vw, 96px);

	color: var(--wp--preset--color--warm-white);
	background: var(--wp--preset--color--forest);
	/* R9: 46 panel px to the mark's ink (4.35 u), less the file's own 0.168 u margin; never more than a section. */
	padding-top: min(var(--wp--preset--spacing--section), calc(var(--fct-footer-unit) * 4.18));
}

.fct-site-footer__grid,
.fct-site-footer__legal {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--wp--style--global--content-size, 1200px) + var(--wp--style--root--padding-left, 32px) + var(--wp--style--root--padding-right, 32px));
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 32px) var(--wp--style--root--padding-right, 32px);
}

.fct-site-footer__grid {
	display: grid;
	grid-template-columns: 43fr 29fr 28fr;
	align-items: start;
	/* Only used once the columns stack; R9 has no stacked layout, so this is the tightest gap that still separates groups. */
	gap: calc(var(--fct-footer-unit) * 1.6) 0;
}

.fct-site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/*
	 * R9 has 7 panel px (0.66 u) of ink from the mark to the signature. The
	 * review asked for 12–16 px more on desktop and 8–12 px on mobile, so the
	 * signature reads as its own brand thought, not part of the lock-up (D-010):
	 * 1.35 u gives +14 px at 1440 and +10 px at 390. The rotation lifts the
	 * signature's right end almost to its box top, so box gap ≈ ink gap.
	 */
	gap: calc(var(--fct-footer-unit) * 1.35);
}

/* Handwritten signature with a short Gold stroke under its first word (R9). */
.fct-site-footer__signature {
	position: relative;
	margin: 0 0 0 1.4em;
	padding-bottom: 0.3em;
	color: var(--wp--preset--color--warm-white);
	font-family: var(--wp--preset--font-family--note);
	font-size: var(--wp--preset--font-size--note);
	font-weight: 500;
	line-height: 1.1;
	transform: rotate(-8deg);
	transform-origin: left center;
}

.fct-site-footer__signature::after {
	content: "";
	position: absolute;
	left: 0.1em;
	bottom: 0;
	width: 3.2em;
	height: 0.2em;
	background-color: var(--wp--preset--color--gold);
	-webkit-mask: url("../../assets/masks/marker-stroke.svg?v=e8543023ce30") center / 100% 100% no-repeat;
	mask: url("../../assets/masks/marker-stroke.svg?v=e8543023ce30") center / 100% 100% no-repeat;
	pointer-events: none;
}

/*
 * Brand statement (D-010): one sentence in two phrases. "People Positive"
 * leads in the display face; "Complexity Embracing" follows smaller, lighter
 * and offset to the right, reached by a short Gold system-line motif: a knot
 * under the first phrase, a curve, and a ring node where the second begins,
 * the same vocabulary as the system line (S01–S05) at footer scale.
 *
 * All sizes are em of the phrase they belong to, so the motif keeps its
 * geometry at every width. The follow phrase's em is the unit below:
 * indent 3.2 em = the SVG's width; the node sits at the phrase's x-height
 * middle (0.77 em below its top at line-height 1.35).
 */
.fct-site-footer__statement {
	--fct-statement-size: clamp(22px, 0.85rem + 1.2vw, 32px);

	margin: 0;
	color: var(--wp--preset--color--warm-white);
}

.fct-site-footer__statement-line {
	display: block;
	white-space: nowrap;
}

.fct-site-footer__statement-line--lead {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--fct-statement-size);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.fct-site-footer__statement-line--follow {
	position: relative;
	margin: 0.45em 0 0 3.2em;
	color: var(--wp--preset--color--sage);
	font-family: var(--wp--preset--font-family--body);
	font-size: max(16px, calc(var(--fct-statement-size) * 0.7));
	font-weight: 400;
	line-height: 1.35;
}

.fct-site-footer__statement-link {
	position: absolute;
	left: -3.2em;
	top: -1.43em;
	width: 3.2em;
	height: 2.6em;
	overflow: visible;
	pointer-events: none;
}

.fct-site-footer__statement-link path {
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.fct-site-footer__statement-knot {
	fill: var(--wp--preset--color--gold);
}

/* Ring node: Gold, open to the Forest field. */
.fct-site-footer__statement-node {
	fill: var(--wp--preset--color--forest);
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

/* One continuous Gold wave in its own band: never through text (F03). */
.fct-site-footer__wave {
	display: block;
	width: 100%;
	height: var(--fct-footer-wave);
	/* R9: the wave's crests start directly under the content (0.2–0.5 u). */
	margin-top: calc(var(--fct-footer-unit) * 0.25);
	overflow: visible;
	pointer-events: none;
}

.fct-site-footer__wave path {
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2;
	vector-effect: non-scaling-stroke;
}

.fct-site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--l);
	/*
	 * Top, R9: 26 panel px (2.46 u) from the wave's trough to the legal text.
	 * The trough lies 18 % above the band's bottom, and the text's cap top 6 px
	 * inside its line box.
	 * Bottom: R9 has 3.1 u here, more than before; the review asked for less,
	 * so it keeps the previous desktop value (2.1 u ≈ 47 px) and shrinks with u.
	 */
	padding-block: calc(var(--fct-footer-unit) * 2.46 - var(--fct-footer-wave) * 0.18 - 6px) calc(var(--fct-footer-unit) * 2.1);
	font-size: 15px;
}

.fct-site-footer__legal p {
	margin: 0;
}

.fct-site-footer a {
	color: var(--wp--preset--color--warm-white);
}

.fct-site-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-underline-offset: 0.2em;
}

/* Focus on the dark field is light (B04). */
.fct-site-footer :focus-visible {
	outline-color: var(--wp--preset--color--warm-white);
}

/*
 * Three columns: the wave rises into the grid, as in R9, where its trough
 * cradles the menu column and its crests pass under the lock-up and the
 * statement. The seven 44 px menu targets make the menu the tallest column
 * (R9 has six shorter lines), so without this the crests would float far
 * below the other two columns. Lifting the band by 0.4 of its height keeps the
 * curve at least 0.5 u clear of the lowest menu link's focus ring from 900 to
 * 1440 px; qa/tools/phase2.mjs FOOTER tests the curve itself against every
 * text box and focus ring, not its bounding box.
 */
@media (min-width: 900px) {
	.fct-site-footer__wave {
		margin-top: calc(var(--fct-footer-wave) * -0.4);
	}
}

@media (max-width: 899.98px) {
	.fct-site-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.fct-site-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 599.98px) {
	.fct-site-footer__grid {
		grid-template-columns: 1fr;
	}
}