/*
 * Fox Socle — shared styles of the Fox GeneratePress child themes.
 * Loaded after GeneratePress, before the child style.css (which can override
 * anything here). Each section only applies when its feature is on: the socle
 * adds the matching class to <body>. Do not edit in a theme: see CONTRACT.md.
 */

/* --------------------------------------------------------------------------
 * fox_vars — Fox Blocks (--fxb-*) and Fox Affiliate (--fox-*) follow the
 * GeneratePress palette (--accent, --contrast, --base...) and the page fonts.
 * Zero specificity (:where) and set on body, not :root: the child theme's own
 * body{} rules and a Fox Blocks theme set on a block wrapper both still win.
 * Every colour refers to a palette variable, never a literal: a night palette
 * that redefines --accent, --contrast, --base... on :root (prefers-color-scheme
 * or [data-theme]) is followed without anything else to write.
 *
 * Text on the accent (--fox-socle-on-accent): the palette has no such colour.
 * 1. --on-accent if the theme sets one (a GeneratePress global colour with the
 *    slug on-accent, redefined with --accent in its night palette);
 * 2. else black or white, whichever contrasts best with the CURRENT --accent,
 *    computed by the browser: CIE Y in xyz-d65 is the WCAG relative luminance,
 *    and below Y = 0.1791 white wins (both give 4.58:1 at that point), so the
 *    result is never under 4.5:1, day or night;
 * 3. browsers without relative colours: the colour socle.php computes from the
 *    day accent saved in GeneratePress (--fox-socle-on-accent-php), else #fff.
 * The hover background moves the accent AWAY from the text colour (towards
 * black under white text, towards white under black text): its contrast with
 * the text is never lower than the accent's.
 *
 * The accent written AS text (--fox-accent-text, read by Fox Affiliate 4.41.5+
 * for eyebrows, badges, links, outline buttons): not the text ON the accent,
 * which stays --on-accent. Same formula as Fox Affiliate 4.41.5
 * (Fox_Design::accent_text): the accent unchanged when it already reads at
 * 4.6:1 on the surfaces, else scaled in linear light towards black (light
 * card) or mixed towards white (dark card) just enough. The surfaces are
 * --base-3 (card) and --base (badge, zebra rows); the bounds Fox Affiliate
 * prints from PHP are computed here by the browser, so a night palette that
 * redefines --accent, --base-3 and --base is followed. How, with one origin
 * colour per relative colour: the luminances of the accent and of both
 * surfaces are carried in the three channels of one mix (--fox-socle-at-lum),
 * the two gains in another (--fox-socle-at-gain), then the result is
 * accent x gain (towards black) + (white - accent) normalised x gain (towards
 * white). Order: --accent-text if the theme sets one (GeneratePress global
 * colour slug accent-text), else that result, else (no relative colours) the
 * one socle.php computes from the day palette (--fox-socle-accent-text-php),
 * else the accent.
 *
 * Borders: --fxb-border / --fox-border (card outlines, table rules: decorative)
 * take --contrast-3; --fxb-border-strong (a component's boundary) takes
 * --contrast-2, the secondary text colour, so at least 3:1 on the surface.
 * Fonts: initial makes var() invalid at computed-value time, so font-family
 * falls back to inherit: the blocks use the page's font. A font the theme
 * declares with a role (fox_socle_fonts) is printed inline by socle.php.
 * Also printed by socle.php (same rule, after this file): --fxb-accent-rgb,
 * --fxb-link from the GeneratePress link colour, and the state colours of
 * the palette slugs the theme declares (success, warning, error, info,
 * price, star). Full list: CONTRACT.md.
 * ------------------------------------------------------------------------ */
