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

/* --------------------------------------------------------------------------
   1. Основен хедър (≥992px) — един ред, 80px
   -------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {

	.header-wrapper {
		background-color: var(--ig-surface-card);
		color: var(--ig-text);
		/* Мащаб на навигацията. 10 дълги български етикета + марката трябва да
		   се побират на ЕДИН ред във всеки десктоп диапазон, затова шрифтът и
		   отстъпите намаляват надолу (без скриване на пунктове). Стойностите
		   са проверени с измерване при 992/1100/1200/1280/1600px. */
		--ig-nav-fs: 12px;    /* 992–1199 */
		--ig-nav-gap: 6px;
		--ig-logo-fs: 18px;
		--ig-caret-pad: 6px;
		--ig-caret-offset: -9px;
	}

	/* --- Контейнер: геометрията на .ig-container (DESIGN.md §5) -----------
	   Темата дава на .container max-width 1170 (Bootstrap) → съдържание 1140,
	   докато спецификацията и героят са 1280. Налагаме контейнера по
	   спецификацията САМО върху хедъра — без глобална промяна по секциите.
	   Ширините съвпадат точно с .ig-container: 100% до 1280, gutter 32 → 40 → 48. */
	.header-wrapper .container {
		width: 100%;
		max-width: var(--ig-container); /* 1280px */
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--ig-s-6);    /* 32px */
		padding-right: var(--ig-s-6);
	}

	.header-wrapper .container-inner {
		width: 100%;
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}

	.header-above-inner {
		display: flex;
		/* Забранено пренасяне: менюто е на ЕДИН ред на всяка десктоп ширина. */
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		/* Фиксирани 80px. НЕ оразмеряваме с --ig-header-h: design.js измерва
		   височината на хедъра, така че използването ѝ тук създава обратна
		   връзка. Променливата се ползва само за отстъпи (напр. scroll-padding). */
		height: 80px;
		min-height: 80px;
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Gutter като .ig-container (DESIGN.md §8): 32 → 40 (1024) → 48 (1280).
	   Така хедърът съвпада по ширина със секциите и с героя. */
	@media screen and (min-width: 1024px) {
		.header-wrapper .container {
			padding-left: 40px; /* същата стойност като .ig-container */
			padding-right: 40px;
		}
	}

	@media screen and (min-width: 1280px) {
		.header-wrapper .container {
			padding-left: var(--ig-s-7); /* 48px */
			padding-right: var(--ig-s-7);
		}
	}

	/* --- Лого → текстова марка IMOTIGREECE (чуждият img „Amik" се скрива) --- */
	.logo-header {
		float: none;
		height: auto;
		flex: 0 0 auto;      /* марката не се свива и не отива на нов ред */
		white-space: nowrap;
	}

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

	.logo-header img {
		display: none;
	}

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

	.logo-header > a::after {
		content: 'IMOTIGREECE';
		font-family: var(--ig-font-display);
		font-size: var(--ig-logo-fs);
		font-weight: 600;
		line-height: 1;
		letter-spacing: .06em;
		color: var(--ig-text);
	}

	/* --- Навигация: Golos Text, цвят Ink 950 --- */
	.primary-menu {
		float: none;
		flex: 0 1 auto;
		min-width: 0;
		margin-left: auto;      /* притиска менюто вдясно дори при overflow */
		text-align: right;
		white-space: nowrap;
	}

	/* Менюто е flex с nowrap — не може да се пренесе на втори ред. */
	.main-header .primary-menu .x-nav-menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		width: auto;
		white-space: nowrap;
	}

	.main-header .x-nav-menu > .x-menu-item {
		display: flex;
		align-items: center;
		float: none;
		min-height: 80px;      /* височината на реда — дропдаунът пада под хедъра */
		line-height: 1;
		white-space: nowrap;
	}

	.main-header .x-nav-menu > .x-menu-item > .x-menu-a-text {
		/* `inline-flex` свиваше котвата до реда на текста вътре в 80px <li> —
		   измерената зона за натискане беше 12px висока (39–130px широка) при
		   минимум 44×44 по DESIGN.md §8. Котвата става 44px висока и най-малко
		   44px широка (най-късите етикети са 39px при 12px шрифт) и е центрирана.
		   Стрелката е absolute спрямо котвата, а <li> расте заедно с нея, така че
		   отстоянието до следващия пункт си остава 3px. */
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		min-width: 44px;
		font-family: var(--ig-font-body);
		font-size: var(--ig-nav-fs);
		font-weight: 500;
		line-height: 1;
		letter-spacing: .01em;
		/* DESIGN.md §4 Navigation не иска UPPERCASE (за разлика от Eyebrow).
		   Без „главни букви" 10-те дълги български етикета се побират на един
		   ред; това съвпада и с мобилното меню, което вече е без transform. */
		text-transform: none;
		color: var(--ig-ink-950);
		white-space: nowrap;
	}

	.main-header .x-nav-menu > .x-menu-item + .x-menu-item {
		margin-left: var(--ig-nav-gap);
	}

	/* Място за стрелката (absolute, вдясно от текста) */
	.main-header .x-nav-menu > .x-menu-item:has(> .x-menu-a-text > .x-caret) {
		padding-right: var(--ig-caret-pad);
	}

	/* Подчертаване: 1px при hover/предшественик, 2px при активен (offset 6px) */
	.main-header .x-nav-menu > .x-menu-item > .x-menu-a-text > .x-menu-text {
		position: relative;
		color: var(--ig-ink-950);
	}

	.main-header .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(--ig-primary);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform var(--ig-t-base) var(--ig-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/активен — върху <span>, защото темата налага цвят на <a>
	   с !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(--ig-primary);
	}

	/* --- Стрелки: чист CSS триъгълник (currentColor), без font glyph --- */
	.main-header .x-nav-menu > .x-menu-item > .x-menu-a-text > .x-caret {
		position: absolute;
		top: 50%;
		right: var(--ig-caret-offset, -12px);
		margin-top: -2px;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 5px solid currentColor;
		font-size: 0;
		line-height: 0;
	}

	.main-header .x-nav-menu .x-caret::before {
		content: none; /* махаме Unicode \f107 от темата */
	}

	.main-header .x-sub-menu .x-menu-item > .x-menu-a-text > .x-caret {
		position: absolute;
		top: 50%;
		right: 0;
		margin-top: -4px;
		border-top: 4px solid transparent;
		border-bottom: 4px solid transparent;
		border-left: 5px solid currentColor;
	}

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

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

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

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

	/* --- Езиков селектор / header customize (не се пипа функционалността) --- */
	.header-customize-nav,
	.header-customize-nav a {
		color: var(--ig-ink-950);
	}

	.header-customize-nav a:hover {
		color: var(--ig-primary);
	}

	/* Мащаб на навигацията: 992–1199 → 12px (горе), 1200–1279 → 14px,
	   1280+ → 15px (DESIGN.md §4 Navigation). Всичко на един ред. */
	@media screen and (min-width: 1200px) {
		.header-wrapper {
			--ig-nav-fs: 14px;
			--ig-nav-gap: 8px;
			--ig-logo-fs: 22px;
			--ig-caret-pad: 8px;
			--ig-caret-offset: -12px;
		}
	}

	@media screen and (min-width: 1280px) {
		.header-wrapper {
			--ig-nav-fs: 15px;
			--ig-nav-gap: 8px;
			--ig-logo-fs: 24px;
			--ig-caret-pad: 8px;
			--ig-caret-offset: -12px;
		}
	}
}

