/**
 * Header: logo i przycisk Menu.
 *
 * Domyślnie granatowy, w normalnym układzie strony (np. polityka prywatności).
 * Klasa is-overlay (na bloku części szablonu): biały, nałożony na zdjęcie hero,
 * odsunięty od krawędzi o margines strony + wewnętrzny odstęp karty hero (oba równe).
 */

/* Domyślnie: w układzie strony, z marginesem strony jak w Figmie */
header.wp-block-template-part {
	padding: var(--wp--style--root--padding-left, 24px) var(--wp--style--root--padding-right, 24px) 0;
	color: var(--wp--custom--color--text--primary);
}

.wp-block-template-part.is-overlay {
	position: absolute;
	top: calc(2 * var(--wp--style--root--padding-left, 24px));
	right: calc(2 * var(--wp--style--root--padding-right, 24px));
	left: calc(2 * var(--wp--style--root--padding-left, 24px));
	z-index: 10;
	padding: 0;
	color: var(--wp--custom--color--text--inverse);
}

body.admin-bar .wp-block-template-part.is-overlay {
	top: calc(2 * var(--wp--style--root--padding-left, 24px) + var(--wp-admin--admin-bar--height, 0px));
}

.aries-header {
	min-height: 44px;
	align-items: center;
}

/* Logo 160 x 44, w kolorze otoczenia */
.aries-header__logo {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

.aries-header__logo svg {
	display: block;
	width: 160px;
	height: auto;
}

.aries-header__logo:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Przycisk Menu (Button Level=Menu, Type=Simple) */
.aries-menu-button {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--8);
	min-height: 44px;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--20);
	background: transparent;
	color: inherit;
	/* Obrys do środka jak w Figmie: 2 px, hover 3 px (#006) */
	border: 0;
	box-shadow: inset 0 0 0 2px currentColor;
	border-radius: var(--wp--custom--radius--full);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: box-shadow var(--aries-hover-duration) var(--aries-hover-ease), background-color var(--aries-hover-duration) var(--aries-hover-ease);
}

/* Hover: obrys 3 px bez zmiany wymiarów */
.aries-menu-button:hover {
	box-shadow: inset 0 0 0 3px currentColor;
}

/* Pressed: subtelne tło */
.aries-menu-button:active {
	background-color: color-mix(in srgb, currentColor 12%, transparent);
}

.aries-menu-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Po zamknięciu menu dotykiem/kliknięciem fokus wraca bez obwódki (#016) */
.aries-menu-button.is-pointer-focus:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.aries-menu-button {
		transition: none;
	}
}

/* --- Panel menu na pełny ekran --- */

/* Bez skryptu panel jest ukryty; skrypt przenosi go do okna <dialog> */
.aries-menu {
	display: none;
}

html.has-menu-open {
	overflow: hidden;
}

.aries-menu-dialog {
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	height: 100dvh; /* pełna widoczna wysokość ekranu, także na iPhonie (#013) */
	max-height: none;
	margin: 0;
	padding: var(--wp--style--root--padding-left, 24px);
	background: var(--wp--custom--color--bg--secondary);
	border: 0;
}

.aries-menu-dialog:focus {
	outline: none; /* fokus startowy okna bez obwódki; Tab przechodzi dalej na logo (#001) */
}

.aries-menu-dialog::backdrop {
	background: var(--wp--custom--color--bg--secondary);
}

/* Jasne tło okna: miękkie pojawienie i zniknięcie (#011); karta i treść – assets/js/menu.js */
@media (prefers-reduced-motion: no-preference) {
	.aries-menu-dialog[open],
	.aries-menu-dialog[open]::backdrop {
		animation: aries-menu-bg-in 250ms ease-out;
	}

	.aries-menu-dialog.is-closing,
	.aries-menu-dialog.is-closing::backdrop {
		animation: aries-menu-bg-out 550ms cubic-bezier(0.5, 0, 0.75, 0) forwards; /* razem z kartą (menu.js, #029) */
	}
}

@keyframes aries-menu-bg-in {
	from {
		background-color: transparent;
	}
}

