/* Dome · Contact (Figma 321:2139) — a large two-line heading overlapping a sand
   form card on the right, with stacked details + socials on the left. The section
   background is split: cream on the left half, white on the right half. */
.dome-contact {
	position: relative;
	/* One-screen fit (client 2026-07, pokyciai #8): the whole section, SIŲSTI
	   included, must sit inside a laptop viewport. */
	padding-block: clamp(24px, 2.5vw, 40px) 0;
}

/* The section base stays cream (bg-cream); this covers the RIGHT half in white
   (Figma: the frame is white, a cream Rectangle 5 fills the left half). */
.dome-contact__bg-right {
	position: absolute;
	z-index: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 50%;
	background: var(--wp--custom--paper);
	pointer-events: none;
}

.dome-contact__inner {
	position: relative;
	z-index: 1;
}

/* ---- Two-column grid ---- */
/* The contact content is inset from the page gutters (Figma), so the grid is
   narrower than the section inner and centred. It's the positioning context for
   the heading, so the heading's left offset is independent of viewport width. */
.dome-contact__grid {
	position: relative;
	max-width: 1080px;
	margin-inline: auto;
	display: grid;
	/* Figma: 280px details, ~160px gap, 640px form card. */
	grid-template-columns: 280px minmax(0, 1fr);
	gap: clamp(40px, 11vw, 160px);
	align-items: start;
}

/* ---- Heading ---- */
/* Floats over the top of the grid; the second line is indented so "pasikalbėti"
   reaches over the sand card. pointer-events:none so it never blocks the form. */
.dome-contact__heading {
	position: absolute;
	z-index: 3;
	top: clamp(4px, 1.2vw, 28px);
	left: clamp(40px, 8.5vw, 128px);
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	/* Was up to 112px; shrunk so the section fits one screen (pokyciai #8),
	   then a notch more so it clears the form title below (client 2026-08). */
	font-size: clamp(40px, 5vw, 70px);
	line-height: 1.02;
	pointer-events: none;
}
.dome-contact__heading-l1,
.dome-contact__heading-l2 {
	display: block;
	white-space: nowrap;
}
.dome-contact__heading-l2 {
	margin-left: 1.5em;
}

/* Left column: pushed down to clear the heading, then stacked details. */
.dome-contact__info {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
	padding-top: clamp(120px, 13vw, 170px);
}

.dome-contact__item {
	display: flex;
	flex-direction: column;
}

.dome-contact__value {
	margin: 0;
	/* Figma: Surt (text) — phone 20px, email/address 16px (not the display face). */
	font-family: var(--wp--preset--font-family--text);
	font-size: 20px;
	line-height: 1.4;
}
.dome-contact__value--address {
	font-size: 16px;
	line-height: 1.5;
}
.dome-contact__value a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.18s ease;
}
.dome-contact__value a:hover {
	opacity: 0.6;
}

/* Short vertical rule between the email and address blocks (Figma). */
.dome-contact__divider {
	width: 1px;
	height: clamp(72px, 9vw, 110px);
	margin: 4px 0;
	background: currentColor;
	opacity: 0.18;
}

.dome-contact__socials {
	display: flex;
	gap: 16px;
	margin-top: 12px;
}
.dome-contact__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(16, 16, 17, 0.25);
	border-radius: 50%;
	color: var(--wp--preset--color--ink);
	--fill-0: var(--wp--preset--color--ink);
	--stroke-0: var(--wp--preset--color--ink);
	transition: background 0.18s ease, color 0.18s ease;
}
.dome-contact__social svg {
	width: 18px;
	height: 18px;
}
.dome-contact__social:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	--fill-0: var(--wp--preset--color--white);
	--stroke-0: var(--wp--preset--color--white);
}

/* ---- Sand form card (right column) ---- */
.dome-contact__form-col {
	position: relative;
	z-index: 1;
	min-width: 0;
}
.dome-contact-form__card {
	display: flex;
	flex-direction: column;
	gap: clamp(16px, 1.8vw, 20px);
	box-sizing: border-box;
	width: 100%;
	/* Top pad must clear the heading floating over the card WITH a real gap
	   (client 2026-08: the title was touching it); the extra room is paid back
	   by tighter gaps inside the card, so the section height stays put. */
	padding: clamp(120px, 13.5vw, 200px) clamp(28px, 3.4vw, 64px) clamp(20px, 2vw, 28px);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--sand);
}

/* Short lead-in line above the fields (restored per request). */
.dome-contact-form__title {
	margin: 0;
	max-width: 26ch;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: clamp(20px, 2.3vw, 26px);
	line-height: 1.25;
}

.dome-contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
/* Vardas | El. paštas share one row. */
.dome-contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.dome-contact-form__field {
	display: flex;
	align-items: center;
	padding: 10px 4px 8px;
	border-bottom: 1px solid rgba(16, 16, 17, 0.25);
}
.dome-contact-form__field[hidden] {
	display: none;
}
.dome-contact-form__field input,
.dome-contact-form__field textarea,
.dome-contact-form__field select {
	width: 100%;
	border: 0;
	background: none;
	outline: none;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: 15px;
	line-height: 22px;
	resize: none;
	-webkit-appearance: none;
	appearance: none;
}
.dome-contact-form__field input::placeholder,
.dome-contact-form__field textarea::placeholder {
	color: var(--wp--preset--color--ink);
	opacity: 0.55;
}
.dome-contact-form__field--message {
	align-items: flex-start;
}
.dome-contact-form__field--message textarea {
	min-height: 36px;
}

