/* =========================================================================
   layout.css — kostra stránky: hlavička, navigace, obsah, patička
   ========================================================================= */

.nol-obal {
	width: 100%;
	max-width: var(--nol-sirka-obsahu);
	margin-inline: auto;
	padding-inline: var(--nol-mezera-4);
}

@media (min-width: 768px) {
	.nol-obal { padding-inline: var(--nol-mezera-6); }
}

/* ── Přeskočení na obsah ───────────────────────────────────────────── */

.nol-preskocit {
	position: absolute;
	top: 0;
	left: var(--nol-mezera-4);
	z-index: var(--nol-vrstva-panel);
	transform: translateY(-120%);
	padding: var(--nol-mezera-3) var(--nol-mezera-5);
	background: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
	border-radius: 0 0 var(--nol-radius) var(--nol-radius);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--nol-prechod);
}

.nol-preskocit:focus {
	transform: translateY(0);
	color: var(--nol-primarni-kontrast);
}

/* =========================================================================
   HLAVIČKA
   -------------------------------------------------------------------------
   Hlavička má DVĚ podoby a přepínají se lokální proměnné, ne sada pravidel:
     • plná (podstránky, odrolovaná titulka) — bílý povrch, tmavý text
     • překryvná (vršek titulky) — průhledná nad fotkou, bílý text
   Díky lokálním proměnným je každé pravidlo napsané jednou.
   ========================================================================= */

.nol-hlavicka {
	--h-pozadi: var(--nol-povrch);
	--h-text:   var(--nol-text);
	--h-tlumene: var(--nol-text-tlumeny);
	--h-linka:  var(--nol-ramecek);
	--h-navigace: var(--nol-povrch);
	--h-tlacitko-pozadi: transparent;
	--h-tlacitko-linka:  var(--nol-ramecek);

	position: sticky;
	top: 0;
	z-index: var(--nol-vrstva-hlavicka);
	background: var(--h-pozadi);
	color: var(--h-text);
	border-bottom: 1px solid var(--h-linka);
	transition: background-color var(--nol-prechod-dlouhy),
	            box-shadow var(--nol-prechod-dlouhy),
	            border-color var(--nol-prechod-dlouhy);
}

/* Překryvná podoba: platí jen do prvního odrolování. Fotka pod hlavičkou je
   vždy ztmavená překryvem úvodního pásu, takže bílý text na ní drží kontrast
   (nejsvětlejší místo překryvu má 0.42 krytí černé → min. 4.8:1). */
.nol-hlavicka--prekryv:not(.je-odrolovana) {
	--h-pozadi: transparent;
	--h-text:   var(--nol-na-tmave);
	--h-tlumene: var(--nol-na-tmave-tlumene);
	--h-linka:  transparent;
	--h-navigace: transparent;
	--h-tlacitko-pozadi: rgb(255 255 255 / 0.12);
	--h-tlacitko-linka:  var(--nol-na-tmave-linka);
}

.nol-hlavicka.je-odrolovana { box-shadow: var(--nol-stin); }

.nol-hlavicka-radek {
	display: flex;
	align-items: center;
	gap: var(--nol-mezera-4);
	min-height: var(--nol-vyska-hlavicky);
	transition: min-height var(--nol-prechod);
}

/* Po odrolování se hlavička smrskne, aby obsah dostal víc místa. Zmenšuje se
   jen geometrie, nic nemizí z pořadí tabulátoru — jinak by klávesnice ztratila
   prvek pod rukama. Podtitul je jediná výjimka: je dekorativní, a `hidden`
   ho z pořadí neodstraní, protože to není interaktivní prvek. */
@media (min-width: 992px) {
	.nol-hlavicka.je-odrolovana .nol-hlavicka-radek {
		min-height: var(--nol-vyska-hlavicky-mala);
	}

	.nol-hlavicka.je-odrolovana .nol-znak {
		height: 36px;
	}

	.nol-hlavicka.je-odrolovana .nol-znacka-podtitul { display: none; }

	.nol-hlavicka.je-odrolovana .nol-navigace .top-btn {
		padding-block: var(--nol-mezera-2);
	}
}

