/**
 * Téma Pneuvosovič — základné štýly rámca a fallback obsahových šablón.
 *
 * Povrchy (archív, produkt, úvodka, účet, hlavička) majú vlastné CSS
 * zo site pluginu — tu je len to, čo potrebujú stránky, ktoré
 * (zatiaľ) nerieši ani Elementor, ani plugin: blog, obsahové stránky, 404.
 * Tokeny zrkadlia .pc-scope z pluginu (archive.css).
 */

/* Defaultné tokeny na :root — dedia ich aj plochy, ktoré stoja mimo
   .pc-scope (filter drawer, sticky lišta; oboje position: fixed).
   Child téma prepíše tieto premenné a preladí tým celý web. */
:root {
	--pc-paper: 255 255 255;
	--pc-card: 255 255 255;
	--pc-ink: 4 40 23;
	--pc-accent: 0 122 64;
	--pc-accent-deep: 0 98 58;
	--pc-soft: 244 246 247;
	--pc-line: 224 232 228;
	--pc-muted: 84 104 95;
	--pc-secondary: 220 38 38;

	/* Zapustená plocha — na prvky, ktoré majú pôsobiť ako vybraté z podkladu:
	   pás s omrvinkami a okrúhle tlačidlá v hlavičke. Sú to dve rovnaké
	   plochy, tak nech majú jednu hodnotu; dovtedy jedna siahala po
	   --pc-soft a druhá po --pc-line, teda po farbe určenej na linky.

	   Hodnota leží medzi nimi, bližšie k --pc-soft: tmavšia (na úrovni
	   --pc-line) robila z omrviniek ťažký pruh cez celú šírku. Odlíšenie od
	   bielej stačí naznačiť — pri tlačidlách ho drží aj ich tvar. */
	--pc-sunk: 238 242 241;

	/* Polomery — jedna stupnica pre celú tému. Nové pravidlá siahajú po nej,
	   nie po konkrétnych hodnotách; child ju preladí jedným miestom.
	     xs  drobnosti (čipy, fokus rámik)
	     sm  náhľady, malé karty, vnorené boxy, kompaktné ovládače
	     —   karty, panely, polia (predvolený)
	     lg  veľké plochy (modálne okná, panely)
	     xl  hero a obrazové bloky
	     pill  tlačidlá a 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;

	/* Sémantické aliasy — pravidlá témy ich používajú dlhšie než stupnicu.
	   Pole nie je tlačidlo: pilulka sa hodí na `Do košíka`, nie na textarea. */
	--pc-radius-control: var(--pc-radius-pill);
	--pc-radius-field: var(--pc-radius);

	/* Dostupnosť je sémantika, nie brand — zákazník číta farbu skôr než text,
	   takže ostáva zelená/oranžová/červená bez ohľadu na akcent témy (child
	   s červeným brandom by inak vypísal „Skladom" červeno). Child ladí
	   nanajvýš odtieň, nikdy význam. Každá má s bielou aspoň 4.5:1
	   (WCAG 1.4.3), takže znesie aj samotný text, nielen bodku. */
	--pc-stock-in: 21 128 61;    /* #15803D */
	--pc-stock-order: 180 83 9;  /* #B45309 */
	--pc-stock-out: 185 28 28;   /* #B91C1C */
}

.pc-scope {
	--pc-paper: 255 255 255;
	--pc-ink: 4 40 23;
	--pc-accent: 0 122 64;    /* #007A40 — min. 4.5:1 s bielou (WCAG 1.4.3) */
	--pc-accent-deep: 0 98 58;
	--pc-soft: 244 246 247;
	--pc-line: 231 243 237;
	--pc-muted: 84 104 95;

	/* Polomery sa tu zámerne neopakujú — dedia sa z :root a sú všade rovnaké
	   (na rozdiel od farieb, kde má scope vlastný odtieň --pc-line). */

	color: rgb(var(--pc-ink));
}

/* Scope rooty: pravidlá `.pc-scope *` (archive.css, header.css, …) pokrývajú
   len potomkov — samotný kontajner by zostal content-box, padding by ho
   rozšíril o 2×2rem nad 90rem a obsah by sa nezarovnal s hlavičkou. */
.pc-scope,
.pc-container,
.px-theme-content,
.px-page-header__inner,
.px-page-title__inner {
	box-sizing: border-box;
}