/* Select (Tema) — chevron overlay, inked for the sand card. */
.dome-contact-form__field--select {
	position: relative;
	padding: 0;
}
.dome-contact-form__field--select select {
	padding: 12px 34px 10px 4px;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
}
.dome-contact-form__chevron {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	width: 20px;
	height: 20px;
	pointer-events: none;
	color: var(--wp--preset--color--ink);
	transition: transform 0.2s ease;
}
.dome-contact-form__field--select:not([data-enhanced]):focus-within .dome-contact-form__chevron,
.dome-contact-form__field--select.is-open .dome-contact-form__chevron {
	transform: translateY(-50%) rotate(180deg);
}
.dome-contact-form__chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Enhanced custom dropdown (JS). */
.dome-contact-form__field--select[data-enhanced] select {
	display: none;
}
.dome-contact-form__select-btn {
	display: block;
	width: 100%;
	padding: 12px 34px 10px 4px;
	margin: 0;
	border: 0;
	background: none;
	text-align: left;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}
.dome-contact-form__select-label.is-placeholder {
	opacity: 0.55;
}
.dome-contact-form__select-list {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: 240px;
	margin: 0;
	padding: 4px 0;
	overflow: auto;
	list-style: none;
	background: var(--wp--custom--paper);
	box-shadow: 0 10px 30px rgba(16, 16, 17, 0.18);
}
.dome-contact-form__select-list[hidden] {
	display: none;
}
.dome-contact-form__select-option {
	padding: 10px 16px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.dome-contact-form__select-option:hover,
.dome-contact-form__select-option.is-selected {
	background: rgba(219, 200, 182, 0.5);
}
.dome-contact-form__select-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* Consent */
.dome-contact-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--text);
	font-size: 13px;
	line-height: 18px;
	cursor: pointer;
}
.dome-contact-form__consent input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 0;
	accent-color: var(--wp--preset--color--ink);
}
.dome-contact-form__consent a {
	color: inherit;
	text-decoration: underline;
}

/* SIŲSTI — ellipse-ring + label CTA. */
.dome-contact-form__submit {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	margin-left: 22px;
	padding: 0;
	color: var(--wp--preset--color--ink);
	background: none;
	border: 0;
	cursor: pointer;
	--stroke-0: var(--wp--preset--color--ink);
}
.dome-contact-form__submit-ring {
	position: absolute;
	left: -22px;
	top: 50%;
	transform: translateY(-50%);
	width: 86px;
	height: 59px;
	pointer-events: none;
}
.dome-contact-form__submit-ring svg {
	display: block;
	width: 100%;
	height: 100%;
}
.dome-contact-form__submit-label {
	position: relative;
	z-index: 1;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
	transition: opacity 0.2s ease;
}
.dome-contact-form__submit:hover .dome-contact-form__submit-label {
	opacity: 0.65;
}
.dome-contact-form__submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 4px;
}

/* ---- Mobile: stack heading, details, then the form card ---- */
@media (max-width: 900px) {
	.dome-contact {
		padding-block: 40px 0;
	}
	/* Single column on mobile: drop the white right-half so the cream background
	   sits behind the whole text (no text spilling off the cream). */
	.dome-contact__bg-right {
		display: none;
	}
	.dome-contact__heading {
		position: static;
		max-width: none;
		padding-left: 0;
		text-indent: 0;
		margin-bottom: 32px;
		font-size: clamp(40px, 13vw, 64px);
	}
	.dome-contact__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.dome-contact__info {
		padding-top: 0;
	}
	.dome-contact__divider {
		width: clamp(120px, 40vw, 200px);
		height: 1px;
	}
	.dome-contact-form__card {
		padding: 40px 24px 48px;
	}
	.dome-contact-form__row {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* Phone = dial-code select + number in one underlined field (client 2026-08-17).
   DUPLICATED in blocks/contact-form/style.css on purpose: block styles load only
   for blocks present on the page, and each contact block ships its own copy of the
   shared dome-contact-form__* styles. The markup itself is shared (dome_phone_field()
   in inc/template-tags.php), so only these styles need the twin copy. */
.dome-contact-form__field--phone {
	display: flex;
	align-items: center;
	gap: 14px;
}
.dome-contact-form__dial {
	position: relative;
	flex: 0 0 auto;
}
.dome-contact-form__dial select {
	/* Explicit width, not auto: with appearance:none inside this flex row the UA's
	   intrinsic sizing came out ~53px and "LT +370" overlapped the number field.
	   The arrow is a self-contained background-image (data URI) rather than the
	   absolutely-positioned .dome-contact-form__chevron span — that span escaped
	   its ancestor on one build and floated to the corner of the card (client
	   2026-08-17: "something is not right with the dropdown icon"). A background
	   cannot detach from its own element. */
	width: 96px;
	padding: 12px 24px 8px 8px;
	cursor: pointer;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23443C35' stroke-width='1.3' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 13px;
}
.dome-contact-form__field--phone input {
	flex: 1 1 auto;
	min-width: 0;
}