:where(body.fox-socle-vars) {
	--fox-socle-on-accent: var(--on-accent, var(--fox-socle-on-accent-php, #fff));
	--fox-socle-accent-hover: var(--fox-socle-accent-hover-php, var(--contrast));
	--fox-socle-accent-text: var(--accent-text, var(--fox-socle-accent-text-php, var(--accent)));
	--fxb-accent: var(--accent);
	--fxb-link: var(--accent);
	--fxb-accent-hover: var(--fox-socle-accent-hover);
	--fxb-on-accent: var(--fox-socle-on-accent);
	--fxb-text: var(--contrast);
	--fxb-text-secondary: var(--contrast-2);
	--fxb-text-tertiary: var(--contrast-2);
	--fxb-text-on-sunken: var(--contrast);
	--fxb-surface: var(--base-3);
	--fxb-surface-raised: var(--base-3);
	--fxb-surface-sunken: var(--base);
	--fxb-border: var(--contrast-3);
	--fxb-border-strong: var(--contrast-2);
	--fxb-border-focus: var(--contrast);
	--fxb-font-body: initial;
	--fxb-font-display: initial;
	--fox-accent: var(--accent);
	--fox-accent-hover: var(--fox-socle-accent-hover);
	--fox-accent-text: var(--fox-socle-accent-text);
	--fox-btn-text: var(--fox-socle-on-accent);
	--fox-text: var(--contrast);
	--fox-text-muted: var(--contrast-2);
	--fox-bg: var(--base-3);
	--fox-card-bg: var(--base-3);
	--fox-bg-subtle: var(--base);
	--fox-bg-head: var(--base);
	--fox-bg-badge: var(--base);
	--fox-img-bg: var(--base-3);
	--fox-border: var(--contrast-3);
	--fox-focus-color: var(--contrast);
	--fox-font: initial;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {
	:where(body.fox-socle-vars) {
		--fxb-accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
		--fxb-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
	}
}

@supports (color: color(from red xyz-d65 calc(clamp(0, (0.5 - y) * 10, 1)) y z)) {
	:where(body.fox-socle-vars) {
		--fox-socle-on-accent: var(--on-accent, color(from var(--accent) xyz-d65 calc(0.9505 * clamp(0, (0.1791 - y) * 100000, 1)) clamp(0, (0.1791 - y) * 100000, 1) calc(1.0891 * clamp(0, (0.1791 - y) * 100000, 1))));
		--fox-socle-accent-hover: color-mix(in srgb, var(--accent) 80%, color(from var(--fox-socle-on-accent) xyz-d65 calc(0.9505 * clamp(0, (0.1791 - y) * 100000, 1)) clamp(0, (0.1791 - y) * 100000, 1) calc(1.0891 * clamp(0, (0.1791 - y) * 100000, 1))));
		/* x = Y(accent) / 4, y = Y(--base-3) / 4, z = Y(--base) / 2. */
		--fox-socle-at-lum: color-mix(in xyz-d65, color-mix(in xyz-d65, color(from var(--accent) xyz-d65 y 0 0), color(from var(--base-3) xyz-d65 0 y 0)), color(from var(--base, var(--base-3)) xyz-d65 0 0 y));
		/* x = Y(accent) * k: light card (Y(--base-3) >= 0.1791), k = min(1, ymax / Y)
		   with ymax = (darkest light surface + 0.05) / 4.6 - 0.05, else k = 1;
		   y = how far to move towards white: dark card, up to
		   ymin = 4.6 * (lightest dark surface + 0.05) - 0.05, at most to white. */
		--fox-socle-at-gain: color(from var(--fox-socle-at-lum) xyz-d65
			calc(max(0, x * 4 * (1 - clamp(0, (y * 4 - 0.1791) * 100000, 1) * (1 - min(1, ((min(y * 4, z * 2 * clamp(0, (z * 2 - 0.1791) * 100000, 1) + 1 - clamp(0, (z * 2 - 0.1791) * 100000, 1)) + 0.05) / 4.6 - 0.05) / max(x * 4, 0.0001))))))
			calc((1 - clamp(0, (y * 4 - 0.1791) * 100000, 1)) * clamp(0, 4.6 * (max(y * 4, z * 2 * (1 - clamp(0, (z * 2 - 0.1791) * 100000, 1))) + 0.05) - 0.05 - x * 4, 1 - x * 4))
			0);
		/* accent / Y(accent) x the first gain; (white - accent) / (1 - Y(accent)) x the second. */
		--fox-socle-at-down: color(from color-mix(in xyz-d65, color(from var(--accent) xyz-d65 calc(x / max(y, 0.0001)) 0 calc(z / max(y, 0.0001))), color(from var(--fox-socle-at-gain) xyz-d65 0 x 0)) xyz-d65 calc(x * y * 4) calc(y * 2) calc(z * y * 4));
		--fox-socle-at-up: color(from color-mix(in xyz-d65, color(from var(--accent) xyz-d65 calc((0.9505 - x) / max(1 - y, 0.0001)) 0 calc((1.0891 - z) / max(1 - y, 0.0001))), color(from var(--fox-socle-at-gain) xyz-d65 0 y 0)) xyz-d65 calc(x * y * 4) calc(y * 2) calc(z * y * 4));
		--fox-socle-accent-text: var(--accent-text, color(from color-mix(in xyz-d65, var(--fox-socle-at-down), var(--fox-socle-at-up)) xyz-d65 calc(x * 2) calc(y * 2) calc(z * 2)));
	}
}

/* --------------------------------------------------------------------------
 * block_spacing — under GeneratePress, a heading that follows a Fox block
 * (criteria-scores first) touched the frame: no top margin (study, section 9).
 * ------------------------------------------------------------------------ */
body.fox-socle-blocks .fxb-block + h2,
body.fox-socle-blocks .fxb-block + h3,
body.fox-socle-blocks .fxb-block + h4 {
	margin-top: var(--fxb-block-gap, 2em);
}

/* --------------------------------------------------------------------------
 * a11y — reduced motion, forced colours, print.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	body.fox-socle-a11y *,
	body.fox-socle-a11y *::before,
	body.fox-socle-a11y *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (forced-colors: active) {
	body.fox-socle-a11y a:focus-visible,
	body.fox-socle-a11y button:focus-visible,
	body.fox-socle-a11y input:focus-visible {
		outline: 2px solid CanvasText;
		outline-offset: 2px;
	}
	body.fox-socle-a11y .fxb-block,
	body.fox-socle-a11y .button,
	body.fox-socle-a11y button {
		border: 1px solid CanvasText;
	}
}

body.fox-socle-a11y :focus-visible {
	outline: 2px solid var(--contrast, currentColor);
	outline-offset: 2px;
}

@media print {
	body.fox-socle-a11y .site-header,
	body.fox-socle-a11y .main-navigation,
	body.fox-socle-a11y #mobile-header,
	body.fox-socle-a11y .site-footer,
	body.fox-socle-a11y .generate-back-to-top,
	body.fox-socle-a11y .comments-area,
	body.fox-socle-a11y .post-navigation,
	body.fox-socle-a11y .is-right-sidebar,
	body.fox-socle-a11y .is-left-sidebar {
		display: none !important;
	}
	body.fox-socle-a11y {
		background: #fff;
		color: #000;
	}
	body.fox-socle-a11y .site-content,
	body.fox-socle-a11y .content-area,
	body.fox-socle-a11y .inside-article {
		width: 100% !important;
		max-width: none !important;
		padding: 0 !important;
		box-shadow: none !important;
	}
	body.fox-socle-a11y .entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}
	body.fox-socle-a11y img {
		max-width: 100% !important;
		break-inside: avoid;
	}
	body.fox-socle-a11y h2,
	body.fox-socle-a11y h3 {
		break-after: avoid;
	}
}