/**
 * Pixeler Theme — tokeny, základ elementov, tlačidlá, kontajner a hlavička
 * stránky (omrvinky + H1).
 *
 * Všetky tokeny --pc-* sú tu, na :root (jediné miesto). Child téma ich
 * prepíše a preladí celý web; nové pravidlá siahajú po tokenoch, nie po
 * konkrétnych hodnotách. Farby sú RGB kanály: `rgb(var(--pc-accent))`,
 * s priehľadnosťou `rgb(var(--pc-ink) / 0.1)`.
 *
 * Tokeny sú prevzaté z px-shop-theme (rovnaké mená aj predvolené hodnoty);
 * obchodné (dostupnosť, mriežka produktov, sticky lišta košíka) vypadli.
 * Nové oproti px-shop-theme: --pc-gutter, --pc-content, --pc-wide,
 * --pc-space-section, --pc-fs-5xl, --pc-fs-6xl, --pc-font-body,
 * --pc-font-display, --pc-muted-on-dark, pohyb --pc-dur-* / --pc-ease-out
 * / --pc-reveal-shift (0.2.0).
 *
 * Breakpointy ako px-shop-theme: mobil < 640, tablet 640–1023,98,
 * desktop ≥ 1024 (hlavné menu v pruhu hlavičky).
 */