/* ── Horní servisní lišta ──────────────────────────────────────────────
   Nad překryvnou hlavičkou je průhledná (jinak by nad fotkou visel černý
   pruh), jinde tmavý inkoust. */

.nol-servisni-lista {
	background: var(--nol-pruh-hloubka);
	color: var(--nol-na-tmave);
	font-size: var(--nol-text-xs);
	border-bottom: 1px solid var(--nol-pruh-linka);
	transition: background-color var(--nol-prechod-dlouhy),
	            border-color var(--nol-prechod-dlouhy);
}

.nol-hlavicka--prekryv:not(.je-odrolovana) .nol-servisni-lista {
	background: rgb(0 0 0 / 0.22);
	border-bottom-color: var(--nol-na-tmave-linka);
}

/* Na mobilu se do lišty vejde jen první skupina — druhá je duplicitou
   odkazů z patičky a z off-canvas nabídky, takže se skryje. */
@media (max-width: 767px) {
	.nol-servisni-odkazy + .nol-servisni-odkazy { display: none; }
}

.nol-servisni-lista .nol-obal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nol-mezera-3);
	min-height: 40px;
}

.nol-servisni-odkazy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nol-mezera-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nol-servisni-odkazy li { margin: 0; }

.nol-servisni-lista a {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
	padding-block: var(--nol-mezera-2);
	color: inherit;
	text-decoration: none;
	opacity: 0.88;
	transition: opacity var(--nol-prechod);
}

.nol-servisni-lista a:hover { opacity: 1; text-decoration: underline; }

/* ── Značka ────────────────────────────────────────────────────────── */

.nol-znacka {
	display: flex;
	align-items: center;
	gap: var(--nol-mezera-3);
	margin-right: auto;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.nol-znacka img,
.nol-znacka svg {
	flex: none;
	/* Rozměr drží VÝŠKA, šířku dopočítá poměr stran. Úřední znak obce má
	   vlastní proporci (189 : 220) a natvrdo zadaná dvojice px by ho
	   zdeformovala. */
	width: auto;
	height: 52px;
	border-radius: 0;
}

.nol-znacka-nazev {
	font-family: var(--nol-pismo-nadpis);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.nol-znacka-podtitul {
	display: block;
	margin-top: 2px;
	font-family: var(--nol-pismo);
	font-size: var(--nol-text-xs);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--h-tlumene);
}

/* Úřední znak obce má vlastní černý obrys, takže žádnou pomocnou linku
   nepotřebuje. Na tmavém podkladu (překryvná hlavička nad fotkou) by ale
   splynul, proto tenký světlý stín. Barvy uvnitř jsou heraldické, tokeny
   se jich netýkají. */
.nol-znak {
	filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.5));
	transition: height var(--nol-prechod);
}

/* Na bílé hlavičce podstránek i po sbalení světlý stín nedělá nic — a černý
   obrys znaku by pod ním byl matný. */
.nol-hlavicka:not(.nol-hlavicka--prekryv) .nol-znak,
.nol-hlavicka.je-odrolovana .nol-znak {
	filter: none;
}

.nol-hlavicka-nastroje {
	display: flex;
	align-items: center;
	gap: var(--nol-mezera-2);
}

/* ── Hlavní navigace (mega menu) ───────────────────────────────────── */

.nol-navigace {
	border-top: 1px solid var(--h-linka);
	background: var(--h-navigace);
	transition: background-color var(--nol-prechod-dlouhy),
	            border-color var(--nol-prechod-dlouhy);
}

.nol-navigace .m-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--nol-mezera-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.nol-navigace .m-nav > li { position: relative; margin: 0; }

/* Odkaz 1. úrovně — .top-btn emituje a3_menu_megamenu(). */
.nol-navigace .top-btn {
	display: flex;
	align-items: center;
	gap: var(--nol-mezera-2);
	padding: var(--nol-mezera-4) var(--nol-mezera-4);
	color: var(--h-text);
	font-family: var(--nol-pismo-nadpis);
	font-weight: 600;
	font-size: var(--nol-text-zakl);
	letter-spacing: -0.005em;
	text-decoration: none;
	border-bottom: 3px solid transparent;
	transition: color var(--nol-prechod), border-color var(--nol-prechod);
}