/* =========================================================================
   ZÁKLAD ELEMENTOV — typografia bez tried

   Rovnaký princíp ako pri poliach nižšie: všetko v `:where()`, čiže so
   **špecificitou 0**. Ktorékoľvek pravidlo s triedou (`.px-page-title__heading`,
   `.px-theme-prose :where(h2)`, `.pc-single__title`…) toto prebije, takže sa
   tým nemení nič, čo je už nastavené — len prestáva byť holý text z pluginu
   vysádzaný prehliadačom.

   Veľkosti zodpovedajú tomu, čo téma používa (H1 ako `.px-theme-content h1`,
   H2/H3 ako prose v page.css), nech je prechod bezo skoku.
   ========================================================================= */

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

:where(h1) { font-size: 1.75rem; }
:where(h2) { font-size: 1.375rem; }
:where(h3) { font-size: 1.125rem; }
:where(h4) { font-size: 1rem; }
:where(h5, h6) { font-size: 0.9375rem; }

/* Odstavce stohujeme nadol — horný okraj z UA štýlov sa sčítaval s dolným
   okrajom predchádzajúceho bloku a rytmus bol zakaždým iný. */
:where(p) { margin: 0 0 1rem; }

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

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

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

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

/* =========================================================================
   FORMULÁROVÉ POLIA — spoločný základ

   Aby sa každý nový formulár (aj ten, čo vykreslí plugin — waitlist, hľadanie,
   kontakt) nemusel štýlovať odznova. Doteraz mal vlastnú sadu pravidiel každý
   povrch zvlášť: účet, pokladňa, recenzie, px-wc-requests…

   Celé je to v `:where()`, čiže so **špecificitou 0**. Ktorékoľvek existujúce
   pravidlo povrchu (`.px-account form .form-row input`, `#review_form input`…)
   toto prebije bez `!important`, takže pridanie základu nemení nič, čo je už
   nastavené — len dopĺňa polia, ktoré doteraz kreslil prehliadač.

   Zámerne tu nie je `width: 100%` (rozbilo by polia v lištách) ani
   `appearance: none` na `select` (bez vlastnej šípky by ostal bez šípky).
   Povrch, ktorý chce jedno či druhé, si to povie sám.
   ========================================================================= */

: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
) {
	box-sizing: border-box;
	max-width: 100%;
	padding: 0.65rem 1rem;
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-field);
	background: rgb(var(--pc-paper));
	font-family: inherit;
	font-size: 0.9375rem;
	line-height: 1.4;
	color: rgb(var(--pc-ink));
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Pseudotriedy sú vnútri `:where()` zámerne — mimo neho by rátali do
   špecificity (0,1,0) a prebili by tým element-level pravidlá pluginov. */
:where(input:focus, select:focus, textarea:focus) {
	outline: none;
	border-color: rgb(var(--pc-accent));
	box-shadow: 0 0 0 3px rgb(var(--pc-accent) / 0.18);
}

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

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

:where(input:disabled, select:disabled, textarea:disabled) {
	background: rgb(var(--pc-soft));
	color: rgb(var(--pc-muted));
	cursor: not-allowed;
}

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

/* Odosielacie tlačidlo — zelená pilulka ako `.pc-btn--primary`. Zámerne len
   `[type="submit"]`: bežné `<button>` je v téme aj ikonový prepínač (šípky
   galérie, zavretie modálu) a tie majú byť neviditeľné. */
