/*
 * Nagłówek w dwóch rzędach (672:129) i podmenu usług (700:350).
 * Układ komponentów (menu-2 nad menu-1): inc/class-header.php.
 *
 * Selektory od #ast-desktop-header: Astra generuje style menu inline z Kastomizera
 * (np. `.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link`
 * z interlinią 80 px), więc bez identyfikatora trzeba by sięgać po !important.
 * Identyfikator nagłówka desktopowego, nie #masthead: JS Astry przełącza nagłówki
 * po szerokości bez paska przewijania, a media query liczy z paskiem — przy
 * 1200–1214 px widać nagłówek mobilny, który dzieli z desktopowym klasy rzędu.
 *
 * Tylko desktop (≥1200 px) — poniżej Astra przełącza się na własny nagłówek mobilny
 * (próg przesunięty z 921 w inc/class-header.php).
 */

@media (min-width: 1200px) {

	/* Pas 67→260 w projekcie: 193 px bieli, bez linii pod spodem — hero dochodzi
	   prosto do nagłówka. */
	#ast-desktop-header .ast-primary-header-bar {
		border-bottom-width: 0;
	}

	#ast-desktop-header .site-primary-header-wrap {
		min-height: 193px;
	}

	/* Znak logo zaczyna się w projekcie na 272, 3 px przed siatką (672:441), a plik ma
	   jeszcze 3 px marginesu wokół znaku. */
	#ast-desktop-header .custom-logo-link {
		margin-left: -6px;
	}

	/* Astra dzieli rząd na `auto auto`, więc prawa kolumna rosła do szerokości linii
	   (1085,5 px) i przy oknie węższym niż ~1500 px wypychała menu poza ekran. */
	#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: auto minmax(0, 1fr);
	}

	/* Prawa kolumna: górne menu, linia, menu usług — wyrównane do prawej krawędzi
	   treści (1645). Blok 24 + 18 + 1 + 18 + 24 = 85 px wyśrodkowany w 193 daje
	   górny rząd na 121,5 i dolny na 182, jak w projekcie. */
	#ast-desktop-header .site-header-primary-section-right {
		min-width: 0;
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}

	/* 672:137 — linia #d9d9d9 długa na 1085,5 px, od 559,5 do prawej krawędzi.
	   Padding zerowany: Astra daje komponentom menu 10 px z boku (menu-2 z prawej,
	   menu-1 z lewej) i rzędy nie kończyłyby się przy krawędzi treści. */
	#ast-desktop-header .ast-builder-menu-2 {
		justify-content: flex-end;
		width: 1085.5px;
		max-width: 100%;
		padding: 0 0 18px;
		border-bottom: 1px solid #d9d9d9;
	}

	#ast-desktop-header .ast-builder-menu-1 {
		margin-top: 18px;
		padding: 0;
	}

	/* Kontenery nav dziedziczą interlinię 26,4 px z body — rząd byłby o 2,4 px wyższy
	   od 24-pikselowej linii tekstu i blok przestałby się centrować jak w projekcie. */
	#ast-desktop-header .ast-builder-menu .main-header-bar-navigation,
	#ast-desktop-header .ast-builder-menu .site-navigation {
		line-height: 24px;
	}

	/* Odstępy zmierzone na pikselach renderu Figmy, nie z pól tekstowych: pola mają
	   stałą szerokość i luz, a litery Lato wychodzą co do piksela takie same jak tu.
	   Oba rzędy kończą się na 1643,5, 1,5 px przed krawędzią treści. */
	#ast-desktop-header .ast-builder-menu .main-header-menu {
		flex-wrap: nowrap;
		margin-right: 1.5px;
	}

	/* Odstępy jako ułamek okna, z sufitem z projektu: przy 1920 dokładnie 42,5 i 48 px,
	   przy 1200 odpowiednio 26,5 i 30 — dolny rząd (~920 px) mieści się wtedy obok logo. */
	#ast-desktop-header .ast-builder-menu-2 .main-header-menu {
		gap: min(42.5px, 2.2135vw);
	}

	/* Od strzałki do pola następnej pozycji: 955,5 → 995 i 1255,5 → 1295 w projekcie.
	   Przy 1200 px spada do 20, żeby rząd (~845 px + odstępy) zmieścił się obok logo. */
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu {
		gap: clamp(20px, calc(20px + (100vw - 1200px) * 0.0278), 40px);
	}

	/* Pole tekstu o szerokości pogrubionego tytułu (224 / 246 / 334 px, jak w Figmie):
	   niewidoczna pogrubiona kopia z data-tekst (inc/class-header.php) wyznacza kolumnę,
	   tekst stoi przy jej prawej krawędzi. Pogrubienie na hover niczego nie przesuwa. */
	#ast-desktop-header .ast-builder-menu-1 .wa-menu-tekst {
		display: inline-grid;
		justify-items: end;
	}

	#ast-desktop-header .ast-builder-menu-1 .wa-menu-tekst::after {
		content: attr(data-tekst);
		content: attr(data-tekst) / ""; /* czytniki ekranu nie czytają tytułu dwa razy */
		height: 0;
		overflow: hidden;
		font-weight: 700;
		visibility: hidden;
	}

	#ast-desktop-header .ast-builder-menu .main-header-menu > .menu-item > .menu-link {
		padding: 0;
		color: var(--wa-color-heading);
		font-size: 1rem;
		line-height: 24px;
	}

	/* Górny rząd pogrubiony (672:130–133). */
	#ast-desktop-header .ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link {
		font-weight: 700;
	}

	/* Otwarte menu usług jest w projekcie pogrubione (700:388) — w zarezerwowanym polu,
	   więc tekst rośnie w lewo do krawędzi pola (717) i nic obok się nie rusza. */
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .menu-link {
		color: var(--wa-color-heading);
		font-weight: 700;
	}

	#ast-desktop-header .ast-builder-menu-2 .main-header-menu > .menu-item > .menu-link:is(:hover, :focus-visible),
	#ast-desktop-header .ast-builder-menu .main-header-menu > .current-menu-item > .menu-link {
		color: var(--wa-color-primary);
	}

	/* Chevron 672:138: 7×4,5 px (z obrysem), litery kończą się na 940, strzałka od 948. */
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle {
		display: inline-block;
		width: 7px;
		height: 4.5px;
		margin: 0 0 0 6.5px; /* Astra daje −10 px z prawej: strzałka wyjeżdżała za 1645 */
		padding: 0;
		line-height: 0;
		vertical-align: middle;
		background-color: currentColor;
		mask: url("../img/chevron-menu.svg") center / 100% 100% no-repeat;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link .dropdown-menu-toggle .ast-icon {
		display: none;
	}

	/* --- Podmenu (700:486–496) --- */

	/* Panel 352×207, 31 px pod tekstem rodzica, 5 px w prawo od jego początku
	   (717 → 722). Promień 8, cień z projektu. */
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu {
		top: calc(100% + 31px);
		left: 5px;
		width: 352px;
		padding: 7px 8px 6px;
		border: 0;
		border-radius: 8px;
		background-color: var(--wa-color-bg);
		box-shadow: 0 5px 20px rgb(37 37 37 / 21%);
		/* Jedna animacja dla całego panelu: przenikanie z lekkim zjazdem. Widoczność
		   przełącza się dopiero po wygaszeniu (opóźnienie = czas animacji), więc panel
		   nie znika skokiem i nie łapie kursora, kiedy jest już przezroczysty. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(6px);
		transition: opacity var(--wa-transition), transform var(--wa-transition), visibility 0s linear 200ms;
	}

	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: opacity var(--wa-transition), transform var(--wa-transition), visibility 0s;
	}

	/* Mostek nad panelem: bez niego kursor w 31-pikselowej szczelinie gubi :hover
	   i panel znika, zanim da się w niego wjechać. */
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 31px;
	}

	/* Linie 336 px (#252525 @10%) między pozycjami, co 39 px (700:488–491). */
	#ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-item {
		border-bottom: 1px solid rgb(37 37 37 / 10%);
	}

	#ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-item:last-child {
		border-bottom: 0;
	}

	#ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-link {
		position: relative;
		padding: 7px 0 7px 30px; /* tekst na 760, panel od 722 + 8 */
		border: 0;
		color: var(--wa-color-heading);
		font-size: 1rem;
		line-height: 24px;
		/* Astra daje linkom `transition: all 0.2s` — obejmuje też widoczność, więc
		   teksty znikały 200 ms po panelu. Pozycje znikają razem z nim, animuje się
		   tylko kolor na hover. */
		transition: color var(--wa-transition);
	}

	#ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-link:is(:hover, :focus-visible) {
		color: var(--wa-color-primary);
	}

	/* Kropka 5 px, #ff6600, na 747 (700:492). */
	#ast-desktop-header .ast-builder-menu-1 .sub-menu .menu-link::before {
		content: "";
		position: absolute;
		top: 16.5px;
		left: 17px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background-color: var(--wa-color-primary);
	}

	/* 700:401 — przy otwartym menu usług treść pod nagłówkiem przygasa
	   (rgba(0,26,36,.5)). Nakładka na #content, nie na całe okno: pasek kontaktowy
	   i sam nagłówek zostają jasne, jak w projekcie. */
	#content {
		position: relative;
	}

	#content::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 50;
		background-color: rgb(0 26 36 / 50%);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--wa-transition);
	}

	body:has(#ast-hf-menu-1 > .menu-item-has-children:is(:hover, .focus, :focus-within)) #content::before {
		opacity: 1;
	}
}

