/**
 * Frosted liquid-glass theme switcher (light / dark / dim).
 * Compact, left side of .paper-top (RTL end).
 */

.nazemi-switcher {
	--c-glass: #ffffff;
	--c-light: #fff;
	--c-dark: #000;
	--c-content: #1a1a1a;
	--c-action: #3a3a3a;
	--glass-reflex-dark: 1;
	--glass-reflex-light: 1;
	--saturation: 160%;

	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	width: 118px;
	min-width: 118px;
	height: 34px;
	max-height: 34px;
	box-sizing: border-box;
	padding: 3px 4px 4px;
	margin: 0;
	border: 1.5px solid transparent;
	border-radius: 99em;
	background: color-mix(in srgb, var(--c-glass) 10%, transparent);
	backdrop-filter: url(#nazemi-frosted) blur(8px) saturate(var(--saturation));
	-webkit-backdrop-filter: blur(8px) saturate(var(--saturation));
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--c-light) 50%, transparent),
		0 6px 16px color-mix(in srgb, var(--c-dark) 8%, transparent),
		inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 12%), transparent),
		inset 1px 1.5px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
		inset -0.3px -1px 3px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 10%), transparent);
	transition:
		background-color 400ms cubic-bezier(1, 0, 0.4, 1),
		box-shadow 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* wpautop defense — keep options in one horizontal row */
.nazemi-switcher > p,
.nazemi-switcher p {
	display: contents;
	margin: 0;
	padding: 0;
}

.nazemi-switcher br {
	display: none;
}

.nazemi-switcher__track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 2px;
	width: 100%;
	height: 100%;
	min-width: 0;
}

body[data-nazemi-theme="dark"] .nazemi-switcher,
body:has(.nazemi-switcher__input[value="dark"]:checked) .nazemi-switcher {
	--c-glass: #bbbbbc;
	--c-light: #fff;
	--c-dark: #000;
	--c-content: #e1e1e1;
	--c-action: #03d5ff;
	--glass-reflex-dark: 2;
	--glass-reflex-light: 0.35;
	--saturation: 150%;
	background: rgba(255, 255, 255, 0.08);
	box-shadow:
		0 0 0 1.5px rgba(255, 255, 255, 0.45),
		0 12px 28px rgba(0, 0, 0, 0.28),
		inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 12%), transparent),
		inset 1.5px 2px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent),
		inset -0.3px -1px 4px 0 color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 14%), transparent);
}

body[data-nazemi-theme="dim"] .nazemi-switcher,
body:has(.nazemi-switcher__input[value="dim"]:checked) .nazemi-switcher {
	--c-light: #99deff;
	--c-dark: #20001b;
	--c-glass: hsl(335 70% 74%);
	--c-content: #d5dbe2;
	--c-action: #ff48a9;
	--glass-reflex-dark: 2;
	--glass-reflex-light: 0.7;
	--saturation: 200%;
	background: color-mix(in srgb, var(--c-glass) 14%, transparent);
	box-shadow:
		0 0 0 1.5px color-mix(in srgb, var(--c-light) 50%, transparent),
		0 12px 28px rgba(0, 0, 0, 0.22),
		inset 0 0 0 1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 14%), transparent),
		inset 1.5px 2px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 70%), transparent);
}

.nazemi-switcher__filter {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.nazemi-switcher__legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
	white-space: nowrap;
	clip-path: inset(100%);
	clip: rect(0 0 0 0);
	overflow: hidden;
}

