/*
Theme Name: Fusion Circus
Theme URI: https://fusion-circus.example
Description: Child theme of Twenty Twenty-Five for fusion-circus.example
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: fusion-circus
*/

/* ---------------------------------------------------------------------------
 * Header — round badge splitting the nav row over the flood gradient band.
 * Spec: design.md § Signature moves (locked 2026-07-26).
 * ------------------------------------------------------------------------- */

.fc-header .fc-header__badge img {
	display: block;
	width: var(--wp--custom--size--badge);
	height: auto;
}

/* Contrast + hit-target fix carried over from the v1 audit (design.md § Notes):
 * every nav link gets a ≥44px tap area on the scrim band. */
.fc-header .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--size--tap);
	padding: var(--wp--preset--spacing--2-xs) var(--wp--preset--spacing--xs);
}

.fc-header .wp-block-navigation-item__content:hover {
	text-decoration: underline;
	text-underline-offset: var(--wp--preset--spacing--2-xs);
}

.fc-header a:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent-ink);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ---------------------------------------------------------------------------
 * Footer — single copyright line over the flood band (design.md Ft2).
 * Sticky-footer: on short pages (404, Code of Conduct) the band must still
 * meet the bottom of the viewport instead of floating above bare paper.
 * ------------------------------------------------------------------------- */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100svh;
}

.wp-site-blocks > main {
	flex-grow: 1;
}

/* ---------------------------------------------------------------------------
 * Buttons — CTA voice (design.md § CTA voice, locked 2026-07-26).
 * Hallmark · component: core/button + 2 block styles · genre: atmospheric ·
 * theme: studied-DNA · states: default · hover · focus-visible · active
 * (core/button renders a plain link — no disabled/loading/error/success
 * semantics exist for it) · contrast: pass (4.75:1 worst, fill label)
 *
 * Default (Fill) = primary CTA: magenta pill, Jost label; hover/active
 * colors come from theme.json. This file adds shape, motion
 * and the two alternates: "On photo (white)" and "Ghost (outline)".
 * ------------------------------------------------------------------------- */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--wp--custom--size--tap);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--md);
	transition:
		background-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		color var(--wp--custom--duration--fast) var(--wp--custom--ease--out),
		border-color var(--wp--custom--duration--fast) var(--wp--custom--ease--out);
}

/* Tactile press — instant (no transition), transform-only. */
.wp-block-button__link:active {
	transform: translateY(var(--wp--custom--press));
}

.wp-block-button__link:focus-visible {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--accent);
	outline-offset: var(--wp--custom--focus--offset);
}

/* Alternate 1 · On photo (white) — the locked secondary CTA for busy imagery:
 * card fill, ink text, lavender hover, white focus ring (violet would vanish
 * against dark scrims). */
.wp-block-button.is-style-on-photo .wp-block-button__link {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-on-photo .wp-block-button__link:hover,
.wp-block-button.is-style-on-photo .wp-block-button__link:active {
	background-color: var(--wp--preset--color--paper-2);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-on-photo .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--accent-ink);
}

/* Alternate 2 · Ghost (outline) — quieter sibling for paper/card grounds
 * only (not photos); fills magenta on hover. */
.wp-block-button.is-style-ghost .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--accent-deep);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--accent-deep);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:active {
	background-color: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition-duration: 1ms;
	}
}

/* Desktop: equal-flex nav halves keep the badge dead-centre even though the
 * left cluster has 3 links and the right has 2. */
@media (min-width: 782px) {
	.fc-header .fc-header__nav {
		flex: 1 1 0;
	}
}

/* Mobile: badge on top, link clusters centred beneath it. */
@media (max-width: 781.98px) {
	.fc-header {
		flex-direction: column;
		gap: var(--wp--preset--spacing--xs);
	}

	.fc-header .fc-header__badge {
		order: -1;
	}

	.fc-header .fc-header__nav .wp-block-navigation__container {
		justify-content: center;
	}
}