/**
 * WOODCNC – doplnkové štýly.
 * Len to, čo theme.json nevie vyjadriť. Farby a rozstupy vždy cez preset premenné.
 */

/* ---------- Slider ----------
 * Vzory woodcnc/hero-full a woodcnc/hotely-slider vypíšu slajdy ako bloky
 * pod sebou (trieda `woodcnc-slide`). Slider z nich robí až JavaScript
 * (assets/js/slider.js), ktorý obalu `woodcnc-slider` pridá triedu
 * `is-ready`. Do tej chvíle – a bez JS navždy – zostanú slajdy pod sebou
 * a čitateľné.
 */
.woodcnc-slider.is-ready {
	position: relative;
	isolation: isolate;
}

.woodcnc-slider.is-ready > .woodcnc-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease;
}

/* Prvý (aktívny) slajd drží výšku celej sekcie, ostatné sú nad ním absolútne. */
.woodcnc-slider.is-ready > .woodcnc-slide.is-aktivny {
	position: relative;
	opacity: 1;
	visibility: visible;
}

/* ---------- Pomalý pohyb fotografie („pohyb kamery“) ----------
 * Fotografia sa v každom slajde veľmi pomaly posúva do strany a zase späť
 * (`alternate`), takže slider pôsobí živo aj počas nečinnosti. Animácia beží
 * na všetkých slajdoch (nielen na aktívnom), aby pri prepnutí nepreskočila.
 * Párne slajdy idú na opačnú stranu, aby sa pohyb neopakoval.
 *
 * Mierka je počas celého pohybu konštantná (1.14) – nie je to zoom, ale pan.
 * Práve tých 14 % navyše je rezerva, z ktorej sa uberá posunom ±3 %, takže
 * pri kraji nikdy nevykukne pozadie.
 */
@media (prefers-reduced-motion: no-preference) {
	.woodcnc-slider > .woodcnc-slide .wp-block-cover__image-background,
	.woodcnc-slider > .woodcnc-slide .woodcnc-hotely__foto img {
		animation: woodcnc-kamera 24s ease-in-out infinite alternate;
		will-change: transform;
	}

	.woodcnc-slider > .woodcnc-slide:nth-child(2n) .wp-block-cover__image-background,
	.woodcnc-slider > .woodcnc-slide:nth-child(2n) .woodcnc-hotely__foto img {
		animation-name: woodcnc-kamera-b;
	}
}

@keyframes woodcnc-kamera {
	from {
		transform: scale(1.14) translate3d(-3%, -1%, 0);
	}

	to {
		transform: scale(1.14) translate3d(3%, 1%, 0);
	}
}

@keyframes woodcnc-kamera-b {
	from {
		transform: scale(1.14) translate3d(3%, 1%, 0);
	}

	to {
		transform: scale(1.14) translate3d(-3%, -1%, 0);
	}
}

/* ---------- Ovládanie slidera ---------- */
.woodcnc-slider__ovladanie {
	position: absolute;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
}

.woodcnc-slider__strelka,
.woodcnc-slider__bodka {
	cursor: pointer;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 0;
	padding: 0;
}

.woodcnc-slider__strelka {
	position: relative;
	width: 2.75rem;
	height: 2.75rem;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.woodcnc-slider__strelka::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.55rem;
	height: 0.55rem;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}

.woodcnc-slider__strelka--vpravo::before {
	transform: translate(-60%, -50%) rotate(45deg);
}

.woodcnc-slider__strelka--vlavo::before {
	transform: translate(-40%, -50%) rotate(-135deg);
}

.woodcnc-slider__strelka:hover,
.woodcnc-slider__strelka:focus-visible {
	background-color: rgba(255, 255, 255, 0.16);
	border-color: #fff;
}

.woodcnc-slider__bodky {
	display: flex;
	gap: 0.5rem;
	margin: 0 0.35rem;
}

.woodcnc-slider__bodka {
	width: 1.75rem;
	height: 3px;
	border: 0;
	background-color: rgba(255, 255, 255, 0.4);
	transition: background-color 0.2s ease;
}

.woodcnc-slider__bodka.is-aktivny {
	background-color: #fff;
}

.woodcnc-slider__bodka:hover,
.woodcnc-slider__bodka:focus-visible {
	background-color: rgba(255, 255, 255, 0.8);
}

/* Hero má ovládanie na fotografii vpravo dole. */
.woodcnc-hero .woodcnc-slider__ovladanie {
	right: var(--wp--preset--spacing--40);
	bottom: var(--wp--preset--spacing--40);
}

/* ---------- Hotelový slider ----------
 * Fotografia vľavo, text vpravo. Ovládanie je pod obsahom na svetlom
 * pozadí, preto má atramentové farby namiesto bielych.
 */
.woodcnc-hotely__foto {
	overflow: hidden;
	aspect-ratio: 5 / 4;
	background-color: var(--wp--preset--color--sand);
}

.woodcnc-hotely__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.woodcnc-hotely__pas.is-ready {
	padding-bottom: 4.25rem;
}

.woodcnc-hotely .woodcnc-slider__ovladanie {
	right: 0;
	bottom: 0;
}

.woodcnc-hotely .woodcnc-slider__strelka,
.woodcnc-hotely .woodcnc-slider__bodka {
	border-color: var(--wp--preset--color--line);
}

.woodcnc-hotely .woodcnc-slider__strelka::before {
	border-top-color: var(--wp--preset--color--ink);
	border-right-color: var(--wp--preset--color--ink);
}

.woodcnc-hotely .woodcnc-slider__strelka:hover,
.woodcnc-hotely .woodcnc-slider__strelka:focus-visible {
	background-color: var(--wp--preset--color--sand);
	border-color: var(--wp--preset--color--ink);
}

.woodcnc-hotely .woodcnc-slider__bodka {
	background-color: var(--wp--preset--color--line);
}

.woodcnc-hotely .woodcnc-slider__bodka.is-aktivny,
.woodcnc-hotely .woodcnc-slider__bodka:hover,
.woodcnc-hotely .woodcnc-slider__bodka:focus-visible {
	background-color: var(--wp--preset--color--ink);
}

@media (max-width: 600px) {
	.woodcnc-hero .woodcnc-slider__ovladanie {
		right: 50%;
		transform: translateX(50%);
	}

	.woodcnc-slider__strelka {
		width: 2.25rem;
		height: 2.25rem;
	}

	.woodcnc-hotely__foto {
		aspect-ratio: 4 / 3;
	}
}

@media (prefers-reduced-motion: reduce) {
	.woodcnc-slider.is-ready > .woodcnc-slide {
		transition: none;
	}
}


/* ---------- Kontrast textu v pätičke ----------
 * Preset `graphite` (#6B6862) má na bielom pozadí kontrast 5,9 : 1, ale na
 * pieskovej pätičke (#E7E3DC) len 4,34 : 1 – pod hranicou WCAG AA pre malý
 * text. V pätičke ho preto o odtieň stmavíme; na ostatných pozadiach zostáva.
 */
.woodcnc-footer .has-graphite-color {
	/* WordPress generuje presetové farby s `!important`, takže bez neho by sa
	 * táto korekcia neuplatnila.
	 */
	color: #5F5C56 !important;
}

