/* Přístupnost — skip link a viditelný focus (Definition of done, bod 10). */

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

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 100000;
	padding: 10px 16px;
	background: #1f1f1f;
	color: #fff;
	text-decoration: none;
}

:focus-visible {
	outline: 3px solid #2a4b7c;
	outline-offset: 2px;
}

/* Hover na obrysovém tlačítku ("Pro zájemce o službu") — WordPress si
   pro is-style-outline generuje vlastní bezpodmínečné pravidlo
   background:transparent, které jde v CSS AŽ PO globálním hoveru z
   theme.json a se stejnou (nulovou) specificitou ho přebije. Skutečné
   třídy místo :where() tady vyhrají vždy, bez ohledu na pořadí. */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #fbf7f0;
}

/* Hravý vizuál (varianta C) — zaoblené "pilulkové" odkazy v menu,
   aktuální stránka zvýrazněná primární barvou. */
.wp-block-navigation .wp-block-navigation-item__content {
	border-radius: 999px;
	padding: 8px 16px !important;
	transition: background-color 0.15s ease;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--blob-peach);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-menu-ancestor > .wp-block-navigation-item__content,
.wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--background) !important;
}

/* Rozbalovací podmenu (O nás, Naše služby) BEZ JavaScriptu (bod 10
   zadání) — jádrové WP schová submenu přes visibility/opacity/height
   a spoléhá na Interactivity API skript pro myš i klávesnici. Bez JS
   bylo submenu úplně nedosažitelné (ověřeno: Tab ho přeskakoval,
   žádné :hover/:focus-within pravidlo v jádru neexistuje). Tohle je
   čistě CSS náhrada — funguje myší (:hover) i klávesnicí
   (:focus-within, když je fokus na tlačítku nebo na položce submenu). */
.nav-desktop .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
.nav-desktop .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
	visibility: visible !important;
	opacity: 1 !important;
	height: auto !important;
	overflow: visible !important;
}

/* Dekorativní barevné "bubliny" v pozadí hero sekce. */
.blob-bg {
	position: relative;
	overflow: hidden;
}
.blob-bg::before,
.blob-bg::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 46% 54% 60% 40% / 50% 45% 55% 50%;
}
.blob-bg::before {
	width: 320px;
	height: 320px;
	top: -120px;
	right: -80px;
	background: var(--wp--preset--color--blob-blue);
}
.blob-bg::after {
	width: 260px;
	height: 260px;
	bottom: -110px;
	left: -80px;
	background: var(--wp--preset--color--blob-peach);
	border-radius: 50% 50% 40% 60% / 55% 45% 55% 45%;
}
.blob-bg > .wp-block-column {
	position: relative;
	z-index: 1;
}

/* Doplňkové menší "bubliny" — libovolný počet, viz použití v šabloně.
   Záměrně ZA textem i fotkou (z-index 0, sloupce mají 1) — u fotky je
   to neprůhledné schování, u textu jen prosvítání v mezerách mezi
   písmeny, což nevadí. Řešit to "podložkou" nad fotkou byla slepá
   ulička — vytvořilo to viditelný hranatý roh, protože barva podložky
   neseděla s okolními barevnými bloby v pozadí. */
.blob-bg .blob-dot {
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	--dot-opacity: 1;
	opacity: var(--dot-opacity);
	pointer-events: none;
}

/* Pomalé stoupání bublin — čisté CSS, žádný JavaScript (bod 10 zadání).
   Doba trvání a zpoždění jsou náhodné, nastavuje je PHP shortcode
   [domov_bubliny] přes vlastní CSS proměnné na každé bublině zvlášť. */
@media (prefers-reduced-motion: no-preference) {
	.blob-bg .blob-dot {
		animation-name: bubliny-stoupej;
		animation-duration: var(--dot-trvani, 6s);
		animation-delay: var(--dot-zpozdeni, 0s);
		animation-timing-function: ease-in-out;
		animation-iteration-count: infinite;
	}
}