:root {
	/* Farby */
	--pc-paper: 255 255 255;
	--pc-card: 255 255 255;
	--pc-ink: 10 31 51;              /* #0A1F33 — 16,7:1 na bielej */
	--pc-accent: 17 104 155;         /* #11689B — biela na ňom 6,0:1 */
	--pc-accent-deep: 13 82 122;     /* #0D527A — hover, odkazy, fokus */
	--pc-accent-bright: 69 201 245;  /* svetlý akcent na tmavé plochy */
	--pc-secondary: 220 38 38;
	--pc-secondary-deep: 185 28 28;
	--pc-soft: 244 246 247;
	--pc-sunk: 238 242 246;          /* zapustená plocha — pás omrviniek */
	--pc-line: 224 230 237;          /* deliace čiary (nie rám poľa) */
	--pc-muted: 84 98 115;           /* #546273 — 6,2:1 na bielej */
	--pc-muted-on-dark: 154 166 178; /* #9AA6B2 — 6,7:1 na --pc-ink */
	--pc-topbar-text: 135 148 163;   /* #8794A3 — 5,4:1 na --pc-ink */
	--pc-on-accent: 255 255 255;
	--pc-on-secondary: 255 255 255;

	/* Rám formulárového poľa — 3:1 voči podkladu (WCAG 1.4.11). */
	--pc-field-border: 130 142 156;

	/* Stavové farby (hlásenia formulárov, chyby polí) — sémantika, nie brand. */
	--pc-success: 4 120 87;
	--pc-success-tint: 236 253 245;
	--pc-danger: 220 38 38;
	--pc-danger-tint: 254 242 242;
	--pc-danger-ink: 69 10 10;
	--pc-warning: 180 83 9;
	--pc-warning-tint: 255 251 235;
	--pc-info: 29 78 216;
	--pc-info-tint: 239 246 255;

	/* Fokusový prstenec — najtmavší stupeň palety, aby mal kontrast voči
	   podkladu (WCAG 1.4.11). Tmavá plocha si token prepíše
	   (`--pc-focus: var(--pc-accent-bright)`), pravidlá ostávajú. */
	--pc-focus: var(--pc-accent-deep);

	/* Šírky: kontajner VRÁTANE okrajov (hlavička, pätička, výpisy),
	   textový stĺpec obsahu a široký blok (= kontajner bez okrajov).
	   `--pc-content` a `--pc-wide` čítajú theme.json (contentSize, wideSize). */
	--pc-container: 80rem;
	--pc-gutter: 1rem;
	--pc-content: 48rem;
	--pc-wide: calc(var(--pc-container) - 2 * var(--pc-gutter));

	/* Písmo — parent stojí na systémovom písme (nič sa nesťahuje),
	   child dodá @font-face v assets/css/fonts.css a prepíše tieto dva. */
	--pc-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--pc-font-display: var(--pc-font-body);

	/* Polomery — jedna stupnica pre celú tému.
	     xs  drobnosti (čipy, fokus rámik)
	     sm  náhľady, malé karty, kompaktné ovládače
	     —   karty, panely, polia (predvolený)
	     lg  veľké plochy (panely)
	     xl  hero a obrazové bloky
	     pill  pilulky */
	--pc-radius-xs: 0.35rem;
	--pc-radius-sm: 0.5rem;
	--pc-radius: 0.75rem;
	--pc-radius-lg: 1rem;
	--pc-radius-xl: 1.5rem;
	--pc-radius-pill: 9999px;
	--pc-radius-control: var(--pc-radius-pill);
	--pc-radius-field: var(--pc-radius);

	/* Typografia */
	--pc-fs-3xs: 0.6875rem;  /* 11 px */
	--pc-fs-2xs: 0.75rem;    /* 12 px */
	--pc-fs-xs: 0.8125rem;   /* 13 px */
	--pc-fs-sm: 0.875rem;    /* 14 px */
	--pc-fs-md: 0.9375rem;   /* 15 px */
	--pc-fs-base: 1rem;      /* 16 px */
	--pc-fs-lg: 1.125rem;    /* 18 px */
	--pc-fs-xl: 1.25rem;     /* 20 px */
	--pc-fs-2xl: 1.375rem;   /* 22 px */
	--pc-fs-3xl: 1.5rem;     /* 24 px */
	--pc-fs-4xl: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);   /* nadpis sekcie 28 → 36 px */
	--pc-fs-5xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);  /* 30 → 44 px */
	--pc-fs-6xl: clamp(2.25rem, 1.5rem + 2.8vw, 3.875rem);  /* H1 hero 36 → 62 px */

	/* Rozostupy — číslo = počet štvrtín rem. */
	--pc-space-1: 0.25rem;
	--pc-space-2: 0.5rem;
	--pc-space-3: 0.75rem;
	--pc-space-4: 1rem;
	--pc-space-5: 1.25rem;
	--pc-space-6: 1.5rem;
	--pc-space-7: 1.75rem;
	--pc-space-8: 2rem;
	--pc-space-10: 2.5rem;
	--pc-space-12: 3rem;
	--pc-space-16: 4rem;
	--pc-space-section: clamp(3.5rem, 2rem + 5vw, 7rem); /* zvislý odstup sekcií 56 → 112 px */

	/* Tiene — tónované textovou farbou. */
	--pc-shadow-sm: 0 1px 4px rgb(var(--pc-ink) / 0.1);
	--pc-shadow-md: 0 6px 16px -8px rgb(var(--pc-ink) / 0.18);
	--pc-shadow-lg: 0 10px 24px -14px rgb(var(--pc-ink) / 0.28);
	--pc-shadow-xl: 0 25px 50px -12px rgb(var(--pc-ink) / 0.2);
	--pc-shadow-dropdown: 0 12px 30px -12px rgb(var(--pc-ink) / 0.3);

	/* Vrstvy (z-index) */
	--pc-z-dropdown: 10;
	--pc-z-header: 990;
	--pc-z-overlay: 1000;
	--pc-z-drawer: 1020;
	--pc-z-toast: 2000;
	--pc-z-modal: 10000;

	/* Pohyb — prechody farieb/tieňov (fast), hover kariet (base), zobrazenie
	   sekcie pri scrollovaní (reveal). Pri prefers-reduced-motion ich
	   blok OMEDZENÝ POHYB nižšie zruší. */
	--pc-dur-fast: 150ms;
	--pc-dur: 200ms;
	--pc-dur-reveal: 450ms;
	--pc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--pc-reveal-shift: 14px;
	--pc-reveal-step: 80ms;

	/* Predvoľby blokového editora (theme.json) idú za tokenmi — paleta
	   v theme.json nesie hex len kvôli vzorkám vo výbere farby, hodnotu na
	   fronte aj v editore určuje token. Child mení token, nie theme.json. */
	--wp--preset--color--ink: rgb(var(--pc-ink));
	--wp--preset--color--muted: rgb(var(--pc-muted));
	--wp--preset--color--accent: rgb(var(--pc-accent));
	--wp--preset--color--accent-deep: rgb(var(--pc-accent-deep));
	--wp--preset--color--secondary: rgb(var(--pc-secondary));
	--wp--preset--color--soft: rgb(var(--pc-soft));
	--wp--preset--color--line: rgb(var(--pc-line));
	--wp--preset--color--paper: rgb(var(--pc-paper));
}

