/*
 * Шапка и футер. Цвета полос заданы ACF-опциями (header_panel_colors, footer_colors),
 * здесь - форма: волосяные границы, ритм, состояния пунктов меню.
 */

.page-header {
	border-bottom: 1px solid var(--gs-line);
}

.page-header .primary-nav__list {
	gap: 4px;
}

/* Пункт меню тема печатает как .main-menu-link, а не .primary-nav__link. */
.page-header .primary-nav__list .main-menu-link {
	border-radius: var(--gs-radius);
	display: inline-block;
	padding: 8px 12px;
	transition: background-color .2s var(--gs-ease), color .2s var(--gs-ease);
}

.page-header .primary-nav__list .main-menu-link:hover {
	background: rgba(255, 255, 255, .06);
}

/* Текущий раздел: подсветка плашкой, а не только цветом текста. */
.page-header .primary-nav__list .current-menu-item > .main-menu-link,
.page-header .primary-nav__list .current_page_item > .main-menu-link {
	background: var(--gs-accent-soft);
	color: var(--gs-accent);
}

.page-header .header-panel__button {
	border-radius: var(--gs-radius);
	font-weight: 700;
}

/* ------------------------------------ шапка в промежутке 1001-1389px (боковой скролл)

   Бургер тема прячет уже на 1000px, но логотип + меню + бонус + две кнопки в одну
   строку помещаются только с ~1390px. Ниже страница получала горизонтальную
   прокрутку (scrollWidth 1202 при вьюпорте 1024), а на 1250-1380px логотип
   сжимался флексом до 18-140px вместо 147. Ужимаем ритм и разрешаем перенос строки. */
@media (min-width: 1001px) and (max-width: 1389px) {
	.page-header .header-panel > .container {
		column-gap: 20px;
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/* Логотип не сжимаем: пусть лучше перенесётся строка, чем схлопнется картинка. */
	.page-header .header-panel__logo {
		flex-shrink: 0;
	}

	.page-header .primary-nav__list {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 4px;
	}

	.page-header .primary-nav .menu-depth-0__item:not(:last-of-type) {
		margin-right: .5rem;
	}

	.page-header .primary-nav__list .main-menu-link {
		padding: 8px;
	}

	.page-header .header-panel__buttons {
		gap: 10px;
	}
}

/* ------------------------------------------------------ шапка на мобильных (<=1000px) */

/* Бургер тема ставит absolute в правый верхний угол .page-header (right:15px, 24px),
   а логотипной строке отдаёт всю ширину минус 30px - под кнопку бонуса этого мало,
   она заезжает на полоски. Резервируем под бургер полосу справа и прижимаем строку
   влево (тема центрирует её margin:auto, из-за чего слева пропадало 15px). */
@media (max-width: 1000px) {
	.page-header .header-panel__logo,
	.page-header .header-panel__logo:has(.header-bonus-panel) {
		box-sizing: border-box;
		margin-left: 0;
		margin-right: 0;
		padding-right: 46px;
		width: 100%;
	}

	/* Декоративный "салют" за кнопкой бонуса - 240px, вылезает на 28px правее кнопки
	   и накрывает бургер, а лучами лезет на логотип и кнопки. На узком экране убираем;
	   тема и сама гасит его при открытом меню. */
	.page-header .header-bonus-panel__button-bg {
		display: none;
	}

	/* Всплывашка бонуса: держим в пределах экрана на любой ширине. */
	.page-header .header-bonus-panel_mobile .header-bonus-panel__list-wrapper {
		left: auto;
		max-width: calc(100vw - 24px);
		min-width: 0;
		right: -12px;
		width: 300px;
	}

	.page-header .header-bonus-panel__list {
		box-sizing: border-box;
		max-width: 100%;
	}

	/* Бургер: увеличиваем зону нажатия до 44px, не трогая размер полосок. */
	.page-header .page-header__burger {
		box-sizing: content-box;
		margin: -10px;
		padding: 16px 14px;
	}
}

/* ------------------------------------------------- выдвижное меню (<=1000px) */

/* Плашки пунктов - оформление десктопной строки меню. В выдвижной панели тема
   рисует пункты как block с разделителем, и inline-block из десктопного правила
   ломал раскладку: ссылки шириной по тексту и обрезанная скруглённая рамка. */
@media (max-width: 1000px) {
	.page-header .primary-nav__list {
		gap: 0;
		padding: 8px 0 24px;
	}

	.page-header .primary-nav__list .main-menu-link {
		border-radius: 0;
		box-sizing: border-box;
		display: block;
		padding: 14px 20px;
		width: 100%;
	}

	.page-header .primary-nav__list .current-menu-item > .main-menu-link,
	.page-header .primary-nav__list .current_page_item > .main-menu-link {
		box-shadow: inset 3px 0 0 var(--gs-accent);
	}

	/* Логотип в панели: тема даёт ему высоту под десктопный размер, из-за чего
	   между ним и кнопками остаётся пустая полоса. */
	.page-header .primary-nav__logo {
		height: auto;
		padding: 16px 10px 8px;
	}

	.page-header .primary-nav__logo img {
		height: auto;
		max-height: 40px;
	}

	/* Кнопки регистрации/входа внутри панели: на всю ширину, с отступами от краёв. */
	.page-header .primary-nav .header-mobile-buttons {
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 0 20px 8px;
		width: 100%;
	}

	.page-header .primary-nav .header-mobile-buttons .site-button {
		width: 100%;
	}
}

/* Хлебные крошки: приглушённые, текущая страница белая. */
main .breadcrumbs,
.breadcrumbs {
	color: var(--gs-muted);
	font-size: .88rem;
}

.page-footer {
	border-top: 1px solid var(--gs-line);
}

.page-footer .footer-column__title {
	color: var(--gs-text);
	display: block;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.page-footer .footer-column a {
	transition: color .2s var(--gs-ease);
}

.page-footer .menu li + li {
	margin-top: 8px;
}