/*
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.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: dome
*/

.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;
}

/* 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;
}

@media (prefers-reduced-motion: reduce) {
	.dome-motion .dome-reveal {
		opacity: 1;
		transform: none;
		transition: 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 or prefers-reduced-motion 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 {
	background-color: var(--wp--preset--color--white);
	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;
	}
}