/* ==========================================================================
   Yazan — Theme Switcher (header-only)
   --------------------------------------------------------------------------
   A quiet, luxury toggle that lives in the site header's icon cluster at EVERY
   width — desktop bar above 921px, mobile bar below it. PHP renders it in the
   footer only as a staging point; theme-switcher.js moves it into whichever
   Astra cluster is on screen and adds --in-header. It is never a floating
   button pinned to the bottom of the page.

   Collapsed to a small mark; expands to a radiogroup of themes, each with a
   live swatch. Fully token-driven, so the switcher itself also re-tints with
   the active theme. Active state is driven purely by the <html data-yz-theme>
   attribute (CSS below) → correct on first paint, zero flash.
   ========================================================================== */

.yz-theme-switcher {
	/* Out of the layout until the controller has put it in a header cluster.
	   There is deliberately NO delayed-reveal failsafe here: the old one painted
	   the switcher at its pre-move position — bottom-left of the page — whenever
	   the script was slow or stale, which is exactly the artefact this control is
	   not allowed to produce. If placement fails the control stays hidden; the
	   saved theme itself still applies, since wp_head sets the attribute. */
	display: none;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--yz-font-body, sans-serif);
	/* The switcher never participates in the theme crossfade of the page body,
	   but its own colours should still ease — handled by explicit transitions. */
	opacity: 0;
	transition: opacity 200ms ease;
}
.yz-theme-switcher.is-ready { opacity: 1; }

/* ---- Toggle (collapsed FAB) --------------------------------------------- */
.yz-theme-switcher__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 15px;
	background: var(--yz-surface);
	color: var(--yz-text);
	border: 1px solid var(--yz-border-strong);
	border-radius: var(--yz-radius-pill);
	box-shadow: var(--yz-shadow-md);
	cursor: pointer;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1;
	transition: background-color 250ms ease, color 250ms ease,
	            border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.yz-theme-switcher__toggle:hover { transform: translateY(-1px); box-shadow: var(--yz-shadow-lg); }
.yz-theme-switcher__toggle:focus-visible { outline: 2px solid var(--yz-focus); outline-offset: 2px; }

