/**
 * Leaware — Header
 *
 * Ramki z Figmy: `Header` desktop (1:1728, 1440 × 82, padding 24/96, menu
 * z odstępem 38), `Header` mobile (1:2618, 360 × 56, padding 16/16) i `Modal`
 * (1:3559) — przesłona 360 × 800 z panelem 300 × 800 po lewej.
 */

.leaware-hd {
	--lw-hd-padding-y: 24px;
	--lw-hd-padding-x: 96px;
	--lw-hd-logo-height: 34px;

	--lw-hd-menu-gap: 38px;
	--lw-hd-menu-color: #15192a;
	--lw-hd-burger-color: #15192a;
	--lw-hd-menu-align: flex-end;
	--lw-hd-menu-color-hover: #fec200;

	--lw-hd-panel-width: 300px;
	--lw-hd-panel-bg: #ffffff;
	--lw-hd-panel-menu-color: #15192a;
	--lw-hd-overlay: rgba(21, 25, 42, 0.92);
	--lw-hd-accent: #fec200;

	--lw-hd-transition: 280ms;

	position: relative;
}

/*
 * Pełna szerokość okna niezależnie od kontenera.
 *
 * W projekcie pasek zajmuje całe 1440 px, a wcięcia 96 px trzyma sam nagłówek.
 * Na wdrożonej stronie menu kończyło się na 892 zamiast 1344, bo kontener
 * Elementora jest flexem, a element widgetu dostaje `flex: 0 1 auto` i kurczy
 * się do szerokości treści — 908 px to logo 124 + odstęp 24 + menu 571 +
 * padding 192, a nie żadna ustawiona szerokość.
 *
 * Dlatego rozciągnięcie musi trafić w element Elementora, a nie w `.leaware-hd`.
 * Gdy marginesy procentowe siedzą na kurczliwym dziecku, `50%` liczy się od
 * szerokości, która sama zależy od treści — pasek wyjeżdżał wtedy na x=-640.
 * Na elemencie, który jest bezpośrednim dzieckiem wyśrodkowanego `e-con-inner`,
 * `50% - 50vw` daje czysty full-bleed.
 *
 * `!important` przy szerokościach, bo Elementor trzyma tu `max-width: 100%`
 * regułą `.elementor.elementor .e-con > .elementor-widget` o specyficzności
 * (0,4,0) — bez tego pasek urywał się na 1280 px zamiast 1440. Marginesy
 * wygrywają same, więc ich nie oznaczam.
 *
 * `100vw` liczy się razem z paskiem przewijania — gdyby pasek zajmował miejsce
 * i nagłówek wyszedł poza okno, wyłącz przełącznik i ustaw kontener na pełną
 * szerokość w Elementorze.
 */
.elementor-element.leaware-hd-full-yes {
	width: 100vw !important;
	max-width: 100vw !important;
	align-self: stretch;
	margin-right: calc(50% - 50vw);
	margin-left: calc(50% - 50vw);
}

/* --- Pasek --------------------------------------------------------------- */

/*
 * Nawigacja dostaje `flex: 1` i sama układa pozycje — dzięki temu wyrównanie
 * nie zależy od tego, ile elementów jest w pasku. Przy `space-between` znikający
 * hamburger zmieniał rozkład i menu wędrowało w lewo.
 */
.leaware-hd__bar {
	display: flex;
	align-items: center;
	gap: 24px;
	padding: var(--lw-hd-padding-y) var(--lw-hd-padding-x);
}

/*
 * Linia pod nagłówkiem: w projekcie biała, 1 px, na wysokości 79 px przy
 * szerokości 1280 na kadrze 1440 — czyli wcięta o 80 px z każdej strony.
 */
.leaware-hd--divider .leaware-hd__bar::after {
	position: absolute;
	right: 80px;
	bottom: 0;
	left: 80px;
	height: 1px;
	background-color: rgba(255, 255, 255, 0.35);
	content: "";
}

.leaware-hd__logo {
	display: inline-flex;
	flex: 0 0 auto;
}

.leaware-hd__logo img {
	display: block;
	width: auto;
	height: var(--lw-hd-logo-height);
}

/* --- Menu w pasku -------------------------------------------------------- */

