/**
 * Medžio kultūra — front-end stiliai.
 *
 * Spalvos, šriftai ir tarpai ateina iš theme.json kaip --wp--preset--*
 * kintamieji, todėl klientui pakeitus paletę redaktoriuje pasikeičia ir čia.
 * Šis failas aprašo tik tai, ko blokų nustatymais išreikšti negalima.
 */

/* ---------------------------------------------------------------
 * Bendra
 * --------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

/* Ikonos kaip kaukės — spalvą paima iš currentColor (žr. .mk-footer__contacts). */
:root {
	--mk-icon-phone: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.9.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E" );
	--mk-icon-mail: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 6L2 7'/%3E%3C/svg%3E" );
	--mk-icon-alert: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 16.5v.5'/%3E%3C/svg%3E" );
}

@media ( prefers-reduced-motion: reduce ) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;

	/* Apsauga nuo atsitiktinio horizontalaus slinkimo. */
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
}

:where( a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible ) {
	outline: 3px solid var( --wp--preset--color--akcentas );
	outline-offset: 3px;
	border-radius: 4px;
}

/* Tuščias inkaro taškas — kad #nuoroda nusileistų po sticky header'iu. */
.mk-anchor {
	position: relative;
	top: -5rem;
	height: 0;
	scroll-margin-top: 5rem;
}

.mk-eyebrow,
.mk-kicker {
	font-family: var( --wp--preset--font-family--antrastes );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var( --wp--preset--spacing--20 );
}

.mk-note {
	font-style: italic;
}

/* ---------------------------------------------------------------
 * Header
 * --------------------------------------------------------------- */

/**
 * Vidiniuose puslapiuose juosta įprasta — kreminė, prilipusi viršuje.
 * Pradiniame puslapyje ji perkeliama ant hero nuotraukos (žr. žemiau).
 */
.mk-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid var( --wp--preset--color--linija );
	backdrop-filter: saturate( 1.4 ) blur( 8px );
	background-color: rgba( 245, 240, 235, 0.9 ) !important;
}

/* --- Pradinis puslapis: juosta guli ant nuotraukos --- */

.home .mk-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	background-color: transparent !important;
	border-bottom-color: transparent;
	backdrop-filter: none;
}

.home .mk-header .wp-block-site-logo img {
	/* Tamsų logotipą paverčiame kreminiu, kad būtų matomas ant nuotraukos. */
	filter: brightness( 0 ) invert( 1 );
	opacity: 0.95;
}

.home .mk-header__phone a {
	color: var( --wp--preset--color--kremine );
}

.home .mk-header__phone a:hover {
	color: #fff;
}

/**
 * Juostos mygtukas lieka toks pat ir ant nuotraukos, ir prilipusioje juostoje.
 * Permatomas jis ant šviesių nuotraukos vietų tapdavo sunkiai įskaitomas, o
 * vienoda išvaizda dar ir ramesnė: slenkant keičiasi tik juostos fonas.
 */
.home .mk-header .wp-block-button__link {
	background-color: var( --wp--preset--color--akcentas );
	border-color: var( --wp--preset--color--akcentas );
	color: #fff;
	box-shadow: 0 2px 10px rgba( 42, 30, 21, 0.35 );
}

.home .mk-header .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--akcentas-tamsus );
	border-color: var( --wp--preset--color--akcentas-tamsus );
	color: #fff;
}

.home .mk-header.is-pinned .wp-block-button__link {
	box-shadow: none;
}

/**
 * Slenkant žemyn juosta grįžta kaip fiksuota kreminė ir įslenka iš viršaus.
 * Klasę uždeda ui.js, kai peržengiama hero riba.
 */
.home .mk-header.is-pinned {
	position: fixed;
	background-color: rgba( 245, 240, 235, 0.94 ) !important;
	border-bottom-color: var( --wp--preset--color--linija );
	backdrop-filter: saturate( 1.4 ) blur( 10px );
	animation: mk-header-drop 0.28s ease-out;
}

.home .mk-header.is-pinned .wp-block-site-logo img {
	filter: none;
	opacity: 1;
}

.home .mk-header.is-pinned .mk-header__phone a {
	color: var( --wp--preset--color--ruda );
}

.home .mk-header.is-pinned .mk-header__phone a:hover {
	color: var( --wp--preset--color--akcentas );
}

.home .mk-header.is-pinned .wp-block-button__link {
	background-color: var( --wp--preset--color--akcentas );
	border-color: var( --wp--preset--color--akcentas );
	color: #fff;
}

.home .mk-header.is-pinned .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--akcentas-tamsus );
	border-color: var( --wp--preset--color--akcentas-tamsus );
}

