/*
Theme Name: Ampera
Theme URI: https://ampera.lt
Author: Rekos Agency
Description: Custom block theme for the AMPÈRA real-estate development site (Vilnius). Built from Figma with file-based ACF blocks and a locked brand token system. Lithuanian + English.
Version: 1.7.19
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: ampera
*/

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

.ampera-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-ampera-carousel][data-ampera-snapping],
[data-ampera-carousel][data-ampera-snapping] * {
	transition: none !important;
}

/* Visually hidden but available to assistive tech (e.g. carousel live status). */
.ampera-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 .ampera-reveal hidden state is never applied to
   above-the-fold content, so the LCP is unaffected).
   ============================================================ */
.ampera-motion .ampera-reveal {
	opacity: 0;
	transform: translateY(28px);
	/* Premium pace: long duration + strong deceleration (settles, never snaps). */
	transition: opacity 1.05s cubic-bezier(0.16, 1, 0.3, 1), transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@media (prefers-reduced-motion: reduce) {
	.ampera-motion .ampera-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;
}

/* ============================================================
   Shared section shell — full-bleed background + constrained inner.
   Every Ampera section block uses this (see docs/adr/0001).
   Backgrounds: balta (paper #F5F5F5), violetine (#9FB6EC), juoda (#171E28),
   white (pure #FFFFFF, rare).
   ============================================================ */
.ampera-section {
	box-sizing: border-box;
}
.ampera-section--bg-balta {
	background-color: var(--wp--custom--paper);
	color: var(--wp--preset--color--juoda);
}
.ampera-section--bg-violetine {
	background-color: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
.ampera-section--bg-juoda {
	background-color: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--balta);
}
.ampera-section--bg-white {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--juoda);
}
.ampera-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. */
.ampera-fixed-header #ampera-main {
	padding-top: 84px;
}

/* ============================================================
   Shared button family — square-cornered (radius 0) per the UI kit; only the
   header "Pasikalbėkime" pill and count badges are rounded. Hover swaps to
   Violetinė. All variants share .ampera-btn.
   ============================================================ */
.ampera-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	padding: 10px 24px;
	background: var(--ampera-btn-bg, transparent);
	color: var(--ampera-btn-fg, currentColor);
	border: 1px solid currentColor;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 16px;
	line-height: 24px;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.ampera-btn:hover {
	background: var(--wp--preset--color--violetine);
	border-color: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
.ampera-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
/* Solid variant (e.g. Siųsti on violet ground). */
.ampera-btn--solid {
	background: var(--wp--preset--color--juoda);
	border-color: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--white);
}
.ampera-btn--solid:hover {
	background: var(--wp--preset--color--violetine);
	border-color: var(--wp--preset--color--violetine);
	color: var(--wp--preset--color--juoda);
}
/* Pill variant (header CTA only). */
.ampera-btn--pill {
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 20px;
	font-size: 14px;
	line-height: 20px;
}

/* Circular arrow button (trending_flat) — 48/40/34px. */
.ampera-arrow-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 0;
	background: none;
	color: currentColor;
	border: 1px solid currentColor;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease;
}
.ampera-arrow-btn:hover {
	background: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--white);
}
.ampera-arrow-btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.ampera-arrow-btn svg {
	width: 20px;
	height: 20px;
}
.ampera-arrow-btn--sm {
	width: 34px;
	height: 34px;
}
.ampera-arrow-btn--sm svg {
	width: 16px;
	height: 16px;
}
.ampera-arrow-btn--prev svg {
	transform: rotate(180deg);
}

/* Dark circular count badge (apartment selector, pin chips, timeline). */
.ampera-count-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 24px;
	padding: 0 6px;
	box-sizing: border-box;
	background: var(--wp--preset--color--juoda);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 12px;
	line-height: 16px;
}

/* ============================================================
   "Dominantys apartamentai" facet disclosure (partials/facets-panel.php,
   injected into CF7 forms via [ampera_facets]; behavior in modal.js).
   Figma: collapsed row 1103:6990 (B14 label + dark count badge + chevron);
   open panel = UI-kit frame 1686562507 (checkbox groups over 1px rules).
   ============================================================ */
.ampera-facets {
	width: 100%;
}
.ampera-facets__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	box-sizing: border-box;
	width: 100%;
	min-height: 44px;
	padding: 12px 8px;
	background: none;
	border: 0;
	border-bottom: 1px solid rgba(23, 30, 40, 0.2);
	color: currentColor;
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 14px;
	line-height: 20px;
	text-align: left;
	cursor: pointer;
}
.ampera-facets__toggle:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.ampera-facets__chevron {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: auto;
	transform: rotate(-90deg); /* points down (collapsed) */
	transition: transform 0.18s ease;
}
.ampera-facets.is-open .ampera-facets__chevron {
	transform: rotate(90deg); /* points up (open) */
}
.ampera-facets__chevron svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ampera-facets__panel {
	margin: 0;
	padding: 8px 8px 16px;
	border: 0;
	background: var(--wp--custom--paper);
}
.ampera-facets__group {
	padding-block: 12px;
}
/* Segment-hidden groups must not leave a stray separator: `A + B` would match
   across a [hidden] sibling, so pair only VISIBLE neighbours. */
