/* ==========================================================================
   Baliimoti Design — Хедър
   Спецификация: design/DESIGN.md §4 (Navigation), §8 (Responsive).
   Стойности — само от tokens.css. Темата g5-beyot (layout header-1) остава
   непокътната; тук само презаписваме визуално.
   !important се ползва единствено там, където темата вече налага стойност с
   !important — отбелязано изрично на всяко място.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Топ лента — Login / Submit Property / Language (дискретна, не се маха)
   -------------------------------------------------------------------------- */
.top-bar-wrapper {
	background-color: var(--bd-surface-alt);
	color: var(--bd-text-tertiary);
	font-family: var(--bd-font-body);
	font-size: var(--bd-fs-caption);
	font-weight: 400;
}

.top-bar-inner {
	padding-top: var(--bd-s-2);
	padding-bottom: var(--bd-s-2); /* ≈ 36px обща височина */
}

.top-bar-wrapper a,
.top-bar-wrapper .topbar-link {
	color: var(--bd-text-tertiary);
}

.top-bar-wrapper a:hover,
.top-bar-wrapper .topbar-link:hover {
	color: var(--bd-primary);
}

.top-bar-wrapper .topbar-link i,
.top-bar-wrapper .submit-property a i {
	color: var(--bd-accent-dark);
}

/* Темата прави иконите на соц. мрежи бели — върху светлата лента са невидими */
.top-bar-wrapper .social-profiles.default.light a i {
	color: var(--bd-text-tertiary);
}

.top-bar-wrapper .social-profiles.default.light a:hover i {
	color: var(--bd-primary);
}

.top-bar-wrapper .widget + .widget::before,
.top-bar-wrapper .menu > li + li::before {
	border-color: var(--bd-border);
}

/* Езиков селектор на TranslatePress (бележка: не се чупи функционалността) */
#lang_sel > ul > li > a {
	color: var(--bd-text-tertiary);
}

#lang_sel > ul > li > a:hover {
	color: var(--bd-primary);
}

#lang_sel ul ul {
	border: 1px solid var(--bd-border);
	box-shadow: var(--bd-shadow-2);
}