/* Two-dot mark that mirrors the theme duo. */
.yz-theme-switcher__mark {
	display: inline-flex;
	gap: 3px;
}
.yz-theme-switcher__mark i {
	width: 10px; height: 10px; border-radius: 50%;
	border: 1px solid var(--yz-border-strong);
}
.yz-theme-switcher__mark i:nth-child(1) { background: #141210; }
.yz-theme-switcher__mark i:nth-child(2) { background: #4A0F19; }
.yz-theme-switcher__label { display: inline; }

/* ---- Panel (expanded) --------------------------------------------------- */
.yz-theme-switcher__panel {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	min-width: 208px;
	background: var(--yz-surface);
	border: 1px solid var(--yz-border-strong);
	box-shadow: var(--yz-shadow-lg);
	/* Collapsed by default; opens on .is-open. */
	transform-origin: bottom left;
	opacity: 0;
	transform: translateY(8px) scale(0.98);
	pointer-events: none;
	visibility: hidden;
	transition: opacity 240ms var(--yz-theme-ease, ease),
	            transform 240ms var(--yz-theme-ease, ease),
	            visibility 0s linear 240ms;
}
.yz-theme-switcher.is-open .yz-theme-switcher__panel {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}
.yz-theme-switcher__title {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yz-text-muted);
	padding: 6px 8px 4px;
}

/* ---- Options ------------------------------------------------------------ */
.yz-theme-option {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 10px 10px;
	background: transparent;
	border: 1px solid transparent;
	color: var(--yz-text-2);
	cursor: pointer;
	text-align: start;
	font-size: 12px;
	letter-spacing: 0.06em;
	line-height: 1.2;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.yz-theme-option:hover { background: rgba(127, 127, 127, 0.10); color: var(--yz-text); }
.yz-theme-option:focus-visible { outline: 2px solid var(--yz-focus); outline-offset: -2px; }

/* Swatch preview — a two-tone chip showing the theme's ground + accent. */
.yz-theme-option__swatch {
	flex: 0 0 auto;
	width: 30px; height: 30px;
	border: 1px solid var(--yz-border-strong);
	position: relative;
	overflow: hidden;
}
.yz-theme-option__swatch::after {
	content: "";
	position: absolute;
	inset-block: 0; inset-inline-end: 0;
	width: 42%;
}
.yz-theme-option[data-yz-theme-option="black"] .yz-theme-option__swatch { background: #141210; }
.yz-theme-option[data-yz-theme-option="black"] .yz-theme-option__swatch::after { background: #8C2F24; }
.yz-theme-option[data-yz-theme-option="burgundy"] .yz-theme-option__swatch { background: #160709; }
.yz-theme-option[data-yz-theme-option="burgundy"] .yz-theme-option__swatch::after { background: #A50606; }

.yz-theme-option__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.yz-theme-option__name { font-weight: 500; color: inherit; }
.yz-theme-option__desc { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--yz-text-muted); }

/* Check mark — hidden until the option is the active theme. */
.yz-theme-option__check {
	margin-inline-start: auto;
	opacity: 0;
	color: var(--yz-accent);
	transition: opacity 200ms ease;
}

/* ---- Active state — CSS-driven from <html data-yz-theme> (no-flash) ------ */
html[data-yz-theme="black"]    .yz-theme-option[data-yz-theme-option="black"],
html[data-yz-theme="burgundy"] .yz-theme-option[data-yz-theme-option="burgundy"] {
	border-color: var(--yz-border-strong);
	background: rgba(127, 127, 127, 0.08);
	color: var(--yz-text);
}
html[data-yz-theme="black"]    .yz-theme-option[data-yz-theme-option="black"]    .yz-theme-option__check,
html[data-yz-theme="burgundy"] .yz-theme-option[data-yz-theme-option="burgundy"] .yz-theme-option__check {
	opacity: 1;
}

/* ---- Motion / responsive ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.yz-theme-switcher__panel,
	.yz-theme-switcher__toggle,
	.yz-theme-option { transition: none; }
}

/* ==========================================================================
   In-header mode — placed in Astra's right icon cluster (the only visible mode)
   --------------------------------------------------------------------------
   theme-switcher.js moves the switcher into the .site-header-primary-section-
   right that is actually on screen — the desktop cluster above 921px, the
   mobile one below — and this class is what makes it visible: a native-looking
   header icon, a compact two-dot mark that drops its panel BELOW itself.
   ========================================================================== */

/* The Astra slot wrapper we inject — vertically center within the header bar. */
.yz-theme-slot {
	display: flex;
	align-items: center;
}

.yz-theme-switcher--in-header {
	display: flex;
	position: relative;      /* anchor the dropdown panel */
	flex-direction: row;
	align-items: center;
	gap: 0;
}

/* ---- Toggle → minimal header icon --------------------------------------- */
.yz-theme-switcher--in-header .yz-theme-switcher__toggle {
	background: transparent;
	border: 1px solid transparent;
	border-radius: 50%;
	box-shadow: none;
	padding: 7px;
	gap: 0;
}
.yz-theme-switcher--in-header .yz-theme-switcher__toggle:hover {
	transform: none;
	box-shadow: none;
	background: rgba(127, 127, 127, 0.12);
	border-color: var(--yz-border, rgba(127, 127, 127, 0.25));
}
.yz-theme-switcher--in-header .yz-theme-switcher__label { display: none; }
.yz-theme-switcher--in-header .yz-theme-switcher__mark { gap: 3px; }
.yz-theme-switcher--in-header .yz-theme-switcher__mark i { width: 9px; height: 9px; }

/* ---- Panel → dropdown anchored below the icon --------------------------- */
.yz-theme-switcher--in-header .yz-theme-switcher__panel {
	position: absolute;
	top: calc(100% + 10px);
	inset-inline-end: 0;
	z-index: 1001;
	transform-origin: top right;
	/* Opens downward from the icon rather than upward from a corner. */
	transform: translateY(-8px) scale(0.98);
}
.yz-theme-switcher--in-header.is-open .yz-theme-switcher__panel {
	transform: translateY(0) scale(1);
}

/* The always-dark "solid" header (checkout/cart) has a dark bar even in the
   light "black" theme, where --yz-text is dark → the icon would vanish. Force a
   light icon there so it stays legible, matching the header's inverted icons. */
body.yz-solid-header .yz-theme-switcher--in-header .yz-theme-switcher__toggle {
	color: var(--yz-ivory, #F7F3F2);
}
body.yz-solid-header .yz-theme-switcher--in-header .yz-theme-switcher__toggle:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* Belong to the header's ACTION cluster (theme · search · cart · account), which
   header.css §3 paints from --yz-header-action: wine on the light bar, ivory on
   burgundy. Reading the same token — instead of --yz-text, which only stays legible
   while it happens to oppose the header bg — keeps the icon visible even if the bar
   renders dark (transparent-header fallback, a stale cache, etc.) and moves it with
   its neighbours. No theme guard: the token is what flips. */
.yazan.yz-comma-header .yz-theme-switcher--in-header .yz-theme-switcher__toggle {
	color: var(--yz-header-action);
}
.yazan.yz-comma-header .yz-theme-switcher--in-header .yz-theme-switcher__toggle:hover {
	color: var(--yz-header-action-hover);
	background: color-mix(in srgb, var(--yz-header-action) 10%, transparent);
}

/* Phone header bar: logo · theme · search · cart · menu, all on ~390px. Keep the
   icon compact so the cluster does not crowd the hamburger. */
@media (max-width: 600px) {
	.yz-theme-switcher--in-header .yz-theme-switcher__toggle { padding: 6px; }
}

/* ==========================================================================
   Binary mode — Sun / Moon switch (exactly two themes)
   --------------------------------------------------------------------------
   A single icon that morphs between a sun (light "black" theme) and a moon
   (dark "burgundy" theme). One click flips to the other theme — no dropdown.
   The visible icon is driven purely by <html data-yz-theme>, so it is correct
   on first paint.
   ========================================================================== */

/* In binary mode the two-dot mark, the text label and the panel all disappear;
   only the day/night icon remains. */
.yz-theme-switcher--binary .yz-theme-switcher__mark,
.yz-theme-switcher--binary .yz-theme-switcher__label,
.yz-theme-switcher--binary .yz-theme-switcher__panel {
	display: none;
}

.yz-theme-switcher--binary .yz-theme-switcher__toggle {
	padding: 8px;
	border-radius: 50%;
	gap: 0;
}

/* Icon stage — both glyphs stacked; the inactive one is rotated + scaled away. */
.yz-theme-switcher__daynight {
	display: none;
	position: relative;
	width: 20px;
	height: 20px;
}
.yz-theme-switcher--binary .yz-theme-switcher__daynight { display: inline-block; }

.yz-dn {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: inherit;
	transition: opacity 300ms ease, transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Hidden state — spun and shrunk toward the center. */
.yz-dn--sun  { opacity: 0; transform: rotate(-90deg) scale(0.35); }
.yz-dn--moon { opacity: 0; transform: rotate(90deg)  scale(0.35); }

/* Active theme reveals its icon (sun ⇄ black/light, moon ⇄ burgundy/dark). */
html[data-yz-theme="black"]    .yz-dn--sun,
html[data-yz-theme="burgundy"] .yz-dn--moon {
	opacity: 1;
	transform: none;
}

/* Header-mode binary: match the neighbouring icon scale. */
.yz-theme-switcher--in-header.yz-theme-switcher--binary .yz-theme-switcher__daynight {
	width: 19px;
	height: 19px;
}

@media (prefers-reduced-motion: reduce) {
	.yz-dn { transition: opacity 150ms ease; }
	.yz-dn--sun, .yz-dn--moon { transform: none; }
}