@keyframes bubliny-stoupej {
	0% {
		transform: translateY(0);
		opacity: 0;
	}
	12% {
		opacity: var(--dot-opacity);
	}
	80% {
		opacity: var(--dot-opacity);
	}
	100% {
		transform: translateY(-220px);
		opacity: 0;
	}
}

.blob-photo img {
	border-radius: 44% 56% 62% 38% / 46% 40% 60% 54% !important;
	transform: rotate(-3deg);
	box-shadow: 0 20px 40px -18px rgba(20, 40, 70, 0.35);
}

/* Mobilní menu bez JavaScriptu (bod 10 zadání) — nativní <details>,
   ne WordPressí vestavěný hamburger (ten vyžaduje JS na otevření). */
.nav-mobile { display: none; }

@media (max-width: 960px) {
	.nav-desktop { display: none !important; }
	.nav-mobile { display: block; }
}

.nav-mobile-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
	color: var(--wp--preset--color--background);
	background: var(--wp--preset--color--primary);
	padding: 10px 18px;
	border-radius: 999px;
	user-select: none;
}
.nav-mobile-toggle::-webkit-details-marker { display: none; }
.nav-mobile-toggle::marker { content: ""; }
.nav-mobile[open] .nav-mobile-toggle {
	border-radius: 999px 999px 0 0;
}

.nav-mobile-links {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--background);
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 0 18px 18px 18px;
	padding: 10px;
	margin-top: 4px;
	box-shadow: 0 14px 30px -16px rgba(20, 40, 70, 0.35);
}
.nav-mobile-links a {
	padding: 12px 14px;
	border-radius: 12px;
	color: var(--wp--preset--color--text) !important;
	text-decoration: none;
	font-weight: 600;
}
.nav-mobile-links a.sub {
	padding-left: 28px;
	font-weight: 400;
	font-size: 0.95rem;
	color: var(--wp--preset--color--text) !important;
}
.nav-mobile-links a:hover,
.nav-mobile-links a:focus-visible {
	background: var(--wp--preset--color--blob-peach);
}

/* Orámované tabulky (Úřední deska, Kontakty) — jádrový table blok jinak
   žádné viditelné ohraničení buněk nemá. */
.wp-block-table table {
	border-collapse: collapse;
}
.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--wp--preset--color--sand);
	padding: 10px 14px;
	text-align: left;
	vertical-align: top;
}
.wp-block-table th {
	background: var(--wp--preset--color--sand);
	font-family: var(--wp--preset--font-family--heading);
	/* Ohraničení buněk je taky pískové (viz výše) — na pískovém pozadí by
	   úplně splynulo (neviditelná linka mezi řádky). Tmavší odstín ať
	   zůstane vidět i tady. */
	border-color: #c5bba6;
}

/* Sjednocený první sloupec napříč tabulkami Úřední desky (.has-fixed-layout) —
   bez tohohle by měla každá tabulka jinak širokou první buňku podle svého
   vlastního obsahu (:not(:only-child), ať to nerozbije jednosloupcové
   tabulky se seznamy dokumentů — tam žádné druhé zarovnání není). */
.wp-block-table.has-fixed-layout td:first-child:not(:only-child),
.wp-block-table.has-fixed-layout th:first-child:not(:only-child) {
	width: 220px;
}

/* Výpis aktualit — náhledový obrázek vlevo, text vyplní zbytek řádku.
   Bez tohohle by se u aktualit bez dohledaného obrázku sloupec s textem
   nesmrštil na zbylou šířku a řádky by nebyly stejně vysoké. */
.wp-block-post-featured-image {
	flex-shrink: 0;
}
.wp-block-query .wp-block-post-template > li > .wp-block-group {
	align-items: flex-start;
}
.wp-block-query .wp-block-post-template > li > .wp-block-group > .wp-block-group {
	flex: 1;
	min-width: 0;
}

/* Aktuality na titulce — 3 karty vedle sebe, obrázek nahoře. */
.aktuality-karty .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
}
.aktuality-karty .wp-block-post-featured-image img {
	width: 100%;
	object-fit: cover;
}
@media (max-width: 782px) {
	.aktuality-karty .wp-block-post-template {
		grid-template-columns: 1fr;
	}
}