/* ---------- Dve značky v pätičke ----------
 * Tmavý pás rozdeľuje dve roly firmy: MVM SK = nábytok na mieru pod vlastným
 * menom, WOODCNC = porez a subdodávky pre stolárov so záväzkom diskrétnosti.
 *
 * MVMSK logo je monochromatické SVG s `fill:#333333` a bielym obrysom, takže na
 * tmavom páse by bolo nečitateľné. Inverzia z neho spraví svetlú kresbu s tmavým
 * obrysom – oddelenie liter zostane zachované. Druhý selektor je nutný preto, že
 * pravidlo pre obrázky v tmavých pásoch (`filter: none` nižšie v tomto súbore)
 * má vyššiu špecificitu a inverziu by inak zrušilo.
 */
.woodcnc-brandy__logo--mvmsk img,
:root[data-theme="dark"] .has-ink-background-color .woodcnc-brandy__logo--mvmsk img {
	filter: invert(1);
}

/* Logo MVM interier je čierna kresba na priehľadnom pozadí – v tmavom režime
 * by splynulo s podkladom, preto sa invertuje na bielu. V atramentovom páse
 * v pätičke sa používa rovno biela verzia súboru, takže tam sa neinvertuje.
 */
/* Selektor musí niesť obe triedy figúry: samotné `.woodcnc-znacka img` má
 * rovnakú špecificitu ako pravidlo `.wp-block-image img { filter: brightness() }`
 * nižšie v tomto súbore, a to by inverziu prepísalo.
 */
:root[data-theme="dark"] .wp-block-image.woodcnc-znacka img {
	filter: invert(1);
}

/* theme.json dáva nadpisom farbu natvrdo (`elements.heading.text = ink`), takže
 * v atramentovom páse by boli tmavé na tmavom. Trieda pásu má vyššiu
 * špecificitu než generovaný `:root :where(h1,…)` selektor, takže ich prepíše.
 */
.woodcnc-brandy h2,
.woodcnc-brandy h3,
.woodcnc-brandy h4 {
	color: var(--wp--preset--color--base);
}

/* `.is-style-eyebrow` má farbu natvrdo z presetu `graphite`, ktorý je na svetlej
 * stránke tmavosivý – na atramentovom páse by mal slabý kontrast. V páse ho
 * preto prepíname na `clay`, ktorá je voči `ink` čitateľná v oboch režimoch.
 */
.woodcnc-brandy .is-style-eyebrow {
	color: var(--wp--preset--color--clay);
}

/* Obe značky majú logo s úplne iným pomerom strán (MVMSK je široké a nízke,
 * WOODCNC takmer kvadratické). Aby nadpisy pod nimi začínali na rovnakej linke,
 * dostane obrázok pevnú výšku bloku a logo sa v ňom usadí na spodok.
 */
.woodcnc-brandy__logo {
	display: flex;
	align-items: flex-end;
	min-height: 4.5rem;
	margin: 0;
	line-height: 0;
}

.woodcnc-brandy__logo img {
	display: block;
	height: auto;
}

/* Tri body záväzku sú mriežka, aby text v bunkách začínal na rovnakej linke aj
 * pri rôzne dlhých nadpisoch. Linky medzi bunkami kreslíme až od tabletu –
 * na mobile sú bunky pod sebou a linka by rozdeľovala nesprávnym smerom.
 *
 * Blok Grid s `columnCount` drží počet stĺpcov na každej šírke, takže na mobile
 * ho musíme zalomiť pod sebou ručne – inak by v troch stĺpcoch zostali dva-tri
 * znaky na riadok.
 */
@media (max-width: 781px) {
	.woodcnc-brandy__body {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 782px) {
	.woodcnc-brandy__body > .wp-block-group + .wp-block-group {
		border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
		padding-left: var(--wp--preset--spacing--40);
	}

	/* Nadpisy bodov držia výšku jedného riadku, aby odstavce pod nimi začínali
	 * na jednej linke. Ak sa nadpis na užšom okne zalomí, bunka sa zväčší sama.
	 */
	.woodcnc-brandy__body h4 {
		min-height: 1.6em;
	}

	@supports not (color: color-mix(in srgb, red 50%, transparent)) {
		.woodcnc-brandy__body > .wp-block-group + .wp-block-group {
			border-left-color: rgba(255, 255, 255, 0.22);
		}
	}
}

/* Deliace linky vnútri tmavého pásu vychádzajú z presetu `line`, ktorý je na
 * svetlej stránke svetlý. V páse s `has-ink-background-color` sa premenná
 * vracia do svetlého významu (viď sekcia kontrastných pásov), takže linka je
 * viditeľná v oboch režimoch – stačí ju zjemniť, aby nekonkurovala textu.
 */
.woodcnc-brandy .wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column,
.woodcnc-brandy__zavazok.is-style-hairline-top {
	border-color: color-mix(in srgb, var(--wp--preset--color--base) 22%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.woodcnc-brandy .wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column,
	.woodcnc-brandy__zavazok.is-style-hairline-top {
		border-color: rgba(255, 255, 255, 0.22);
	}
}

/* ---------- Mapa v kontaktoch ----------
 * Iframe z OpenStreetMap nemá vlastný pomer strán, drží ho preto obal.
 * Filter v tmavom režime mapu stlmí, aby nesvietila z tmavej stránky –
 * inverzia by prevrátila farby ciest a vody, preto len jemné stmavenie.
 */
.woodcnc-mapa {
	margin-top: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--line);
	aspect-ratio: 16 / 9;
}

.woodcnc-mapa__ramec {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (max-width: 600px) {
	.woodcnc-mapa {
		aspect-ratio: 4 / 3;
	}
}

:root[data-theme="dark"] .woodcnc-mapa__ramec {
	filter: brightness(0.85) saturate(0.9);
}

/* ---------- Hlavička ---------- */
.woodcnc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	backdrop-filter: saturate(180%) blur(8px);

	/* Polopriehľadné pozadie hlavičky musí vychádzať z presetu `base`, aby fungoval
	 * aj tmavý režim. `!important` je nutné, pretože hlavička má v
	 * parts/header.html presetovú triedu `.has-base-background-color`, ktorú
	 * WordPress generuje s `!important` – bez toho by sa priehľadnosť ani
	 * backdrop-filter neuplatnili. Prvá deklarácia je záloha pre prehliadače
	 * bez `color-mix()`: pozadie zostane nepriehľadné, ale správne farebné.
	 */
	background-color: var(--wp--preset--color--base) !important;
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 92%, transparent) !important;
}

/* `backdrop-filter` robí z hlavičky containing block pre potomkov s
 * `position: fixed` – prekryté mobilné menu (`.is-menu-open`) sa potom
 * neroztiahne na celý viewport, ale len na výšku hlavičky. Kým je menu
 * otvorené, filter preto vypíname; rozostrenie aj tak nie je nad čím robiť,
 * lebo prekrytie zakryje celú stránku.
 */
