/* Ampera · Site header.
   State A: transparent over the page hero, Balta foreground (Figma 1103:2093).
   State B (.is-solid): fixed Balta bar, Juoda foreground, hairline divider
   (Figma 1103:2143 — bar 84px: 24px block padding + 36px content row).
   Mobile bar (1103:7581): 24px padding, logo 102x18, CTA + burger.
   Overlay (1103:9527): full-screen Violetinė, stacked H24 links, Lt|En circles. */

.ampera-header {
	position: absolute;
	inset: 0 0 auto 0;
	z-index: 100;
	box-sizing: border-box;
	padding: 36px 72px;
	color: var(--wp--preset--color--balta);
	background: transparent;
	transition: background 0.3s ease, color 0.3s ease, padding 0.3s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Sticky quick-contact rail (right edge, desktop, site-wide) ----
   Ported from Dome; recoloured to the Ampera brand. The rail is fixed and
   vertically centred, so it crosses every section colour as you scroll (photos,
   white, Balta, the Violetinė bands, the dark building hero). Auksinė — Ampera's
   gold token, the brand's answer to Dome's sand — is the one surface that stays
   legible on all of them (a Violetinė fill vanished over the Violetinė bands),
   with White marks that invert to Juoda on hover as the site's CTAs do. Phone +
   email come from Site options, so they stay in sync with the footer. Desktop
   only: the client asked for these on desktop, and they would crowd the mobile
   viewport (which already has the burger + CTA). */
.ampera-quick-contact {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 25; /* over content; under the pin cards (30/95), header (100), menu (300) */
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* right-anchored: each pill grows left on its own, never stretches its neighbour */
	gap: 16px;
}

.ampera-quick-contact__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	min-height: 64px;
	background: var(--wp--preset--color--auksine);
	color: var(--wp--preset--color--white);
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}

/* The icon keeps the original 64×64 square flush to the right edge, so the rail
   looks identical to before at rest. */
.ampera-quick-contact__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
}

.ampera-quick-contact__icon svg {
	width: 26px;
	height: 26px;
}

/* The phone / email text. Collapsed to zero width at rest (grid column 0fr) and
   grown to its content width on hover/focus. Because the rail is anchored to the
   right edge, the pill extends leftward — the details slide into view from behind
   the icon. The 0fr→1fr grid trick animates to the exact text width with no magic
   numbers. */
.ampera-quick-contact__label {
	display: grid;
	grid-template-columns: 0fr;
	transition: grid-template-columns 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

/* The clip is the grid item: overflow-hidden + min-width:0 lets it collapse to a
   true 0px at rest. Padding lives on the text *inside* the clip, so it is clipped
   away too — no stray sliver next to the icon. */
.ampera-quick-contact__label-clip {
	overflow: hidden;
	min-width: 0;
}

.ampera-quick-contact__label-text {
	display: block;
	white-space: nowrap;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.01em;
	line-height: 1;
	padding: 0 6px 0 24px;
}

.ampera-quick-contact__btn:hover .ampera-quick-contact__label,
.ampera-quick-contact__btn:focus-visible .ampera-quick-contact__label {
	grid-template-columns: 1fr;
}

.ampera-quick-contact__btn:hover {
	background: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--white);
}

.ampera-quick-contact__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: -6px;
}

/* Respect reduced-motion: reveal still works on hover/focus, just without the slide. */
@media (prefers-reduced-motion: reduce) {
	.ampera-quick-contact__label {
		transition: none;
	}
}

@media (max-width: 900px) {
	.ampera-quick-contact {
		display: none;
	}
}

/* Solid state: pinned bar, paper ground, ink foreground. */
.ampera-header.is-solid {
	position: fixed;
	padding: 24px 72px;
	background: var(--wp--custom--paper);
	color: var(--wp--preset--color--juoda);
	box-shadow: inset 0 -1px 0 rgba(23, 30, 40, 0.1);
}

/* Solid glide-in / glide-out (header.js toggles the classes). */
.ampera-header.is-solid.is-revealing {
	animation: ampera-header-in 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ampera-header.is-solid.is-hiding {
	transform: translateY(-100%);
}
@keyframes ampera-header-in {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.ampera-header,
	.ampera-header.is-solid.is-revealing {
		animation: none;
		transition: none;
	}
}

.ampera-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: 1296px;
	margin-inline: auto;
}

/* --- Primary nav (desktop) --- */
.ampera-header__nav {
	justify-self: start;
}
.ampera-header__menu {
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ampera-header__menu a {
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}
.ampera-header__menu a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}
.ampera-header__menu .current-menu-item > a {
	font-weight: 800;
}

