/* ---- Header bar (transparent over the hero) ---- */
.dome-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 72px;
	color: var(--wp--preset--color--white);
	--fill-0: var(--wp--preset--color--white);
	--stroke-0: var(--wp--preset--color--white);
}

/* Header/overlay links follow the bar colour, not theme.json's global link colour. */
.dome-header a,
.dome-menu a {
	color: inherit;
}

/* ---- Sticky quick-contact rail (right edge, site-wide) ----
   Collapsed, each button is a square icon tile flush to the right edge. On desktop
   hover / keyboard focus the button slides open to the LEFT, revealing the phone
   number or email — clicking still calls / opens mail, but a desktop visitor can now
   read the details instead of just triggering a pointless call. */
.dome-quick-contact {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 45; /* over content, under the header bar (50) and menu overlay (100) */
	display: flex;
	flex-direction: column;
	align-items: flex-end; /* each button hugs the right edge + sizes to its own content */
	gap: 20px;
}
.dome-quick-contact__btn {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 64px;
	background: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--white);
	overflow: hidden; /* clip the collapsed label */
	transition: background 0.2s ease, color 0.2s ease;
}
/* Fixed square icon zone on the right — the collapsed button is exactly this. */
.dome-quick-contact__icon {
	flex: 0 0 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 64px;
}
.dome-quick-contact__btn svg {
	width: 26px;
	height: 26px;
}
/* The phone number / email — hidden until the button slides open. */
.dome-quick-contact__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	opacity: 0;
	font-family: var(--wp--preset--font-family--text);
	font-size: 16px;
	line-height: 1;
	transition: max-width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
		opacity 0.3s ease,
		padding 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.dome-quick-contact__btn:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.dome-quick-contact__btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -4px;
}
/* Desktop: slide the label out on hover or keyboard focus. (On phones the same
   reveal happens on the FIRST tap — header.js — and the second tap navigates.) */
@media (min-width: 901px) {
	.dome-quick-contact__btn:hover .dome-quick-contact__label,
	.dome-quick-contact__btn:focus-visible .dome-quick-contact__label {
		max-width: 240px;
		opacity: 1;
		padding-left: 22px;
	}
}
@media (max-width: 900px) {
	.dome-quick-contact {
		gap: 12px;
		/* Vertically centred on phones too (client 2026-08-21), i.e. the base rule
		   applies unchanged — same position as desktop.
		   History so a future reader does not "fix" this back: it WAS bottom-anchored
		   between 2026-08-17 and 08-21, because the full-width mobile text bands run
		   under it mid-screen. The client prefers the centred position and accepts
		   that; the text keeps its full width. Do not re-anchor without asking. */
	}
	.dome-quick-contact__btn {
		height: 52px;
	}
	.dome-quick-contact__icon {
		flex-basis: 52px;
		height: 52px;
	}
	.dome-quick-contact__btn svg {
		width: 22px;
		height: 22px;
	}
	/* Tap-to-expand (header.js adds .is-open on the first tap; the second tap
	   navigates). Mirrors the desktop hover reveal, incl. the ink hover colour so
	   the open state reads as active. */
	.dome-quick-contact__btn.is-open {
		background: var(--wp--preset--color--ink);
	}
	.dome-quick-contact__btn.is-open .dome-quick-contact__label {
		max-width: 240px;
		opacity: 1;
		padding-left: 18px;
	}
}

/* Subtle top scrim so white logo/nav stays legible over a bright photo. */
.dome-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(16, 16, 17, 0.35) 0%, rgba(16, 16, 17, 0) 100%);
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.dome-header__logo {
	display: block;
	flex-shrink: 0;
	width: 124px;
	height: 40px;
}

.dome-header__logo svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dome-header__nav {
	flex: 0 1 auto;
}

.dome-header__menu {
	display: flex;
	gap: 40px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dome-header__menu a {
	color: currentColor;
	font-family: var(--wp--preset--font-family--text);
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	transition: opacity 0.18s ease;
}

.dome-header__menu a:hover {
	opacity: 0.7;
}

.dome-header__right {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-shrink: 0;
}

/* CTA: fixed 86x59 oval anchored left of the word (Figma group 254:811). */
.dome-header__cta {
	position: relative;
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.dome-header__cta-ring {
	position: absolute;
	left: -22px;
	top: 50%;
	transform: translateY(-50%);
	width: 86px;
	height: 59px;
	pointer-events: none;
}

.dome-header__cta-ring svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dome-header__cta-label {
	position: relative;
	z-index: 1;
	color: currentColor;
	font-family: var(--wp--preset--font-family--text);
	/* Same font as the menu items (client: one font across the whole bar, every
	   item Capitalized — the label is "Susisiekite", the ellipse marks it as the CTA). */
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}

/* Slight text feedback so the CTA reads as pressable (the ring draws on hover). */
.dome-header__cta:hover .dome-header__cta-label {
	opacity: 0.65;
}

/* Hamburger: mobile only. */
.dome-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 30px;
	height: 30px;
	padding: 4px;
	margin: 0;
	background: none;
	border: 0;
	/* <button> doesn't inherit colour from the UA sheet; force it to follow the bar. */
	color: inherit;
	cursor: pointer;
}

.dome-header__burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: currentColor;
}