@keyframes mk-header-drop {
	from { transform: translateY( -100% ); }
	to   { transform: translateY( 0 ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.home .mk-header.is-pinned { animation: none; }
}

.mk-header .wp-block-site-logo img {
	display: block;
	height: auto;
}

.mk-header__phone a {
	font-family: var( --wp--preset--font-family--antrastes );
	font-weight: 600;
	color: var( --wp--preset--color--ruda );
	text-decoration: none;
	white-space: nowrap;
}

.mk-header__phone a:hover {
	color: var( --wp--preset--color--akcentas );
}

/* Juostos mygtuko užrašas turi likti vienoje eilutėje — kitaip siauruose
   ekranuose jis lūžta ir juosta paaukštėja. */
.mk-header .wp-block-button__link {
	white-space: nowrap;
}

@media ( max-width: 600px ) {
	.mk-header__phone { display: none; } /* telefonui pakanka sticky juostos apačioje */
	.mk-header .wp-block-site-logo img { max-width: 160px; }
}

/* Ties 360 px logotipas ir mygtukas nebetilpdavo vienoje eilutėje, todėl
   siauriausiems telefonams juos abu šiek tiek sumažiname. Taip juosta lieka
   vienos eilutės aukščio ir CTA niekur nedingsta. */
@media ( max-width: 420px ) {
	.mk-header .wp-block-site-logo img { max-width: 140px; }

	.mk-header .wp-block-button.mk-btn--sm {
		--mk-btn-py: 0.6rem;
		--mk-btn-px: 0.95rem;
		--mk-btn-fs: 0.875rem;
	}
}

/* Seniausi 320 px telefonai. */
@media ( max-width: 360px ) {
	.mk-header .wp-block-site-logo img { max-width: 120px; }

	.mk-header .wp-block-button.mk-btn--sm {
		--mk-btn-py: 0.55rem;
		--mk-btn-px: 0.8rem;
		--mk-btn-fs: 0.8125rem;
	}
}

/* ---------------------------------------------------------------
 * Mygtukai
 * --------------------------------------------------------------- */

.wp-block-button__link {
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.wp-block-button__link:hover {
	transform: translateY( -1px );
}

/**
 * Mygtukų dydis nustatomas kintamaisiais.
 *
 * Priežastis: WordPress `is-style-outline` stilius turi savo `padding` su
 * didesniu specifiškumu nei theme.json, todėl kontūrinis mygtukas šalia
 * užpildyto buvo žemesnis (44,5 px prieš 53,6 px). Kintamasis leidžia vieną
 * kartą aprašyti tarpus abiem variantams ir nesudaužyti dydžio modifikatorių.
 */
.wp-block-button {
	--mk-btn-py: 0.95rem;
	--mk-btn-px: 1.75rem;
	--mk-btn-fs: 1rem;
}

.wp-block-button.mk-btn--lg {
	--mk-btn-py: 1.05rem;
	--mk-btn-px: 2.25rem;
	--mk-btn-fs: 1.0625rem;
}

.wp-block-button.mk-btn--sm {
	--mk-btn-py: 0.65rem;
	--mk-btn-px: 1.4rem;
	--mk-btn-fs: 0.9375rem;
}

.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: var( --mk-btn-py ) var( --mk-btn-px );
	font-size: var( --mk-btn-fs );
}

/* Outline variantas — brand ruda, ne akcentas, kad hierarchija liktų aiški. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var( --wp--preset--color--ruda );
	border-color: var( --wp--preset--color--ruda );
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--ruda );
	color: var( --wp--preset--color--kremine );
	border-color: var( --wp--preset--color--ruda );
}

/* Šviesus mygtukas ant tamsaus fono (periodinės priežiūros juosta). */
.mk-btn--light .wp-block-button__link {
	background-color: var( --wp--preset--color--kremine );
	color: var( --wp--preset--color--ruda );
	border-color: var( --wp--preset--color--kremine );
}

.mk-btn--light .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
	color: var( --wp--preset--color--ruda-tamsi );
}

/* ---------------------------------------------------------------
 * Hero — nuotrauka per visą plotį, tekstas ant viršaus
 *
 * PARAŠAS: nuotrauka kairėje pusėje, po tekstu, nuspalvinta pilkai ir
 * atvėsinta, o link dešinės pereina į pilną, šiltą sodrumą. Tai tiesiogine
 * prasme parodo, ką daro paslauga („grąžiname medienai spindesį"), ir kartu
 * veikia kaip tamsinimas, be kurio baltas tekstas ant nuotraukos neįskaitomas.
 * --------------------------------------------------------------- */

.mk-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	/* `stretch`, kad vidinis konteineris užimtų visą hero aukštį ir
	   pasitikėjimo juostą būtų galima nustumti į patį apačią. */
	align-items: stretch;
	overflow: hidden;
}

/* Juosta guli ant hero, todėl turiniui reikia vietos po ja.
   `!important` — padding ateina iš bloko inline stiliaus. */
.home .mk-hero {
	padding-top: calc( var( --wp--preset--spacing--60 ) + 3.5rem ) !important;
}

/* Juosta iškritusi iš srauto, todėl <main> lieka pirmas matomas blokas, bet
   vis tiek gauna blockGap paraštę ir virš nuotraukos atsiranda šviesi juostelė. */
.home .wp-site-blocks > main {
	margin-block-start: 0;
}