/* --------------------------------------------------------------------------
   2. Скрол състояние и разделител
   design.js слага .is-scrolled върху header.main-header и .ig-scrolled върху
   <html>. Покриваме и двата варианта. Хедърът е бял с линия 0 1px 0 border;
   при скрол получава сянка.
   -------------------------------------------------------------------------- */
.header-wrapper {
	box-shadow: 0 1px 0 var(--ig-border);
}

.main-header.is-scrolled .header-wrapper,
html.ig-scrolled .header-wrapper {
	box-shadow: 0 1px 0 var(--ig-border), var(--ig-shadow-2);
}

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

/* Отстъп за котви под фиксирания хедър — тук е мястото за --ig-header-h. */
html {
	scroll-padding-top: var(--ig-header-h, 80px);
}

/* --------------------------------------------------------------------------
   PWA лентата на daftplug-progressify закрива хедъра (всички ширини)
   Плъгинът инжектира `.header-banner-overlay` като фиксирана лента най-горе
   (top:0, z-index 99999, ~74px) чрез собствен inline <style> → нужно е
   !important. Показва се само с клас `.visible`, но когато е видима закрива
   целия първи ред на менюто. Неутрализираме я от дизайн слоя — обратимо
   (изтриване на това правило), без да деактивираме плъгина.
   Другите режими на плъгина (snackbar / долна лента / модал) не застъпват
   хедъра — не ги пипаме.
   -------------------------------------------------------------------------- */