@keyframes aries-menu-bg-out {
	to {
		background-color: transparent;
	}
}

/*
 * Karta menu. Zdjęcie: ustaw --aries-menu-image, np.
 * url("../images/menu.jpg"); przyciemnienie bg/overlay nałoży się samo.
 */
.aries-menu-dialog .aries-menu {
	--aries-menu-image: url("../images/menu.webp");

	--aries-menu-pad: var(--wp--preset--spacing--24);

	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center; /* blok linków, języka i przycisku na środku karty */
	gap: var(--wp--preset--spacing--24);
	box-sizing: border-box;
	min-height: 100%;
	/* Góra i dół: miejsce na header (44 px) + odstęp, równe z obu stron, żeby środek był środkiem karty */
	padding: calc(var(--aries-menu-pad) * 2 + 44px) var(--aries-menu-pad);
	background-color: var(--wp--custom--color--bg--inverse);
	background-image: linear-gradient(var(--wp--custom--color--bg--overlay), var(--wp--custom--color--bg--overlay)), var(--aries-menu-image);
	background-position: center, center 81%;
	background-size: cover;
	border-radius: var(--wp--custom--radius--30);
	color: var(--wp--custom--color--text--inverse);
}

/* Header menu (logo + Zamknij) przypięty do góry karty, poza wyśrodkowanym blokiem */
.aries-menu > .aries-header {
	position: absolute;
	top: var(--aries-menu-pad);
	right: var(--aries-menu-pad);
	left: var(--aries-menu-pad);
}

.aries-menu-close svg {
	flex: none;
}

/*
 * Linki, język i przycisk: zawsze wyśrodkowane w poziomie,
 * niezależnie od szerokości ekranu i domyślnych ustawień bloku Nawigacja.
 */
.aries-menu > :is(.aries-menu__nav, .aries-lang, .wp-block-buttons) {
	align-self: center;
	max-width: 100%;
	margin-inline: auto;
}

.aries-menu .aries-menu__nav {
	justify-content: center;
	margin-block: 0;
}

.aries-menu .aries-menu__nav .wp-block-navigation__container {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: 100%;
}

.aries-menu .aries-menu__nav .wp-block-navigation-item {
	justify-content: center;
	text-align: center;
}

.aries-menu .aries-lang,
.aries-menu .wp-block-buttons {
	justify-content: center;
}

.aries-menu .aries-menu__nav .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--8) 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 400;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	transition: color var(--aries-hover-duration) var(--aries-hover-ease);
}

.aries-menu .aries-menu__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--custom--color--text--accent);
}

.aries-menu .aries-menu__nav .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Język: na razie tylko PL, oznaczony kreską aktywnego języka */
.aries-lang {
	display: flex;
	gap: var(--wp--preset--spacing--8);
	margin: 0;
}

.aries-lang > * {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.2;
}

.aries-lang > [aria-current="true"]::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 50%;
	width: 25px;
	border-bottom: 1px solid var(--wp--custom--color--border--inverse);
	transform: translateX(-50%);
}

.aries-menu .wp-block-buttons {
	margin: 0;
}