.leaware-hd__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.leaware-hd__menu {
	display: flex;
	align-items: center;
	justify-content: var(--lw-hd-menu-align);
	gap: var(--lw-hd-menu-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.leaware-hd__menu li {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Zakres (0,2,0) — bije globalną typografię z Global Settings Elementora. */
.leaware-hd .leaware-hd__link {
	color: var(--lw-hd-menu-color);
	font-family: Rubik, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 18px;
	text-decoration: none;
	text-transform: uppercase;
	transition: color 200ms ease;
}

.leaware-hd .leaware-hd__link:hover,
.leaware-hd .leaware-hd__link:focus {
	color: var(--lw-hd-menu-color-hover);
}

.leaware-hd .leaware-hd__link:focus-visible {
	outline: 2px solid var(--lw-hd-menu-color-hover);
	outline-offset: 4px;
}

/* --- Hamburger ----------------------------------------------------------- */

/*
 * W projekcie to sama ikona kresek 18 px, bez kafelka. Reset jest pełny, bo
 * `<button>` łapie globalne style przycisków z motywu i z Global Settings.
 */
.leaware-hd .leaware-hd__burger {
	box-sizing: content-box;
	display: none;
	flex: 0 0 auto;
	width: 18px;
	padding: 8px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.leaware-hd .leaware-hd__burger span {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--lw-hd-burger-color);
}

.leaware-hd .leaware-hd__burger span + span {
	margin-top: 4px;
}

/*
 * Elementor maluje z Global Settings każdy `button:hover` i `button:focus`
 * kolorem z zestawu — reguła `.elementor-kit-51 button:focus` ma zakres (0,2,1)
 * i wygrywała z moim (0,2,0). Po zamknięciu panelu fokus wraca na hamburger,
 * więc przycisk zostawał na ciemnym tle.
 *
 * Powtórzona klasa podnosi zakres do (0,3,1) bez opierania się na przodkach —
 * `.elementor` zadziałałoby tylko wewnątrz Elementora, a to jest zwykły reset
 * przycisku i ma trzymać wszędzie.
 */
.leaware-hd .leaware-hd__burger.leaware-hd__burger:hover,
.leaware-hd .leaware-hd__burger.leaware-hd__burger:focus,
.leaware-hd .leaware-hd__burger.leaware-hd__burger:active {
	border: 0;
	background: none;
	box-shadow: none;
}

.leaware-hd .leaware-hd__burger:focus-visible {
	outline: 2px solid var(--lw-hd-menu-color-hover);
	outline-offset: 2px;
}

/* --- Panel --------------------------------------------------------------- */

.leaware-hd__panel {
	position: fixed;
	z-index: 9990;
	inset: 0;
}

.leaware-hd__panel[hidden] {
	display: none;
}

.leaware-hd__overlay {
	position: absolute;
	inset: 0;
	background-color: var(--lw-hd-overlay);
	opacity: 0;
	transition: opacity var(--lw-hd-transition) ease;
}

/*
 * Szuflada wjeżdża z lewej — w projekcie panel przylega do lewej krawędzi,
 * a odsłonięty pas po prawej pokrywa przesłona.
 */
.leaware-hd__drawer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	width: var(--lw-hd-panel-width);
	max-width: 85vw;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--lw-hd-panel-bg);
	transform: translateX(-100%);
	transition: transform var(--lw-hd-transition) ease;
}

.leaware-hd__panel.is-open .leaware-hd__overlay {
	opacity: 1;
}

.leaware-hd__panel.is-open .leaware-hd__drawer {
	transform: translateX(0);
}

/* Poświata panelu */

/*
 * Geometria z ramki `Modal`: żółty owal 300 × 370 wchodzący górną krawędzią
 * (y=-340) i dwa niebieskie na dole (y=596 i 756). Panel przycina zawartość,
 * więc wystające części są niewidoczne — tak samo jak w projekcie.
 */
.leaware-hd__glow {
	position: absolute;
	z-index: 0;
	border-radius: 500px;
	/* Figma podaje layer blur 150; CSS blur() operuje na sigmie — stąd połowa. */
	filter: blur(75px);
	pointer-events: none;
}

.leaware-hd__glow--y {
	top: -340px;
	left: 0;
	width: 300px;
	height: 370px;
	background-color: var(--lw-hd-accent);
}

.leaware-hd__glow--b1,
.leaware-hd__glow--b2 {
	background: linear-gradient(225deg, rgba(3, 169, 244, 0.6) 5%, rgba(100, 255, 218, 0.4) 100%);
	opacity: 0.55;
}

.leaware-hd__glow--b1 {
	top: 596px;
	left: 183px;
	width: 300px;
	height: 215px;
}

.leaware-hd__glow--b2 {
	top: 756px;
	left: 100px;
	width: 300px;
	height: 197px;
}

/* Pasek panelu: logo i zamknięcie */

.leaware-hd__drawer-bar {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	min-height: 66px;
	padding: 16px;
}

.leaware-hd__logo--panel img {
	height: 24px;
}

/*
 * Krzyżyk rysowany dwiema kreskami, a nie znakiem z kroju pisma — w projekcie
 * to kwadrat 34 × 34 z promieniem 8, obramowaniem 1 px `#15192a` i krzyżykiem
 * o polu 8 × 8 (wektor `I1:3572;199:32`).
 *
 * Obramowanie idzie przez `box-shadow`, bo w Figmie stroke ma wyrównanie
 * OUTSIDE — `border` wciągnąłby je do środka i zjadł 2 px z pola przycisku.
 */
.leaware-hd .leaware-hd__close {
	position: relative;
	box-sizing: border-box;
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: var(--lw-hd-accent);
	box-shadow: 0 0 0 1px var(--lw-hd-panel-menu-color);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

/*
 * Kreska 9 × 2 obrócona o 45° daje pole (9 + 2) / √2 ≈ 7,8 px, czyli wektor
 * 8 × 8 z projektu. Wcześniejsze 11 px dawało 9,2 px — krzyżyk był za duży.
 */
.leaware-hd .leaware-hd__close::before,
.leaware-hd .leaware-hd__close::after {
	position: absolute;
	width: 9px;
	height: 2px;
	border-radius: 1px;
	background-color: var(--lw-hd-panel-menu-color);
	content: "";
}

.leaware-hd .leaware-hd__close::before {
	transform: rotate(45deg);
}

.leaware-hd .leaware-hd__close::after {
	transform: rotate(-45deg);
}

/* Ten sam powód co przy hamburgerze — bez tego żółty kwadrat czerniał po najechaniu. */
.leaware-hd .leaware-hd__close.leaware-hd__close:hover,
.leaware-hd .leaware-hd__close.leaware-hd__close:focus,
.leaware-hd .leaware-hd__close.leaware-hd__close:active {
	border: 0;
	background-color: var(--lw-hd-accent);
	box-shadow: 0 0 0 1px var(--lw-hd-panel-menu-color);
}

.leaware-hd .leaware-hd__close:focus-visible {
	outline: 2px solid var(--lw-hd-panel-menu-color);
	outline-offset: 2px;
}

/* Treść panelu */

/*
 * W projekcie treść panelu ma wypełnienie 40/16, a rząd ikon stoi przy dolnej
 * krawędzi — stąd `margin-top: auto` zamiast sztywnej pozycji.
 */
.leaware-hd__drawer-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	overflow-y: auto;
	padding: 40px 16px;
}

.leaware-hd__menu--panel {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--lw-hd-menu-gap);
}

