/*
 * Antraste.
 *
 * Matmenys is Figma node 47:247 (1440x109) ir M: Meniu (360x628).
 * Kiekviena reiksme ateina is theme.json — scripts/check-tokens.sh tai tikrina.
 */

.ekotroba-header {
	position: sticky;
	top: 0;
	z-index: var(--wp--custom--header--z-index);
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line); /* token-exempt: plaukelio remelis */
}

.ekotroba-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/*
	 * Figmos auto-layout naudoja space-between be minimalaus tarpo.
	 * 20px cia veiktu kaip grindys ir atimtu 12px is navigacijos, todel
	 * ji butu suspausta. 10px palieka apsauga siauresniems plociams.
	 */
	gap: var(--wp--custom--gap--tight);
	/*
	 * Figmoje komponentas yra 1440 plocio su 70px parastemis, tad TURINIUI
	 * lieka 1300. `max-width: 1300` plius parastes paliktu tik 1160 ir viska
	 * suspaustu — butent tai ir buvo nutike porastes stulpeliams.
	 */
	max-width: calc(var(--wp--custom--container--max) + var(--wp--custom--container--gutter) * 2);
	min-height: var(--wp--custom--header--height);
	margin-inline: auto;
	padding-inline: var(--wp--custom--container--gutter);
	padding-block: var(--wp--preset--spacing--20);
}

/* ------------------------------------------------------------------ logotipas */

.ekotroba-logo {
	display: block;
	flex-shrink: 0;
}

.ekotroba-header__logo img {
	display: block;
	width: 120px;
	height: auto;
}

/* ----------------------------------------------------------------- navigacija */

.ekotroba-header__nav {
	flex-shrink: 1;
	min-width: 0;
}

.ekotroba-nav {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--wp--custom--gap--base);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekotroba-nav a {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	text-decoration: none;
	white-space: nowrap;
}

.ekotroba-nav a:hover {
	color: var(--wp--preset--color--brand-hover);
}

/*
 * Esamas puslapis zymimas ZALIU BRUKSNIU, o ne zaliu tekstu.
 *
 * Figmoje jis nudazytas #99D411, taciau ant balto tai 1,78:1 — WCAG AA
 * reikalauja 4,5. Zalia, kuri praeitu, jau nebebutu prekes zenklo zalia
 * (reiktu ~#456F1F). Todel zalia lieka ZYME, o tekstas tampa iskaitomas:
 * dizaino zinute ta pati, tik perduota kitu budu.
 */
.ekotroba-nav .current-menu-item > a {
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--brand);
	text-decoration-thickness: var(--wp--custom--sidebar--rule-height);
	text-underline-offset: var(--wp--custom--sidebar--underline-offset);

	/*
	 * Bruksnys eina KIAURAI raides, o ne aplenkia ju uodegas.
	 * Numatytasis `auto` prie „g" ir „ų" palieka tarpus, ir vientisa linija
	 * suskyla i atkarpas — atrodo kaip klaida, o ne kaip pabraukimas.
	 */
	text-decoration-skip-ink: none;
}

/* ------------------------------------------------------------------ kontaktai */

.ekotroba-header__contacts {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--custom--gap--xs);
	flex-shrink: 0;
}

.ekotroba-header__contacts a {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--heading);
	text-decoration: none;
	white-space: nowrap;
}

.ekotroba-header__phone {
	font-size: var(--wp--preset--font-size--s-19);
}

.ekotroba-header__email {
	font-size: var(--wp--preset--font-size--s-14);
}

.ekotroba-header__contacts a:hover {
	color: var(--wp--preset--color--brand-hover);
}

/* -------------------------------------------------------------------- veiksmai */

.ekotroba-header__cta {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--gap--tight);
	flex-shrink: 0;
}

/* --------------------------------------------------------- kalbos perjungiklis */

.ekotroba-lang {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--gap--xs);
	font-size: var(--wp--preset--font-size--s-14);
	font-weight: 600;
}

.ekotroba-lang__item {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.ekotroba-lang__item.is-active {
	color: var(--wp--preset--color--brand-hover);
}

.ekotroba-lang__sep {
	color: var(--wp--preset--color--line);
}

/* --------------------------------------------------------------------- burgeris */

.ekotroba-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px; /* token-exempt: burgerio bruksniu tarpas, ne dizaino reiksme */
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.ekotroba-header__burger-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--small);
}

/* ---------------------------------------------------------------- mobilus meniu */