/* --------------------------------------------------------------------------
   2. Основен хедър — един ред, 88px (темата го прави двуредов)
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {

	.header-wrapper {
		background-color: var(--bd-surface-card);
		color: var(--bd-text);
	}

	.header-above-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		/* Фиксирани 88px. НЕ се използва --bd-header-h тук: design.js измерва
		   височината на хедъра, така че оразмеряването на самия хедър с тази
		   променлива създава обратна връзка и хедърът расте безкрайно. */
		min-height: 88px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* --- Логото (демо логото на G5 се скрива) ---------------------------------
	   Емблемата се задава в theme опциите (`logo`, `sticky_logo`, `mobile_logo`),
	   не тук. Пълното лого не става за хедър: то е вертикален блок от емблема,
	   текст „BALI IMOTI" и девиз — при 44–56px вътрешният текст става нечетим.
	   Затова навсякъде стои само емблемата. */
	.logo-header {
		float: none;
		height: auto;
	}

	.logo-header::before {
		display: none;
	}

	.logo-header > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		text-decoration: none;
	}

	.logo-header img {
		display: block;
		width: auto;
		max-height: 56px;
	}

	/* --- Навигация --- */
	.primary-menu {
		float: none;
		flex: 1 1 auto;
		text-align: right;
	}

	.main-header .x-nav-menu > .x-menu-item > .x-menu-a-text {
		font-family: var(--bd-font-body);
		/* 15px при ≥1200 (по-долу). Под това — 12px, защото 8 дълги български
		   етикета + марката не се побират на един ред в контейнера. */
		font-size: 12px;
		font-weight: 500;
		line-height: 1;
		letter-spacing: .01em;
		text-transform: uppercase;
		color: var(--bd-text);
	}

	.main-header .x-nav-menu > .x-menu-item + .x-menu-item {
		margin-left: var(--bd-s-1); /* 4px — принудено от дължината на етикетите */
	}

	/* Място за стрелката: темата я рисува absolute, 15px вдясно от линка, т.е.
	   в полето между елементите. Даваме допълнителен отстъп на елемента-
	   контейнер, без да пипаме самия .x-caret (той е коригиран в baliimoti-tweaks). */
	.main-header .x-nav-menu > .x-menu-item:has(> .x-menu-a-text > .x-caret) {
		padding-right: var(--bd-s-3); /* 12px — компенсира малкия gap под 1200 */
	}

	#main-menu > .x-menu-item {
		line-height: 88px;
	}

	/* Подчертаване при hover/активен (1px offset 6px; активен 2px) */
	.x-nav-menu > .x-menu-item > .x-menu-a-text > .x-menu-text {
		position: relative;
		color: var(--bd-text); /* директно върху span — темата налага свой цвят върху <a> */
	}

	.x-nav-menu > .x-menu-item > .x-menu-a-text > .x-menu-text::after {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		bottom: -6px;
		height: 1px;
		background-color: var(--bd-primary);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--bd-t-base) var(--bd-ease);
	}

	#main-menu > .x-menu-item > .x-menu-a-text:hover > .x-menu-text::after,
	#main-menu > .x-menu-item.current-menu-item > .x-menu-a-text > .x-menu-text::after,
	#main-menu > .x-menu-item.current-menu-ancestor > .x-menu-a-text > .x-menu-text::after,
	#main-menu > .x-menu-item.current-menu-parent > .x-menu-a-text > .x-menu-text::after,
	#main-menu > .x-menu-item.menu-current > .x-menu-a-text > .x-menu-text::after {
		transform: scaleX(1);
	}

	#main-menu > .x-menu-item.current-menu-item > .x-menu-a-text > .x-menu-text::after {
		height: 2px;
	}

	/* Цвят на hover/активен. Темата налага цвят върху <a> с !important, затова
	   тук пребоядисваме директно <span> — директна стойност побеждава
	   наследяване, без да се налага собствен !important. */
	#main-menu > .x-menu-item > .x-menu-a-text:hover > .x-menu-text,
	#main-menu > .x-menu-item.current-menu-item > .x-menu-a-text > .x-menu-text,
	#main-menu > .x-menu-item.current-menu-ancestor > .x-menu-a-text > .x-menu-text,
	#main-menu > .x-menu-item.current-menu-parent > .x-menu-a-text > .x-menu-text,
	#main-menu > .x-menu-item.menu-current > .x-menu-a-text > .x-menu-text {
		color: var(--bd-primary);
	}

	/* --- Dropdown подменюта (функционалността не се пипа) --- */
	.primary-menu .x-sub-menu {
		background-color: var(--bd-surface-card);
		border-bottom: 2px solid var(--bd-primary);
		border-radius: 0 0 var(--bd-radius-lg) var(--bd-radius-lg);
		box-shadow: var(--bd-shadow-2);
	}

	.primary-menu .x-sub-menu .x-menu-a-text {
		font-size: var(--bd-fs-body-sm);
		font-weight: 400;
		letter-spacing: 0;
		text-transform: none;
		color: var(--bd-text-secondary);
	}

	.primary-menu .x-sub-menu .x-menu-a-text:hover {
		color: var(--bd-primary);
	}

	.primary-menu .x-sub-menu .x-menu-item + .x-menu-item > .x-menu-a-text {
		border-top-color: var(--bd-border-subtle);
	}

	/* --- CTA блок в header-1: демо телефон „19854" ---
	   Демо съдържание на темата без информация — скрива се. Слотът
	   (header-customize-nav) се показва отново, когато се сложи реален телефон. */
	.main-header.header-1 .header-customize-nav {
		display: none;
	}

	/* По-едра и по-широка навигация, когато контейнерът е достатъчно широк (≥1200) */
	@media screen and (min-width: 1200px) {
		.main-header .x-nav-menu > .x-menu-item > .x-menu-a-text {
			font-size: var(--bd-fs-body-sm); /* 15px */
		}

		.main-header .x-nav-menu > .x-menu-item + .x-menu-item {
			margin-left: var(--bd-s-4); /* 16px */
		}

		.main-header .x-nav-menu > .x-menu-item:has(> .x-menu-a-text > .x-caret) {
			padding-right: var(--bd-s-2); /* 8px — при 16px gap е достатъчно */
		}
	}
}

/* --------------------------------------------------------------------------
   3. Прозрачност и скрол състояние
   design.js слага .is-scrolled върху елемента на хедъра и .bd-scrolled върху
   <html>. И двата варианта се покриват тук.
   -------------------------------------------------------------------------- */

/* Вътрешни страници — хедърът е винаги бял */
body:not(.home) .header-wrapper {
	background-color: var(--bd-surface-card);
}

/* Начална — прозрачен върху hero, докато не се скролне */
body.home .header-wrapper {
	background-color: transparent;
}

body.home .header-wrapper.is-scrolled,
html.bd-scrolled .header-wrapper,
body.home .header-wrapper.bd-scrolled,
body.is-scrolled .header-wrapper {
	background-color: var(--bd-surface-card);
	border-bottom: 1px solid var(--bd-border);
}

