/* ==========================================================================
   Переключатель темы и выбор темы в настройках профиля.

   Эти стили не про светлую тему: кнопка в шапке и карточки выбора темы
   одинаковы в тёмной и в светлой. Светлая палитра живёт в
   css/moigrani-light.css.
   ========================================================================== */

/* ---------- Переключатель темы ---------- */

.mg-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: .9rem;
	padding: 0;
	border: 1px solid var(--mg-line-gold);
	border-radius: 50%;
	background: transparent;
	color: var(--mg-gold);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.mg-theme-toggle:hover,
.mg-theme-toggle:focus-visible {
	background: var(--mg-gold-fill);
	border-color: var(--mg-gold-fill);
	color: #241f18;
	transform: translateY(-1px);
}

.mg-theme-toggle:focus-visible {
	outline: 2px solid var(--mg-gold);
	outline-offset: 2px;
}

.mg-theme-toggle svg {
	width: 1.05rem;
	height: 1.05rem;
}

.mg-theme-toggle__moon {
	fill: currentColor;
	stroke: none;
}

.mg-theme-toggle__sun {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* В тёмной теме показываем солнце (переключит на светлую), в светлой — луну. */
.mg-theme-toggle__sun { display: none; }
html[data-mg-theme="light"] .mg-theme-toggle__sun { display: block; }
html[data-mg-theme="light"] .mg-theme-toggle__moon { display: none; }

/* Меню в шапке: пункт-переключатель не должен выглядеть ссылкой. */
.main-navigation .mg-theme-toggle,
.mobile-navigation .mg-theme-toggle {
	width: 2rem;
	height: 2rem;
	margin-left: .6rem;
	vertical-align: middle;
}

/* В мобильной шапке кнопка стоит рядом с «меню». */
.site-mobile-header-wrap .mg-theme-toggle {
	width: 2.1rem;
	height: 2.1rem;
	margin-left: .55rem;
	flex: 0 0 auto;
}

/* ---------- Настройки профиля: выбор темы ---------- */

.mg-theme-choice {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: .2rem 0 .6rem;
}

.mg-theme-choice__item {
	position: relative;
	flex: 1 1 9rem;
}

.mg-theme-choice__input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.mg-theme-choice__label {
	display: block;
	padding: .75rem .9rem;
	border: 1px solid var(--mg-line);
	border-radius: 3px;
	background: var(--mg-surface-2);
	color: var(--mg-text);
	font-size: .9rem;
	line-height: 1.35;
	cursor: pointer;
	transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}

.mg-theme-choice__label strong {
	display: block;
	margin-bottom: .15rem;
	color: var(--mg-cream);
	font-weight: 500;
}

.mg-theme-choice__input:checked + .mg-theme-choice__label {
	border-color: var(--mg-gold);
	background: var(--mg-surface);
	box-shadow: inset 0 0 0 1px var(--mg-gold);
}

.mg-theme-choice__input:focus-visible + .mg-theme-choice__label {
	outline: 2px solid var(--mg-gold);
	outline-offset: 2px;
}