.ekotroba-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: var(--wp--custom--header--z-index);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	overflow-y: auto;
	background: var(--wp--preset--color--white);
	padding-inline: var(--wp--custom--container--gutter-mobile);
	padding-block: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/*
 * Meniu iSSLENKA is desines ir issirySkina.
 *
 * `hidden` lieka: uzdarytas meniu turi dingti ir is ekrano skaitytuvo, o ne
 * tik pasislepti akiai. Bet `display: none` animuoti neimanoma, todel
 * atidarant elementas pirma parodomas, ir tik kitame kadre uzdedama
 * `is-open`. Uzdarant atvirksciai — `hidden` uzdedamas pasibaigus perejimui.
 * Trukme skaitoma is SIO failo (`header/view.js`), tad ji cia viena vieta.
 */
.ekotroba-mobile-menu {
	opacity: 0;
	transform: translateX(100%); /* token-exempt: perejimo pradzia, ne matmuo */
	transition:
		opacity var(--wp--custom--motion--duration-menu) var(--wp--custom--motion--easing),
		transform var(--wp--custom--motion--duration-menu) var(--wp--custom--motion--easing);
}

.ekotroba-mobile-menu.is-open {
	opacity: 1;
	transform: translateX(0);
}

.ekotroba-mobile-menu[hidden] {
	display: none;
}

/*
 * Isjungus animacijas meniu atsiranda is karto. JS trukme skaito is CSS, tad
 * cia nunulinus ji ir nebelaukia — sinchronizuoti rankomis nereikia.
 */
@media (prefers-reduced-motion: reduce) {
	.ekotroba-mobile-menu {
		opacity: 1;
		transform: none;
		transition-duration: 0s;
	}
}

.ekotroba-mobile-menu__top {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--gap--tight);
	min-height: var(--wp--custom--header--height-mobile);
}

.ekotroba-mobile-menu__logo img {
	display: block;
	width: 110px;
	height: auto;
}

.ekotroba-mobile-menu__close {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-3);
	line-height: 1; /* token-exempt: x glifo centravimas, ne teksto tarpas */
	cursor: pointer;
}

.ekotroba-mobile-menu__top .ekotroba-btn {
	margin-inline-start: auto;
}

.ekotroba-mobile-nav {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ekotroba-mobile-nav li + li {
	border-top: 1px solid var(--wp--preset--color--line); /* token-exempt: plaukelio skirtukas */
}

.ekotroba-mobile-nav a {
	display: block;
	padding-block: var(--wp--preset--spacing--15);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-18);
	font-weight: 600;
	text-decoration: none;
}

.ekotroba-mobile-menu__contacts {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--xs);
}

.ekotroba-mobile-menu__label {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--s-18);
	font-weight: 600;
}

.ekotroba-mobile-menu__phone {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--h-3);
	font-weight: 500;
	text-decoration: none;
}

.ekotroba-mobile-menu__email {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
}

.ekotroba-mobile-menu__cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--gap--tight);
	margin-block-start: auto;
}

.ekotroba-mobile-menu__cta .ekotroba-btn {
	width: 100%;
}

.ekotroba-mobile-menu__cta .ekotroba-lang {
	justify-content: center;
	padding-block-end: var(--wp--preset--spacing--10);
}

/* ------------------------------------------------------------------ breakpoint */

/*
 * Mobilus isdestymas.
 *
 * Is Figma komponento `header` (360x80): pad 10/15, gap 15, burgeris 22x15
 * KAIREJE pries logotipa, logotipas 105x60, desineje — "Nemokama konsultacija"
 * mygtukas su dvieilu tekstu. Kontaktai instancijoje pasleti; ju vieta yra
 * meniu perdangoje.
 *
 * Auksčio patikra: 10 + 60 + 10 = 80, kaip Figmoje.
 */
@media (max-width: 1024px) {
	.ekotroba-header__nav,
	.ekotroba-header__contacts {
		display: none;
	}

	.ekotroba-header__burger {
		display: flex;
		order: -1;
	}

	.ekotroba-header__inner {
		gap: var(--wp--preset--spacing--15);
		min-height: var(--wp--custom--header--height-mobile);
		padding-inline: var(--wp--custom--container--gutter-mobile);
		padding-block: var(--wp--preset--spacing--10);
	}

	.ekotroba-header__logo {
		margin-inline-end: auto;
	}

	.ekotroba-header__logo img {
		width: 105px;
	}

	/* Perjungiklis ir parduotuve gyvena meniu perdangoje, ne antrasteje. */
	.ekotroba-header__cta .ekotroba-lang,
	.ekotroba-header__cta .ekotroba-btn--outline {
		display: none;
	}

	.ekotroba-header__cta .ekotroba-btn--primary {
		max-width: 130px;
		padding-inline: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--s-14);
		line-height: var(--wp--custom--line-height--body);
		white-space: normal;
	}

	.ekotroba-header__cta .ekotroba-btn--primary .ekotroba-btn__icon {
		display: none;
	}
}

body.ekotroba-menu-open {
	overflow: hidden;
}