.nazemi-switcher__input {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.nazemi-switcher__icon {
	display: block;
	width: 100%;
	max-width: 15px;
	height: auto;
	transition: scale 200ms cubic-bezier(0.5, 0, 0, 1);
}

.nazemi-switcher__option {
	--c: var(--c-content);
	position: relative;
	z-index: 1;
	display: inline-flex;
	flex: 0 0 36px;
	justify-content: center;
	align-items: center;
	padding: 0 4px;
	width: 36px;
	height: 100%;
	box-sizing: border-box;
	border-radius: 99em;
	opacity: 1;
	transition: color 160ms, scale 160ms;
	cursor: pointer;
}

.nazemi-switcher__option:hover {
	--c: var(--c-action);
}

.nazemi-switcher__option:hover .nazemi-switcher__icon {
	scale: 1.15;
}

.nazemi-switcher__option:has(input:checked) {
	--c: var(--c-content);
	cursor: default;
}

.nazemi-switcher__option:has(input:checked) .nazemi-switcher__icon {
	scale: 1;
}

/* Thumb — frosted chip */
.nazemi-switcher::after {
	content: "";
	position: absolute;
	left: 3px;
	top: 3px;
	display: block;
	width: 36px;
	height: calc(100% - 6px);
	border-radius: 99em;
	background: color-mix(in srgb, var(--c-glass) 28%, transparent);
	z-index: 0;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--c-light) 40%, transparent),
		inset 2px 1px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 80%), transparent),
		inset -1.5px -1px 0 -1px color-mix(in srgb, var(--c-light) calc(var(--glass-reflex-light) * 55%), transparent),
		inset -1px 2px 3px -1px color-mix(in srgb, var(--c-dark) calc(var(--glass-reflex-dark) * 16%), transparent),
		0 3px 8px color-mix(in srgb, var(--c-dark) 8%, transparent);
}

.nazemi-switcher:has(input[c-option="1"]:checked)::after {
	translate: 0 0;
	transform-origin: right;
	transition:
		background-color 400ms cubic-bezier(1, 0, 0.4, 1),
		box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
		translate 400ms cubic-bezier(1, 0, 0.4, 1);
	animation: nazemi-scale-toggle 440ms ease;
}

.nazemi-switcher:has(input[c-option="2"]:checked)::after {
	translate: 38px 0;
	transition:
		background-color 400ms cubic-bezier(1, 0, 0.4, 1),
		box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
		translate 400ms cubic-bezier(1, 0, 0.4, 1);
	animation: nazemi-scale-toggle-2 440ms ease;
}

.nazemi-switcher[c-previous="1"]:has(input[c-option="2"]:checked)::after {
	transform-origin: left;
}

.nazemi-switcher[c-previous="3"]:has(input[c-option="2"]:checked)::after {
	transform-origin: right;
}

.nazemi-switcher:has(input[c-option="3"]:checked)::after {
	translate: 76px 0;
	transform-origin: left;
	transition:
		background-color 400ms cubic-bezier(1, 0, 0.4, 1),
		box-shadow 400ms cubic-bezier(1, 0, 0.4, 1),
		translate 400ms cubic-bezier(1, 0, 0.4, 1);
	animation: nazemi-scale-toggle-3 440ms ease;
}

@keyframes nazemi-scale-toggle {
	0% { scale: 1 1; }
	50% { scale: 1.1 1; }
	100% { scale: 1 1; }
}

@keyframes nazemi-scale-toggle-2 {
	0% { scale: 1 1; }
	50% { scale: 1.15 1; }
	100% { scale: 1 1; }
}

@keyframes nazemi-scale-toggle-3 {
	0% { scale: 1 1; }
	50% { scale: 1.1 1; }
	100% { scale: 1 1; }
}

/* ---------- Paper theme tokens ---------- */
html,
body.paper-home,
body.paper-page {
	transition:
		background 400ms cubic-bezier(1, 0, 0.4, 1),
		color 400ms cubic-bezier(1, 0, 0.4, 1);
}

body.paper-home,
body.paper-page,
body.paper-home .wp-site-blocks,
body.paper-page .wp-site-blocks,
.paper-shell,
.nazemi-site-footer,
footer.wp-block-template-part {
	transition: background-color 400ms cubic-bezier(1, 0, 0.4, 1);
}