.nol-navigace .top-btn:hover,
.nol-navigace .top-btn[aria-expanded="true"],
.nol-navigace .top-btn.show {
	color: var(--h-text);
	border-bottom-color: var(--nol-zlata);
}

/* Na plné (bílé) hlavičce svítí aktivní položka zelení značky; na překryvné
   by zeleň na fotce zanikla, proto tam zůstává bílý text a zlatá linka. */
.nol-hlavicka:not(.nol-hlavicka--prekryv) .nol-navigace .top-btn:hover,
.nol-hlavicka.je-odrolovana .nol-navigace .top-btn:hover,
.nol-hlavicka:not(.nol-hlavicka--prekryv) .nol-navigace .top-btn[aria-expanded="true"],
.nol-hlavicka.je-odrolovana .nol-navigace .top-btn[aria-expanded="true"] {
	color: var(--nol-primarni);
}

/* Šipka rozbalení — admin3 emituje prázdný <span class="ico-menu ico1">. */
.nol-navigace .ico-menu {
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: 0.6;
	transition: transform var(--nol-prechod);
}

.nol-navigace .top-btn[aria-expanded="true"] .ico-menu { transform: rotate(180deg); }

/* Panel mega menu. Bootstrap JS na něm přepíná .show.

   VÝŠKA JE OMEZENÁ A PANEL ROLUJE. Sekce „Život v obci" má přes třicet
   položek a bez limitu vyrostla pod dolní hranu okna — spodní odkazy se
   nedaly ani přečíst, ani na ně kliknout, protože roluje stránka pod
   panelem, ne panel.

   Odečítá se `--nol-hlavicka-vyska` (měří ji noveolsany.js) plus mezera.
   Je to needrolovaná, tedy NEJVĚTŠÍ výška hlavičky: po sbalení zbude dole
   o pár desítek pixelů víc místa, než panel využije. To je záměr — počítat
   s menší hodnotou by znamenalo, že v needrolovaném stavu panel přeteče.
   Záložní hodnota v `var()` platí, dokud JS nedoběhne (a bez JS napořád). */
.nol-navigace .dropdown-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: var(--nol-vrstva-menu);
	display: none;
	min-width: min(760px, 92vw);
	max-width: 92vw;
	max-height: calc(100dvh - var(--nol-hlavicka-vyska, 190px) - var(--nol-mezera-5));
	overflow-y: auto;
	/* Doroluje-li se panel na konec, nesmí se rolování přelít na stránku pod ním. */
	overscroll-behavior: contain;
	padding: var(--nol-mezera-5);
	background: var(--nol-povrch);
	border: 1px solid var(--nol-ramecek);
	border-top: 3px solid var(--nol-primarni);
	border-radius: 0 0 var(--nol-radius-lg) var(--nol-radius-lg);
	box-shadow: var(--nol-stin-lg);
}

.nol-navigace .dropdown-menu.show { display: block; }

/* Poslední položky se nesmí vysypat mimo obrazovku. */
.nol-navigace .m-nav > li:nth-last-child(-n+2) .dropdown-menu { left: auto; right: 0; }

.nol-navigace .menu2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: var(--nol-mezera-5);
}

.nol-navigace .clmn { min-width: 0; }