.woodcnc-header:has(.wp-block-navigation__responsive-container.is-menu-open) {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.admin-bar .woodcnc-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .woodcnc-header {
		top: 46px;
	}
}

.woodcnc-nav .wp-block-navigation-item__content {
	padding-bottom: 2px;
	border-bottom: 1px solid transparent;
	transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.woodcnc-nav .wp-block-navigation-item__content:hover,
.woodcnc-nav .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
}

/* Menu má v theme.json písmo `medium` (16–17 px, rovnako ako text stránky).
 * Sedem položiek sa pri ňom zmestí do riadku od ~1160 px (merané 13. 10. 2026,
 * pri 1200 px ostáva 80 px voľných); bežné monitory v SK sú 1280–1920 px
 * (StatCounter 2026: 1920 × 1080 ~23 %, 1536 × 864 ~12 %, 1366 × 768 ~7 %).
 * Úzky pás nad mobilným prekrytím dostane o stupeň menšie písmo (14 px)
 * a tesnejší rozstup. Selektor s triedou hlavičky prebije rozstup, ktorý si
 * blok navigácie generuje sám.
 */
@media (min-width: 1000px) and (max-width: 1199px) {
	.woodcnc-header .woodcnc-nav,
	.woodcnc-header .woodcnc-nav .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--20);
		font-size: var(--wp--preset--font-size--small);
	}
}

/* Pod 1000 px by ani menšie písmo nestačilo, preto sa prekrytie s hamburgerom
 * zapína už tam – jadro ho inak zapína až pod 600 px. Trieda `.woodcnc-nav`
 * navyše prebije špecificitu pravidiel jadra, takže netreba `!important`.
 */
@media (min-width: 601px) and (max-width: 999px) {
	.woodcnc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.woodcnc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
}

/* ---------- Mobilné menu (prekrytie navigácie) ----------
 * Na mobile sa menu otvára cez celú obrazovku. Položky boli pritlačené
 * k pravému okraju a maličké – dali sa trafiť len naslepo. Teraz sú na stred,
 * cez celú šírku a s ikonou, takže celý riadok je veľký cieľ na klik.
 *
 * Štýly sú viazané na `.is-menu-open`, ktorú WordPress pridá až po otvorení
 * prekrytia – desktopovej navigácie sa preto nedotknú a nepotrebujeme
 * media query.
 */
/* Prekrytie je na celú obrazovku – menu patrí do jej stredu, nie pod
 * zatváracie tlačidlo. Reťaz `close → dialog → content` musí byť preto celá
 * pružná, inak sa výška nemá o čo oprieť.
 */
.woodcnc-nav .is-menu-open .wp-block-navigation__responsive-close {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	width: 100%;
}

.woodcnc-nav .is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.woodcnc-nav .is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex-direction: column;
	width: 100%;
	justify-content: center;
	align-items: center;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
}

/* Blok navigácie má z desktopu `justify-content: flex-end`; prebíjame ho
 * vyššou špecificitou, nie `!important`.
 */
.woodcnc-nav .is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: 24rem;
	margin-inline: auto;
	justify-content: center;
	align-items: stretch;
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item {
	/* Jadro dáva položke `display: flex`; odkaz by potom bol len taký široký
	 * ako text a zoznam by ho zarovnal doprava.
	 */
	display: block;
	width: 100%;
}

/* Deliaca linka z `currentColor` drží kontrast vo svetlom aj tmavom režime –
 * natvrdo zapísaná farba by v jednom z nich zmizla.
 */
.woodcnc-nav .is-menu-open .wp-block-navigation-item + .wp-block-navigation-item {
	border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	gap: 0.85rem;
	/* Pohodlný cieľ na prst – odporúčané minimum je 44 px. */
	min-height: 3.5rem;
	padding: 0.75rem 0.5rem;
	border-bottom: 0;
	font-family: var(--wp--preset--font-family--heading, inherit);
	font-size: 1.3125rem;
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-align: center;
	transition: color 160ms ease;
}

/* Ikona je maska vyfarbená `currentColor`, takže sa sama prispôsobí svetlému
 * aj tmavému režimu a stavu položky. Neznáma položka dostane neutrálny bod,
 * takže riadky zostanú zarovnané aj po pridaní novej stránky do menu.
 */
.woodcnc-nav .is-menu-open .wp-block-navigation-item__content::before {
	content: "";
	flex: 0 0 auto;
	width: 1.375rem;
	height: 1.375rem;
	background-color: currentColor;
	opacity: 0.55;
	transition: opacity 160ms ease;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.5'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.5'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/produkty/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h7v7H4z'/><path d='M13 4h7v7h-7z'/><path d='M4 13h7v7H4z'/><path d='M13 13h7v7h-7z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 4h7v7H4z'/><path d='M13 4h7v7h-7z'/><path d='M4 13h7v7H4z'/><path d='M13 13h7v7h-7z'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/zariadenie-objektov/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v16'/><path d='M14 21V10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11'/><path d='M8 8h2'/><path d='M8 12h2'/><path d='M8 16h2'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V5a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v16'/><path d='M14 21V10a1 1 0 0 1 1-1h3a1 1 0 0 1 1 1v11'/><path d='M8 8h2'/><path d='M8 12h2'/><path d='M8 16h2'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/sluzby/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/design/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20h9'/><path d='M16.5 3.5a2.12 2.12 0 0 1 3 3L7 19l-4 1 1-4z'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/o-spolocnosti/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16v-4'/><path d='M12 8h.01'/><circle cx='12' cy='12' r='9'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 16v-4'/><path d='M12 8h.01'/><circle cx='12' cy='12' r='9'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content[href*="/kontakty/"]::before {
	-webkit-mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/><path d='M22 7l-10 7L2 7'/></svg>");
	mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2z'/><path d='M22 7l-10 7L2 7'/></svg>");
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content:hover,
.woodcnc-nav .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}

.woodcnc-nav .is-menu-open .wp-block-navigation-item__content:hover::before,
.woodcnc-nav .is-menu-open .wp-block-navigation-item__content:focus-visible::before {
	opacity: 1;
}

/* Stránka, na ktorej zákazník práve je. */
.woodcnc-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

.woodcnc-nav .is-menu-open .current-menu-item > .wp-block-navigation-item__content::before {
	opacity: 1;
}

/* Zatváracie tlačidlo bolo malé a nalepené na roh. */
.woodcnc-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	top: var(--wp--preset--spacing--20);
	right: var(--wp--preset--spacing--20);
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
}

/* Otvárací „hamburger“ v hlavičke – väčší cieľ na klik. */
.woodcnc-nav .wp-block-navigation__responsive-container-open {
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
}

/* `display` sa nastavuje len v mobilnom rozsahu. Jadro schováva otvárací
 * gombík pravidlom `…container-open:not(.always-shown){display:none}` v
 * `@media (min-width: 600px)`; rovnako špecifické pravidlo v theme.css by
 * ho prebilo (načíta sa neskôr) a na desktope by svietil hamburger aj menu.
 */
@media (max-width: 599px) {
	.woodcnc-nav .wp-block-navigation__responsive-container-open {
		display: grid;
	}
}