.leaware-hd .leaware-hd__menu--panel .leaware-hd__link {
	color: var(--lw-hd-panel-menu-color);
}

.leaware-hd .leaware-hd__menu--panel .leaware-hd__link:hover,
.leaware-hd .leaware-hd__menu--panel .leaware-hd__link:focus {
	color: var(--lw-hd-menu-color-hover);
}

/* --- Ikony w panelu ------------------------------------------------------ */

.leaware-hd__socials {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 11px;
	margin-top: auto;
	padding-top: 40px;
}

.leaware-hd__social {
	display: inline-flex;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	transition: opacity 200ms ease;
}

.leaware-hd__social:hover,
.leaware-hd__social:focus {
	opacity: 0.75;
}

.leaware-hd__social img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* --- Przełączenie na hamburger ------------------------------------------- */

/*
 * Próg wybiera kontrolka; klasa `leaware-hd--bp-*` ląduje na opakowaniu widgetu,
 * dlatego selektory zaczynają się od niej, a nie od `.leaware-hd`.
 */
@media (max-width: 1024px) {

	.leaware-hd--bp-1024 .leaware-hd__nav {
		display: none;
	}

	.leaware-hd--bp-1024 .leaware-hd__burger {
		display: block;
		margin-left: auto;
	}
}

@media (max-width: 767px) {

	.leaware-hd--bp-767 .leaware-hd__nav {
		display: none;
	}

	.leaware-hd--bp-767 .leaware-hd__burger {
		display: block;
		margin-left: auto;
	}

	.leaware-hd--divider .leaware-hd__bar::after {
		right: 16px;
		left: 16px;
	}
}

/* --- Dostępność ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.leaware-hd__overlay,
	.leaware-hd__drawer,
	.leaware-hd .leaware-hd__link,
	.leaware-hd__social {
		transition-duration: 1ms;
	}
}