/**
 * Color Scheme (light / dark)
 *
 * @package TwentyTwentyFiveChild
 *
 * The dark palette re-declares the custom properties that theme.json emits on
 * :root. Every block that references a palette preset resolves through those
 * properties, so overriding them here flips the whole theme without touching
 * individual blocks.
 *
 * :root[data-theme="dark"] outweighs the :root rule WordPress prints, so load
 * order against the global stylesheet does not matter.
 */

:root {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;

	/* Surfaces and text. */
	--wp--preset--color--base: #131313;
	--wp--preset--color--contrast: #f2f2f2;

	/* Muted text, rules, and the focus outline. Lifted well clear of the dark
	   background so the 4.5:1 body-text ratio survives the flip. */
	--wp--preset--color--accent-4: #a5a5a5;

	/* Raised surface: code blocks, cards, anything sitting on the background. */
	--wp--preset--color--accent-5: #1e1e1e;

	/* Decorative accents. Parent-theme patterns use accent-1 and accent-2 as
	   backgrounds with contrast-colored text on top, so any replacement has to
	   stay readable against #f2f2f2 as well as look right on the dark page. */
	--wp--preset--color--accent-1: #f5e04a;
	--wp--preset--color--accent-2: #7d5c7a;
	--wp--preset--color--accent-3: #b9a9f0;

	/* accent-6 is color-mix(in srgb, currentColor 20%, transparent) and tracks
	   the text color on its own, so it needs no dark override. */
}

/* The flip itself. Initial paint already carries the right value, so this only
   animates deliberate toggles. */
:root[data-theme] body {
	transition: background-color 200ms ease, color 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
	:root[data-theme] body {
		transition: none;
	}
}

/*
 * Scheme control
 *
 * At rest this is one circular slot showing the chosen mode. Pressed, it grows
 * into a three-slot pill: light, match-system, dark.
 *
 * The pill is absolutely positioned and centred inside a wrapper that reserves
 * exactly one slot. Growing therefore happens symmetrically about the centre --
 * outward to both sides, as the control is meant to read -- and, because the
 * pill is out of flow, opening it never reflows the header around it.
 */

.agp-color-scheme {
	--agp-slot: 2.25rem;

	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.agp-color-scheme__slot {
	position: relative;
	display: block;
	width: var(--agp-slot);
	height: var(--agp-slot);
	flex: none;
}

.agp-color-scheme__pill {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	width: var(--agp-slot);
	height: var(--agp-slot);
	border: 1px solid var(--wp--preset--color--accent-6);
	border-radius: 999px;

	/* Transparent at rest so the control sits on whatever the header is
	   painted with, rather than stamping a base-coloured patch onto it. */
	background: transparent;
	z-index: 2;
	transition: width 220ms cubic-bezier(0.2, 0, 0, 1);
}

/* Three slots wide once open, and opaque, because the extra two now overlap
   whatever sits beside the control. */
[data-agp-color-scheme][data-expanded="true"] .agp-color-scheme__pill {
	width: calc(var(--agp-slot) * 3);
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 10px rgb(0 0 0 / 12%);
}

:root[data-theme="dark"] [data-agp-color-scheme][data-expanded="true"] .agp-color-scheme__pill {
	box-shadow: 0 2px 10px rgb(0 0 0 / 50%);
}

.agp-color-scheme__summary,
.agp-color-scheme__option {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(var(--agp-slot) - 2px);
	height: calc(var(--agp-slot) - 2px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font: inherit;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.agp-color-scheme__summary:hover,
.agp-color-scheme__option:hover {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
}

.agp-color-scheme__options {
	display: flex;
	align-items: center;
}

/* A bare `display` declaration outranks the hidden attribute's UA rule, so both
   halves of the pill would render at once without this. */
.agp-color-scheme__options[hidden],
.agp-color-scheme__summary[hidden] {
	display: none;
}

/* The selected option keeps a ring so the current choice is still legible
   without relying on colour alone. */
.agp-color-scheme__option[aria-checked="true"] {
	background-color: color-mix(in srgb, currentColor 14%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 35%, transparent);
}

.agp-color-scheme__icon {
	display: block;
	width: 1.15em;
	height: 1.15em;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/*
 * Collapsed glyph.
 *
 * The summary carries all three icons and CSS reveals the one matching the root
 * data-scheme-mode attribute, which the head script sets before first paint. A
 * JavaScript-painted glyph would show the wrong mode for a frame on every
 * cached page load.
 */
.agp-color-scheme__summary .agp-color-scheme__icon {
	display: none;
}

:root[data-scheme-mode="auto"] .agp-color-scheme__summary .agp-color-scheme__icon--auto,
:root[data-scheme-mode="light"] .agp-color-scheme__summary .agp-color-scheme__icon--light,
:root[data-scheme-mode="dark"] .agp-color-scheme__summary .agp-color-scheme__icon--dark {
	display: block;
}

/* No attribute yet (head script blocked, or the editor canvas): fall back to
   the automatic glyph rather than showing nothing. */
:root:not([data-scheme-mode]) .agp-color-scheme__summary .agp-color-scheme__icon--auto {
	display: block;
}

/* Visible text label, when the block opts into one. */
.agp-color-scheme__label {
	font-size: var(--wp--preset--font-size--small);
}

/* Kept in the accessibility tree, out of the visual one. */
.agp-color-scheme__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.agp-color-scheme__pill {
		transition: none;
	}
}

/* Editor preview: the canvas has no root mode attribute and nothing to expand,
   so show the open state with all three options. */
.agp-color-scheme--preview .agp-color-scheme__pill {
	width: calc(var(--agp-slot) * 3);
	position: static;
	transform: none;
}

.agp-color-scheme--preview .agp-color-scheme__slot {
	width: calc(var(--agp-slot) * 3);
}