@media (max-width: 767px) {
	/* Blok linków, języka i przycisku dosunięty do dołu karty;
	   przycisk 60 px od dołu jak w Figmie (#014); odstępy w bloku 24 px (#028) */
	.aries-menu-dialog .aries-menu {
		--aries-menu-pad: var(--wp--preset--spacing--16);

		justify-content: flex-end;
		gap: var(--wp--preset--spacing--24);
		padding-bottom: var(--wp--preset--spacing--60);
	}

	/* Linki zwarte w jeden blok – więcej powietrza między headerem menu a linkami (#028) */
	.aries-menu .aries-menu__nav .wp-block-navigation-item__content {
		padding: var(--wp--preset--spacing--4) 0;
		line-height: 1.1;
	}

	/* Zamknij na telefonie: sam krzyżyk w kółku 46 px jak w Figmie (#009);
	   napis zostaje w kodzie dla czytników ekranu */
	.aries-menu-close {
		justify-content: center;
		width: 46px;
		height: 46px;
		min-height: 46px;
		padding: 0;
		gap: 0;
		font-size: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aries-menu .aries-menu__nav .wp-block-navigation-item__content {
		transition: none;
	}
}

/*
 * Przypięty header (klasa .aries-sticky dodawana przez assets/js/sticky-header.js).
 * Bez tła; kolor wg sekcji pod spodem (.is-on-dark / .is-on-light);
 * chowa się przy przewijaniu w dół (.is-hidden).
 */
header.wp-block-template-part.aries-sticky {
	--aries-sticky-top: calc(2 * var(--wp--style--root--padding-left, 24px));

	position: fixed;
	top: var(--aries-sticky-top);
	right: calc(2 * var(--wp--style--root--padding-right, 24px));
	left: calc(2 * var(--wp--style--root--padding-left, 24px));
	z-index: 10;
	padding: 0;
	transition: transform 0.3s ease, color 0.2s ease;
}

/* Strony z jasnym headerem: header w tym samym miejscu co logo/treść strony (margines strony) */
header.wp-block-template-part.aries-sticky:not(.is-overlay) {
	--aries-sticky-top: var(--wp--style--root--padding-left, 24px);

	right: var(--wp--style--root--padding-right, 24px);
	left: var(--wp--style--root--padding-left, 24px);
}

body.admin-bar header.wp-block-template-part.aries-sticky {
	top: calc(var(--aries-sticky-top) + var(--wp-admin--admin-bar--height, 0px));
}

/* Miejsce po headerze, który wcześniej stał w układzie strony */
body.has-sticky-header--flow .aries-main {
	padding-top: calc(var(--wp--style--root--padding-left, 24px) + 44px);
}

header.wp-block-template-part.aries-sticky.is-on-dark {
	color: var(--wp--custom--color--text--inverse);
}

header.wp-block-template-part.aries-sticky.is-on-light {
	color: var(--wp--custom--color--text--primary);
}

header.wp-block-template-part.aries-sticky.is-hidden {
	transform: translateY(calc(-100% - var(--aries-sticky-top) - var(--wp-admin--admin-bar--height, 0px) - 8px));
}

header.wp-block-template-part.aries-sticky.no-motion {
	transition: none;
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part.aries-sticky {
		transition: none;
	}
}

/*
 * Tło pod logo i przyciskiem Menu po przewinięciu (#017, Figma: „menu scroll”).
 * Dwie osobne pigułki (bez wspólnej belki): biel 10% + rozmycie tła, radius full.
 * Pigułka jest zawsze, ale na górze strony całkiem przezroczysta – logo i przycisk
 * nie przesuwają się; pigułka wystaje na zewnątrz o padding z Figmy (logo 8/16, przycisk 8).
 * Tylko header strony – nie header w otwartym menu (tam jest krzyżyk, bez tła).
 */
/* Bez isolation: pigułka (z-index −1) leży wtedy pod całym przyciskiem razem z jego obrysem
   (box-shadow inset), a nie nad nim – inaczej rozmycie zamazywało obrys */
header.wp-block-template-part.aries-sticky :is(.aries-header__logo, .aries-menu-button) {
	position: relative;
}

header.wp-block-template-part.aries-sticky :is(.aries-header__logo, .aries-menu-button)::before {
	content: "";
	position: absolute;
	inset: -8px -16px;
	z-index: -1;
	background-color: rgb(255 255 255 / 0.1);
	border-radius: var(--wp--custom--radius--full);
	-webkit-backdrop-filter: blur(8px); /* Figma: background blur 16 ≈ CSS blur(8px) */
	backdrop-filter: blur(8px);
	opacity: 0;
	transition: opacity var(--aries-hover-duration) var(--aries-hover-ease);
	pointer-events: none;
}

header.wp-block-template-part.aries-sticky .aries-menu-button::before {
	inset: -8px;
}

header.wp-block-template-part.aries-sticky.is-scrolled :is(.aries-header__logo, .aries-menu-button)::before {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	header.wp-block-template-part.aries-sticky :is(.aries-header__logo, .aries-menu-button)::before {
		transition: none;
	}
}