/*
Theme Name: Dome
Theme URI: https://dome.lt
Author: Rekos Agency
Description: Custom block theme for the Dome real-estate site. Built from Figma with ACF blocks, GSAP motion, and a locked brand token system. Lithuanian.
Version: 0.4.76
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: dome
*/

/* One-page navigation: menu items scroll to their sections. The fixed header
   would cover an anchored section's top, so every anchor keeps clear of it. */
html {
	scroll-behavior: smooth;
}
#dome-main [id] {
	scroll-margin-top: 88px;
}
/* The project screens are full-bleed 100vh photos: landing them flush with the
   viewport keeps each frame fully on screen (the photo simply runs under the bar).
   Applies to the container anchor AND the per-project anchors (#projektas-<slug>).
   (#dome-main prefix so these outweigh the #dome-main [id] rule above.) */
#dome-main #projektai,
#dome-main .dome-pscreen {
	scroll-margin-top: 0;
}

.dome-skip-link {
	position: absolute;
	left: 8px;
	top: -48px;
	z-index: 200;
	padding: 10px 16px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--text);
	text-decoration: none;
	transition: top 0.15s ease;
}

.dome-skip-link:focus {
	top: 8px;
}

/* While an infinite carousel snaps from a clone back onto the real block, kill
   every transition inside it so the ±n jump is committed in a single frame. */
[data-dome-carousel][data-dome-snapping],
[data-dome-carousel][data-dome-snapping] * {
	transition: none !important;
}

/* Spam honeypot: taken out of view and the a11y tree, but NOT display:none (some
   bots skip display:none fields). Real visitors never see or tab to it; bots that
   fill every input trip it. See inc/anti-spam.php. */
.dome-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Visually hidden but available to assistive tech (e.g. carousel live status). */
.dome-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Motion — scroll reveals (added by assets/js/animations.js only when
   motion is allowed; the .dome-reveal hidden state is never applied to
   above-the-fold content, so the LCP is unaffected).
   ============================================================ */
.dome-motion .dome-reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.dome-motion .dome-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* Global keyboard focus indicator for in-content links. Block-level controls
   (header, footer, tabs, carousels, CTAs) define their own, more specific rules. */
a:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* ============================================================
   Shared component: news card (dome_news_card()). Used by the news index,
   the tema archives AND the single-article related list, so its base styles
   live here (global) rather than in any one block's stylesheet.
   ============================================================ */
.dome-news-card__link {
	display: flex;
	flex-direction: column;
	gap: 16px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.dome-news-card__media {
	display: block;
	aspect-ratio: 631 / 404;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.dome-news-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dome-news-card__link:hover .dome-news-card__img {
	transform: scale(1.03);
}

.dome-news-card__body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-inline: 24px;
}

.dome-news-card__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.dome-news-card__tag {
	padding: 6px 12px;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: 9999px;
	font-family: var(--wp--preset--font-family--text);
	font-size: 12px;
	line-height: 16px;
}

.dome-news-card__date {
	font-family: var(--wp--preset--font-family--text);
	font-size: 12px;
	line-height: 16px;
}

.dome-news-card__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
}

.dome-news-card__link:hover .dome-news-card__title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ============================================================
   Ellipse hand-drawn reveal — a stroked ellipse path starts invisible and the
   black stroke is drawn 0→100% along its FIXED path, then stays. The line's
   design is untouched; only stroke-dashoffset animates (no move/scale/rotate).
   Progressive + reduced-motion safe: the hidden start-state applies ONLY under
   html.dome-draw, which assets/js/animations.js adds when motion is allowed —
   so with no JS the ellipse is simply shown as-is.
   Targets carry [data-draw-ellipse="hover|scroll"]; .is-drawn triggers the draw.
   ============================================================ */
.dome-draw [data-draw-ellipse] path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}

.dome-draw [data-draw-ellipse].is-drawn path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 0.85s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ============================================================
   Shared section shell — full-bleed background + constrained inner.
   Every Dome section block uses this (see docs/adr/0001).
   ============================================================ */
.dome-section {
	box-sizing: border-box;
}
.dome-section--bg-sand {
	background-color: var(--wp--preset--color--sand);
	color: var(--wp--preset--color--ink);
}
.dome-section--bg-white {
	/* "White" sections render whisper-cream paper (#FBF7F0) and body text is a
	   dark espresso brown (#33271E) — client 2026-08: "lighten the black texts
	   toward dark brown, and give the background a barely-there creamy tint".
	   The white PRESET stays #FFFFFF because it colors white text on photos. */
	background-color: var(--wp--custom--paper);
	color: var(--wp--preset--color--ink);
}
.dome-section--bg-cream {
	background-color: var(--wp--custom--cream);
	color: var(--wp--preset--color--ink);
}
.dome-section--bg-ink {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.dome-section__inner {
	max-width: 1296px;
	margin-inline: auto;
	padding-inline: 72px;
}

/* Hero-less pages keep the header solid + fixed, so clear the content beneath it. */
.dome-fixed-header #dome-main {
	padding-top: 88px;
}

/* ============================================================
   Eyebrow — hairline rule + hand-drawn ellipse accent + uppercase label.
   Shared header for labelled sections.
   ============================================================ */
.dome-eyebrow {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}
.dome-eyebrow__rule {
	display: block;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	opacity: 0.1;
}
.dome-eyebrow__mark-row {
	display: flex;
	align-items: center;
	gap: 24px;
}
.dome-eyebrow__mark {
	display: block;
	flex-shrink: 0;
	width: 28px;
	height: 19px;
}
.dome-eyebrow__mark svg {
	display: block;
	width: 100%;
	height: 100%;
}
.dome-eyebrow__label {
	margin: 0;
	font-family: var(--wp--preset--font-family--text);
	font-weight: 700;
	/* Figma: 16 mobile → 18 desktop. */
	font-size: clamp(16px, 1.6vw, 18px);
	line-height: 1.5;
	text-transform: uppercase;
}

@media (max-width: 900px) {
	.dome-section__inner {
		padding-inline: 24px;
	}
	.dome-eyebrow__mark {
		width: 26px;
		height: 18px;
	}
	.dome-fixed-header #dome-main {
		padding-top: 76px;
	}
}

/* Mobile hardening: never let a stray wide element scroll the page sideways. */
.wp-site-blocks {
	overflow-x: clip;
}

/* Carousels own horizontal gestures; the page still scrolls vertically. */
[data-dome-track] {
	touch-action: pan-y;
}

/* Form result line — contact card + both newsletter forms. Written by
   assets/js/forms.js, which unhides it on submit. The palette is deliberately
   monochrome (sand/ink/white/grey), so the COPY carries success vs failure rather
   than an invented red/green: the confirmation sits back a little, the error is
   held at full weight. Inherits colour so the same element reads correctly on the
   white contact card, the sand newsletter section and the ink footer alike. */
.dome-form-status {
	margin: 12px 0 0;
	font-size: var(--wp--preset--font-size--caption);
	line-height: 1.4;
	color: inherit;
}
.dome-form-status.is-ok {
	opacity: 0.7;
}
.dome-form-status.is-error {
	opacity: 1;
	font-weight: 500;
}
/* The footer pill is a fixed-width column; keep the message inside it. */
.dome-footer__newsletter .dome-form-status {
	max-width: 320px;
}

/* Widow guard helper: blocks wrap their final two words in this so a line can never
   end up as one stranded word. Used where the safe text width is fixed by the floating
   contact rail and the copy therefore cannot just be given more room. */
.dome-nowrap {
	white-space: nowrap;
}