.ampera-facets__group[hidden] {
	display: none;
}
.ampera-facets__group:not([hidden]) ~ .ampera-facets__group:not([hidden]) {
	border-top: 1px solid rgba(23, 30, 40, 0.12);
}
.ampera-facets__group-label {
	display: block;
	margin-bottom: 10px;
	font-family: var(--wp--preset--font-family--telegraf);
	font-weight: 800;
	font-size: 14px;
	line-height: 20px;
}
.ampera-facets__options {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
}
.ampera-facets__option {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--telegraf);
	font-size: 14px;
	line-height: 20px;
}
.ampera-facets__checkbox {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}
.ampera-facets__box {
	display: inline-block;
	box-sizing: border-box;
	width: 20px;
	height: 20px;
	border: 1px solid var(--wp--preset--color--juoda);
	background: transparent;
	flex-shrink: 0;
}
.ampera-facets__checkbox:checked + .ampera-facets__box {
	background-color: var(--wp--preset--color--juoda);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.55 17.65 4.9 13l1.4-1.4 3.25 3.25 8.15-8.15 1.4 1.4Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
	background-size: 16px 16px;
	background-position: center;
	background-repeat: no-repeat;
}
.ampera-facets__checkbox:focus-visible + .ampera-facets__box {
	outline: 2px solid var(--wp--preset--color--juoda);
	outline-offset: 2px;
}

@media (max-width: 900px) {
	.ampera-section__inner {
		padding-inline: 24px;
	}
	.ampera-fixed-header #ampera-main {
		padding-top: 80px;
	}
}

/* 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-ampera-track] {
	touch-action: pan-y;
}

/* ============================================================
   Slow draw-on for the big AMPERA outline vectors (statement / prose /
   404 / news hero). animations.js adds .is-drawn on scroll-into-view;
   pathLength="1" on the SVG paths normalizes the dash math. Deliberately
   unhurried — the line draws itself in over ~3s.
   ============================================================ */
.ampera-draw .ampera-draw-slow[data-draw-ellipse] path {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
}
.ampera-draw .ampera-draw-slow[data-draw-ellipse].is-drawn path {
	stroke-dashoffset: 0;
	transition: stroke-dashoffset 3s cubic-bezier(0.5, 0, 0.15, 1);
}

/* ============================================================
   Touch targets (client goal 2026-08-22: "make it responsive").
   Measured on real phones widths: the carousel arrows in the news index render
   28x28, the gallery/news tabs 20-24px tall and the header logo 18px tall —
   all under the 44px a finger needs. This enlarges only the HIT AREA, never the
   look: a transparent ::before centred on the control. Widths already exceed
   44px on the tabs and the logo, so the box only grows VERTICALLY, and their
   neighbours are spaced horizontally (tabs 106px centre-to-centre, arrows 283)
   — so nothing can steal a neighbour's tap.
   `pointer: coarse` scopes it to touch input rather than to a width breakpoint:
   a small window on a desktop mouse does not need it, a large tablet does.
   NOT applied to .ampera-pin (the apartment markers): those sit only 58px apart
   on the floorplan, so a 44px halo would make picking the RIGHT flat harder,
   not easier. ============================================================ */
@media (pointer: coarse) {
	.ampera-arrow-btn,
	.ampera-gallery-carousel__tab,
	.ampera-news-index__tab,
	.ampera-header__logo {
		position: relative;
	}

	.ampera-arrow-btn::before,
	.ampera-gallery-carousel__tab::before,
	.ampera-news-index__tab::before,
	.ampera-header__logo::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: max(100%, 44px);
		height: max(100%, 44px);
		translate: -50% -50%;
	}
}


/* ---------------------------------------------------------------------------
   CF7 honeypots — never allowed to occupy a row.

   The cf7apps traps ship inline-styled 0x0 with a 1px transparent border, but
   still as a BLOCK in the flow, and the template puts a <br> after each one. In
   every CF7 form that opened a phantom ~22px row (on Kontaktai it fell between
   "El. paštas" and "Tel. numeris" and read as an inconsistent gap). Global on
   purpose: the same form is rendered by the Kontaktai block AND the contact
   dialog, which sit in different CSS scopes, so a block-scoped fix corrected one
   and left the other. Hiding it does not weaken the trap — the field stays in
   the DOM and is still submitted, which is the whole mechanism.
   --------------------------------------------------------------------------- */
.wpcf7-form [data-cf7apps-honeypot],
.wpcf7-form [data-cf7apps-honeypot] + br {
	display: none !important;
}

/* CF7 paints the per-field validation tip TWICE into the same control-wrap on
   pages where the same form is embedded two times (the Kontaktai band + the
   contact modal both carry the main form). Measured live 2026-08-26: one
   submit click, ONE /feedback POST - so mail is single, only the tip painting
   doubles. Hide every tip after the first instead of chasing CF7 internals. */
.wpcf7-form-control-wrap .wpcf7-not-valid-tip + .wpcf7-not-valid-tip {
	display: none;
}