.paper-sheet,
.nazemi-site-footer__frame {
	transition:
		background-color 400ms cubic-bezier(1, 0, 0.4, 1),
		border-color 400ms cubic-bezier(1, 0, 0.4, 1),
		color 400ms cubic-bezier(1, 0, 0.4, 1);
}

/* Dark */
body[data-nazemi-theme="dark"] {
	--paper-page: #1b1b1d;
	--paper-sheet: #242426;
	--paper-ink: #e8e8ea;
	--paper-muted: #b8b8bc;
	--paper-faint: #8a8a90;
	--paper-line: #e8e8ea;
	--paper-rule: rgba(232, 232, 234, 0.16);
	color: var(--paper-ink);
}

body[data-nazemi-theme="dark"],
body[data-nazemi-theme="dark"] .wp-site-blocks,
body[data-nazemi-theme="dark"] .paper-shell,
body[data-nazemi-theme="dark"] .nazemi-site-footer,
body[data-nazemi-theme="dark"] footer.wp-block-template-part {
	background: var(--paper-page) !important;
	background-color: var(--paper-page) !important;
}

body[data-nazemi-theme="dark"] .paper-sheet,
body[data-nazemi-theme="dark"] .nazemi-site-footer__frame {
	background: var(--paper-sheet) !important;
	background-color: var(--paper-sheet) !important;
}

/* Dim */
body[data-nazemi-theme="dim"] {
	--paper-page: #152433;
	--paper-sheet: #1c2f42;
	--paper-ink: #d5dbe2;
	--paper-muted: #a8b4c2;
	--paper-faint: #7a8796;
	--paper-line: #d5dbe2;
	--paper-rule: rgba(213, 219, 226, 0.16);
	color: var(--paper-ink);
}

body[data-nazemi-theme="dim"],
body[data-nazemi-theme="dim"] .wp-site-blocks,
body[data-nazemi-theme="dim"] .paper-shell,
body[data-nazemi-theme="dim"] .nazemi-site-footer,
body[data-nazemi-theme="dim"] footer.wp-block-template-part {
	background: var(--paper-page) !important;
	background-color: var(--paper-page) !important;
}

body[data-nazemi-theme="dim"] .paper-sheet,
body[data-nazemi-theme="dim"] .nazemi-site-footer__frame {
	background: var(--paper-sheet) !important;
	background-color: var(--paper-sheet) !important;
}

@media (max-width: 860px) {
	.paper-top > .nazemi-switcher {
		margin-inline-start: auto;
	}
}

@media (max-width: 700px) {
	.nazemi-switcher {
		display: none !important;
	}

	body[data-nazemi-theme="dark"],
	body[data-nazemi-theme="dark"] .wp-site-blocks,
	body[data-nazemi-theme="dark"] .paper-shell,
	body[data-nazemi-theme="dark"] .nazemi-site-footer,
	body[data-nazemi-theme="dark"] footer.wp-block-template-part,
	body[data-nazemi-theme="dark"] .paper-sheet,
	body[data-nazemi-theme="dark"] .nazemi-site-footer__frame {
		background: var(--paper-sheet) !important;
		background-color: var(--paper-sheet) !important;
	}

	body[data-nazemi-theme="dim"],
	body[data-nazemi-theme="dim"] .wp-site-blocks,
	body[data-nazemi-theme="dim"] .paper-shell,
	body[data-nazemi-theme="dim"] .nazemi-site-footer,
	body[data-nazemi-theme="dim"] footer.wp-block-template-part,
	body[data-nazemi-theme="dim"] .paper-sheet,
	body[data-nazemi-theme="dim"] .nazemi-site-footer__frame {
		background: var(--paper-sheet) !important;
		background-color: var(--paper-sheet) !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nazemi-switcher,
	.nazemi-switcher::after,
	.nazemi-switcher__icon,
	html,
	body.paper-home,
	body.paper-page,
	.paper-sheet,
	.nazemi-site-footer__frame {
		transition: none !important;
		animation: none !important;
	}
}