/* Темата слага сянка на залепналия хедър — заменяме я с 1px разделител */
.is-sticky .sticky-region {
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. Мобилен хедър (≤ 991px) — темата превключва на header-mobile
   -------------------------------------------------------------------------- */
@media screen and (max-width: 991px) {

	/* Темата налага цвета с !important → нужен е собствен !important */
	.header-mobile-inner {
		background-color: var(--bd-surface-card) !important;
		color: var(--bd-text) !important;
	}

	.header-mobile-inner a {
		color: var(--bd-text);
	}

	.header-mobile-container-inner > div {
		line-height: 64px;
	}

	.toggle-icon-wrapper .toggle-icon::after,
	.toggle-icon-wrapper .toggle-icon::before,
	.toggle-icon-wrapper .toggle-icon > span {
		background-color: var(--bd-text) !important; /* темата налага цвета */
	}

	.mobile-search-button a,
	.mobile-login a {
		color: var(--bd-text);
	}

	/* Мобилното лого е емблемата — зададена е в theme опциите (`mobile_logo`),
	   не тук. Пълното лого не става за мобилно: то е вертикален блок от емблема,
	   текст „BALI IMOTI" и девиз, а хедърът е ~44px — вътрешният текст става
	   нечетим. Затова в theme опциите стои само емблемата. */

	/* Темата дава по 100px padding на логото — при емблема това я бута върху
	   иконите за търсене/вход. Стесняваме отстъпите до размера на иконите,
	   за да се побира между тях. */
	header.header-mobile .logo-mobile-wrapper {
		padding-left: var(--bd-s-7);
		padding-right: var(--bd-s-8);
	}

	.logo-mobile-wrapper > a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		text-decoration: none;
	}

	.logo-mobile-wrapper img {
		display: block;
		width: auto;
		max-height: 44px;
	}

	/* Топ лентата на мобилно — същият дискретен вид (темата налага с !important) */
	.top-bar-wrapper {
		background-color: var(--bd-surface-alt) !important;
		color: var(--bd-text-tertiary) !important;
	}

	.top-bar-inner {
		padding-top: var(--bd-s-1) !important;
		padding-bottom: var(--bd-s-1) !important;
	}

	/* --- Пълноекранно тъмно мобилно меню ---
	   Темата го прави 280px плъзгащ панел (селектор .header-mobile .menu-drop-fly).
	   Затова тук ползваме header.header-mobile .menu-drop-fly — по-висока
	   специфичност, за да презапишем без !important. Правим го на цялата ширина,
	   но започващ под мобилния хедър, за да остане достъпен бутонът за затваряне. */
	header.header-mobile .menu-drop-fly {
		top: 64px;
		height: calc(100% - 64px);
		width: 100%;
		max-width: 100vw;
		left: -100%;
		padding: var(--bd-s-4) var(--bd-s-4) var(--bd-s-7);
		background-color: var(--bd-surface-dark);
		color: var(--bd-text-on-dark);
	}

	body.mobile-nav-in {
		left: 0; /* без изместване на страницата — менюто е на цял екран */
	}

	body.mobile-nav-in header.header-mobile .menu-drop-fly {
		left: 0;
	}

	body.mobile-nav-in .is-sticky .sticky-region {
		left: 0;
		right: 0;
	}

	/* Търсачка в менюто */
	header.header-mobile .menu-drop-fly .search-form {
		padding: 0 0 var(--bd-s-4);
		background-color: transparent;
	}

	header.header-mobile .menu-drop-fly .search-form input {
		background-color: rgba(255, 255, 255, .08);
		border: 1px solid rgba(255, 255, 255, .18);
		border-radius: var(--bd-radius);
		color: var(--bd-text-on-dark);
	}

	header.header-mobile .menu-drop-fly .search-form input::placeholder {
		color: rgba(255, 255, 255, .55);
	}

	/* Редове на менюто — 56px */
	header.header-mobile .menu-drop-fly .x-nav-menu > .x-menu-item > .x-menu-a-text {
		display: flex;
		align-items: center;
		min-height: 56px;
		padding-top: 0;
		padding-bottom: 0;
		/* темата налага ляв padding с !important */
		padding-left: 0 !important;
		padding-right: var(--bd-s-7);
		font-family: var(--bd-font-body);
		font-size: 1.125rem; /* 18px */
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		color: var(--bd-text-on-dark);
	}

	header.header-mobile .menu-drop-fly .x-sub-menu .x-menu-a-text {
		min-height: 48px;
		font-size: var(--bd-fs-body-sm);
		font-weight: 400;
		text-transform: none;
		color: var(--bd-text-on-dark-soft);
	}

	header.header-mobile .menu-drop-fly .x-sub-menu .x-menu-a-text:hover,
	header.header-mobile .menu-drop-fly .x-nav-menu > .x-menu-item > .x-menu-a-text:hover {
		color: var(--bd-accent-light);
	}

	/* Вложените нива — без различни сиви фонове, само отстъп */
	header.header-mobile .menu-drop-fly .x-sub-menu,
	header.header-mobile .menu-drop-fly .x-sub-menu .x-sub-menu,
	header.header-mobile .menu-drop-fly .x-sub-menu .x-sub-menu .x-sub-menu {
		background-color: transparent;
		border-top: 0;
	}

	/* Темата рисува триъгълна „стрелка-отскок" преди подменютата; при
	   прозрачен фон тя остава като артефакт — маха се. */
	header.header-mobile .menu-drop-fly .x-sub-menu::before {
		content: none;
	}

	header.header-mobile .menu-drop-fly .x-sub-menu .x-menu-a-text {
		padding-left: var(--bd-s-5) !important; /* отстъп за подниво */
	}

	header.header-mobile .menu-drop-fly .x-sub-menu .x-sub-menu .x-menu-a-text {
		padding-left: var(--bd-s-7) !important;
	}

	/* Разделители между редовете */
	header.header-mobile .menu-drop-fly .x-nav-menu li.x-menu-item + li {
		border-top: 1px solid rgba(255, 255, 255, .12);
	}

	/* Текущ елемент */
	header.header-mobile .menu-drop-fly .x-nav-menu > .x-menu-item.current-menu-item > .x-menu-a-text {
		color: var(--bd-accent-light);
	}
}