@media (min-width: 1200px) and (prefers-reduced-motion: reduce) {
	#content::before,
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item > .sub-menu,
	#ast-desktop-header .ast-builder-menu-1 .main-header-menu > .menu-item:is(:hover, .focus, :focus-within) > .sub-menu {
		transform: none;
		transition: none;
	}
}

/* --- Menu mobilne (hamburger, do 1215 px) --- */

/* Przycisk rozwijania podmenu stoi na prawej krawędzi (50 px + 20 px rynny). Bez
   odstępu długi tytuł („Systemy bezpieczeństwa, kontroli i automatyki”) wchodził
   pod strzałkę — z nim łamie się do drugiej linii przed przyciskiem. */
#ast-mobile-header .main-header-menu > .menu-item-has-children > .menu-link {
	padding-right: 80px;
}

/* Menu mobilne (PM, Z10): Astra daje pozycjom stałą interlinię 43,8 px, więc zawinięta
   pozycja miała 88 px i strzałkę przy pierwszej linii. Wysokość z paddingu (44 px na
   linię pojedynczą), a pozycja z podmenu jako siatka: strzałka w pierwszym wierszu na
   środku linku, podmenu pod spodem. Strzałka bez cienia, który robił z niej osobny przycisk. */
#ast-hf-mobile-menu .menu-link {
	padding-top: 11px;
	padding-bottom: 11px;
	line-height: 22px;
}

#ast-hf-mobile-menu .menu-item-has-children {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
}

#ast-hf-mobile-menu .menu-item-has-children > .menu-link {
	grid-area: 1 / 1 / 2 / 3;
}

/* Wysokość 44 px na sztywno: przycisk Astry liczy się z rem (48 px przy podstawie 16 px)
   i rozciągał wiersz siatki ponad wysokość linku. */
#ast-hf-mobile-menu .menu-item-has-children > .ast-menu-toggle {
	position: static;
	display: flex;
	grid-area: 1 / 2;
	align-items: center;
	align-self: center;
	justify-content: center;
	height: 44px;
	margin-right: 20px;
	padding-top: 0;
	padding-bottom: 0;
	box-shadow: none;
}

#ast-hf-mobile-menu .menu-item-has-children > .sub-menu {
	grid-column: 1 / -1;
}