/*
Theme Name: Sieť Dobra
Theme URI: https://sietdobra.sk
Description: Vlastná téma OZ Sieť Dobra — child téma Twenty Twenty-Five. Tichá, čitateľná vizitka združenia a archív desiatich rokov práce. Paleta a typografia zladené s logom a e-shopom shop.sietdobra.sk. Konfigurácia je celá v súboroch (theme.json, templates/, parts/, patterns/), fonty self-hosted.
Author: OZ Sieť Dobra
Author URI: https://sietdobra.sk
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sietdobra
Tags: blog, one-column, block-patterns, custom-colors, custom-logo, custom-menu, featured-images, translation-ready
*/

/*
 * Pozn.: tag `accessibility-ready` tu zámerne NIE JE. Ten audit má rodičovská
 * Twenty Twenty-Five, nie táto téma — nárokovať si ho bez auditu by bolo tvrdenie
 * o niečom, čo nikto neoveril.
 */

/*
 * Táto téma stavia vzhľad v theme.json. Tu je len to, čo sa cez theme.json spraviť nedá:
 * štýl pluginov (Contact Form 7, Popup Maker), ktoré generujú vlastný markup, a starý
 * classic-editor obsah z 90 príspevkov napísaných pred Gutenbergom.
 */

/* --- Tokeny, aby CSS nižšie nemuselo hexy opakovať ------------------------
 * Fallback za čiarkou nie je ozdoba: keby sa slug v theme.json premenoval,
 * bez neho je premenná neplatná pri výpočte hodnoty a pravidlo ticho vypadne.
 * Takto v najhoršom prípade ostane farba, len sa neaktualizuje.
 */