/* ---- Transparent over a LIGHT (sand) hero: ink text, no scrim ---- */
.dome-light-hero .dome-header:not(.is-solid) {
	color: var(--wp--preset--color--ink);
	--fill-0: var(--wp--preset--color--ink);
	--stroke-0: var(--wp--preset--color--ink);
}

.dome-light-hero .dome-header:not(.is-solid)::before {
	opacity: 0;
}

/* ---- Solid state (after scrolling past the hero / non-hero pages) ---- */
.dome-header.is-solid {
	position: fixed;
	--fill-0: var(--wp--preset--color--ink);
	--stroke-0: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
	background: var(--wp--custom--paper);
	box-shadow: 0 1px 0 rgba(16, 16, 17, 0.08);
	/* Return leg of the deck retract below: bar glides back, visibility flips
	   immediately so it can animate in. */
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, visibility 0s linear;
}

/* While a full-screen project owns the viewport (animations.js toggles
   dome-deck-cover on <html>) the bar retracts so the photo runs edge to edge
   (client 2026-08). visibility flips only after the glide, and keeps the hidden
   links out of the tab order. */
html.dome-deck-cover .dome-header.is-solid {
	transform: translateY(-101%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, visibility 0s linear 0.45s;
}

/* When scrolling past the hero adds the solid bar, glide it down + fade in for a
   slow, luxurious reveal (JS adds .is-revealing only on the scroll transition,
   not on hero-less pages where the bar is solid from the start). */
.dome-header.is-solid.is-revealing {
	animation: dome-header-reveal 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dome-header-reveal {
	from {
		transform: translateY(-100%);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Scrolling back over the hero glides the bar away — the mirror of the reveal.
   JS removes .is-solid only after this finishes. */
.dome-header.is-solid.is-hiding {
	animation: dome-header-hide 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes dome-header-hide {
	from {
		transform: translateY(0);
		opacity: 1;
	}
	to {
		transform: translateY(-100%);
		opacity: 0;
	}
}

.dome-header.is-solid::before {
	opacity: 0;
}

/* ---- Mobile bar ---- */
@media (max-width: 900px) {
	.dome-header {
		padding: 24px;
	}
	.dome-header__logo {
		width: 87px;
		height: 28px;
	}
	.dome-header__nav {
		display: none;
	}
	.dome-header__burger {
		display: flex;
	}
	.dome-header__right {
		gap: 24px;
	}
	/* Mobile CTA is the smaller variant (Figma 134:3524: 58x40 oval, 12px text). */
	.dome-header__cta-ring {
		width: 58px;
		height: 40px;
		left: -12px;
	}
	.dome-header__cta-label {
		font-size: 12px;
		line-height: 16px;
	}
}

/* ---- Full-screen Meniu overlay ---- */
.dome-menu {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	background: var(--wp--custom--cream);
	color: var(--wp--preset--color--ink);
	--fill-0: var(--wp--preset--color--ink);
	--stroke-0: var(--wp--preset--color--ink);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.dome-menu.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.3s ease;
}

.dome-menu__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px;
}

.dome-menu__top .dome-header__logo {
	width: 87px;
	height: 28px;
}

.dome-menu__close {
	width: 30px;
	height: 30px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
}

.dome-menu__close svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dome-menu__center {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 56px;
}

.dome-menu__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dome-menu__nav a {
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-size: 32px;
	line-height: 36px;
	font-weight: 400;
	text-decoration: none;
}

/* SUSISIEKITE in the overlay is the prominent contact CTA: a touch bigger than the
   nav items, its hand-drawn ellipse scaled up (drawn on menu open, see header.js). */
.dome-menu__cta {
	margin-top: 4px;
}
.dome-menu__cta .dome-header__cta-label {
	/* Smaller per client (was 30–40). */
	font-size: clamp(24px, 7vw, 30px);
	line-height: 1.1;
}
/* Centre the ellipse over the middle of the word (like the nav-bar CTA). */
.dome-menu__cta .dome-header__cta-ring {
	width: clamp(176px, 54vw, 210px);
	height: clamp(104px, 32vw, 124px);
	left: 50%;
	transform: translate(-50%, -50%);
}

.dome-menu__socials {
	display: flex;
	justify-content: center;
	gap: 24px;
	padding-bottom: 40px;
}

.dome-menu__social {
	display: block;
	width: 28px;
	height: 28px;
	color: var(--wp--preset--color--ink);
}

.dome-menu__social svg {
	display: block;
	width: 100%;
	height: 100%;
}

.dome-no-scroll {
	overflow: hidden;
}

/* ---- Accessibility ---- */
.dome-header a:focus-visible,
.dome-header button:focus-visible,
.dome-menu a:focus-visible,
.dome-menu button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	border-radius: 2px;
}