/*
 * Theme Switcher — observatorio-cero-theme
 * Styles for the color mode toggle component.
 *
 * Uses design tokens from theme.json via CSS custom properties.
 * Component-specific sizes (button dimensions, icon sizes) use literal
 * values that are not exposed as theme tokens.
 */

/* ── Theme Switcher Container ── */
.theme-switcher {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	padding: 0 var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--border-radius--default);
	background: var(--wp--preset--color--surface-container-low);
	height: var(--wp--custom--site-header--action-size);
	transition: height var(--wp--custom--site-header--transition-duration) var(--wp--custom--mode-transitions--easing);
}


/* ── Theme Switcher Buttons ── */
.theme-switcher__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ui--control-size--default);
	height: var(--wp--custom--ui--control-size--default);
	padding: 0;
	border: none;
	border-radius: var(--wp--custom--border-radius--default);
	background: transparent;
	color: var(--wp--preset--color--on-surface-variant);
	cursor: pointer;
	transition: background-color var(--wp--custom--ui--interaction--fast), color var(--wp--custom--ui--interaction--fast),
	            width var(--wp--custom--site-header--transition-duration) var(--wp--custom--mode-transitions--easing),
	            height var(--wp--custom--site-header--transition-duration) var(--wp--custom--mode-transitions--easing);
}

/* Expanded state: enlarge theme buttons on widescreen desktop (≥ 1367px) */
@media (min-width: 1367px) {
	.site-header--expanded .theme-switcher {
		height: calc(var(--wp--custom--site-header--action-size) * var(--wp--custom--ui--scale--icon));
	}

	.site-header--expanded .theme-switcher__btn {
		width: calc(var(--wp--custom--ui--control-size--default) * var(--wp--custom--ui--scale--icon));
		height: calc(var(--wp--custom--ui--control-size--default) * var(--wp--custom--ui--scale--icon));
	}

	.site-header--expanded .theme-switcher__icon {
		width: calc(var(--wp--custom--ui--control-size--icon, 1.125rem) * var(--wp--custom--ui--scale--icon, 1.4));
		height: calc(var(--wp--custom--ui--control-size--icon, 1.125rem) * var(--wp--custom--ui--scale--icon, 1.4));
	}
}

.theme-switcher__btn:hover {
	background: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface);
}

.theme-switcher__btn:focus-visible {
	outline: var(--wp--custom--ui--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--ui--focus--offset);
}

/* Active: primary background + on-primary text for strong contrast in all modes */
.theme-switcher__btn.is-active {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
}

/* High Contrast Mode Overrides */
html[data-theme="high-contrast"] .theme-switcher__btn {
	color: var(--wp--preset--color--on-surface);
}

html[data-theme="high-contrast"] .theme-switcher__btn.is-active {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--on-primary) !important;
	outline: var(--wp--custom--ui--border-width--standard, 2px) solid var(--wp--preset--color--outline);
}

/* ── Theme Switcher Icons ── */
.theme-switcher__icon {
	width: var(--wp--custom--ui--control-size--icon, 1.125rem);
	height: var(--wp--custom--ui--control-size--icon, 1.125rem);
	fill: currentColor;
	color: inherit;
	display: block;
	transition: width var(--wp--custom--site-header--transition-duration, 0.35s) var(--wp--custom--mode-transitions--easing, ease),
	            height var(--wp--custom--site-header--transition-duration, 0.35s) var(--wp--custom--mode-transitions--easing, ease);
}

.theme-switcher__btn svg,
.theme-switcher__btn svg path,
.theme-switcher__btn use {
	fill: currentColor;
	color: inherit;
}

/* ── Mobile/Tablet cycle button (R2.10: icono unico con ciclo en tablets y moviles ≤ 1366px) ── */
.theme-switcher__btn--cycle {
	display: none;
}

.theme-switcher__icon.is-hidden {
	display: none;
}

@media (max-width: 1366px) {
	.theme-switcher {
		padding: 0;
		background: transparent;
		height: var(--wp--custom--site-header--action-size);
		gap: 0;
		display: inline-flex;
		align-items: center;
	}

	.theme-switcher__btn:not(.theme-switcher__btn--cycle) {
		display: none !important;
	}

	.theme-switcher__btn--cycle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: var(--wp--custom--site-header--action-size);
		height: var(--wp--custom--site-header--action-size);
		min-width: var(--wp--custom--site-header--action-size);
		min-height: var(--wp--custom--site-header--action-size);
		padding: 0;
		border-radius: var(--wp--custom--border-radius--default);
		background: var(--wp--preset--color--surface-container-low);
		color: var(--wp--preset--color--on-surface-variant);
		box-sizing: border-box;
		transform: none;
	}

	.theme-switcher__btn--cycle:hover,
	.theme-switcher__btn--cycle:active,
	.theme-switcher__btn--cycle:focus {
		background: var(--wp--preset--color--surface-container-high);
		color: var(--wp--preset--color--primary);
		transform: none;
	}

	.theme-switcher__icon {
		width: var(--wp--custom--ui--control-size--icon);
		height: var(--wp--custom--ui--control-size--icon);
		fill: currentColor;
		color: inherit;
	}
}