/* To isté s vyššou váhou (0,1,1) — globálne štýly WordPressu (`:root`
   s hex hodnotami z theme.json) idú v klasickej téme niekedy až do
   pätičky (napr. keď Elementor vypne presun do <head>) a prebili by
   mapovanie poradím. V editore platí blok vyššie (prefixuje sa na
   `.editor-styles-wrapper`). */
html:root {
	--wp--preset--color--ink: rgb(var(--pc-ink));
	--wp--preset--color--muted: rgb(var(--pc-muted));
	--wp--preset--color--accent: rgb(var(--pc-accent));
	--wp--preset--color--accent-deep: rgb(var(--pc-accent-deep));
	--wp--preset--color--secondary: rgb(var(--pc-secondary));
	--wp--preset--color--soft: rgb(var(--pc-soft));
	--wp--preset--color--line: rgb(var(--pc-line));
	--wp--preset--color--paper: rgb(var(--pc-paper));
}

@media (min-width: 640px) {
	:root {
		--pc-gutter: 1.5rem;
	}
}

@media (min-width: 1024px) {
	:root {
		--pc-gutter: 2rem;
	}
}

/* =========================================================================
   ZÁKLAD ELEMENTOV — všetko v :where(), špecificita 0: ktorékoľvek pravidlo
   s triedou ho prebije bez !important.
   ========================================================================= */

:where(html) {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

:where(body) {
	margin: 0;
	background: rgb(var(--pc-paper));
	color: rgb(var(--pc-ink));
	font-family: var(--pc-font-body);
	font-size: var(--pc-fs-base);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

:where(*, *::before, *::after) {
	box-sizing: border-box;
}

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0 0 0.5em;
	font-family: var(--pc-font-display);
	font-weight: 700;
	line-height: 1.2;
	color: inherit;
	text-wrap: balance;
}

:where(h1) { font-size: var(--pc-fs-5xl); line-height: 1.1; }
:where(h2) { font-size: var(--pc-fs-4xl); }
:where(h3) { font-size: var(--pc-fs-xl); }
:where(h4) { font-size: var(--pc-fs-lg); }
:where(h5, h6) { font-size: var(--pc-fs-base); }

:where(p) { margin: 0 0 var(--pc-space-4); }

:where(a) {
	color: rgb(var(--pc-accent-deep));
	text-underline-offset: 0.2em;
}

:where(a:hover) {
	text-decoration-thickness: 2px;
}

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

:where(hr) {
	margin: var(--pc-space-8) 0;
	border: 0;
	border-top: 1px solid rgb(var(--pc-line));
}

:where(table) { border-collapse: collapse; }

:where(address) { font-style: normal; }

/* Fokus — jeden prstenec pre celý web (WCAG 2.4.7). */
:where(a, button, summary, [tabindex]):focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: 2px;
}

/* Formulárové polia — spoločný základ (aj polia pluginov). */
:where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="password"],
	input[type="number"],
	input[type="search"],
	input[type="date"],
	select,
	textarea
) {
	max-width: 100%;
	min-height: 2.75rem;
	padding: 0.65rem var(--pc-space-4);
	border: 1px solid rgb(var(--pc-field-border));
	border-radius: var(--pc-radius-field);
	background: rgb(var(--pc-paper));
	font-family: inherit;
	font-size: var(--pc-fs-base);
	line-height: 1.4;
	color: rgb(var(--pc-ink));
	transition: border-color var(--pc-dur-fast) ease, box-shadow var(--pc-dur-fast) ease;
}

