/* Nagłówek strony: pasek, mega menu usług, menu mobilne */

.gn-header {
	--gn-header-top: 20px;
	--gn-header-height: 100px;

	position: fixed;
	top: calc(var(--gn-header-top) + var(--wp-admin--admin-bar--height, 0px));
	left: 0;
	right: 0;
	z-index: 900;
	pointer-events: none;

	/* Podgląd w edytorze - pasek w normalnym przepływie dokumentu */
	&.is-preview {
		position: relative;
		top: 0;
		padding-block: 20px;
	}

	& .gn-header__bar {
		position: relative;
		display: flex;
		align-items: center;
		width: var(--gn-container);
		height: var(--gn-header-height);
		margin-inline: auto;
		padding-inline: 30px;
		border-radius: var(--gn-radius-md);
		background: rgb(255 255 255 / 0.9);
		backdrop-filter: blur(10px);
		box-shadow: var(--gn-shadow);
		pointer-events: auto;
	}

	& .gn-header__logo {
		flex: none;

		& img {
			display: block;
			width: 141.43px;
			height: 36px;
		}
	}

	& .gn-header__nav {
		display: flex;
		flex: 1;
		justify-content: center;
		min-width: 0;
		padding-inline: 29px 20px;
	}

	& .gn-menu {
		display: flex;
		align-items: center;
	}

	& .gn-menu__link {
		display: inline-flex;
		align-items: center;
		gap: 5px;
		padding: 6px 12px;
		border: 0;
		border-radius: var(--gn-radius-lg);
		background: transparent;
		font: 400 16px/1.33 var(--gn-font);
		letter-spacing: var(--gn-tracking);
		color: var(--gn-ink);
		white-space: nowrap;
		cursor: pointer;
		transition: color 0.2s var(--gn-ease), background-color 0.2s var(--gn-ease);

		&:hover,
		&[aria-current="page"] {
			color: var(--gn-gold);
		}

		&[aria-expanded="true"] {
			background: var(--gn-cream);
			color: var(--gn-ink);
		}
	}

	& .gn-menu__chevron {
		width: 9px;
		height: 4px;
		transition: transform 0.2s var(--gn-ease);
	}

	& [aria-expanded="true"] > .gn-menu__chevron {
		transform: rotate(180deg);
	}

	/* Przyciski wyróżnione (w złotej ramce) */
	& .gn-cta {
		display: flex;
		flex: none;
		align-items: center;
		gap: 10px;
		border: 1px solid var(--gn-gold);
		border-radius: var(--gn-radius-md);
	}

	& .gn-cta__group {
		display: flex;
		align-items: center;
	}

	& .gn-cta__link {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		height: 40px;
		padding-inline: 20px;
		border-radius: 20px;
		font-size: 16px;
		font-weight: 600;
		line-height: 1.33;
		white-space: nowrap;
		transition: color 0.2s var(--gn-ease), box-shadow 0.2s var(--gn-ease);

		&:hover {
			color: var(--gn-gold);
		}
	}

	& .gn-cta__link--primary {
		border-radius: var(--gn-radius-md);
		background: var(--gn-gold);
		box-shadow: var(--gn-glow);

		&:hover {
			color: var(--gn-ink);
			box-shadow: 0 0 40px rgb(237 169 33 / 1);
		}
	}

	& .gn-cta__sep {
		width: 1px;
		height: 20px;
		background: var(--gn-muted);
	}

	& .gn-cta__icon {
		width: 12px;
		height: 12px;
	}

	/* Ikona usługi w białej ramce (mega menu i lista usług w menu mobilnym) */
	& .gn-icon-box {
		display: flex;
		flex: none;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border: 1px solid var(--gn-muted);
		border-radius: var(--gn-radius-sm);
		background: var(--gn-white);

		& svg {
			width: 18px;
			height: 18px;
		}
	}

	/*
	 * Kafle podstron "wycinające" jedno wspólne zdjęcie: każdy kafel pokazuje
	 * fragment tła odpowiadający jego pozycji w siatce (--i = indeks, --n = liczba).
	 */
	& .gn-tiles {
		--cols: 4;
		--tile: 175px;
		--gap: 20px;
		--step: calc(var(--tile) + var(--gap));
		--rows: round(up, calc(var(--n) / var(--cols)), 1);
		--area-w: calc(var(--cols) * var(--step) - var(--gap));
		--area-h: calc(var(--rows) * var(--step) - var(--gap));
		--bg-w: max(var(--area-w), calc(var(--area-h) * 1.57));

		display: grid;
		grid-template-columns: repeat(var(--cols), var(--tile));
		grid-auto-rows: var(--tile);
		gap: var(--gap);

		&[hidden] {
			display: none;
		}

		& li {
			--col: mod(var(--i), var(--cols));
			--row: round(down, calc(var(--i) / var(--cols)), 1);
		}
	}

	& .gn-tiles__tile {
		display: flex;
		align-items: flex-end;
		height: 100%;
		padding: 20px;
		border-radius: var(--gn-radius-md);
		background:
			linear-gradient(rgb(36 0 70 / 0.8), rgb(36 0 70 / 0.8)),
			var(--gn-purple) url("../../assets/img/tiles-bg.webp") no-repeat;
		background-size: auto, var(--bg-w) calc(var(--bg-w) / 1.57);
		background-position:
			0 0,
			calc((var(--area-w) - var(--bg-w)) / 2 - var(--col) * var(--step))
			calc((var(--area-h) - var(--bg-w) / 1.57) / 2 - var(--row) * var(--step));
		background-color: var(--gn-purple); /* gdy przeglądarka nie zna mod()/round() */
		color: var(--gn-cream);
		font-weight: 600;
		line-height: 1.33;
		transition: box-shadow 0.2s var(--gn-ease), transform 0.2s var(--gn-ease);

		&:hover,
		&:focus-visible {
			box-shadow: var(--gn-glow);
			transform: translateY(-2px);
		}

		&[aria-current="page"] {
			color: var(--gn-gold);
		}
	}

	/* Mega menu "Co robimy?" */
	& .gn-mega {
		position: absolute;
		top: calc(100% + 20px);
		left: 50%;
		display: grid;
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 20px;
		width: min(1160px, 100%);
		border-radius: var(--gn-radius-md);
		background: rgb(255 255 255 / 0.9);
		backdrop-filter: blur(20px);
		box-shadow: 0 10px 40px -20px rgb(0 0 0 / 0.25);
		transform: translateX(-50%);
		animation: gn-mega-in 0.2s var(--gn-ease);

		&[hidden] {
			display: none;
		}
	}

	& .gn-mega__nav {
		padding: 20px 0 20px 20px;
	}

	& .gn-mega__heading {
		padding: 20px 10px;
		font-weight: 600;
		line-height: 1.33;
		color: var(--gn-gold);
	}

	& .gn-mega__service {
		display: flex;
		align-items: center;
		gap: 15px;
		min-height: 56px;
		padding: 10px;
		border-radius: var(--gn-radius-sm);
		font-weight: 600;
		line-height: 1.33;
		transition: background-color 0.2s var(--gn-ease);

		&:hover,
		&.is-active {
			background: var(--gn-cream);
		}
	}

	& .gn-mega__panels {
		min-height: 605px;
		padding: 20px;
		border-radius: var(--gn-radius-md);
		background: var(--gn-cream);
	}

	/* Przycisk menu mobilnego: hamburger / zamknięcie */
	& .gn-header__toggle {
		display: none;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		margin: 0 -6px 0 auto;
		padding: 0;
		border: 0;
		background: transparent;
		color: var(--gn-ink);
		cursor: pointer;

		& .gn-header__toggle-open {
			width: 32px;
			height: 24px;
		}

		& .gn-header__toggle-close {
			display: none;
			width: 24px;
			height: 24px;
		}

		&[aria-expanded="true"] {
			& .gn-header__toggle-open {
				display: none;
			}

			& .gn-header__toggle-close {
				display: block;
			}
		}
	}

	/* Menu mobilne */
	& .gn-mobile {
		position: fixed;
		inset: 0;
		z-index: -1;
		overflow: hidden auto;
		overscroll-behavior: contain;
		padding: calc(var(--gn-header-top) + var(--gn-header-height) + var(--wp-admin--admin-bar--height, 0px)) 20px 40px;
		background: var(--gn-white);
		pointer-events: auto;
		animation: gn-fade-in 0.2s var(--gn-ease);

		&[hidden] {
			display: none;
		}

		&::before {
			content: "";
			position: absolute;
			top: -992px;
			left: 50%;
			z-index: -1;
			width: 1080px;
			aspect-ratio: 1;
			border-radius: 50%;
			background: rgb(237 169 33 / 0.6);
			transform: translateX(-50%);
		}
	}

	& .gn-mobile__level {
		display: flex;
		flex-direction: column;
		align-items: center;
		max-width: 400px;
		margin-inline: auto;

		&[hidden] {
			display: none;
		}
	}

	& .gn-mobile__level--0 {
		padding-top: 40px;
	}

	& .gn-mobile__level--1,
	& .gn-mobile__level--2 {
		align-items: stretch;
		padding-top: 20px;
	}

	& .gn-mobile__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 20px;
		min-height: 41px;
		margin-bottom: 30px;
	}

	& .gn-mobile__title {
		font-size: 20px;
		font-weight: 600;
		line-height: 1.33;
		color: var(--gn-gold);
	}

	& .gn-mobile__back {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 20px;
		border: 0;
		border-radius: var(--gn-radius-md);
		background: var(--gn-cream);
		font: 600 16px/1.33 var(--gn-font);
		letter-spacing: var(--gn-tracking);
		color: var(--gn-ink);
		cursor: pointer;
	}

	& .gn-mobile__back-icon {
		width: 24px;
		height: 20px;
	}

	& .gn-mobile__list {
		display: flex;
		flex-direction: column;
	}

	& .gn-mobile__item {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		border: 0;
		background: transparent;
		font-family: var(--gn-font);
		letter-spacing: var(--gn-tracking);
		color: var(--gn-ink);
		text-align: left;
		cursor: pointer;
	}

	& .gn-mobile__level--0 .gn-mobile__list {
		align-items: center;
		gap: 10px;
	}

	& .gn-mobile__level--0 .gn-mobile__item {
		padding: 6px 12px;
		border-radius: var(--gn-radius-lg);
		font-size: 24px;
		font-weight: 700;
		line-height: 1.33;

		& .gn-mobile__chevron {
			width: 9px;
			height: 18px;
		}
	}

	& .gn-mobile__level--1 .gn-mobile__item {
		gap: 15px;
		width: 100%;
		min-height: 56px;
		padding: 10px;
		border-radius: var(--gn-radius-sm);
		font-size: 20px;
		font-weight: 600;
		line-height: 1.33;

		&:hover {
			background: var(--gn-cream);
		}

		& .gn-mobile__chevron {
			width: 6px;
			height: 12px;
		}
	}

	& .gn-mobile__level .gn-tiles {
		--cols: 2;
		--tile: calc((min(100vw, 440px) - 60px) / 2);
	}

	/* Przyciski wyróżnione w menu mobilnym - pionowo, większa czcionka */
	& .gn-mobile__cta {
		flex-direction: column;
		gap: 10px;
		width: 340px;
		max-width: 100%;
		margin-top: 40px;

		& .gn-cta__group {
			flex-direction: column;
			align-self: stretch;
		}

		& .gn-cta__link {
			height: 60px;
			font-size: 24px;
		}

		& .gn-cta__sep {
			width: calc(100% - 40px);
			height: 1px;
		}

		& .gn-cta__link--primary {
			align-self: stretch;
			margin: 0 -1px -1px;
		}
	}

	& .gn-mobile-social {
		display: flex;
		gap: 25px;
		margin-top: 40px;

		& .gn-mobile-social__link {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50px;
			height: 50px;
			border-radius: var(--gn-radius-lg);
			background: rgb(255 255 255 / 0.9);
			box-shadow: var(--gn-shadow);
		}

		& .gn-mobile-social__icon {
			width: 24px;
			height: 24px;
		}
	}

	@media (max-width: 1199px) {
		& .gn-header__nav,
		& .gn-header__cta {
			display: none;
		}

		& .gn-header__toggle {
			display: inline-flex;
		}
	}

	@media (max-width: 767px) {
		& .gn-header__bar {
			width: calc(100% - 40px);
			padding-inline: 20px;
		}
	}
}

/* Otwarte menu mobilne - blokada przewijania strony pod spodem */
html.gn-menu-open {
	overflow: hidden;
}

@keyframes gn-mega-in {
	from {
		opacity: 0;
		transform: translate(-50%, -8px);
	}
}

@keyframes gn-fade-in {
	from {
		opacity: 0;
	}
}