/**
 * Переключатель языков в шапке — дополнения к style.css.
 *
 * Рамка, шрифт, флаг и стрелка (.wc-lang, .wc-lang__label, .wc-lang__flag,
 * .wc-lang__caret) уже свёрстаны в style.css по макету. Здесь только то,
 * чего там нет: обёртка <details> с выпадающим списком (.wc-langsw*),
 * звёзды флага США, поворот стрелки, компактный вариант мобильной шапки.
 *
 * Разметка — wimpole_us_lang_switcher() в inc/i18n.php.
 * Макет Figma 7nWiThVtQ2mzwBdhcuV0B0:
 *   десктоп          — 259:572  (175×48, рядом с кнопкой, зазор 14);
 *   мобильная шапка  — 259:3038 (124×30, рядом с бургером, зазор 10);
 *   выдвижное меню   — 259:2161 (на всю ширину над кнопкой, зазор 14).
 *
 * Выпадающий список в макете не нарисован: он повторяет рамку и шрифт
 * переключателя на фирменном тёмном фоне (#16435a — цвет текста кнопки).
 */

/* Блок кнопки Astra: переключатель и кнопка в одну строку. */
.ast-header-button-1 {
	flex-wrap: nowrap;
	align-items: center;
}

.wc-langsw {
	position: relative;
	flex: 0 0 auto;
	margin: 0 14px 0 0;
	padding: 0;
	border: 0;
}

.wc-langsw > .wc-lang {
	list-style: none;
	cursor: pointer;
	user-select: none;
}

.wc-langsw > .wc-lang::-webkit-details-marker {
	display: none;
}

.wc-langsw > .wc-lang::marker {
	content: "";
}

.wc-langsw > .wc-lang:focus-visible {
	outline: 2px solid var(--wc-accent);
	outline-offset: 2px;
}

.wc-langsw .wc-lang__name {
	white-space: nowrap;
}

/* Флаг 24×16; у США звёзды — отдельный слой поверх полос, как в макете. */
.wc-langsw .wc-lang__flag {
	position: relative;
	overflow: hidden;
}

.wc-langsw .wc-lang__flag img {
	display: block;
	width: 24px;
	height: 16px;
	max-width: none;
	object-fit: cover;
}

.wc-langsw .wc-lang__flag .wc-lang__stars {
	position: absolute;
	top: 3.33%;
	left: 1.11%;
	width: auto;
	height: auto;
}

/* Стрелка в макете — шеврон «вправо», повёрнутый на 90°. */
.wc-langsw .wc-lang__caret {
	display: flex;
	align-items: center;
	justify-content: center;
}

.wc-langsw .wc-lang__caret img {
	display: block;
	max-width: none;
	transform: rotate(90deg);
	transition: transform 0.2s ease;
}

.wc-langsw .wc-lang__caret img.wc-lang__caret-sm {
	display: none;
}

.wc-langsw[open] .wc-lang__caret img {
	transform: rotate(-90deg);
}

/* Выпадающий список. */
.wc-langsw__list {
	position: absolute;
	z-index: 1000;
	top: calc(100% + 6px);
	right: 0;
	left: 0;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: #16435a;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--wc-radius);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.wc-langsw__list li {
	margin: 0;
	padding: 0;
}

.wc-langsw__list a {
	display: flex;
	padding: 10px 14px;
	color: #fff;
	font: 600 14px/1 Roboto, sans-serif;
	text-decoration: none;
}

.wc-langsw__list a:hover,
.wc-langsw__list a:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.1);
}

/* Мобильная шапка: компактный вариант 124×30 рядом с бургером. */
#ast-mobile-header .wc-langsw {
	margin-right: 10px;
}

#ast-mobile-header .wc-langsw > .wc-lang {
	width: auto;
	min-width: 124px;
	height: 30px;
	padding: 0 12px;
	gap: 10px;
}

#ast-mobile-header .wc-langsw .wc-lang__caret {
	width: 11px;
	height: 6px;
}

#ast-mobile-header .wc-langsw .wc-lang__caret img.wc-lang__caret-lg {
	display: none;
}

#ast-mobile-header .wc-langsw .wc-lang__caret img.wc-lang__caret-sm {
	display: block;
}

#ast-mobile-header .wc-langsw__list {
	left: auto;
	min-width: 100%;
}

/*
 * Телефон (макет 259:3002): в шапке логотип, переключатель и бургер,
 * зазор 10. Кнопка записи на телефоне — внизу выдвижного меню (кнопка 2),
 * в шапке рядом с переключателем она выталкивала бургер за край экрана.
 */
@media (max-width: 544px) {

	/* Селектор сильнее правил style.css и header-gutters.css для этой секции. */
	.ast-header-break-point #ast-mobile-header .ast-primary-header-bar .site-header-section.site-header-primary-section-right {
		gap: 10px;
	}

	#ast-mobile-header .ast-header-button-1 .ast-builder-button-wrap {
		display: none;
	}

	#ast-mobile-header .wc-langsw {
		margin-right: 0;
	}

}

/* Выдвижное меню: на всю ширину над кнопкой, список раскрывается в потоке. */
#ast-mobile-popup .ast-header-button-2 {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

#ast-mobile-popup .wc-langsw {
	width: 100%;
	margin: 0 0 14px;
}

#ast-mobile-popup .wc-langsw__list {
	position: static;
	margin-top: 6px;
	box-shadow: none;
}