:where(button[type="submit"], input[type="submit"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.65rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

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

/* Neskorší zápis s rovnakou (nulovou) špecificitou — prebíja `:disabled`
   pravidlo polí vyššie, ktoré platí aj pre `input[type="submit"]`. */
:where(button[type="submit"]:disabled, input[type="submit"]:disabled) {
	background: rgb(var(--pc-accent));
	color: #fff;
	opacity: 0.55;
	cursor: not-allowed;
}

/* Fluent Forms — zelená tlačidiel je v konfigurácii formulára (#00BF63,
   s bielou len 2.43:1); prebíjame na prístupnú zelenú tlačidiel témy. */
.ff-btn-submit.ff_btn_style {
	background-color: rgb(var(--pc-accent, 0 122 64)) !important;
	border-color: rgb(var(--pc-accent, 0 122 64)) !important;
	color: #fff !important;
}

.ff-btn-submit.ff_btn_style:hover {
	background-color: #00623a !important;
	border-color: #00623a !important;
}

/* Imagify v režime „<picture> tags" (na produkcii jediný funkčný — nginx
   .htaccess nečíta) obalí každý <img> do <picture>. Bez tohto pravidla by sa
   flex/grid položkou stal wrapper namiesto obrázka, takže `align-self`,
   `order`, `aspect-ratio` či `object-fit` by sa vyhodnocovali na prázdnom
   boxe. `display: contents` wrapper z layoutu vynechá a obrázok zostáva
   priamou položkou rodiča ako pred optimalizáciou. Triedy vracia obrázku
   site plugin (napr. pneuvosovic/inc/site-tweaks.php).

   Percentuálne výšky (`.pc-product-card__media img { height: 100% }`) by
   prežili aj bez toho — inline wrapper nie je containing block, percentá sa
   počítajú proti najbližšiemu blokovému predkovi.

   Pozor: selektory to nemení — `.pc-hero__media > img` by po obalení
   neplatilo, lebo rodičom obrázka je v DOM naďalej <picture>. Téma preto
   používa potomkovské selektory. */
picture {
	display: contents;
}

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

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 2000;
	width: auto;
	height: auto;
	clip: auto;
	padding: 0.5rem 1rem;
	background: #fff;
	color: rgb(4 40 23);
	border-radius: var(--pc-radius-sm);
	box-shadow: 0 4px 16px rgb(4 40 23 / 0.2);
}

/* Kontajner obsahových šablón (rovnaké rozmery ako plugin povrchy) */
.px-theme-content {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 90rem;
	padding: 2rem 1rem 4rem;
}

@media (min-width: 640px) {
	.px-theme-content { padding-left: 1.5rem; padding-right: 1.5rem; }
}

@media (min-width: 1024px) {
	.px-theme-content { padding-left: 2rem; padding-right: 2rem; }
}

.px-theme-content--narrow {
	max-width: 48rem;
}

.px-theme-content h1 {
	margin: 0 0 1.5rem;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
}

.pc-title-dot::after {
	content: '.';
	color: rgb(var(--pc-accent, 0 191 99));
}

/* Pás s omrvinkami — na každom type stránky rovnaký, len cesta k stránke
   (template-parts/page-header.php). Nadpis stojí pod ním, viď .px-page-title. */
.px-page-header {
	border-bottom: 1px solid rgb(var(--pc-line));
	background:
		radial-gradient(90% 160% at 100% 0%, rgb(var(--pc-accent) / 0.07), transparent 55%),
		rgb(var(--pc-sunk));
}

/* Vnútro pásu aj nadpisového bloku drží rovnaké okraje ako obsah stránky,
   nech omrvinky, H1 a prvý riadok obsahu stoja na jednej zvislici. */
.px-page-header__inner,
.px-page-title__inner {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	max-width: 90rem;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 640px) {
	.px-page-header__inner,
	.px-page-title__inner {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.px-page-header__inner,
	.px-page-title__inner {
		padding-left: 2rem;
		padding-right: 2rem;
	}
}

.px-page-header--narrow .px-page-header__inner,
.px-page-title--narrow .px-page-title__inner {
	max-width: 48rem;
}

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

/* Nadpis stránky — už mimo sivého pásu, prvý prvok obsahu */
.px-page-title__inner {
	padding-top: 1.75rem;
	padding-bottom: 0.75rem;
}

@media (min-width: 1024px) {
	.px-page-title__inner {
		padding-top: 2.25rem;
		padding-bottom: 1rem;
	}
}

/* Variant „pás" (produktové archívy): nadpis a popis kategórie pokračujú
   v podklade omrviniek. Podklad drží obal, aby akcentový radiál bol jedna
   plocha cez celý pás; vnútorné bloky si ho preto vypínajú. */
.px-page-band {
	border-bottom: 1px solid rgb(var(--pc-line));
	background:
		radial-gradient(90% 160% at 100% 0%, rgb(var(--pc-accent) / 0.07), transparent 55%),
		rgb(var(--pc-sunk));
}

.px-page-band .px-page-header {
	border-bottom: 0;
	background: none;
}

/* Odsadenie sa nesčítava — medzi omrvinkami a nadpisom má byť jedna medzera,
   nie spodok jedného bloku plus vrch druhého. */
.px-page-band .px-page-header__inner {
	padding-bottom: 0;
}

.px-page-band .px-page-title__inner {
	padding-top: 1.25rem;
	padding-bottom: 2.25rem;
}

@media (min-width: 1024px) {
	.px-page-band .px-page-title__inner {
		padding-top: 1.5rem;
		padding-bottom: 2.75rem;
	}
}

.px-page-title__heading {
	margin: 0;
	font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.px-page-title__meta {
	margin: 0.5rem 0 0;
	font-size: 0.8125rem;
	color: rgb(var(--pc-muted));
}

.px-page-title__description {
	margin-top: 0.5rem;
	max-width: 48rem;
	font-size: 0.9375rem;
	color: rgb(var(--pc-muted));
}

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

.px-page-title__description p + p {
	margin-top: 0.5rem;
}

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

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

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

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

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

/* =========================================================================
   TLAČIDLÁ `.pc-btn`

   Jedna definícia pre celý web (predtým bola trikrát: tu pre obsahové
   stránky, v archive.css pre `.pc-scope` a v single.css pre detail).
   Funguje aj mimo `.pc-scope`, takže tlačidlo v pätičke či v šablóne pluginu
   nepotrebuje nič navyše.

   Špecificita je len (0,1,0): `.pc-scope .pc-btn` z archive.css
   a `.px-single .pc-btn` zo single.css toto naďalej prebíjajú a držia si
   svoju veľkosť (archív menšie, detail väčšie). Zjednotiť aj tie je
   dizajnové rozhodnutie, nie refaktor — preto tu ostávajú.
   ========================================================================= */

.pc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	padding: 0.6rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--pc-radius-control);
	background: rgb(var(--pc-accent));
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

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

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

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

.pc-btn--outline {
	background: transparent;
	border-color: rgb(var(--pc-ink) / 0.2);
	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;
	border-color: transparent;
	color: rgb(var(--pc-accent-deep));
}

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

/* Veľkosti — aby sa odchýlka riešila modifikátorom, nie novým pravidlom. */
.pc-btn--sm {
	padding: 0.4rem 1rem;
	font-size: 0.8125rem;
}

.pc-btn--lg {
	padding: 0.75rem 2rem;
	font-size: 0.9375rem;
}

.pc-btn:disabled,
.pc-btn.is-disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* Prose — dlhý text stránok a príspevkov. Elementy v :where(), aby defaulty
   mali špecificitu 0,1,0 a prehrali s utility triedami z page.css (.px-lead,
   .px-cta__text, .px-section__title…) — inak by `.px-theme-prose p` (0,1,1)
   prebil `margin: auto` centrovanie a veľkosti nadpisov sekcií. */
.px-theme-prose {
	font-size: 1rem;
	line-height: 1.7;
}

.px-theme-prose :where(h2) { font-size: 1.375rem; margin: 2rem 0 0.75rem; }
.px-theme-prose :where(h3) { font-size: 1.125rem; margin: 1.5rem 0 0.5rem; }
.px-theme-prose :where(p) { margin: 0 0 1rem; }
.px-theme-prose :where(ul, ol) { margin: 0 0 1rem; padding-left: 1.5rem; }
.px-theme-prose :where(img) { max-width: 100%; height: auto; border-radius: var(--pc-radius); }

.px-theme-prose :where(a) {
	color: rgb(var(--pc-accent-deep));
}

/* Blog karta — rovnaký rytmus ako sekcia článkov na úvodke: 3 na riadok. */
.px-theme-archive__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.px-theme-archive__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.px-theme-archive__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.px-theme-card {
	display: flex;
	flex-direction: column;
	background: rgb(var(--pc-paper));
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius);
	overflow: hidden;
}

/* `height: auto` je nutné: width/height atribúty obrázka sú prezentačný hint
   a bez neho by aspect-ratio neplatilo — portrétová miniatúra by kartu
   natiahla na vlastnú výšku. Rovnaký pomer 16/9 ako .pc-post-card na úvodke. */
.px-theme-card__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.px-theme-card__body {
	padding: 1rem 1.25rem 1.25rem;
}

.px-theme-card__title {
	margin: 0 0 0.5rem;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.35;
}

.px-theme-card__title a {
	color: rgb(var(--pc-ink));
	text-decoration: none;
}

.px-theme-card__title a:hover {
	color: rgb(var(--pc-accent-deep));
}

.px-theme-card__excerpt {
	margin: 0;
	font-size: 0.875rem;
	color: rgb(var(--pc-muted));
}

/* Detail príspevku */
.px-theme-post__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--pc-radius);
	margin-bottom: 1.5rem;
}

/* Stránkovanie */
.px-theme-archive__pagination {
	margin-top: 2rem;
}

.px-theme-archive__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	margin-right: 0.25rem;
	border: 1px solid rgb(var(--pc-line));
	border-radius: var(--pc-radius-pill);
	font-size: 0.875rem;
	color: rgb(var(--pc-ink));
	text-decoration: none;
}

.px-theme-archive__pagination .page-numbers.current {
	background: rgb(var(--pc-accent));
	border-color: rgb(var(--pc-accent));
	color: #fff;
}

.px-theme-archive__pagination a.page-numbers:hover {
	border-color: rgb(var(--pc-accent));
	color: rgb(var(--pc-accent-deep));
}