/* Dark / light toggle — loaded on all front-end pages */

.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line, #eadfd6);
	border-radius: 12px;
	background: var(--card, #fff);
	color: var(--text-soft, #9a7d78);
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
	box-shadow: var(--shadow-sm, 0 1px 2px rgba(107, 73, 68, 0.06));
}

.theme-toggle:hover {
	color: var(--text, #6b4944);
	border-color: var(--primary, #f7823d);
	transform: translateY(-1px);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--primary, #f7823d);
	outline-offset: 2px;
}

.theme-toggle__icon {
	display: none;
	width: 20px;
	height: 20px;
}

.theme-toggle__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Light UI: offer dark mode (show moon) */
body:not(.dark) .theme-toggle__icon--moon {
	display: block;
}

/* Dark UI: offer light mode (show sun) */
body.dark .theme-toggle__icon--sun {
	display: block;
}

/* Landing nav: actions cluster */
nav.top .nav-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.inner-header__end {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-left: auto;
	flex-wrap: wrap;
}

@media (max-width: 720px) {
	nav.top .nav-actions {
		gap: 8px;
	}

	nav.top .nav-actions .theme-toggle {
		width: 38px;
		height: 38px;
	}

	nav.top .mini-cta {
		padding: 8px 12px;
		font-size: 13px;
	}

	.inner-header__end {
		margin-left: 0;
		width: 100%;
		justify-content: space-between;
	}
}

body.dark .theme-toggle {
	background: var(--card, #2b1f1c);
	border-color: var(--line, #3a2925);
	color: var(--text-soft, #c5ada8);
}

body.dark .theme-toggle:hover {
	color: var(--text, #f3ede5);
	border-color: var(--primary, #f7823d);
}

body.nopeek-inner.dark .theme-toggle {
	background: var(--np-card, #2b1f1c);
	border-color: var(--np-line, #3a2925);
	color: var(--np-text-soft, #c5ada8);
}

body.nopeek-inner.dark .theme-toggle:hover {
	color: var(--np-text, #f3ede5);
	border-color: var(--np-primary, #f7823d);
}