:where(input:focus-visible, select:focus-visible, textarea:focus-visible) {
	outline: 2px solid transparent;
	border-color: rgb(var(--pc-focus));
	box-shadow: 0 0 0 1px rgb(var(--pc-focus));
}

:where(textarea) {
	min-height: 7rem;
	resize: vertical;
}

:where(input, select, textarea)::placeholder {
	color: rgb(var(--pc-muted));
	opacity: 1;
}

:where(input[type="checkbox"], input[type="radio"]) {
	accent-color: rgb(var(--pc-accent));
}

:where(button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.65rem var(--pc-space-6);
	border: 1px solid transparent;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-family: inherit;
	font-size: var(--pc-fs-base);
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
}

:where(button[type="submit"]:hover, input[type="submit"]:hover) {
	background: rgb(var(--pc-accent-deep));
}

/* Imagify <picture> obal mimo layoutu (ako v px-shop-theme). */
:where(picture) {
	display: contents;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed !important;
	top: 0.5rem;
	left: 0.5rem;
	z-index: var(--pc-z-toast);
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	padding: var(--pc-space-3) var(--pc-space-5);
	background: rgb(var(--pc-card));
	color: rgb(var(--pc-ink));
	font-weight: 600;
	border-radius: var(--pc-radius-sm);
	box-shadow: var(--pc-shadow-xl);
}

/* =========================================================================
   KONTAJNER
   ========================================================================= */

.px-container {
	width: 100%;
	max-width: var(--pc-container);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--pc-gutter);
	padding-right: var(--pc-gutter);
}

.px-container--narrow {
	max-width: calc(var(--pc-content) + 2 * var(--pc-gutter));
}

/* Výpisy, vyhľadávanie, 404 — kontajner so zvislým odstupom. */
.px-theme-content {
	padding-top: var(--pc-space-8);
	padding-bottom: var(--pc-space-16);
}

/* =========================================================================
   TLAČIDLÁ `.pc-btn` (rovnaká definícia ako px-shop-theme)
   ========================================================================= */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem; /* 44 px — dotykový cieľ (WCAG 2.5.5) */
	padding: 0.6rem var(--pc-space-6);
	border: 1px solid transparent;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
	font-family: inherit;
	font-size: var(--pc-fs-base);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--pc-dur-fast) ease, border-color var(--pc-dur-fast) ease, color var(--pc-dur-fast) ease;
}

.pc-btn:hover {
	background: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-on-accent));
}

.pc-btn--primary {
	background: rgb(var(--pc-accent));
	color: rgb(var(--pc-on-accent));
}

.pc-btn--primary:hover {
	background: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-on-accent));
}

.pc-btn--outline {
	background: transparent;
	border-color: rgb(var(--pc-ink) / 0.25);
	color: rgb(var(--pc-ink));
}

.pc-btn--outline:hover {
	background: transparent;
	border-color: rgb(var(--pc-accent-deep));
	color: rgb(var(--pc-accent-deep));
}

.pc-btn--ghost {
	background: transparent;
	color: rgb(var(--pc-accent-deep));
}

.pc-btn--ghost:hover {
	background: rgb(var(--pc-accent) / 0.08);
	color: rgb(var(--pc-accent-deep));
}

.pc-btn--sm {
	padding: 0.4rem var(--pc-space-4);
	font-size: var(--pc-fs-sm);
}

.pc-btn--lg {
	min-height: 3.25rem;
	padding: var(--pc-space-3) var(--pc-space-8);
}

.pc-btn:focus-visible {
	outline: 2px solid rgb(var(--pc-focus));
	outline-offset: 3px;
}