/**
 * Sekcijos pačios turi vertikalius tarpus, todėl blockGap paraštė tarp jų
 * nereikalinga: ji tik įterpdavo 24 px kreminę juostelę tarp skirtingų fonų
 * (labiausiai matėsi tarp hero ir po jo esančios sekcijos).
 */
:is( .mk-hero, .mk-section, .mk-periodine ) + :is( .mk-section, .mk-periodine ) {
	margin-block-start: 0;
}

/* Ta pati blockGap paraštė atsirasdavo ir prieš poraštę. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Apatinis sluoksnis — nuspalvinta pilkai, „neprižiūrėta" mediena. */
.mk-hero .wp-block-cover__image-background {
	object-position: 50% 62%;
/* 	filter: saturate( 0.18 ) brightness( 0.72 ) contrast( 1.08 ); */
}

/* Viršutinis sluoksnis — ta pati nuotrauka pilnu sodrumu, atidengiama dešinėje.
   Kelias reliatyvus šiam CSS failui, todėl nereikia PHP kintamųjų. */
.mk-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
/* 	background-image: url( "../img/hero-wide-1920.jpg" ); */
	background-size: cover;
/* 	background-position: 50% 62%; */
/* 	-webkit-mask-image: linear-gradient( 100deg, transparent 26%, #000 72% ); */
/* 	mask-image: linear-gradient( 100deg, transparent 26%, #000 72% ); */
	pointer-events: none;
}

/* Rudas šešėlis teksto pusėje — įskaitomumui ir brand tonui. */
.mk-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		linear-gradient( 100deg, rgba( 42, 30, 21, 0.94 ) 0%, rgba( 42, 30, 21, 0.8 ) 34%, rgba( 42, 30, 21, 0.12 ) 78% ),
		linear-gradient( to top, rgba( 42, 30, 21, 0.6 ) 0%, transparent 34% );
	pointer-events: none;
}

.mk-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 3;
	width: 100%;
	display: flex;
	flex-direction: column;
}

/**
 * `margin-inline: 0` būtinas: konteineris yra flex'as, o WP constrained
 * išdėstymas vaikams duoda `margin-inline: auto` — flex'e tai juos sucentruotų
 * horizontaliai, nors turinys turi likti kairėje.
 */
.mk-hero__body,
.mk-hero .mk-trustbar {
	margin-inline: 0;
	width: 100%;
}

/**
 * Pagrindinis turinys užima visą laisvą vietą virš pasitikėjimo juostos ir
 * centruoja save joje. Automatinės paraštės čia netiktų: WP vaikams nustato
 * `margin-block-start: 0`, todėl blokas prilipdavo prie viršaus.
 */