.header-banner-overlay {
	display: none !important;
}

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

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

	.header-mobile-inner a {
		color: var(--ig-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(--ig-text) !important; /* темата налага цвета */
	}

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

	/* --- Текстова марка на мобилното лого --- */
	.logo-mobile-wrapper img {
		display: none;
	}

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

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

	.logo-mobile-wrapper > a::after {
		content: 'IMOTIGREECE';
		font-family: var(--ig-font-display);
		font-size: 22px;
		font-weight: 600;
		line-height: 1;
		letter-spacing: .08em;
		color: var(--ig-text);
	}

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

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

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

	/* Върху тъмната повърхност — Primary Light: чист --ig-primary се слива с фона */
	header.header-mobile .menu-drop-fly .search-form button {
		background-color: var(--ig-primary-light);
		color: var(--ig-text-on-dark);
	}

	header.header-mobile .menu-drop-fly .search-form button:hover {
		background-color: var(--ig-primary);
	}

	/* Редове на менюто — 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-left: 0 !important; /* темата налага ляв padding с !important */
		padding-right: var(--ig-s-7);
		font-family: var(--ig-font-body);
		font-size: var(--ig-fs-subhead); /* 17px */
		font-weight: 500;
		text-transform: none;
		letter-spacing: 0;
		color: var(--ig-text-on-dark);
	}

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

	header.header-mobile .menu-drop-fly .x-nav-menu > .x-menu-item > .x-menu-a-text:hover,
	header.header-mobile .menu-drop-fly .x-sub-menu .x-menu-a-text:hover {
		color: var(--ig-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(--ig-s-5) !important;
	}

	header.header-mobile .menu-drop-fly .x-sub-menu .x-sub-menu .x-menu-a-text {
		padding-left: var(--ig-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(--ig-accent-light);
	}

	/* --- Стрелки в мобилното меню: CSS триъгълник --- */
	header.header-mobile .menu-drop-fly .x-caret {
		position: absolute;
		top: 50%;
		right: 20px;
		margin-top: -3px;
		width: 0;
		height: 0;
		border-left: 4px solid transparent;
		border-right: 4px solid transparent;
		border-top: 6px solid currentColor;
		font-size: 0;
		line-height: 0;
	}

	header.header-mobile .menu-drop-fly .x-caret::before {
		content: none;
	}

	/* Отворено подменю → триъгълникът сочи нагоре (темата ползва rotate 45deg) */
	header.header-mobile .menu-drop-fly .x-sub-menu-open > a > .x-caret,
	header.header-mobile .menu-drop-fly .x-sub-menu-open > a > b.x-caret {
		margin-top: -6px;
		transform: rotate(180deg);
	}

	/* Селектор за език в мобилното меню (GTranslate) — четимост върху тъмно */
	header.header-mobile .menu-drop-fly .menu-item-gtranslate a {
		color: var(--ig-text-on-dark-soft);
	}
}

/* --------------------------------------------------------------------------
   4. Достъпност
   -------------------------------------------------------------------------- */
.header-wrapper a:focus-visible,
.header-mobile a:focus-visible,
.menu-drop-fly a:focus-visible,
.top-bar-wrapper a:focus-visible,
.x-nav-menu a:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--ig-focus-ring);
	border-radius: var(--ig-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,
	.x-caret,
	.menu-drop-fly {
		transition: none;
	}
}

/* --------------------------------------------------------------------------
   5. Хедър над затъмняващия слой на мобилното меню (≤991px)

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

	/* Иконата на хамбургера е 27×60px — под минимума 44×44px. Разширяваме
	   зоната за натискане с невидим псевдоелемент, без да местим иконата. */
	.toggle-icon-wrapper.toggle-mobile-menu {
		position: relative;
	}

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