.pc-btn .px-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
}

/* Inline ikona rámca (pxt_header_icon) */
.px-icon {
	width: 1.125rem;
	height: 1.125rem;
	flex-shrink: 0;
	vertical-align: middle;
}

/* =========================================================================
   HLAVIČKA STRÁNKY — pás s omrvinkami a nadpis
   ========================================================================= */

.px-page-header {
	border-bottom: 1px solid rgb(var(--pc-line));
	background: rgb(var(--pc-sunk));
}

.px-page-header__inner {
	padding-top: 0.875rem;
	padding-bottom: 0.875rem;
}

.px-page-header--narrow .px-page-header__inner,
.px-page-title--narrow .px-page-title__inner {
	max-width: calc(var(--pc-content) + 2 * var(--pc-gutter));
}

.px-page-title__inner {
	padding-top: var(--pc-space-8);
	padding-bottom: var(--pc-space-2);
}

@media (min-width: 1024px) {
	.px-page-title__inner {
		padding-top: var(--pc-space-12);
	}
}

.px-page-title__heading {
	margin: 0;
	font-size: var(--pc-fs-5xl);
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.px-page-title__meta {
	margin: var(--pc-space-3) 0 0;
	font-size: var(--pc-fs-sm);
	color: rgb(var(--pc-muted));
}

.px-page-title__description {
	margin-top: var(--pc-space-3);
	max-width: var(--pc-content);
	font-size: var(--pc-fs-lg);
	color: rgb(var(--pc-muted));
}

.px-page-title__description p {
	margin: 0;
}

/* Omrvinky (Yoast) */
.px-breadcrumbs {
	font-size: var(--pc-fs-sm);
	line-height: 1.5;
	color: rgb(var(--pc-muted));
}

.px-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.px-breadcrumbs a:hover {
	color: rgb(var(--pc-accent-deep));
	text-decoration: underline;
}

.px-breadcrumbs .breadcrumb_last {
	color: rgb(var(--pc-ink));
	font-weight: 500;
}

.px-breadcrumbs__sep {
	margin: 0 0.45rem;
	opacity: 0.45;
}

/* Dlhá cesta na mobile v jednom riadku, posúvanie prstom. */
@media (max-width: 899.98px) {
	.px-breadcrumbs {
		white-space: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.px-breadcrumbs::-webkit-scrollbar {
		display: none;
	}
}

@media (pointer: coarse) {
	.px-breadcrumbs a {
		display: inline-flex;
		align-items: center;
		min-height: 2.75rem;
	}
}

/* =========================================================================
   VYHĽADÁVACÍ FORMULÁR (searchform.php)
   ========================================================================= */

.px-searchform {
	display: flex;
	gap: var(--pc-space-2);
	max-width: 36rem;
	margin: 0 0 var(--pc-space-6);
}

.px-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
}

/* =========================================================================
   ZOBRAZENIE PRI SCROLLOVANÍ (assets/js/reveal.js, voliteľné)
   Triedu .pc-reveal pridáva až skript a len prvkom pod prvou obrazovkou -
   bez JS, pri prefers-reduced-motion a nad ohybom je obsah hneď viditeľný.
   Len opacity a transform (žiadny posun layoutu, CLS 0). Poradie v mriežke
   (--pc-reveal-i, 0–3) dáva oneskorenie po krokoch --pc-reveal-step.
   ========================================================================= */

.pc-reveal {
	transition:
		opacity var(--pc-dur-reveal) var(--pc-ease-out),
		transform var(--pc-dur-reveal) var(--pc-ease-out);
	transition-delay: calc(var(--pc-reveal-i, 0) * var(--pc-reveal-step));
}

.pc-reveal:not(.is-visible) {
	opacity: 0;
	transform: translate3d(0, var(--pc-reveal-shift), 0);
}

@media print {
	.pc-reveal:not(.is-visible) {
		opacity: 1;
		transform: none;
	}
}

/* =========================================================================
   OMEDZENÝ POHYB
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}