:root {
	--sd-brand: var(--wp--preset--color--brand, #5f8641);   /* kresba, nikdy text */
	--sd-moss: var(--wp--preset--color--moss, #41602c);     /* odkazy a tlačidlá */
	--sd-forest: var(--wp--preset--color--forest, #253619); /* tmavé plochy */
	--sd-paper: var(--wp--preset--color--paper, #eaede1);   /* druhá plocha */
	--sd-sage: var(--wp--preset--color--sage, #b7d19e);     /* LEN na tmavom */
	--sd-muted: var(--wp--preset--color--muted, #55584f);   /* metadáta */
	--sd-line: var(--wp--preset--color--line, #d6dccb);     /* vlásočnice */
	--sd-ink: var(--wp--preset--color--contrast, #231f20);  /* všetok bežný text */
}

/* --- Hero so sieťovým motívom -------------------------------------------
 * Motív je inline SVG (patterns/hero.php), aby kreslil cez `currentColor`
 * a bral farbu z tokenu témy. Leží pod obsahom, nie za ním v z-osi náhodou:
 * `isolation` zakladá vlastný stacking context, takže sa vrstvenie nedá
 * rozbiť ničím, čo pribudne v sekcii nad ním alebo pod ním.
 */

/* Hostiteľ motívu. `position: relative` NESMIE byť v media query — bez pozicovaného
 * predka by sa absolútne pozicovaná sieť uchytila o viewport a plachta z hero by
 * prekryla celú stránku.
 */
.sd-net-host {
	isolation: isolate;
	overflow: hidden;
	position: relative;
}

/* `max-width: none` je nutné: hostiteľ býva constrained layout, takže WordPress
 * by inak obmedzil aj absolútne pozicovanú sieť na contentSize a vykreslila by sa
 * len v strednom páse namiesto celej šírky.
 */
.sd-net {
	display: block;
	height: 100%;
	inset: 0;
	max-width: none;
	pointer-events: none;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/* Obsah nad motívom. Musí to platiť aj v pätičke a v karte, nielen v hero —
 * absolútne pozicovaný prvok so z-index: 0 sa inak vykreslí NAD in-flow textom.
 */
.sd-net-host > :not(.sd-net) {
	position: relative;
	z-index: 1;
}

/* Pole je v <defs> raz; toto len zabráni, aby jeho nositeľ zaberal miesto. */
.sd-net-sprite {
	height: 0;
	position: absolute;
	width: 0;
}

/* Výrez A — hero. Stmievanie doľava robí maska, nie druhý súbor. */
.sd-net--hero {
	color: var(--sd-brand);
	-webkit-mask-image: linear-gradient(to right, transparent 4%, #000 46%);
	mask-image: linear-gradient(to right, transparent 4%, #000 46%);
}

/* Výrez B — tmavá kotva. Obrovská mierka: vidno tri-štyri bunky, nie sieť.
 * „Sme veľmi blízko pri jednom uzle.“
 */
.sd-net--kotva {
	color: var(--sd-sage);
	opacity: 0.2;
	-webkit-mask-image: radial-gradient(circle at 78% 18%, #000 0%, transparent 68%);
	mask-image: radial-gradient(circle at 78% 18%, #000 0%, transparent 68%);
}

/* Výrez C — vodoznak pätičky. Najtichšie použitie na webe. */
.sd-net--patka {
	color: var(--sd-sage);
	opacity: 0.1;
}

/* Výška hero je zhora obmedzená výškou OKNA, nie obrazovky. Freeweb banner musí byť
 * viditeľný bez scrollovania — je to podmienka sponzorovaného hostingu, nie vkus.
 * Na notebooku má okno po odrátaní panelov okolo 625 px, nie 900, a pri pevnej výške
 * hero banner spadol pod ohyb na piatich zo šiestich bežných rozmerov.
 * `svh` počíta s mobilnými lištami, ktoré sa pri scrollovaní schovávajú.
 */
.sd-hero {
	align-items: center;
	display: flex;
	min-height: min(32rem, calc(100svh - 5.5rem));
}

/* `pointer-events: none` MUSÍ byť aj na obale, nielen na samotnom <svg> vnútri.
 * Obal je absolútne pozicovaný cez celé hero, takže bez toho zachytáva kliky
 * a obe tlačidlá titulky aj sponzorský banner sa nedajú kliknúť ani myšou, ani prstom.
 */
/* Nízke okno (notebook má po odrátaní panelov okolo 600–630 px) — obsah hero sa
 * musí zmestiť aj s bannerom, inak spadne pod ohyb a poruší podmienku hostingu.
 * Dotaz je na VÝŠKU, nie na šírku: 1366×625 je široká obrazovka s nízkym oknom.
 */
@media (height < 46rem) and (width >= 48rem) {
	.sd-hero {
		min-height: 0;
		padding-block: var(--wp--preset--spacing--40) !important;
	}

	.sd-hero__body > .wp-block-heading {
		font-size: var(--wp--preset--font-size--xx-large);
	}

	.sd-hero__lead {
		font-size: var(--wp--preset--font-size--large);
	}

	.sd-hero__body {
		--wp--style--block-gap: var(--wp--preset--spacing--30);
	}

	/* Banner ide vedľa tlačidiel, nie pod ne — ušetrí to celú jeho výšku.
	 * Poradie detí: eyebrow, h1, lead, tlačidlá, banner. Prvé tri idú cez obe
	 * kolóny, posledné dve vedľa seba.
	 */
	.sd-hero__body {
		align-items: end;
		column-gap: var(--wp--preset--spacing--60);
		display: grid;
		grid-template-columns: auto auto;
		justify-content: start;
	}

	.sd-hero__body > :nth-child(-n+3) {
		grid-column: 1 / -1;
	}

	.sd-sponsor {
		margin-block-start: 0;
	}
}

.sd-hero__net {
	inset: 0;
	max-width: none;
	pointer-events: none;
	position: absolute;
}

.sd-hero > :not(.sd-hero__net) {
	width: 100%;
}

/* Skupina hero je v toku, nie constrained — inak WordPress vycentruje nadpis
 * na contentSize vnútri wide šírky a vznikne stuha odsadená o 358 px.
 * Mieru riadka preto drží typografia, nie layout.
 */
.sd-hero__body > .wp-block-heading {
	max-width: 16ch;
}

.sd-hero__lead {
	max-width: 32ch;
}

/* Na mobile je text cez celú šírku, takže sieť mu leží priamo pod písmenami.
 * Preto sa tam stlmí — čitateľnosť je prednejšia než motív.
 */
@media (width < 48rem) {
	.sd-hero__net {
		opacity: 0.45;
	}
}

/* --- Freeweb banner (podmienka hostingu) ---------------------------------
 * Nie je to dekorácia a nedá sa odstrániť: WebSupport dáva hosting zadarmo
 * výmenou za reklamu na úvodnej stránke viditeľnú bez scrollovania.
 * Cieľom tohto CSS je teda banner priznať a ohraničiť, nie ho schovať —
 * schovaná reklama by podmienku porušila rovnako ako žiadna.
 */

.sd-sponsor {
	margin-block-start: var(--wp--preset--spacing--50);
	max-width: 320px;
}

.sd-sponsor__label {
	color: var(--sd-muted);
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.5rem;
	text-transform: uppercase;
}

.sd-sponsor__link {
	border-radius: 6px;
	display: block;
	line-height: 0;
	overflow: hidden;
	width: -moz-fit-content;
	width: fit-content;
}

.sd-sponsor__link img {
	display: block;
	height: auto;
	max-width: 100%;
}

.sd-sponsor__link:focus-visible {
	outline: 2px solid var(--sd-moss);
	outline-offset: 3px;
}

/* --- Sekcie titulky ------------------------------------------------------- */

/* Pás faktov — zámerne desaťkrát nižší než susedia, aby rozbil rad rovnakých pásov. */
.sd-fakt__hodnota {
	font-family: var(--wp--preset--font-family--literata, Georgia, serif);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin: 0;
}

.sd-fakt p {
	margin-block: 0;
}

/* Karta — pokoj je linka, pohyb je tieň. Preto sa tieň objaví len pri hoveri. */
.sd-karta {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--sd-line);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
	transition: border-color 0.18s ease-out, box-shadow 0.18s ease-out, transform 0.18s ease-out;
}

.sd-karta:hover,
.sd-karta:focus-within {
	border-color: var(--sd-brand);
	box-shadow: var(--wp--preset--shadow--zdvih);
	transform: translateY(-2px);
}

/* Číslica smie byť `brand` (4,22:1), lebo je to grafika pri 48 px, nie bežný text. */
.sd-karta__cislo {
	font-family: var(--wp--preset--font-family--literata, Georgia, serif);
	font-variant-numeric: tabular-nums;
	line-height: 1;
	margin: 0;
}

.sd-karta h3 {
	margin-block-start: 0;
}

/* Pod tabletom sa dvojstĺpcová mriežka skladá na jeden stĺpec — dve karty vedľa
 * seba na 600 px by mali riadok o šírke ôsmich znakov.
 */
@media (width < 48rem) {
	.wp-block-group.is-layout-grid:has(> .sd-karta) {
		grid-template-columns: 1fr;
	}
}

/* Odkaz „ďalej“ — šípka sa pri hoveri pohne, text ostane na mieste. */
.sd-viac a {
	text-decoration: none;
}

.sd-viac a:hover,
.sd-viac a:focus-visible {
	text-decoration: underline;
}

/* Tmavá kotva. Eyebrow je inak `muted`, čo má na `forest` 1,79:1 — tu musí byť sage. */
.sd-eyebrow--tmavy {
	color: var(--sd-sage);
}

.sd-citat {
	font-family: var(--wp--preset--font-family--literata, Georgia, serif);
	font-weight: 400;
	line-height: 1.22;
	margin-block-start: var(--wp--preset--spacing--30);
	text-wrap: balance;
}

/* Ľudia — mená sú zoznam, ale nemajú vyzerať ako odrážky. */
.sd-ludia__zoznam {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-ludia__zoznam li {
	border-block-start: 1px solid var(--sd-line);
	padding-block: 0.55rem;
}

.sd-ludia__zoznam li:last-child {
	border-block-end: 1px solid var(--sd-line);
}

/* IBAN. Nezalomiteľná medzera je vnútri štvorice, bežná medzi štvoricami,
 * takže sa číslo na mobile láme len na miestach, kde to nevadí.
 */
.sd-iban {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: var(--wp--preset--font-size--xx-large);
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	margin-block: var(--wp--preset--spacing--30) 0;
	overflow-wrap: anywhere;
}

/* Riadok archívu ---------------------------------------------------------- */

.sd-row {
	transition: background-color 0.15s ease-out;
}

/* Vlásočnica je na hornej hrane každého riadka; posledný dostane aj spodnú.
 * `.sd-row:last-child` by nefungovalo — každý riadok je jediné dieťa svojho <li>.
 */
.wp-block-post:last-child .sd-row {
	border-block-end: 1px solid var(--sd-line);
}

.sd-row:hover {
	background-color: var(--sd-paper);
}

.sd-row .wp-block-post-title {
	margin-block: 0;
}

.sd-row time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* Dátum má mať pevnú šírku, aby názvy začínali pod sebou. */
@media (width >= 48rem) {
	.sd-row__hlavne > .wp-block-post-date {
		flex: 0 0 6.5rem;
	}
}

/* Rokový navigátor -------------------------------------------------------
 * core/archives vykresľuje obyčajný <ul> s odrážkami pod sebou a vlastný layout
 * nemá — vodorovný rad z toho spraví až toto CSS.
 *
 * Roky sa NEPÍŠU ručne. V archíve chýba rok 2021 (2020 → 2022) a ručne písaná
 * lišta by vyrobila odkaz na prázdny rok. Jadro vypisuje len roky, ktoré existujú,
 * aj s počtami.
 */

.sd-years ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	list-style: none;
	margin: 0;
	padding: 0;
}

.sd-years li {
	margin: 0;
}

.sd-years a {
	border: 1px solid var(--sd-line);
	border-radius: 2px;
	color: var(--sd-ink);
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	padding: 0.4rem 0.75rem;
	text-decoration: none;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.sd-years a:hover,
.sd-years a:focus-visible {
	background-color: var(--sd-paper);
	border-color: var(--sd-brand);
}

/* Počet príspevkov, ktorý jadro pridáva za odkaz ako holý textový uzol. */
.sd-years li {
	color: var(--sd-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-variant-numeric: tabular-nums;
}

/* Drobnosti, ktoré stoja jeden riadok a vidno ich ------------------------- */

p,
li {
	text-wrap: pretty;
}

/* --- Navigácia -----------------------------------------------------------
 * Položka „E-shop" vedie na iný web (shop.sietdobra.sk), tak to má aj vyzerať:
 * jemný rám namiesto falošného tlačidla vnútri navigácie.
 */

.wp-block-navigation .sd-nav-eshop > a {
	border: 1px solid color-mix(in srgb, var(--sd-brand) 55%, transparent);
	border-radius: 4px;
	padding: 0.35rem 0.85rem;
}

.wp-block-navigation .sd-nav-eshop > a:hover,
.wp-block-navigation .sd-nav-eshop > a:focus {
	background-color: var(--sd-paper);
	border-color: var(--sd-moss);
}

/* V mobilnom overlay menu rám ruší — tam je to len ďalší riadok zoznamu. */
.wp-block-navigation__responsive-container.is-menu-open .sd-nav-eshop > a {
	border: 0;
	padding-inline: 0;
}

/* --- Contact Form 7 ------------------------------------------------------
 * Formulár 6448 na /kontakt/. CF7 neposkytuje bloky ani theme.json podporu,
 * takže jeho vzhľad dnes dedí z Twenty Fourteen a po prepnutí by zostal nahý.
 */

.wpcf7 {
	margin-block-start: var(--wp--preset--spacing--50, 2rem);
}

.wpcf7-form p {
	margin-block-end: var(--wp--preset--spacing--40, 1.5rem);
}

.wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	margin-block-end: 0.4rem;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="date"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea {
	background-color: var(--sd-paper);
	border: 1px solid color-mix(in srgb, var(--sd-ink) 20%, transparent);
	border-radius: 4px;
	box-sizing: border-box;
	color: var(--sd-ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.5;
	padding: 0.7rem 0.9rem;
	width: 100%;
}

.wpcf7-form textarea {
	min-height: 11rem;
	resize: vertical;
}

/* Viditeľný fokus je podmienka prístupnosti — nikdy nenahrádzať outline: none. */
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--sd-moss);
	outline: 2px solid var(--sd-moss);
	outline-offset: 1px;
}

.wpcf7-form input[type="submit"] {
	background-color: var(--sd-moss);
	border: 0;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	font-weight: 600;
	padding: 0.8rem 1.8rem;
	transition: background-color 0.15s ease-in-out;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form input[type="submit"]:focus {
	background-color: var(--sd-forest);
}

.wpcf7-form input[type="submit"]:focus-visible {
	outline: 2px solid var(--sd-ink);
	outline-offset: 2px;
}

.wpcf7-not-valid-tip {
	color: #a3231b; /* 5,9:1 na bielej — AA pre text chybovej správy */
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.wpcf7-response-output {
	border-radius: 4px;
	border-width: 1px;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: var(--wp--preset--spacing--40, 1.5rem) 0 0;
	padding: 0.8rem 1rem;
}

.wpcf7-spinner {
	vertical-align: middle;
}

/* reCAPTCHA v3 badge — CF7 ho vkladá fixne vpravo dole, kde koliduje s cookie popupom. */
.grecaptcha-badge {
	visibility: hidden; /* podmienky Google splnené textom v /kontakt/ */
}

/* --- Popup Maker ---------------------------------------------------------
 * Aktívny je popup 6739 (cookie lišta) a 6738 (mamweb.sk). Ich vzhľad ide
 * z PM „popup themes" v DB; toto zrovná len typografiu s webom.
 */

.pum-theme-default-theme .pum-container,
.pum-container {
	font-family: var(--wp--preset--font-family--manrope, sans-serif);
}

.pum-container .pum-content > :where(p) {
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1.6;
}

.pum-container a {
	color: var(--sd-moss);
}

/* --- Starý classic-editor obsah ------------------------------------------
 * 90 z 98 príspevkov a 24 z 32 stránok je klasické HTML z rokov 2012–2022.
 * Renderuje sa ako core/freeform, takže nedostane žiadne blokové štýly.
 */

.wp-block-post-content .wp-block-freeform.block-library-rich-text__tinymce,
.entry-content > :where(table) {
	max-width: 100%;
}

/* Staré [caption] shortcody (8× v príspevkoch, 3× v stránkach). */
.wp-caption {
	max-width: 100%;
}

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

.wp-caption-text,
.wp-caption p.wp-caption-text {
	color: var(--sd-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-style: italic;
	margin-block-start: 0.5rem;
	text-align: center;
}

/* Starý obsah zvykne mať width/height natvrdo v atribútoch. */
.wp-block-post-content :where(img) {
	height: auto;
	max-width: 100%;
}

/* Twenty Fourteen mala 6-farebnú editor paletu; posty s ňou nesú tieto triedy.
 * Bez CSS by farba spadla na default — mapujeme ich na novú paletu.
 */
.has-green-color {
	color: var(--sd-brand) !important;
}

.has-green-background-color {
	background-color: var(--sd-brand) !important;
}

/* Starý inline `<span style="color: #5f8641">` (160 výskytov) sa nechá tak —
 * je to presne brandová zelená, ktorú paleta prijala ako accent-2.
 */

/* --- Prístupnosť --------------------------------------------------------- */

/* Preskočiť na obsah — TT5 ho má, ale bez farieb novej palety. */
.skip-link:focus {
	background-color: var(--sd-paper);
	color: var(--sd-ink);
	outline: 2px solid var(--sd-moss);
}

/* --- Sticky hlavička ------------------------------------------------------
 * Web má osem sekcií, takže návštevník je väčšinu času ďaleko od navigácie.
 * Tieň sa objaví až po odscrollovaní, aby hlavička v pokoji nemala hranu.
 */

.wp-site-blocks > header {
	background-color: var(--wp--preset--color--base);
	position: sticky;
	top: 0;
	z-index: 20;
}

@supports (animation-timeline: scroll()) {
	.wp-site-blocks > header {
		animation: sd-hlavicka linear both;
		animation-timeline: scroll();
		animation-range: 0 6rem;
	}

	@keyframes sd-hlavicka {
		to {
			box-shadow: 0 1px 0 var(--sd-line), var(--wp--preset--shadow--zdvih);
		}
	}
}

/* --- Príchod sekcií pri scrollovaní ---------------------------------------
 * Čisté CSS, žiadny JavaScript a žiadny IntersectionObserver.
 *
 * Celé je to za @supports, a to je podstatné: pravidlo nastavuje `opacity: 0`
 * a bez podpory scroll-driven animácií by prehliadač nemal čím to vrátiť späť —
 * obsah by ostal navždy neviditeľný. Firefox túto vlastnosť k 2026 nemá.
 */

@supports (animation-timeline: view()) {
	.sd-poslanie > .wp-block-columns,
	.sd-karta,
	.sd-ticho > .wp-block-columns,
	.sd-ludia,
	.sd-podpora > * {
		animation: sd-prichod linear both;
		animation-timeline: view();
		animation-range: entry 8% cover 26%;
	}

	@keyframes sd-prichod {
		from {
			opacity: 0;
			transform: translateY(14px);
		}

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

/* --- Prístupnosť a pohyb -------------------------------------------------- */

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

	/* Scroll-driven animácia sa `animation-duration` nedá zastaviť — beží podľa
	 * pozície scrollu, nie podľa času. Musí sa vypnúť časová os.
	 */
	/* Scroll-driven animácii `animation-duration` nič neurobí — beží podľa pozície
	 * scrollu, nie podľa času. Musí sa vypnúť časová os a vrátiť koncový stav,
	 * inak ostane obsah na `opacity: 0`.
	 */
	.wp-site-blocks > header,
	.sd-poslanie > .wp-block-columns,
	.sd-karta,
	.sd-ticho > .wp-block-columns,
	.sd-ludia,
	.sd-podpora > * {
		animation-timeline: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.sd-karta:hover,
	.sd-karta:focus-within {
		transform: none;
	}
}

/* --- Tlač -----------------------------------------------------------------
 * Reveal nastavuje `opacity: 0` a scroll pri tlači neexistuje, takže by sa
 * polovica stránky vytlačila ako prázdne miesto. Sieť je dekorácia a na papieri
 * len míňa toner.
 */

@media print {
	.sd-poslanie > .wp-block-columns,
	.sd-karta,
	.sd-ticho > .wp-block-columns,
	.sd-ludia,
	.sd-podpora > * {
		animation: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.sd-net,
	.sd-net-sprite,
	.sd-sponsor,
	.wp-block-navigation {
		display: none !important;
	}

	.wp-site-blocks > header {
		position: static;
	}
}

/* --- Starý obsah: pretekanie a obtekanie ---------------------------------
 * 106 zo 118 príspevkov a stránok nemá ani jeden blok — je to surové HTML
 * z rokov 2012–2022 vložené cez core/freeform. Twenty Fourteen mala pre tieto
 * prípady vlastné pravidlá; bloková téma ich nemá, takže sú to REGRESIE, nie
 * staré chyby obsahu.
 */

/* Vložené videá a mapy nemajú v starom HTML žiadny strop šírky. */
.wp-block-post-content :where(iframe, embed, object, video) {
	max-width: 100%;
}

.wp-block-post-content :where(iframe) {
	aspect-ratio: 16 / 9;
	height: auto;
	width: 100%;
}

/* Dlhé URL a nezalomiteľné reťazce v starom texte rozťahovali stránku do strán. */
.wp-block-post-content :where(p, li, td, th, dd, dt) {
	overflow-wrap: break-word;
}

/* Tabuľky zo starých príspevkov sa rolujú vo vlastnom ráme, nie celou stránkou. */
.wp-block-post-content :where(table) {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* Obtekanie obrázkov. Triedy alignleft/alignright používa 141 elementov na 72 URL
 * a bloková téma pre ne nemá pravidlo, takže obrázky prestali obtekať.
 */
.wp-block-post-content :where(.alignleft) {
	float: left;
	margin: 0.35rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--30) 0;
	max-width: 50%;
}

.wp-block-post-content :where(.alignright) {
	float: right;
	margin: 0.35rem 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	max-width: 50%;
}

.wp-block-post-content :where(.aligncenter) {
	display: block;
	margin-inline: auto;
}

/* Na mobile obtekanie nedáva zmysel — text okolo obrázka by mal šesť znakov. */
@media (width < 48rem) {
	.wp-block-post-content :where(.alignleft, .alignright) {
		float: none;
		margin-inline: 0;
		max-width: 100%;
	}

	/* Staré obrázky nesú vodorovné okraje v atribúte `style`, ktoré prežijú aj
	 * zrušenie obtekania a pretlačia stránku do strán. Inline štýl prebije iba
	 * `!important` — inde v tomto súbore ho nepoužívame a tu je to jediná cesta.
	 */
	.wp-block-post-content :where(img, figure) {
		margin-inline: 0 !important;
	}
}

/* Cookie lišta Popup Makera má z-index 1999999999 a prekrývala lepkavú hlavičku,
 * takže návštevník nevidel navigáciu, kým nesúhlasil. Hlavička musí byť nad ňou.
 */
.wp-site-blocks > header {
	z-index: 2000000000;
}

/* --- Viditeľný fokus -----------------------------------------------------
 * Rodičovský outline ukazoval na token, ktorý nová paleta zmazala, takže prstenec
 * na plnom tlačidle vychádzal biely na bielej (1,00 : 1). Toto je poistka nad
 * theme.json a platí aj na tmavých plochách, kde musí byť obrys svetlý.
 */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--sd-ink);
	outline-offset: 2px;
}

/* Svetlý obrys patrí LEN na tmavú plochu. Naviazať ho na `footer` bolo zle —
 * spodná lišta s copyrightom je papierová a `sage` na nej má 1,39 : 1.
 * Trieda `has-forest-background-color` je presne tá, ktorú WordPress dáva tmavým plochám.
 */
.has-forest-background-color :where(a, button):focus-visible,
.wp-block-navigation__responsive-container.is-menu-open :where(a, button):focus-visible {
	outline-color: var(--sd-sage);
}

.wp-block-button__link:focus-visible {
	outline: 2px solid var(--sd-ink);
	outline-offset: 3px;
}

/* --- Skoky na kotvy pod lepkavou hlavičkou --------------------------------
 * Hlavička je sticky a vysoká ~105 px, takže cieľ skoku (skip-link aj každý
 * #fragment) skončil pod ňou — na /kontakt/ bol po skoku h1 preseknutý.
 */

html {
	scroll-padding-top: 7rem;
}

:target,
#wp--skip-link--target {
	scroll-margin-top: 7rem;
}

/* --- Kategórie v riadku archívu ------------------------------------------
 * Niektoré príspevky majú sedem kategórií a riadok sa nimi rozpadne.
 * `display: none` ich vyradí aj z accessibility tree, čiže čítačka ich NEPREČÍTA —
 * nie je to len vizuálne skrytie. Je to prijateľné, lebo úplný zoznam kategórií
 * je na samotnom príspevku; nepíš sem, že ostávajú „pre čítačky", nie je to pravda.
 */

.sd-row .wp-block-post-terms a:nth-of-type(n + 3) {
	display: none;
}

/* --- Paginácia ------------------------------------------------------------
 * Bola to jediná neoštýlovaná ovládacia plocha v téme — čísla mali 9–11 × 22 px,
 * kým rokové chipy o 20 px vyššie majú 62 × 38 px. Zjednotené s nimi.
 */

.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-query-pagination-numbers .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	border: 1px solid var(--sd-line);
	border-radius: 2px;
	color: var(--sd-ink);
	display: inline-block;
	font-size: var(--wp--preset--font-size--small);
	font-variant-numeric: tabular-nums;
	padding: 0.4rem 0.75rem;
	text-decoration: none;
	transition: background-color 0.15s ease-out, border-color 0.15s ease-out;
}

.wp-block-query-pagination-numbers .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--sd-paper);
	border-color: var(--sd-brand);
}

.wp-block-query-pagination-numbers .page-numbers.current {
	background-color: var(--sd-forest);
	border-color: var(--sd-forest);
	color: var(--wp--preset--color--base);
}

.wp-block-query-pagination-numbers .page-numbers.dots {
	border-color: transparent;
}

/* --- Surový blockquote zo starého obsahu ---------------------------------
 * theme.json vie oštýlovať `core/quote`, ale v starom obsahu je šesť surových
 * <blockquote> proti trom blokovým — tie by inak ostali bez štýlu.
 */

.wp-block-post-content :where(blockquote) {
	border-inline-start: 3px solid var(--sd-brand);
	font-family: var(--wp--preset--font-family--literata, Georgia, serif);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	margin-inline: 0;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline-start: var(--wp--preset--spacing--40);
}

/* 404 recyklovala hero variant, ktorý nemá krytie, takže sieť tam bola
 * najhlasnejšia na celom webe. Chybová stránka má byť tichá.
 */
.sd-net--404 {
	color: var(--sd-brand);
	opacity: 0.35;
	-webkit-mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
	mask-image: radial-gradient(circle at 70% 40%, #000 0%, transparent 72%);
}