.nol-navigace .toplink a,
.nol-navigace .sublink a,
.nol-navigace .sublink2 a,
.nol-navigace .sublink3 a {
	display: block;
	padding: var(--nol-mezera-2) var(--nol-mezera-3);
	border-radius: var(--nol-radius-sm);
	color: var(--nol-text);
	text-decoration: none;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

.nol-navigace .toplink a {
	font-family: var(--nol-pismo-nadpis);
	font-weight: 700;
	font-size: var(--nol-text-zakl);
	margin-top: var(--nol-mezera-3);
}

.nol-navigace .clmn > .toplink:first-child a { margin-top: 0; }

.nol-navigace .sublink  a { padding-left: var(--nol-mezera-5); font-size: var(--nol-text-sm); color: var(--nol-text-tlumeny); }
.nol-navigace .sublink2 a { padding-left: var(--nol-mezera-6); font-size: var(--nol-text-sm); color: var(--nol-text-tlumeny); }
.nol-navigace .sublink3 a { padding-left: var(--nol-mezera-7); font-size: var(--nol-text-xs); color: var(--nol-text-tlumeny); }

.nol-navigace .dropdown-menu a:hover {
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.nol-navigace .activelink > a,
.nol-navigace .dropdown-menu .activelink a {
	color: var(--nol-primarni);
	font-weight: 700;
}

/* Mega menu je jen pro velké obrazovky — mobil má off-canvas panel. */
@media (max-width: 991px) {
	.nol-navigace { display: none; }
}

@media (min-width: 992px) {
	.nol-mobilni-prepinac { display: none; }
}

/* ── Drobečková navigace ───────────────────────────────────────────── */

.nol-drobecky {
	background: var(--nol-povrch);
	border-bottom: 1px solid var(--nol-ramecek);
}

/* ── Hlavní obsah ──────────────────────────────────────────────────── */

.nol-telo {
	flex: 1 0 auto;
	padding-block: var(--nol-mezera-7) var(--nol-mezera-sekce);
}

.nol-telo--titulka { padding-block: 0; }

/* Rozvržení podstránky: obsah + boční panel. */
.nol-mrizka-podstranky {
	display: grid;
	gap: var(--nol-mezera-6);
	align-items: start;
}

@media (min-width: 992px) {
	.nol-mrizka-podstranky--s-panelem {
		grid-template-columns: minmax(0, 3fr) minmax(280px, 1fr);
		gap: var(--nol-mezera-7);
	}
	.nol-mrizka-podstranky--s-panelem-vlevo {
		grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr);
		gap: var(--nol-mezera-7);
	}
	.nol-bocni-panel {
		position: sticky;
		top: calc(var(--nol-vyska-hlavicky-mala) + var(--nol-mezera-4));
		max-height: calc(100vh - var(--nol-vyska-hlavicky-mala) - var(--nol-mezera-6));
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* Boční panel je na mobilu pod obsahem, ne nad ním. */
@media (max-width: 991px) {
	.nol-bocni-panel--menu { order: -1; }
	.nol-bocni-panel--boxy { order: 1; }
}

/* Položky mřížky NIKDY nesmí být širší než stopa: bez `min-width: 0` je jejich
   automatické minimum min-content, takže jediný široký obrázek uvnitř roztáhne
   celý sloupec. Pod 992 px má mřížka jen JEDNU stopu — obsah i oba panely v ní
   stojí za sebou, takže přetečení z jednoho panelu roztáhne i ten druhý (i ten
   úplně textový). Nad 992 px to `overflow-y: auto` na panelu maskuje (overflow
   != visible ⇒ automatické minimum 0), proto se to projeví jen na mobilu. */
.nol-obsah,
.nol-bocni-panel { min-width: 0; }

/* Dlouhé redakční texty se čtou lépe v omezené šířce. */
.nol-obsah > p,
.nol-obsah > ul,
.nol-obsah > ol { max-width: var(--nol-sirka-textu); }

/* ── Sekce titulky ─────────────────────────────────────────────────── */

.nol-sekce { padding-block: var(--nol-mezera-sekce); }

.nol-sekce--tlumena { background: var(--nol-pozadi-tlumene); }

/* Dvě sekce na TÉMŽE podkladu nesmí platit odsazení dvakrát. Dokud měl obsah
   titulky tlumený pruh, byla hranice mezi sekcemi vidět a dvojité odsazení
   fungovalo jako předěl; po jeho sundání (obsah titulky a obsah podstránky
   patří na stejný papír) z něj zůstala prázdná díra přes 11 rem mezi pásem
   úkonů a prvním výpisem. Odsazení nese sekce PŘED předělem. */
.nol-sekce + .nol-sekce { padding-top: 0; }

/* Sekce s vlastním podkladem si ho bere zpátky — tam je hranice vidět
   a obsah od ní musí dýchat. */
.nol-sekce + .nol-sekce--tlumena { padding-top: var(--nol-mezera-sekce); }

/* ── Patička ───────────────────────────────────────────────────────── */

.nol-paticka {
	flex: none;
	margin-top: auto;
	background: var(--nol-pruh);
	color: var(--nol-na-tmave);
	padding-block: var(--nol-mezera-8) var(--nol-mezera-5);
}

.nol-paticka a { color: var(--nol-na-tmave); text-decoration: none; opacity: 0.82; }
.nol-paticka a:hover { opacity: 1; text-decoration: underline; }

.nol-paticka-mrizka {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--nol-mezera-6);
	margin-bottom: var(--nol-mezera-7);
}

/* Sloupec obce je širší — nese erb, adresu i kontaktní řádky. */
@media (min-width: 992px) {
	.nol-paticka-mrizka { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--nol-mezera-7); }
}

.nol-paticka-obec h2 {
	font-size: var(--nol-nadpis-3);
	text-transform: none;
	letter-spacing: -0.02em;
	opacity: 1;
	margin-bottom: var(--nol-mezera-2);
}

.nol-znak--paticka {
	height: 66px;
	margin-bottom: var(--nol-mezera-4);
	filter: none;
}

.nol-paticka address {
	font-style: normal;
	margin-bottom: var(--nol-mezera-4);
	color: var(--nol-na-tmave-tlumene);
}

.nol-paticka-kontakt li {
	display: flex;
	align-items: center;
	gap: var(--nol-mezera-3);
}

.nol-paticka-kontakt svg { flex: none; opacity: 0.55; }

/* Náměty ke zlepšení webu — jediné tlačítko v patičce, proto smí být výrazné. */
.nol-namet {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
	margin-top: var(--nol-mezera-5);
	padding: var(--nol-mezera-3) var(--nol-mezera-5);
	border: 1px solid var(--nol-na-tmave-linka);
	border-radius: var(--nol-radius-pill);
	font-size: var(--nol-text-sm);
	font-weight: 600;
	opacity: 1;
}

.nol-namet:hover {
	background: rgb(255 255 255 / 0.08);
	text-decoration: none;
}

/* Sloupec obce má vlastní nadpis (název obce), ostatní sloupce nesou
   verzálkový popisek — proto :not(), ne pořadí pravidel. */
.nol-paticka-mrizka > div:not(.nol-paticka-obec) > h2,
.nol-paticka h3 {
	font-family: var(--nol-pismo);
	font-size: var(--nol-text-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--nol-zlata);
	opacity: 1;
	margin-bottom: var(--nol-mezera-4);
}

/* Tiché tlačítko (nastavení cookies) stojí v patičce na inkoustu — musí si
   vzít barvu odtud, ne z obsahové palety, kde je tlumený text tmavý. */
.nol-paticka .nol-tlacitko--tise {
	padding: 0;
	min-height: 0;
	color: var(--nol-na-tmave);
	opacity: 0.82;
	text-align: left;
	font-weight: 400;
}

.nol-paticka .nol-tlacitko--tise:hover {
	background: transparent;
	color: var(--nol-na-tmave);
	opacity: 1;
	text-decoration: underline;
}

.nol-paticka ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--nol-mezera-3);
}

.nol-paticka li + li { margin-top: 0; }

.nol-paticka-spodek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--nol-mezera-3);
	padding-top: var(--nol-mezera-5);
	border-top: 1px solid var(--nol-na-tmave-linka);
	font-size: var(--nol-text-sm);
	color: var(--nol-na-tmave-tlumene);
}

/* ── Tlačítko zpět nahoru ──────────────────────────────────────────── */

.nol-nahoru {
	position: fixed;
	right: var(--nol-mezera-5);
	bottom: var(--nol-mezera-5);
	z-index: var(--nol-vrstva-sticky);
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius-pill);
	background: var(--nol-povrch);
	color: var(--nol-text);
	box-shadow: var(--nol-stin);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--nol-prechod), transform var(--nol-prechod),
	            visibility var(--nol-prechod), background-color var(--nol-prechod);
}

.nol-nahoru:hover { background: var(--nol-primarni); color: var(--nol-primarni-kontrast); }

.nol-nahoru.je-videt { opacity: 1; visibility: visible; transform: none; }