.mk-hero__body {
	max-width: 44rem;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mk-hero .mk-kicker {
	display: inline-block;
	margin-bottom: var( --wp--preset--spacing--40 );
	padding-bottom: 0.55rem;
	border-bottom: 1px solid rgba( 245, 240, 235, 0.32 );
	color: rgba( 245, 240, 235, 0.82 );
}

.mk-hero__title {
	max-width: 18ch;
	color: var( --wp--preset--color--kremine );
	text-wrap: balance;
}

.mk-hero__sub {
	max-width: 34ch;
	margin-top: var( --wp--preset--spacing--40 );
	color: var( --wp--preset--color--kremine );
	font-family: var( --wp--preset--font-family--antrastes );
	font-weight: 400;
	line-height: 1.35;
}

.mk-hero__lead {
	max-width: 52ch;
	margin-top: var( --wp--preset--spacing--30 );
	color: rgba( 245, 240, 235, 0.78 );
}

.mk-hero__cta .wp-block-button {
	flex: 0 1 auto;
}

/* Pirminis CTA ant tamsaus fono — kreminis, kad būtų ryškiausias elementas. */
.mk-hero__cta .wp-block-button:not( .is-style-outline ) .wp-block-button__link {
	background-color: var( --wp--preset--color--kremine );
	border-color: var( --wp--preset--color--kremine );
	color: var( --wp--preset--color--ruda );
}

.mk-hero__cta .wp-block-button:not( .is-style-outline ) .wp-block-button__link:hover {
	background-color: #fff;
	border-color: #fff;
	color: var( --wp--preset--color--ruda-tamsi );
}

/* Specifiškumas turi viršyti bendrą `.wp-block-button.is-style-outline …` taisyklę. */
.wp-block-button.is-style-outline.mk-btn--on-dark .wp-block-button__link {
	color: var( --wp--preset--color--kremine );
	border-color: rgba( 245, 240, 235, 0.5 );
	background-color: transparent;
}

.wp-block-button.is-style-outline.mk-btn--on-dark .wp-block-button__link:hover {
	background-color: var( --wp--preset--color--kremine );
	border-color: var( --wp--preset--color--kremine );
	color: var( --wp--preset--color--ruda );
}

/* Pasitikėjimo juosta — plona eilutė hero apačioje, ne atskira balta kortelė. */

.mk-trustbar {
	display: grid;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	align-items: start;
	gap: var( --wp--preset--spacing--40 );
	margin-top: var( --wp--preset--spacing--60 );
	padding-top: var( --wp--preset--spacing--40 );
	border-top: 1px solid rgba( 245, 240, 235, 0.22 );
}

/**
 * WP „flow" išdėstymas blockGap'ą realizuoja kaip `margin-block-start` visiems
 * vaikams po pirmojo. Kai tokį konteinerį paverčiame grid'u, tos paraštės
 * nustumia 2–4 elementus žemyn ir juosta nebesilygiuoja — todėl jas nunulinam.
 */
.mk-trustbar > *,
.mk-trust > * {
	margin-block: 0;
}

.mk-trust {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.mk-trust__key {
	margin: 0;
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.2;
	color: var( --wp--preset--color--kremine );
}

.mk-trust__val {
	margin: 0;
	color: rgba( 245, 240, 235, 0.66 );
	line-height: 1.45;
}

@media ( max-width: 1023px ) {
	.mk-hero::before,
	.mk-hero::after {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.mk-hero::after {
		background: linear-gradient( to top, rgba( 42, 30, 21, 0.94 ) 12%, rgba( 42, 30, 21, 0.68 ) 62%, rgba( 42, 30, 21, 0.5 ) 100% );
	}

	.mk-hero::before {
/* 		backdrop-filter: saturate( 0.5 ) brightness( 0.8 ); */
	}

	.mk-trustbar { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
}

@media ( max-width: 600px ) {
	.mk-hero { min-height: auto !important; }
	.mk-hero__title { max-width: none; }
	.mk-hero__cta .wp-block-button { flex: 1 1 100%; }
	.mk-hero__cta .wp-block-button__link { display: block; text-align: center; }
}

/* ---------------------------------------------------------------
 * Sekcijos, kortelės
 * --------------------------------------------------------------- */

/**
 * Sekcijos antraštės blokas.
 *
 * Tai `alignwide` grupė su flow (ne constrained) išdėstymu — todėl jos vaikams
 * WP netaiko `margin-inline: auto` ir antraštę galima laisvai apriboti eilutės
 * ilgiu neprarandant lygiavimo su kortelių tinkleliu apačioje.
 */
.mk-section__head {
	margin-bottom: var( --wp--preset--spacing--50 );
}

.mk-section__head h2 {
	max-width: 22ch;
}

/* Skaitomas eilutės ilgis įvadiniam tekstui — per visą 1240 px būtų per plati eilutė. */
.mk-section__head p:not( .mk-eyebrow ) {
	max-width: 62ch;
}

.mk-section--klimatas h2,
.mk-periodine h2 {
	max-width: none;
}

.mk-card {
	box-shadow: var( --wp--preset--shadow--svelnus );
}

.mk-card--service {
	display: flex;
	flex-direction: column;
	border: 1px solid var( --wp--preset--color--linija );
	box-shadow: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.mk-card--service:hover {
	border-color: var( --wp--preset--color--akcentas );
	box-shadow: var( --wp--preset--shadow--svelnus );
	transform: translateY( -2px );
}

.mk-card--service .wp-block-buttons {
	margin-top: auto !important;
	padding-top: var( --wp--preset--spacing--40 );
}

/**
 * Nuotraukų proporcijos nurodomos CSS, o ne width/height atributais — taip
 * blokų markup'as lieka toks, kokį generuoja Gutenberg (žr. mk_image_performance_attrs),
 * o naršyklė vis tiek rezervuoja vietą ir puslapis nešokinėja krovimosi metu (CLS).
 *
 * Kiekvienai sekcijai nurodoma tikroji failo proporcija, kad nieko nenukirstų.
 */
.mk-figure img {
	width: 100%;
	object-fit: cover;
	box-shadow: var( --wp--preset--shadow--svelnus );
}

.mk-section--klimatas .mk-figure img {
	aspect-ratio: 1;
}

.mk-card--main .mk-figure img {
	aspect-ratio: 4 / 3;
}

.mk-section--apie .mk-figure img {
	aspect-ratio: 4 / 3;
}

/* Proporcija nenurodoma — logotipas turi savo natūralų santykį, o jis
   pasikeitė pridėjus ženklą prie wordmark'o. */

.mk-badge {
	display: inline-block;
	margin: 0 0 var( --wp--preset--spacing--30 );
	padding: 0.3rem 0.85rem;
	border-radius: 4px;
	background: var( --wp--preset--color--kremine );
	color: var( --wp--preset--color--akcentas );
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Kainos */

.mk-price {
	flex: 1 1 12rem;
	padding-left: var( --wp--preset--spacing--40 );
	border-left: 3px solid var( --wp--preset--color--akcentas );
}

.mk-price__value {
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: clamp( 1.5rem, 1.2rem + 1.4vw, 2rem );
	font-weight: 600;
	line-height: 1.1;
	color: var( --wp--preset--color--ruda );
	margin: 0 0 0.35rem;
}

.mk-price__label {
	margin: 0;
	color: var( --wp--preset--color--tekstas-blankus );
}

/* ---------------------------------------------------------------
 * Procesas
 * --------------------------------------------------------------- */

/**
 * Procesas — horizontali juosta desktop'e.
 *
 * Numeriai čia neša tikrą informaciją (darbų eiliškumą), todėl jie lieka.
 * Per visus žingsnius eina viena linija — ji rodo, kad tai vientisa seka,
 * o ne atskirų paslaugų sąrašas.
 */
.mk-steps {
	display: grid;
	grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	gap: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
	position: relative;
}

.mk-steps > * {
	margin-block: 0;
}

.mk-step {
	position: relative;
	padding-top: var( --wp--preset--spacing--50 );
}

/* Bendra linija per visą eilę, einanti per numerių centrus. */
.mk-step::before {
	content: "";
	position: absolute;
	top: calc( var( --wp--preset--spacing--50 ) + 1.1rem );
	left: 0;
	right: calc( var( --wp--preset--spacing--40 ) * -1 );
	height: 1px;
	background: var( --wp--preset--color--linija );
}

/* Kiekvienos eilutės paskutiniame žingsnyje linija nutrūksta. */
.mk-step:nth-child( 3n )::before,
.mk-step:last-child::before {
	right: auto;
	width: 2.2rem;
}

.mk-step__num {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	margin: 0 0 var( --wp--preset--spacing--30 );
	border-radius: 50%;
	background: var( --wp--preset--color--ruda );
	color: var( --wp--preset--color--kremine );
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.mk-step__body h3 {
	margin-bottom: 0.4rem;
	font-size: 1.0625rem;
	line-height: 1.3;
	text-wrap: balance;
}

/* Horizontalioje juostoje pavadinimai užima 1–2 eilutes; fiksuotas aukštis
   išlygiuoja aprašymus į vieną liniją ir juosta nebeatrodo dantyta. */
@media ( min-width: 681px ) {
	.mk-step__body h3 {
		min-height: 2.6em;
	}
}

.mk-step__body p {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
}

@media ( max-width: 900px ) {
	.mk-steps { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.mk-step:nth-child( 3n )::before { right: calc( var( --wp--preset--spacing--40 ) * -1 ); width: auto; }
	.mk-step:nth-child( 2n )::before { right: auto; width: 2.2rem; }
}

@media ( max-width: 680px ) {
	.mk-steps { grid-template-columns: 1fr; gap: 0; }

	.mk-step {
		display: grid;
		grid-template-columns: 2.2rem 1fr;
		column-gap: var( --wp--preset--spacing--40 );
		padding-top: 0;
		padding-bottom: var( --wp--preset--spacing--50 );
	}

	/* Vertikaliai linija jungia numerius stulpelyje. */
	.mk-step::before,
	.mk-step:nth-child( 2n )::before,
	.mk-step:nth-child( 3n )::before {
		top: 2.6rem;
		left: 1.1rem;
		right: auto;
		bottom: 0;
		width: 1px;
		height: auto;
	}

	.mk-step:last-child::before { display: none; }
	.mk-step__num { margin-bottom: 0; }
}

/* ---------------------------------------------------------------
 * Kodėl mus
 * --------------------------------------------------------------- */

.mk-reason {
	border: 1px solid var( --wp--preset--color--linija );
	border-top: 3px solid var( --wp--preset--color--akcentas );
}

.mk-reason h3 {
	margin-bottom: 0.4rem;
}

.mk-reason p {
	margin: 0;
}

/* ---------------------------------------------------------------
 * Periodinė priežiūra (cover)
 * --------------------------------------------------------------- */

.mk-periodine .wp-block-cover__inner-container > * {
	max-width: 46rem;
	margin-inline: auto;
}

/* ---------------------------------------------------------------
 * D.U.K.
 * --------------------------------------------------------------- */

/**
 * D.U.K. centruojamas: 1240 px pločio sekcijoje kairėje lygiuotas 55 rem
 * akordeonas palikdavo tuščią dešinę pusę ir atrodė nesubalansuotai.
 * Klausimų tekstas lieka kairėje — centruoti sąrašo eilutes būtų sunkiau skaityti.
 */
/* `.alignwide` reikalingas specifiškumui: branduolio taisyklė
   `.wp-container-… > .alignwide { max-width: 1240px }` kitaip laimi. */
.mk-section--duk .mk-section__head.alignwide {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.mk-section--duk .mk-section__head h2 {
	max-width: none;
}

.mk-faq.alignwide {
	max-width: 46rem;
	margin-inline: auto;
}

.mk-faq > .wp-block-details {
	border-top: 1px solid var( --wp--preset--color--linija );
	border-bottom: none;
}

.mk-faq > .wp-block-details:last-of-type {
	border-bottom: 1px solid var( --wp--preset--color--linija );
}

.mk-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--40 );
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: clamp( 1.0625rem, 1rem + 0.3vw, 1.1875rem );
	font-weight: 500;
	color: var( --wp--preset--color--ruda );
}

.mk-faq summary::-webkit-details-marker {
	display: none;
}

.mk-faq summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --wp--preset--color--akcentas );
	transition: transform 0.2s ease;
}

.mk-faq details[ open ] summary::after {
	transform: rotate( 45deg );
}

.mk-faq details p {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	padding-right: 2.5rem;
	color: var( --wp--preset--color--tekstas-blankus );
}

.mk-faq__more {
	max-width: none;
	text-align: center;
}

/* ---------------------------------------------------------------
 * Forma
 * --------------------------------------------------------------- */

.mk-formbox {
	border: 1px solid var( --wp--preset--color--linija );
}

.mk-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 var( --wp--preset--spacing--40 );
}

.mk-form__row label {
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 0.9375rem;
	font-weight: 500;
	color: var( --wp--preset--color--ruda );
}

.mk-req {
	color: var( --wp--preset--color--akcentas );
}

.mk-optional {
	font-weight: 400;
	color: var( --wp--preset--color--tekstas-blankus );
}

/**
 * `box-sizing: border-box` čia būtinas: naršyklės formos laukams taiko
 * `content-box`, todėl `width: 100%` + vidinis tarpas + rėmelis išeidavo už
 * konteinerio ribų (~34 px). Contact Form 7 dar apgaubia lauką <span>'u, tad
 * jį reikia ištempti atskirai.
 */
.mk-form :where( input, textarea, select, .wpcf7-form-control-wrap ) {
	box-sizing: border-box;
	max-width: 100%;
}

.mk-form .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.mk-form input[ type="text" ],
.mk-form input[ type="tel" ],
.mk-form input[ type="email" ],
.mk-form input[ type="number" ],
.mk-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid var( --wp--preset--color--linija );
	border-radius: 4px;
	background: #fff;
	font-family: inherit;
	font-size: 1rem;
	color: var( --wp--preset--color--tekstas );
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mk-form input:focus,
.mk-form textarea:focus {
	border-color: var( --wp--preset--color--akcentas );
	box-shadow: 0 0 0 3px rgba( 168, 91, 39, 0.14 );
	outline: none;
}

.mk-form textarea {
	resize: vertical;
	min-height: 6.5rem;
}

.mk-form__consent {
	margin: 0 0 var( --wp--preset--spacing--40 );
	font-size: 0.875rem;
	color: var( --wp--preset--color--tekstas-blankus );
	line-height: 1.5;
}

.mk-form__consent .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.mk-form__consent input[ type="checkbox" ] {
	margin-top: 0.2rem;
	accent-color: var( --wp--preset--color--akcentas );
	width: 1.05rem;
	height: 1.05rem;
	flex: 0 0 auto;
}

/* Honeypot — paslėptas nuo žmonių, bet pasiekiamas botams. */
.mk-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.mk-form__submit {
	margin: 0;
}

.mk-form__button {
	width: 100%;
	padding: 1.05rem 2rem;
	border: 2px solid var( --wp--preset--color--akcentas );
	border-radius: 4px;
	background: var( --wp--preset--color--akcentas );
	color: #fff;
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 1.0625rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.mk-form__button:hover {
	background: var( --wp--preset--color--akcentas-tamsus );
	border-color: var( --wp--preset--color--akcentas-tamsus );
	transform: translateY( -1px );
}

.mk-form__note {
	margin: var( --wp--preset--spacing--30 ) 0 0;
	font-size: 0.8125rem;
	text-align: center;
	color: var( --wp--preset--color--tekstas-blankus );
}

.mk-form__missing {
	padding: var( --wp--preset--spacing--40 );
	border: 1px dashed var( --wp--preset--color--linija );
	border-radius: 8px;
	text-align: center;
}

/**
 * CF7 numatytieji stiliai išjungti (wpcf7_load_css), todėl kelias jų funkcijas
 * reikia atkurti čia — kitaip naršyklė parodo tai, ką plugin'as slėpdavo pats.
 */

/**
 * Klaidų santrauka ekrano skaitytuvams.
 *
 * CF7 formos viršuje sudeda `role="status"` bloką su bendru pranešimu ir
 * nuorodų sąrašu į klaidingus laukus. Plugin'o stiliai jį paslepia nuo akių,
 * bet mes tuos stilius išjungėme, todėl jis buvo matomas ir klaidos rodėsi
 * dviese: viršuje ir prie laukų.
 *
 * Blokas paslepiamas vizualiai, bet paliekamas dokumente: ekrano skaitytuvai
 * turi pranešti, kad siuntimas nepavyko, o matomas klaidas lankytojas mato
 * vienoje vietoje — prie laukų.
 */
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect( 1px, 1px, 1px, 1px );
	clip-path: inset( 50% );
	border: 0;
	white-space: nowrap;
}

/* Paslėptų laukų fieldset — naršyklė jam piešia rėmelį. */
.wpcf7-form .hidden-fields-container {
	display: contents;
}

/* Iš plugin'o stilių: reikalinga, jei laukui prireiktų absoliučiai pozicionuoto
   patarimo ar piktogramos. */
.wpcf7-form-control-wrap {
	position: relative;
}

/**
 * Bendras pranešimo laukelis rodomas TIK tada, kai jis pasako kažką naujo:
 * laiškas išsiųstas, nepavyko išsiųsti arba užklausa palaikyta šlamštu.
 *
 * Validacijos klaidoms jis nerodomas sąmoningai: CF7 tuo pačiu metu pažymi ir
 * kiekvieną lauką atskirai, tad apibendrinimas „patikrinkite pažymėtus laukus“
 * nieko nepridėdavo, o dar ir atsidurdavo per 500 px žemiau nei pirmoji tikroji
 * klaida. Klaida rodoma vienoje vietoje — prie lauko, kurį reikia taisyti.
 */
.wpcf7 form .wpcf7-response-output {
	display: none;
}

.wpcf7 form:is( .sent, .failed, .spam, .aborted ) .wpcf7-response-output {
	display: block;
}

/* Suktukas — tik siuntimo metu. */
.wpcf7-spinner {
	visibility: hidden;
	display: inline-block;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0 0 0 0.75rem;
	border: 2px solid var( --wp--preset--color--linija );
	border-top-color: var( --wp--preset--color--akcentas );
	border-radius: 50%;
	vertical-align: middle;
}

.wpcf7 form.submitting .wpcf7-spinner {
	visibility: visible;
	animation: mk-spin 0.8s linear infinite;
}

@keyframes mk-spin {
	to { transform: rotate( 360deg ); }
}

/* CF7 pranešimai */

.wpcf7 form .wpcf7-response-output {
	margin: var( --wp--preset--spacing--40 ) 0 0;
	padding: 0.9rem 1.1rem;
	border: 1px solid var( --wp--preset--color--linija );
	border-radius: 8px;
	font-size: 0.9375rem;
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: #2f7d4f;
	background: #eef7f1;
	color: #1f5c39;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output {
	border-color: #b4392f;
	background: #fdf0ee;
	color: #8f2b23;
}

/* Pats laukas taip pat pažymimas, kad klaidą matytum ir nežiūrėdamas į tekstą. */
.mk-form :is( input, textarea )[ aria-invalid="true" ] {
	border-color: #b4392f;
	background-color: #fdf7f6;
}

.mk-form :is( input, textarea )[ aria-invalid="true" ]:focus {
	border-color: #b4392f;
	box-shadow: 0 0 0 3px rgba( 180, 57, 47, 0.14 );
}

.wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	line-height: 1.3;
	color: #b4392f;
}

.wpcf7-not-valid-tip::before {
	content: "";
	flex: 0 0 auto;
	width: 0.9rem;
	height: 0.9rem;
	background-color: currentColor;
	-webkit-mask: var( --mk-icon-alert ) no-repeat center / contain;
	mask: var( --mk-icon-alert ) no-repeat center / contain;
}

.wpcf7-spinner {
	margin-inline: auto;
	display: block;
}

.mk-callbox__phone {
	margin: 0.2rem 0 0.5rem;
}

.mk-callbox__phone a {
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: clamp( 1.375rem, 1.2rem + 0.8vw, 1.75rem );
	font-weight: 600;
	color: var( --wp--preset--color--ruda );
	text-decoration: none;
	white-space: nowrap;
}

.mk-callbox__phone a:hover {
	color: var( --wp--preset--color--akcentas );
}

/* ---------------------------------------------------------------
 * Prieš / po
 * --------------------------------------------------------------- */

.mk-beforeafter__pair {
	gap: 4px;
}

.mk-beforeafter__img img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.mk-beforeafter__img.is-before img {
	border-radius: 10px 0 0 10px;
	filter: grayscale( 0.35 ) brightness( 0.92 );
}

.mk-beforeafter__img.is-after img {
	border-radius: 0 10px 10px 0;
}

.mk-beforeafter figcaption {
	position: relative;
	margin-top: -2.4rem;
	margin-left: 0.6rem;
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: 4px;
	background: rgba( 51, 37, 26, 0.82 );
	color: var( --wp--preset--color--kremine );
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * 404 ir turinio puslapiai
 * --------------------------------------------------------------- */

/* Be flex'o: WP constrained išdėstymas vaikams taiko auto paraštes, o flex
   konteineryje jos sucentruotų visą turinį. Pakanka min-height ir tarpų. */
.mk-404__inner {
	min-height: 56vh;
}

.mk-404__links ul {
	list-style: none;
	max-width: 34rem;
	padding-left: 0 !important;
	border-top: 1px solid var( --wp--preset--color--linija );
}

.mk-404__links li {
	margin: 0;
	border-bottom: 1px solid var( --wp--preset--color--linija );
}

.mk-404__links a {
	display: block;
	padding: 0.85rem 0;
	color: var( --wp--preset--color--ruda );
	text-decoration: none;
	font-family: var( --wp--preset--font-family--antrastes );
	font-weight: 500;
}

.mk-404__links a::after {
	content: " →";
	color: var( --wp--preset--color--akcentas );
}

.mk-404__links a:hover {
	color: var( --wp--preset--color--akcentas );
}

/* Vidiniai teksto puslapiai (privatumo politika ir pan.) */

.mk-page {
	max-width: 46rem;
}

.mk-page h2 {
	margin-top: var( --wp--preset--spacing--60 );
	font-size: var( --wp--preset--font-size--x-large );
}

.mk-page li {
	margin-bottom: 0.4rem;
}

/* ---------------------------------------------------------------
 * Footer
 * --------------------------------------------------------------- */

.mk-footer a {
	color: var( --wp--preset--color--kremine );
	text-decoration: none;
	opacity: 0.86;
	transition: opacity 0.15s ease;
}

.mk-footer a:hover {
	opacity: 1;
	text-decoration: underline;
}

.mk-footer__links {
	list-style: none;
	padding-left: 0 !important;
}

.mk-footer__links li {
	margin-bottom: 0.5rem;
}

/**
 * Kontaktai su ikonomis.
 *
 * Ikonos dedamos CSS `mask-image` būdu, o ne kaip SVG markup'e: taip blokai
 * lieka tokie, kokius generuoja Gutenberg (klientas gali laisvai redaguoti),
 * o ikonos spalva seka `currentColor`, tad hover veikia savaime.
 */
.mk-footer__contacts {
	list-style: none;
	padding-left: 0 !important;
}

.mk-footer__contacts li {
	margin-bottom: 0.65rem;
}

.mk-footer__contacts a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	opacity: 1;
}

.mk-footer__contacts a::before {
	content: "";
	flex: 0 0 auto;
	width: 1.05rem;
	height: 1.05rem;
	background-color: currentColor;
	opacity: 0.7;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.mk-footer__contacts a[ href^="tel:" ]::before {
	-webkit-mask-image: var( --mk-icon-phone );
	mask-image: var( --mk-icon-phone );
}

.mk-footer__contacts a[ href^="mailto:" ]::before {
	-webkit-mask-image: var( --mk-icon-mail );
	mask-image: var( --mk-icon-mail );
}

.mk-footer__contacts a:hover::before {
	opacity: 1;
}

.mk-footer__rule {
	margin-block: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--40 );
	border-color: rgba( 245, 240, 235, 0.18 );
	opacity: 1;
}

.mk-footer__bottom p {
	margin: 0;
	opacity: 0.7;
}

.mk-footer__logo img {
	max-width: 200px;
	height: auto;
}

/* ---------------------------------------------------------------
 * Sticky mobile CTA
 * --------------------------------------------------------------- */

.mk-sticky-cta {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 200;
	display: none;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem calc( 0.6rem + env( safe-area-inset-bottom ) );
	background: rgba( 245, 240, 235, 0.96 );
	backdrop-filter: blur( 10px );
	border-top: 1px solid var( --wp--preset--color--linija );
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.mk-sticky-cta.is-hidden {
	transform: translateY( 110% );
	opacity: 0;
	pointer-events: none;
}

.mk-sticky-cta a {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	padding: 0.85rem 0.75rem;
	border-radius: 4px;
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
}

.mk-sticky-cta__call {
	background: transparent;
	color: var( --wp--preset--color--ruda );
	border: 2px solid var( --wp--preset--color--ruda );
}

.mk-sticky-cta__form {
	background: var( --wp--preset--color--akcentas );
	color: #fff;
	border: 2px solid var( --wp--preset--color--akcentas );
}

@media ( max-width: 781px ) {
	.mk-sticky-cta { display: flex; }

	/**
	 * Vietos sticky juostai paliekame footerio apačioje, o ne per `body`
	 * padding: kitaip po rudu footeriu likdavo kreminė body fono juosta.
	 * Sticky juosta rodoma tik pradiniame puslapyje, tad ir tarpas tik ten.
	 */
	/* `!important` — padding ateina iš bloko inline stiliaus. */
	.home .mk-footer {
		padding-bottom: calc( var( --wp--preset--spacing--50 ) + 4.25rem ) !important;
	}
}

/* ---------------------------------------------------------------
 * Slapukų juosta
 * --------------------------------------------------------------- */

.mk-consent {
	position: fixed;
	z-index: 300;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	max-width: 34rem;
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var( --wp--preset--color--linija );
	border-radius: 14px;
	background: #fff;
	box-shadow: var( --wp--preset--shadow--pakeltas );
}

.mk-consent[ hidden ] {
	display: none;
}

.mk-consent__text {
	flex: 1 1 16rem;
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var( --wp--preset--color--tekstas-blankus );
}

.mk-consent__actions {
	display: flex;
	gap: 0.5rem;
}

.mk-consent__btn {
	padding: 0.5rem 1.1rem;
	border: 2px solid var( --wp--preset--color--akcentas );
	border-radius: 4px;
	background: var( --wp--preset--color--akcentas );
	color: #fff;
	font-family: var( --wp--preset--font-family--antrastes );
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
}

.mk-consent__btn--ghost {
	background: transparent;
	color: var( --wp--preset--color--tekstas-blankus );
	border-color: var( --wp--preset--color--linija );
}

@media ( max-width: 781px ) {
	.mk-consent { bottom: 5.5rem; } /* virš sticky CTA juostos */
}

.grecaptcha-badge { 
    visibility: hidden !important;
}