/* Položky sa po otvorení postupne vynoria – bez pohybu pôsobí prekrytie
 * cez celú obrazovku tvrdo.
 */
@media (prefers-reduced-motion: no-preference) {
	.woodcnc-nav .is-menu-open .wp-block-navigation-item {
		animation: woodcnc-menu-polozka 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
	}

	.woodcnc-nav .is-menu-open .wp-block-navigation-item:nth-child(2) {
		animation-delay: 40ms;
	}

	.woodcnc-nav .is-menu-open .wp-block-navigation-item:nth-child(3) {
		animation-delay: 80ms;
	}

	.woodcnc-nav .is-menu-open .wp-block-navigation-item:nth-child(4) {
		animation-delay: 120ms;
	}

	.woodcnc-nav .is-menu-open .wp-block-navigation-item:nth-child(5) {
		animation-delay: 160ms;
	}

	.woodcnc-nav .is-menu-open .wp-block-navigation-item:nth-child(n + 6) {
		animation-delay: 200ms;
	}
}

@keyframes woodcnc-menu-polozka {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------- Štýly tlačidiel ---------- */
.wp-block-button.is-style-outline-ink > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-outline-ink > .wp-block-button__link:hover,
.wp-block-button.is-style-outline-ink > .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link {
	background-color: transparent;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	color: inherit;
	padding: 0 0 0.5rem;
	font-weight: 500;
	transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link::after {
	content: "\00a0\00a0→";
	display: inline-block;
	transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: var(--wp--preset--color--accent);
}

.wp-block-button.is-style-link-arrow > .wp-block-button__link:hover::after {
	transform: translateX(4px);
}

/* ---------- Štýly obrázkov ---------- */
.wp-block-image.is-style-cover-4-3 img,
.wp-block-image.is-style-cover-3-4 img,
.wp-block-image.is-style-cover-16-9 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wp-block-image.is-style-cover-4-3 img {
	aspect-ratio: 4 / 3;
}

.wp-block-image.is-style-cover-3-4 img {
	aspect-ratio: 3 / 4;
}

/* Panoramatické fotky strojového parku (zdroje ~850 × 330–450 px). */
.wp-block-image.is-style-cover-16-9 img {
	aspect-ratio: 16 / 9;
}

/* ---------- Ostatné štýly blokov ---------- */
/* Vlasová linka funguje na akomkoľvek bloku (skupina, stĺpec, stĺpce, odstavec). */
.is-style-hairline-top {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Uzavretie posledného riadku zoznamu (napr. strojový park). */
.is-style-hairline-bottom {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--graphite);
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-divided > .wp-block-column + .wp-block-column {
		border-left: 1px solid var(--wp--preset--color--line);
		padding-left: var(--wp--preset--spacing--40);
	}
}

/* ---------- Pás čísel (vzor cisla.php) ----------
 * „2 800×2 070“ sa pri xx-large do štvrtiny šírky nezmestilo a lámalo sa na
 * „2 800×2 / 070“. Čísla sa nelámu a veľkosť berú zo šírky stĺpca (container
 * query), všetky štyri rovnako. Najdlhšie číslo má šírku 5,23 em, takže sa
 * zmestí do 19cqi – 18cqi necháva ~6 % rezervu. Presetová trieda má
 * `!important`, preto aj tu.
 */
.woodcnc-cisla > .wp-block-column {
	container-type: inline-size;
}

.woodcnc-cisla .woodcnc-cisla__hodnota {
	white-space: nowrap;
	font-size: min(var(--wp--preset--font-size--xx-large), 18cqi) !important;
}

/* ---------- Textové stránky ----------
 * Kuchyne, skrine, porez dosiek… sú obyčajný text bez navrhnutých sekcií.
 * H2 bez vlastnej veľkosti má z theme.json xx-large – rovnako ako H1 stránky,
 * takže text nemal hierarchiu. Platí len pre nadpisy priamo v obsahu
 * (navrhnuté sekcie majú nadpisy vnorené v skupinách, tých sa to netýka).
 */
.wp-block-post-content > h2.wp-block-heading:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: var(--wp--preset--spacing--50);
}

.wp-block-post-content > h3.wp-block-heading:not([class*="-font-size"]) {
	font-size: var(--wp--preset--font-size--large);
	margin-block-start: var(--wp--preset--spacing--40);
}

.wp-block-post-content > .wp-block-list > li + li {
	margin-top: 0.5em;
}

.wp-block-post-content > .wp-block-list > li::marker {
	color: var(--wp--preset--color--graphite);
}

/* ---------- Karty v mriežkach ---------- */
.woodcnc-card .wp-block-post-featured-image {
	overflow: hidden;
	background-color: var(--wp--preset--color--paper);
}

.woodcnc-card .wp-block-post-featured-image img {
	transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

.woodcnc-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.woodcnc-card .wp-block-post-title a {
	text-decoration: none;
}

/* ---------- Odkaz spať na archív ---------- */
.woodcnc-back a {
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-bottom: 1px solid transparent;
}

.woodcnc-back a:hover {
	border-bottom-color: currentColor;
}

/* ---------- Filtre v archívoch ---------- */
.woodcnc-filter p {
	margin: 0;
}

.woodcnc-filter a {
	display: inline-block;
	padding: 0.55rem 1.1rem;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	white-space: nowrap;
	transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.woodcnc-filter a:hover,
.woodcnc-filter a:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

/* Segment, v ktorom zákazník práve je – bez toho nebolo z filtra poznať,
 * čo je vyfiltrované.
 */
.woodcnc-filter a.is-aktivny {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	cursor: default;
}

/* Na mobile sa filter posúva do strany, nezalamuje sa do troch riadkov. */
@media (max-width: 600px) {
	.woodcnc-filter {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.25rem;
	}

	.woodcnc-filter::-webkit-scrollbar {
		display: none;
	}
}

/* ---------- Pätička ---------- */
.woodcnc-footer .woodcnc-footer-list {
	list-style: none;
	padding-left: 0;
}

.woodcnc-footer a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.woodcnc-footer a:hover {
	border-bottom-color: currentColor;
}

/* ---------- Formuláre ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="number"],
select,
textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 0.8rem 1rem;
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--accent);
}

.wp-block-search__button {
	border-radius: 0;
}

/* ---------- Prístupnosť ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

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

/* ---------- Responzívne odsadenie stránky ----------
 * WordPress 7.1 prijíma stavy @mobile/@tablet iba na blokoch, elementoch
 * a variáciách štýlov blokov – NIE na koreňovej úrovni `styles`. Bočné
 * odsadenie stránky sa preto rieši tu. Breakpoint zodpovedá
 * settings.viewport.mobile v theme.json.
 */
@media (max-width: 480px) {
	body {
		--wp--style--root--padding-left: var(--wp--preset--spacing--30);
		--wp--style--root--padding-right: var(--wp--preset--spacing--30);
	}
}

/* ---------- Scroll-reveal animácie ----------
 * Moderné CSS scroll-driven animácie (animation-timeline: view()).
 * Bez JavaScriptu, bežia na kompozítore (60 fps). Prehliadače bez
 * podpory jednoducho zobrazia obsah bez animácie – progresívne vylepšenie.
 * Jemný nábeh: obsah sa objaví a zľahka stúpne pri vstupe do viewportu.
 */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes woodcnc-reveal {
			from {
				opacity: 0;
				transform: translateY(24px);
			}
			to {
				opacity: 1;
				transform: translateY(0);
			}
		}

		/* Sekcie na celú šírku, karty, stĺpce, nadpisy, obrázky a tlačidlá */
		.wp-site-blocks .alignfull,
		.wp-site-blocks .alignwide > .wp-block-column,
		.wp-site-blocks .woodcnc-card,
		.wp-site-blocks main > .wp-block-group > .wp-block-heading,
		.wp-site-blocks .wp-block-columns:not(.woodcnc-header *) {
			animation: woodcnc-reveal both;
			animation-timeline: view();
			animation-range: entry 0% cover 22%;
		}

		/* Hero sa nemá skrývať – je nad ohybom a musí byť hneď vidno */
		.wp-site-blocks > header,
		.wp-site-blocks main > .wp-block-group > .wp-block-cover:first-child,
		.woodcnc-header,
		.woodcnc-footer {
			animation: none;
		}
	}
}

/* ---------- Jemné prechody na interaktívnych prvkoch ---------- */
.wp-block-button__link,
.wp-block-image img,
.woodcnc-footer a,
.woodcnc-nav a {
	transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		background-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 200ms cubic-bezier(0.4, 0, 0.2, 1),
		transform 400ms cubic-bezier(0.4, 0, 0.2, 1),
		opacity 200ms ease;
}

/* ---------- Tmavý režim (dark mode) ----------
 * Prepínač je v hlavičke (patterns/theme-toggle.php), logika v
 * assets/js/theme-toggle.js. Skript nastaví na <html> atribút
 * `data-theme="dark"|"light"`. Farby sú zhodné so štýlovou variáciou
 * styles/tmava.json, aby sa oba spôsoby prepnutia témy vizuálne kryli.
 *
 * WordPress generuje presety do `:root{…}`, takže `:root[data-theme="dark"]`
 * má vyššiu špecificitu a prepíše ich bez `!important`. Tým sa tmavý režim
 * prepíše celou témou naraz – vrátane theme.json, štýlov blokov aj pluginov,
 * ktoré (podľa CLAUDE.md) štýlujú cez tie isté premenné.
 */
:root[data-theme="dark"] {
	--wp--preset--color--base: #141311;
	--wp--preset--color--paper: #1E1D1A;
	--wp--preset--color--sand: #26241F;
	--wp--preset--color--clay: #8C877E;
	--wp--preset--color--line: #33312C;
	--wp--preset--color--graphite: #A8A39A;
	--wp--preset--color--ink: #F4F2EE;
	--wp--preset--color--accent: #D4703F;

	/* Prechod do pieskovej – v tmavom režime z pozadia stránky do tmavého piesku. */
	--wp--preset--gradient--sand-fade: linear-gradient(180deg, #141311 0%, #26241F 100%);

	/* Pôvodné tiene rgba(27,26,23,0.04–0.12) sú na tmavom pozadí neviditeľné,
	 * preto čierna s výrazne vyššou alfou.
	 */
	--wp--preset--shadow--soft: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.55);
	--wp--preset--shadow--lift: 0 12px 40px rgba(0, 0, 0, 0.65);

	/* --wp--preset--gradient--ink-veil sa NEPREPISUJE – je to tmavý závoj
	 * na fotku v hero a funguje rovnako v oboch režimoch.
	 */
}

/* ---------- Kontrastné (tmavé) pásy zostávajú tmavé ----------
 * Téma stavia tmavé pásy ako `has-ink-background-color` + text `has-base-color`
 * (hero cover, CTA, sub-pás v pätičke s BIELYM SVG logom). Keby sa ink a base
 * len prehodili, tieto pásy by v tmavom režime zosvetleli a biele logo by
 * zmizlo. Preto na nich premenné vraciame do svetlého významu: pás je o odtieň
 * tmavší než stránka (#0E0D0C) a obsah nad ním svetlý.
 *
 * `.has-ink-background-color` nastavuje `background-color: var(…--ink)`, takže
 * prepis premennej na tom istom elemente zmení aj jeho pozadie – to je zámer.
 * V hero je trieda na `.wp-block-cover__background`, ktorý je potomkom
 * `.wp-block-cover`, takže prepis na coveri sa naň zdedí.
 */
:root[data-theme="dark"] .wp-block-cover,
:root[data-theme="dark"] .has-ink-background-color {
	--wp--preset--color--base: #F4F2EE;
	--wp--preset--color--ink: #0E0D0C;
	--wp--preset--color--line: #35322C;
}

/* ---------- Logo v hlavičke ----------
 * Produkčné MVMSK logo je monochromatické SVG s `fill:#333333`
 * (assets/images/logo-mvm.svg) – na tmavom pozadí by bolo nečitateľné.
 * Pri monochromatickej kresbe je inverzia bezpečná: neprevráti žiadnu
 * značkovú farbu, len tmavú kresbu na svetlú.
 */
:root[data-theme="dark"] .wp-block-site-logo img,
:root[data-theme="dark"] .woodcnc-logo--mvmsk img {
	filter: invert(1);
}

/* MVMSK logo je vložené ako obrázok z témy (nie site-logo blok), aby bolo
 * rovnaké na teste aj na produkcii bez uploadu SVG do médií.
 */
.woodcnc-logo {
	margin: 0;
	line-height: 0;
}

.woodcnc-logo img {
	display: block;
	height: auto;
}

/* ---------- Obrázky ----------
 * Fotky sa v tmavom režime jemne stmavia, aby nesvietili z tmavej stránky.
 * `.wp-block-cover__image-background` sa NEupravuje – tam už je závoj ink-veil.
 */
:root[data-theme="dark"] .wp-block-image img,
:root[data-theme="dark"] .wp-block-post-featured-image img {
	filter: brightness(0.92);
}

/* ---------- Logotypy partnerov ----------
 * Každé logo je odkaz na oficiálny web dodávateľa. Odkaz nesmie meniť pokojný
 * vzhľad pásu, preto v základnom stave nepridáva nič – reaguje až pri hoveri
 * jemným stlmením. `display: block` odstráni medzeru pod obrázkom, ktorú by
 * inak spôsobila účiara riadku.
 */
.woodcnc-logos .wp-block-image a {
	display: block;
	transition: opacity 0.2s ease;
}

.woodcnc-logos .wp-block-image a:hover,
.woodcnc-logos .wp-block-image a:focus-visible {
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {

	.woodcnc-logos .wp-block-image a {
		transition: none;
	}
}

/* Logotypy partnerov sú monochromatické rastre s natvrdo bielym podkladom –
 * na tmavom pozadí by z nich zostali svietiace biele obdĺžniky. Inverziou sa
 * kresba zmení na svetlú a podklad na tmavý. Hodnota 0.92 (nie 1) je zvolená
 * tak, aby sa biely podklad preklopil presne na rgb(20,20,20), teda opticky
 * na pozadie stránky #141311 – obdĺžniky tak splynú a zostane len značka.
 * `mix-blend-mode: screen` by bol elegantnejší, ale sekcie majú scroll-reveal
 * animáciu, ktorá vytvára izolovanú vrstvu, takže by sa nemal s čím zmiešať.
 */
:root[data-theme="dark"] .woodcnc-logos .wp-block-image img {
	filter: invert(0.92);
}

/* Obrázky vnútri tmavých pásov (napr. biele SVG logo WoodCNC v pätičke)
 * sa nechávajú tak – sú kreslené priamo pre tmavý podklad.
 */
:root[data-theme="dark"] .has-ink-background-color .wp-block-image img,
:root[data-theme="dark"] .wp-block-cover .wp-block-image img {
	filter: none;
}

/* ---------- Tlačidlo prepínača režimu ---------- */
.woodcnc-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto; /* V hlavičke sa nesmie zmenšiť ani zalomiť pod hamburger. */
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0; /* Ostré hrany – dizajnové pravidlo témy. */
	background-color: transparent;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
		border-color 180ms cubic-bezier(0.4, 0, 0.2, 1),
		color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.woodcnc-theme-toggle:hover,
.woodcnc-theme-toggle:focus-visible {
	background-color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
}

.woodcnc-theme-toggle .woodcnc-icon {
	display: block;
	pointer-events: none; /* Klik vždy trafí <button>, nie SVG. */
}

/* Vo svetlom režime ponúkame prepnutie do tmy – ukazujeme mesiac,
 * v tmavom režime slnko.
 */
.woodcnc-theme-toggle .woodcnc-icon-sun {
	display: none;
}

:root[data-theme="dark"] .woodcnc-theme-toggle .woodcnc-icon-sun {
	display: block;
}

:root[data-theme="dark"] .woodcnc-theme-toggle .woodcnc-icon-moon {
	display: none;
}

/* ---------- Kóta pod nadpisom ----------
 * Drobná pripomienka toho, čím sa firma živí: kóta z technického výkresu –
 * vynášacie čiary, kótovacia čiara a šípky von. Kreslí ju SVG maska, nie
 * obrázok, takže farbu berie z presetu a v tmavom režime sa mení s ním.
 * Je to dekorácia, preto je mimo textového toku a čítačky ju nečítajú.
 */
.is-style-kota::after {
	content: "";
	display: block;
	width: 8.5rem;
	max-width: 60%;
	height: 0.75rem;
	margin-top: var(--wp--preset--spacing--20);
	background-color: var(--wp--preset--color--accent);
	-webkit-mask-image: var(--woodcnc-kota);
	mask-image: var(--woodcnc-kota);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: left center;
	mask-position: left center;
}

:root {
	--woodcnc-kota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='136' height='12' viewBox='0 0 136 12'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='1' height='12'/%3E%3Crect x='135' y='0' width='1' height='12'/%3E%3Crect x='1' y='5.5' width='134' height='1'/%3E%3Cpath d='M1 6 9 2.6V9.4z'/%3E%3Cpath d='M135 6 127 2.6V9.4z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Na atramentovom páse by terakota na tmavom stmavla – tam ide kóta do
 * pieskovej, rovnako ako nadtitulky.
 */
.has-ink-background-color .is-style-kota::after {
	background-color: var(--wp--preset--color--clay);
}

/* ---------- Technické kresby vedľa nadpisov ----------
 * Drobná kresba naľavo od nadpisu – skrinka s policami, obrys kraja s kotvou
 * na dielni a otáznik pri častých otázkach. Vypĺňa miesto, ktoré pri veľkých
 * nadpisoch vľavo zostávalo prázdne. Je to dekorácia, preto nejde do obsahu
 * ako obrázok, ale ako maska pseudoprvku: farbu berie z presetu (funguje teda
 * aj v tmavom režime), neťahá sa cez Médiá a stránka si pýta navyše len
 * ~0,4 kB SVG.
 */
/* Pružný rad tu nefunguje: text nadpisu je anonymná položka, ktorej základná
 * šírka je celá veta na jeden riadok, takže by sa zalomila pod kresbu.
 * Kresba preto stojí absolútne v odsadení, ktoré si nadpis vyhradí vľavo.
 */
.woodcnc-vykres {
	position: relative;
	padding-left: 6rem;
}

.woodcnc-vykres::before,
.woodcnc-ikona::before {
	content: "";
	background-color: var(--wp--preset--color--graphite);
	-webkit-mask-image: var(--woodcnc-vykres);
	mask-image: var(--woodcnc-vykres);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.woodcnc-vykres::before {
	position: absolute;
	top: 0.1em;
	left: 0;
	width: 4.5rem;
	height: 4.5rem;
}

/* Ikona nad nadpisom karty (napr. „Pracovná doska“ v mriežke) – tá istá
 * kresba ako pri veľkom nadpise, len menšia a nad textom.
 */
.woodcnc-ikona::before {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* Kresba sa vyberá triedou `woodcnc-vykres--<názov>`: nastaví len premennú,
 * takže ju použije nadpis s kresbou aj ikona karty. Vždy kresba k téme
 * nadpisu – sekcia o materiáloch dosky, o postupe meter, o cene rozpis.
 */
.woodcnc-vykres--skrinka { --woodcnc-vykres: url("../images/vykres-skrinka.svg"); }
.woodcnc-vykres--mapa { --woodcnc-vykres: url("../images/vykres-mapa.svg"); }
.woodcnc-vykres--otaznik { --woodcnc-vykres: url("../images/vykres-otaznik.svg"); }
.woodcnc-vykres--kuchyna { --woodcnc-vykres: url("../images/vykres-kuchyna.svg"); }
.woodcnc-vykres--pila { --woodcnc-vykres: url("../images/vykres-pila.svg"); }
.woodcnc-vykres--rez { --woodcnc-vykres: url("../images/vykres-rez.svg"); }
.woodcnc-vykres--dekor { --woodcnc-vykres: url("../images/vykres-dekor.svg"); }
.woodcnc-vykres--meter { --woodcnc-vykres: url("../images/vykres-meter.svg"); }
.woodcnc-vykres--cena { --woodcnc-vykres: url("../images/vykres-cena.svg"); }
.woodcnc-vykres--doska { --woodcnc-vykres: url("../images/vykres-doska.svg"); }
.woodcnc-vykres--pant { --woodcnc-vykres: url("../images/vykres-pant.svg"); }
.woodcnc-vykres--ostrov { --woodcnc-vykres: url("../images/vykres-ostrov.svg"); }
.woodcnc-vykres--celo { --woodcnc-vykres: url("../images/vykres-celo.svg"); }
.woodcnc-vykres--vysoka { --woodcnc-vykres: url("../images/vykres-vysoka.svg"); }
.woodcnc-vykres--vizualizacia { --woodcnc-vykres: url("../images/vykres-vizualizacia.svg"); }
.woodcnc-vykres--vykres { --woodcnc-vykres: url("../images/vykres-vykres.svg"); }
.woodcnc-vykres--interier { --woodcnc-vykres: url("../images/vykres-interier.svg"); }
.woodcnc-vykres--galeria { --woodcnc-vykres: url("../images/vykres-galeria.svg"); }
.woodcnc-vykres--postel { --woodcnc-vykres: url("../images/vykres-postel.svg"); }
.woodcnc-vykres--stol { --woodcnc-vykres: url("../images/vykres-stol.svg"); }
.woodcnc-vykres--narez { --woodcnc-vykres: url("../images/vykres-narez.svg"); }
.woodcnc-vykres--hala { --woodcnc-vykres: url("../images/vykres-hala.svg"); }
.woodcnc-vykres--paleta { --woodcnc-vykres: url("../images/vykres-paleta.svg"); }
.woodcnc-vykres--frezka { --woodcnc-vykres: url("../images/vykres-frezka.svg"); }
.woodcnc-vykres--stav { --woodcnc-vykres: url("../images/vykres-stav.svg"); }
.woodcnc-vykres--telefon { --woodcnc-vykres: url("../images/vykres-telefon.svg"); }
.woodcnc-vykres--casova-os { --woodcnc-vykres: url("../images/vykres-casova-os.svg"); }
.woodcnc-vykres--znacky { --woodcnc-vykres: url("../images/vykres-znacky.svg"); }
.woodcnc-vykres--vesiak { --woodcnc-vykres: url("../images/vykres-vesiak.svg"); }
.woodcnc-vykres--satnik { --woodcnc-vykres: url("../images/vykres-satnik.svg"); }
.woodcnc-vykres--sikmina { --woodcnc-vykres: url("../images/vykres-sikmina.svg"); }
.woodcnc-vykres--schody { --woodcnc-vykres: url("../images/vykres-schody.svg"); }
.woodcnc-vykres--posuvne { --woodcnc-vykres: url("../images/vykres-posuvne.svg"); }
.woodcnc-vykres--zrkadlo { --woodcnc-vykres: url("../images/vykres-zrkadlo.svg"); }
.woodcnc-vykres--recepcia { --woodcnc-vykres: url("../images/vykres-recepcia.svg"); }
.woodcnc-vykres--mdf { --woodcnc-vykres: url("../images/vykres-mdf.svg"); }
.woodcnc-vykres--preglejka { --woodcnc-vykres: url("../images/vykres-preglejka.svg"); }
.woodcnc-vykres--masiv { --woodcnc-vykres: url("../images/vykres-masiv.svg"); }
.woodcnc-vykres--hrana { --woodcnc-vykres: url("../images/vykres-hrana.svg"); }
.woodcnc-vykres--vrtanie { --woodcnc-vykres: url("../images/vykres-vrtanie.svg"); }
.woodcnc-vykres--etiketa { --woodcnc-vykres: url("../images/vykres-etiketa.svg"); }
.woodcnc-vykres--zamok { --woodcnc-vykres: url("../images/vykres-zamok.svg"); }
.woodcnc-vykres--tabulka { --woodcnc-vykres: url("../images/vykres-tabulka.svg"); }

/* Menší nadpis (x-large) – menšia kresba, aby nebola väčšia než text. */
.woodcnc-vykres.has-x-large-font-size {
	padding-left: 4.75rem;
}

.woodcnc-vykres.has-x-large-font-size::before {
	width: 3.5rem;
	height: 3.5rem;
	top: 0;
}

@media (max-width: 600px) {
	.woodcnc-vykres {
		padding-left: 4.25rem;
	}

	.woodcnc-vykres::before {
		width: 3.25rem;
		height: 3.25rem;
	}
}

/* Na fotke v hero (cover) by terakotová aj piesková kóta zanikla – berie
 * farbu písma nadpisu (biela na fotke), takže je vidieť vždy.
 */
.wp-block-cover .is-style-kota::after {
	background-color: currentColor;
}

/* ---------- 3D náčrt s kótami (vzor nacrt-kuchyna.php) ----------
 * Inline SVG: čiary berú farbu z `currentColor` (graphite), kóty a šípky
 * z akcentu, popisy z mono písma témy – v tmavom režime sa prepne samo.
 */
.woodcnc-nacrt {
	margin: 0;
	color: var(--wp--preset--color--graphite);
}

.woodcnc-nacrt svg {
	display: block;
	width: 100%;
	height: auto;
}

.woodcnc-nacrt .nacrt-kota {
	stroke: var(--wp--preset--color--accent);
}

.woodcnc-nacrt .nacrt-sipka {
	fill: var(--wp--preset--color--accent);
}

.woodcnc-nacrt text {
	fill: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	letter-spacing: 0.02em;
}

/* Plochy, ktoré zakrývajú čiary za sebou (ostrov pred linkou) – farba
 * stránky, takže v tmavom režime sú tmavé.
 */
.woodcnc-nacrt .nacrt-plocha {
	fill: var(--wp--preset--color--base);
}

.woodcnc-nacrt .nacrt-peciatka text,
.woodcnc-nacrt .nacrt-maly {
	font-size: 12px;
	fill: var(--wp--preset--color--graphite);
}

/* Na mobile sa náčrt zmenší asi na polovicu – popisy kót by mali ~7 px.
 * Rohová pečiatka by sa pri väčšom písme nezmestila, tak ide preč.
 */
@media (max-width: 600px) {
	.woodcnc-nacrt text {
		font-size: 24px;
	}

	.woodcnc-nacrt .nacrt-peciatka {
		display: none;
	}
}

/* Zoznam pri náčrte (ergonómia) – vzduch medzi bodmi, odrážky v graphite. */
.woodcnc-zoznam {
	padding-left: 1.1em;
}

.woodcnc-zoznam li + li {
	margin-top: 0.6em;
}

.woodcnc-zoznam li::marker {
	color: var(--wp--preset--color--accent);
}

.woodcnc-nacrt figcaption {
	margin-top: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--graphite);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Ukážka konfigurátora (stránka Online nárezový plán) ----------
 *
 * Zadanie znelo „video alebo GIF, ale nech to nezdrží stránku". Namiesto videa
 * sa striedajú tri skutočné snímky konfigurátora (WebP, 32–34 kB na kus)
 * s vlastnými popismi. Prelínanie aj kurzor robí CSS – žiadny prehrávač,
 * žiadny JavaScript, žiadny ďalší request navyše.
 *
 * Snímky sa striedajú tvrdým strihom, nie prelínaním – prelínanie cez dve
 * svetlé snímky vyzeralo, akoby sa obrázok prekresľoval. Okná sú preto presné
 * tretiny bez prekryvu aj bez medzery.
 *
 * Slučka trvá 12 s, každá snímka má štyri sekundy:
 *   0–4 s   zadané rozmery a dekor
 *   4–8 s   dielec otočený ťahaním myšou
 *   8–12 s  kurzor klikne na hranu dielca a hrana sa olepí
 *
 * Snímky ležia na sebe v jednej bunke mriežky, takže sa neposúvajú a výška
 * je daná najvyššou z nich.
 */
.woodcnc-ukazka {
	position: relative;
	display: grid;
	border: 1px solid var(--wp--preset--color--line);
}

.woodcnc-ukazka > .wp-block-image {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	animation: woodcnc-ukazka-snimka 12s step-end infinite;
}

/* Záporné oneskorenie posunie snímku v slučke – druhá nabieha v 4. sekunde,
 * tretia v 8.
 */
.woodcnc-ukazka > .wp-block-image:nth-child(2) {
	animation-delay: -8s;
}

.woodcnc-ukazka > .wp-block-image:nth-child(3) {
	animation-delay: -4s;
}

.woodcnc-ukazka > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.woodcnc-ukazka > .wp-block-image figcaption {
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	text-align: left;
	background: var(--wp--preset--color--paper);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Kurzor mieri na čelnú hranu dielca – teda na jeho bok, nie na pohľadovú
 * plochu. Klikne tesne pred tým, ako nabehne snímka s olepenou hranou.
 */
.woodcnc-ukazka::after {
	content: "";
	position: absolute;

	/* Súradnice mieria na bok dielca v snímke – doska je v nej na 23–35 %
	 * šírky a 39–62 % výšky obrázka, pričom pod obrázkom je ešte popis.
	 * Záporný okraj posunie stred bodky presne na tento bod.
	 */
	top: 42%;
	left: 24%;
	margin: -0.375rem 0 0 -0.375rem;
	z-index: 2;
	width: 0.75rem;
	height: 0.75rem;
	background: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--base);
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
	opacity: 0;
	animation: woodcnc-ukazka-kurzor 12s infinite;
}

@keyframes woodcnc-ukazka-snimka {
	0% { opacity: 1; }
	33.333% { opacity: 1; }
	33.334% { opacity: 0; }
	100% { opacity: 0; }
}

/* Kurzor príde nad druhou snímkou a klikne presne vo chvíli, keď ju vystrieda
 * tretia s olepenou hranou (66,7 % slučky).
 */
@keyframes woodcnc-ukazka-kurzor {
	0%, 42% { opacity: 0; transform: translate(4.5rem, 3.5rem) scale(1); }
	47% { opacity: 1; transform: translate(4.5rem, 3.5rem) scale(1); }
	63% { opacity: 1; transform: translate(0, 0) scale(1); }
	66% { opacity: 1; transform: translate(0, 0) scale(0.5); }
	69% { opacity: 1; transform: translate(0, 0) scale(1); }
	78%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
}

/* Bez animácií sa snímky vrátia pod seba a sú vidieť všetky tri naraz. */
@media (prefers-reduced-motion: reduce) {
	.woodcnc-ukazka > .wp-block-image {
		grid-area: auto;
		opacity: 1;
		animation: none;
	}

	.woodcnc-ukazka::after {
		display: none;
	}
}

/* ---------- Konfigurátor porezu (plugin mvmsk-porez-form) ----------
 *
 * Plugin štýluje cez presetové premenné témy, takže tmavý režim funguje sám.
 * Kreslí však rámčeky polí a sekundárnych tlačidiel farbou `line`, ktorá je
 * na bielej stránke takmer neviditeľná – formulár potom pôsobí ako holý text.
 * Tu preto len dvíhame kontrast; farby ostávajú presetové, nič natvrdo.
 *
 * `theme.css` sa načítava až za CSS pluginu, takže na prepis stačí rovnaká
 * špecificita a netreba `!important`.
 */

/* Odvodené odtiene – rámček na pomedzí `line` a `graphite`. Na svetlej
 * stránke vyjde stredná sivá (kontrast ~3,4 : 1, teda nad hranicou WCAG
 * 1.4.11 pre ovládacie prvky), v tmavom režime sa počíta z tmavých presetov.
 */
.mvmsk-porez {
	--woodcnc-pole-ramec: color-mix(in srgb, var(--wp--preset--color--graphite) 55%, var(--wp--preset--color--base));
	--woodcnc-pole-ramec-tlmeny: color-mix(in srgb, var(--wp--preset--color--graphite) 32%, var(--wp--preset--color--base));

	/* Sticky hlavička prekrýva kotvu `#narezovy-plan`. */
	scroll-margin-top: 6rem;

	/* Plugin roztiahne formulár na 1400 px; pri takej šírke je riadok polí
	 * neprehľadný a dielec v náhľade zbytočne malý voči prázdnu vedľa neho.
	 */
	width: min(1180px, max(100%, calc(100vw - 3rem)));
}

.mvmsk-porez__form input[type="text"],
.mvmsk-porez__form input[type="email"],
.mvmsk-porez__form input[type="tel"],
.mvmsk-porez__form input[type="number"],
.mvmsk-porez__form input[type="file"],
.mvmsk-porez__form select,
.mvmsk-porez__form textarea {
	border-color: var(--woodcnc-pole-ramec);
}

/* Popisky polí sú v `graphite`; pološirokým rezom sa oddelia od pomocných
 * textov pod poľom, ktoré majú rovnakú farbu.
 */
.mvmsk-porez__form label,
.mvmsk-porez__form .edge-fieldset legend {
	color: var(--wp--preset--color--ink);
	font-weight: 500;
}

.mvmsk-porez__form .mvmsk-hint,
.mvmsk-porez small {
	font-weight: 400;
}

/* Karta dielca aj rám náhľadu potrebujú viditeľnú hranu – bez nej na bielej
 * stránke splynú a nie je poznať, kde jeden dielec končí.
 */
.panel-item,
.mvmsk-nahlad {
	border-color: var(--woodcnc-pole-ramec-tlmeny);
}

/* Panel s hranami býva vyšší než scéna a pod scénou tak zostávalo prázdne
 * biele pásmo. Scéna dorastie do výšky riadku, dielec zostane v jej strede.
 */
.mvmsk-nahlad__scena {
	display: flex;
}

.mvmsk-nahlad__scena .mvmsk-scena {
	flex: 1 1 auto;
}

/* Sekundárne akcie (duplikovať, odstrániť, hromadná hrana) mali rámček aj
 * text v najsvetlejšom odtieni – vyzerali ako vypnuté tlačidlá.
 */
.mvmsk-porez__form .edge-all-btn,
.mvmsk-porez__form .duplicate-item-btn,
.mvmsk-porez__form .remove-item-btn {
	color: var(--wp--preset--color--ink);
	border-color: var(--woodcnc-pole-ramec);
}

.mvmsk-porez__form .edge-all-btn:hover,
.mvmsk-porez__form .duplicate-item-btn:hover,
.mvmsk-porez__form .remove-item-btn:hover {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Hlavné CTA formulára je rovnaké ako terakotové tlačidlá na stránke –
 * z celého sivo-bieleho formulára tak vystúpi jediná akcia.
 */
.mvmsk-porez__form .submit-btn {
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.mvmsk-porez__form .submit-btn:hover:not(:disabled) {
	background: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}

/* Nadpisy sekcií formulára nesú rovnaký vlások ako sekcie na stránke. */
.mvmsk-porez__form section {
	border-top-color: var(--woodcnc-pole-ramec-tlmeny);
}

/* Poistka, keby sa niekedy odhlásili štýly bloku core – WordPress ju síce
 * dodáva vo front-endovom CSS, v editore však nemusí byť.
 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	word-wrap: normal !important;
}