/* --------------------------------------------------------------------------
   5. Достъпност
   -------------------------------------------------------------------------- */
.header-wrapper a:focus-visible,
.header-mobile a:focus-visible,
.top-bar-wrapper a:focus-visible,
.menu-drop-fly a:focus-visible,
.x-nav-menu a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--bd-focus-ring);
	border-radius: var(--bd-radius-sm);
}

@media (prefers-reduced-motion: reduce) {
	.x-menu-a-text > .x-menu-text::after {
		transition: none;
	}

	/* Темата слага transition: all .3s на тези елементи — изключваме го. */
	.header-wrapper,
	.header-above-inner,
	.header-mobile-inner,
	.x-nav-menu > .x-menu-item,
	.x-nav-menu > .x-menu-item > .x-menu-a-text,
	.menu-drop-fly {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   Хедър над затъмняващия слой на мобилното меню

   При отваряне темата показва `.mobile-nav-overlay` — rgba(0,0,0,.7) с
   z-index 999 върху цялата страница. Хедърът е `position: static` без z-index,
   затова слоят пада ВЪРХУ него и лентата става мътно сива, а марката и бутонът
   за затваряне — трудно четими.

   Вдигаме хедъра над слоя. Самото меню е с z-index 9999 и остава над хедъра,
   така че редът е: страница < затъмняващ слой < хедър < меню.

   Само на мобилно — на десктоп хедърът не се покрива от този слой.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
	/**
	 * Затъмняващият слой на темата (`.mobile-nav-overlay`, rgba(0,0,0,.7),
	 * z-index 999) покрива цялата страница при отворено меню. Хедърът няма
	 * позициониране и остава ПОД него, затова лентата изглежда мътно сива, а
	 * марката и бутонът за затваряне — трудно четими.
	 *
	 * Не може да се реши с z-index върху хедъра: децата му са абсолютно
	 * позиционирани спрямо `body` и `position: relative` на хедъра го свива
	 * до нулева височина (проверено).
	 *
	 * Менюто е високо 780 от 844px, т.е. слоят на практика затъмнява само
	 * хедъра — правим го прозрачен. Остава в DOM и продължава да лови кликове
	 * за затваряне.
	 */
	.mobile-nav-overlay {
		background-color: transparent;
	}

	/**
	 * Зона за натискане на бутона за меню.
	 *
	 * Самата икона е 24×30px (темата я строи от `.toggle-icon::before`, `::after`
	 * и `<span>` — трите чертички). Това е под минимума 44×44px от DESIGN.md §8
	 * (Touch Targets), затова разширяваме зоната с невидим псевдоелемент върху
	 * обвивката, без да местим иконата и логото.
	 *
	 * ⚠️ ВАЖНО: този слой се рисува НАД иконата, а темата закача обработчика на
	 * кликане за `.toggle-icon-wrapper > .toggle-icon` (main.js → menuMobileToggle).
	 * Затова натискането уцелва слоя, не иконата, и бутонът остава мъртъв.
	 * Решението е в assets/js/design.js — то прехвърля натискането от обвивката
	 * към иконата. Не махай това, без да провериш и него.
	 */
	.toggle-icon-wrapper.toggle-mobile-menu {
		position: relative;
	}

	.toggle-icon-wrapper.toggle-mobile-menu::after {
		content: "";
		position: absolute;
		inset: -10px;
	}
}