/* --- Wordmark --- */
.ampera-header__logo {
	display: block;
	justify-self: center;
	width: 159px;
	height: 28px;
	color: currentColor;
}
.ampera-header__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- Right cluster --- */
.ampera-header__right {
	display: flex;
	align-items: center;
	gap: 16px;
	justify-self: end;
}
.ampera-header__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 36px;
	padding: 12px 24px;
	border: 1px solid currentColor;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.18s ease, color 0.18s ease;
}
.ampera-header__cta:hover {
	background: var(--wp--preset--color--violetine);
	border-color: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
.ampera-header__cta:focus-visible,
.ampera-header__menu a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* --- Language switcher (bar) --- */
.ampera-lang {
	position: relative;
	display: inline-flex;
	align-items: center;
}
.ampera-lang__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}
.ampera-lang__label {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	line-height: 20px;
}
.ampera-lang__chevron {
	display: inline-block;
	width: 16px;
	height: 16px;
	transform: rotate(-90deg); /* arrow_back_ios_new pointing down. */
}
.ampera-lang__chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-lang__list {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	display: none;
	margin: 0;
	padding: 8px 12px;
	list-style: none;
	background: var(--wp--custom--paper);
	color: var(--wp--preset--color--juoda);
	box-shadow: 0 2px 12px rgba(23, 30, 40, 0.12);
}
.ampera-lang[data-open] .ampera-lang__list,
.ampera-lang:focus-within .ampera-lang__list {
	display: block;
}
.ampera-lang__list a {
	color: inherit;
	font-size: 14px;
	line-height: 24px;
	text-decoration: none;
}
.ampera-lang__list a:hover {
	text-decoration: underline;
}

/* --- Burger (mobile only) --- */
.ampera-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 4px;
	border: 0;
	background: none;
	/* Client 2026-08-01: the bars must match the logo/CTA ink. A <button>
	   never inherits color (UA buttontext = black), so the currentColor
	   bars stayed black even on white-ink headers. */
	color: inherit;
	cursor: pointer;
}
.ampera-header__burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

/* ============================================================
   Mobile menu overlay — full-screen Violetinė (Figma 1103:9527).
   ============================================================ */
.ampera-menu {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: none;
	flex-direction: column;
	box-sizing: border-box;
	padding: 24px;
	background: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
.ampera-menu.is-open {
	display: flex;
}
.ampera-no-scroll,
.ampera-no-scroll body {
	overflow: hidden;
}

.ampera-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.ampera-menu__logo {
	display: block;
	width: 102px;
	height: 18px;
	color: currentColor;
}
.ampera-menu__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-menu__top-right {
	display: flex;
	align-items: center;
	gap: 12px;
}
.ampera-menu__cta-top {
	height: 32px;
	padding: 6px 8px;
	background: transparent;
}
.ampera-menu__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: currentColor;
	cursor: pointer;
}
.ampera-menu__close svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-menu__rule {
	display: block;
	height: 1px;
	margin-top: 16px;
	background: currentColor;
	opacity: 0.2;
}

.ampera-menu__center {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 48px;
}
.ampera-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}
.ampera-menu__nav a {
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 24px;
	line-height: 32px;
	text-decoration: none;
}
.ampera-menu__nav a:focus-visible,
.ampera-menu__close:focus-visible,
.ampera-header__burger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Lt | En circles. */
.ampera-lang-circles {
	display: flex;
	align-items: center;
	gap: 6px;
}
.ampera-lang-circles__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 14px;
	line-height: 20px;
	text-decoration: none;
}
.ampera-lang-circles__item.is-current {
	border-color: currentColor;
	font-weight: 800;
}

/* ============================================================
   Breakpoints. Desktop bar over hero is 109px (36px padding);
   mobile compact bar is 80px (24px padding, smaller logo).
   ============================================================ */
@media (max-width: 900px) {
	.ampera-header {
		padding: 24px;
	}
	.ampera-header.is-solid {
		padding: 20px 24px;
	}
	.ampera-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.ampera-header__nav,
	.ampera-header__lang {
		display: none;
	}
	.ampera-header__logo {
		justify-self: auto;
		width: 102px;
		height: 18px;
	}
	.ampera-header__right {
		gap: 12px;
	}
	.ampera-header__cta {
		height: 32px;
		padding: 6px 8px;
	}
	.ampera-header__burger {
		display: inline-flex;
	}
}