/* 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, #cfdad6);
	border-radius: 12px;
	background: var(--card, #fff);
	color: var(--text-soft, #4a635e);
	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);
}

.theme-toggle:hover {
	color: var(--text, #171d1b);
	border-color: var(--primary, #366760);
	transform: translateY(-1px);
}

.theme-toggle:focus-visible {
	outline: 2px solid var(--primary, #366760);
	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: 12px;
	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, #1a1c1b);
	border-color: var(--line, #2c3230);
	color: var(--text-soft, #c0c8c6);
}

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