/* =========================================================================
   layout.css — kostra stránky: obal, hlavička s mega menu, podhlava
   podstránky, obsah s bočním panelem, patička.
   Rozměry podle návrhu v3 (`.context/navrhy/olsany/olsany-v3.css`).
   ========================================================================= */

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

@media (max-width: 1600px) { :root { --nol-okraj: 48px; } }
@media (max-width: 991px)  { :root { --nol-okraj: 24px; } }
@media (max-width: 575px)  { :root { --nol-okraj: 16px; } }

/* ── 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);
	font-weight: 600;
	text-decoration: none;
	transition: transform var(--nol-prechod);
}

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

/* =========================================================================
   HLAVIČKA
   -------------------------------------------------------------------------
   Nahoře tmavě modrá lišta 40 px (úřední hodiny, kontakt, rychlé odkazy),
   pod ní bílý řádek 116 px: znak 84 px a „Obec / Olšany / podtitul", vpravo
   mega menu (Figtree 20/700, položky se červeným podtržením textu).
   Lepí se; po odrolování (`.je-odrolovana`, prahy v strankovice3.js) lišta zmizí,
   řádek se zmenší na 84 px a schová podtitul. Lišta jen opakuje odkazy
   dostupné jinde, takže z tabulátoru nemizí nic, co by jinde nebylo.
   ========================================================================= */

.nol-hlavicka {
	position: sticky;
	top: 0;
	z-index: var(--nol-vrstva-hlavicka);
	background: var(--nol-povrch);
	transition: box-shadow var(--nol-prechod-dlouhy);
}

.nol-hlavicka.je-odrolovana { box-shadow: 0 1px 0 var(--nol-ramecek), var(--nol-stin); }

/* ── Lišta nad hlavičkou ───────────────────────────────────────────── */

.nol-lista {
	background: var(--nol-primarni-hluboka);
	color: var(--nol-na-tmave-tlumene);
	font-size: 14px;
	line-height: 1;
}

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

.nol-lista-radek {
	display: flex;
	align-items: center;
	gap: 28px;
	height: var(--nol-vyska-listy);
}

.nol-lista a { color: var(--nol-na-tmave); text-decoration: none; }
.nol-lista a:hover { color: var(--nol-na-tmave-tlumene); }

.nol-lista-polozka { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.nol-lista-polozka svg { width: 16px; height: 16px; flex: none; color: var(--nol-na-tmave); }

.nol-lista-odkazy { margin-left: auto; display: flex; gap: 24px; }
.nol-lista-odkazy a { font-weight: 600; white-space: nowrap; }

.nol-hlavicka-radek {
	display: flex;
	align-items: center;
	gap: 40px;
	height: var(--nol-vyska-hlavicky);
	transition: height var(--nol-prechod-dlouhy);
}

.nol-hlavicka.je-odrolovana .nol-hlavicka-radek { height: var(--nol-vyska-hlavicky-mala); }

.nol-znacka {
	display: flex;
	align-items: center;
	gap: 20px;
	min-width: 0;
	color: var(--nol-text);
	text-decoration: none;
}

.nol-znacka:hover { color: var(--nol-text); }

/* Znak: rozměr drží VÝŠKU, šířku dopočítá (poměr úředního znaku). */
.nol-znak {
	height: 84px;
	width: auto;
	flex: none;
	border-radius: 0;
	transition: height var(--nol-prechod-dlouhy);
}

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

.nol-znacka-text { display: block; min-width: 0; }

.nol-znacka-pre {
	display: block;
	font-family: var(--nol-pismo-nadpis);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

.nol-znacka-nazev {
	display: block;
	font-family: var(--nol-pismo-nadpis);
	font-size: 38px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	transition: font-size var(--nol-prechod-dlouhy);
}

.nol-znacka-podtitul {
	display: block;
	margin-top: 6px;
	font-size: 15px;
	color: var(--nol-text-tlumeny);
}

.nol-hlavicka.je-odrolovana .nol-znacka-nazev { font-size: 32px; }
.nol-hlavicka.je-odrolovana .nol-znacka-pre { font-size: 16px; }
.nol-hlavicka.je-odrolovana .nol-znacka-podtitul { display: none; }

/* ── Mega menu ─────────────────────────────────────────────────────── */

.nol-navigace { margin-left: auto; align-self: stretch; display: flex; }

.nol-navigace .m-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	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: 14px 18px;
	border: 0;
	background: none;
	color: var(--nol-text);
	font-family: var(--nol-pismo-nadpis);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--nol-prechod), box-shadow var(--nol-prechod);
}

/* Položky mají trvale červené podtržení textu (lupa ne — je to ikona).
   Aktivní sekce (obsahuje aktuální stránku) a otevřený panel = modrý text. */
.nol-navigace .top-btn:not(.nol-hledani-prepinac) {
	text-decoration: underline;
	text-decoration-color: var(--nol-cervena);
	text-decoration-thickness: 3px;
	text-underline-offset: 9px;
}

.nol-navigace .top-btn:hover,
.nol-navigace .top-btn[aria-expanded="true"],
.nol-navigace .m-nav > li:has(.activelink) > .top-btn {
	color: var(--nol-primarni);
}

/* Šipka rozbalení — admin3 emituje prázdný <span class="ico-menu ico1">.
   Návrh ji nemá; panel ohlašuje `aria-expanded`. */
.nol-navigace .ico-menu { display: none; }

/* 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
   by spodní odkazy byly pod dolní hranou okna. */
.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-vyska-hlavicky) - var(--nol-mezera-5));
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 28px 28px 24px;
	background: var(--nol-povrch);
	border-bottom: 4px solid var(--nol-primarni);
	box-shadow: var(--nol-stin-karta);
}

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

/* Poslední položky se nesmí vysypat mimo obrazovku. */
.nol-navigace .m-nav > li:nth-last-child(-n+3) .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: 6px var(--nol-mezera-3);
	color: var(--nol-text);
	text-decoration: none;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

.nol-navigace .toplink a {
	margin-top: var(--nol-mezera-3);
	font-family: var(--nol-pismo-nadpis);
	font-size: 17px;
	font-weight: 800;
}

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

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

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

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

/* ── Hledání jako poslední položka menu ────────────────────────────────
   Lupa otevře panel s polem pod hlavičkou, zarovnaný k pravé hraně.
   Bez JS je panel `hidden` a lupa nic nedělá — hledání pak zůstává
   v úvodním pásu titulky a ve výsledcích hledání; proto se lupa bez JS
   neukazuje vůbec. */
.nol-nav-hledani .top-btn { padding-inline: 14px; }
.nol-nav-hledani .top-btn svg { width: 24px; height: 24px; }
:root:not([data-js]) .nol-nav-hledani { display: none; }

.nol-hledani-panel {
	position: absolute;
	top: 100%;
	right: 0;
	z-index: var(--nol-vrstva-menu);
	width: min(560px, 90vw);
	padding: 20px;
	background: var(--nol-povrch);
	border-bottom: 4px solid var(--nol-primarni);
	box-shadow: var(--nol-stin-karta);
}

.nol-hledani-panel[hidden] { display: none; }

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

/* Dvě třídy: `.nol-ikona-tlacitko { display: grid }` v components.css se
   načítá později a se stejnou specificitou by tlačítko vrátilo. */
@media (min-width: 1200px) {
	.nol-ikona-tlacitko.nol-mobilni-prepinac { display: none; }
}

@media (max-width: 1199px) {
	.nol-mobilni-prepinac { margin-left: auto; }
	.nol-lista-mail { display: none; }
	.nol-hlavicka-radek { height: 112px; gap: var(--nol-mezera-4); }
	.nol-znak { height: 76px; }
	.nol-znacka { gap: 14px; }
	.nol-znacka-pre { font-size: 17px; }
	.nol-znacka-nazev { font-size: 34px; }
	.nol-znacka-podtitul { font-size: 13.5px; }
}

@media (max-width: 767px) {
	.nol-lista-hodiny { display: none; }
}

@media (max-width: 575px) {
	.nol-lista-odkazy a:not(:first-child) { display: none; }
	.nol-hlavicka-radek { height: 84px; }
	.nol-znak { height: 56px; }
	.nol-znacka { gap: 10px; }
	.nol-znacka-pre { font-size: 14px; }
	.nol-znacka-nazev { font-size: 26px; }
	.nol-znacka-podtitul { display: none; }
}

/* =========================================================================
   PODHLAVA PODSTRÁNKY — fotka obce, drobečky, H1 se červenou linkou
   (návrh `olsany-v2-bloky.css` → .podhlava). Fotka jde z `--nol-podhlava-foto`
   (první fotka 1. řádku hlavní strany, nol_podhlava_styl()); bez ní podklad
   značky.
   ========================================================================= */

.nol-podhlava {
	position: relative;
	display: flex;
	min-height: 300px;
	background: var(--nol-pruh) var(--nol-podhlava-foto, var(--nol-uvod-zaloha)) center 60% / cover no-repeat;
	color: var(--nol-na-tmave);
}

.nol-podhlava::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, color-mix(in srgb, var(--nol-pruh) 90%, transparent) 0, color-mix(in srgb, var(--nol-pruh) 66%, transparent) 45%, color-mix(in srgb, var(--nol-pruh) 25%, transparent) 100%);
}

.nol-podhlava .nol-obal {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-top: 48px;
	padding-bottom: 48px;
}

.nol-podhlava h1 {
	margin: 0;
	max-width: 1100px;
	color: var(--nol-na-tmave);
	font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
}

.nol-podhlava h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin-top: 16px;
	background: var(--nol-cervena);
}

/* Drobečky z a3_vypis_drobecky(): <ol class="breadcrumb"><li>… */
.nol-drobecky { margin-bottom: 18px; }

.nol-drobecky .breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 15px;
	color: rgba(255, 255, 255, .8);
}

.nol-drobecky .breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: 8px; }

.nol-drobecky .breadcrumb li + li::before {
	content: "";
	width: 7px;
	height: 7px;
	border-right: 1.9px solid currentColor;
	border-top: 1.9px solid currentColor;
	transform: rotate(45deg);
	margin-right: 4px;
}

.nol-drobecky .breadcrumb a { color: rgba(255, 255, 255, .8); text-decoration: none; }
.nol-drobecky .breadcrumb a:hover { color: var(--nol-na-tmave); text-decoration: underline; }
.nol-drobecky .breadcrumb .active { color: rgba(255, 255, 255, .8); font-weight: 400; }
.nol-drobecky .breadcrumb li:last-child { color: var(--nol-na-tmave); font-weight: 600; }
.nol-drobecky .breadcrumb i { display: none; }

@media (max-width: 767px) {
	.nol-podhlava { min-height: 200px; }
	.nol-podhlava .nol-obal { padding-top: 32px; padding-bottom: 32px; }
}

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

.nol-telo {
	flex: 1 0 auto;
	padding-block: 64px 80px;
}

.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-vlevo {
		grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
		gap: 64px;
	}
	.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 nad obsahem (navigace sekce). */
@media (max-width: 991px) {
	.nol-bocni-panel--menu { 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. */
.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 (obecná) ────────────────────────────────────────── */

.nol-sekce { padding-block: 80px; }

/* =========================================================================
   PATIČKA — 4 sloupce + tmavě modrý pruh (návrh v2 → .pata, .lista)
   ========================================================================= */

.nol-paticka {
	flex: none;
	margin-top: auto;
	border-top: 1px solid var(--nol-ramecek);
	background: var(--nol-povrch);
	font-size: 17px;
}

.nol-paticka-mrizka {
	display: grid;
	grid-template-columns: 1fr 1.15fr 1.15fr 1.2fr;
	gap: 40px;
	padding-block: 72px 64px;
}

.nol-paticka-obec {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.nol-znak--paticka { height: 104px; }

.nol-paticka-jmeno {
	margin: 0;
	font-family: var(--nol-pismo-nadpis);
	font-size: 30px;
	font-weight: 800;
	line-height: 1.05;
}

.nol-paticka h2 {
	margin: 0 0 14px;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0;
}

.nol-paticka-rad {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 10px;
}

.nol-paticka-rad svg {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 4px;
	color: var(--nol-primarni);
}

.nol-paticka address { margin: 0; font-style: normal; }

.nol-paticka-mrizka a:not(.nol-tlacitko) { color: var(--nol-text); text-decoration: none; }
.nol-paticka-mrizka a:not(.nol-tlacitko):hover { color: var(--nol-primarni); text-decoration: underline; }

.nol-paticka dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 6px 16px;
	margin: 0;
}

.nol-paticka dt { color: var(--nol-text-tlumeny); font-weight: 400; white-space: nowrap; }
.nol-paticka dd { margin: 0; }

.nol-paticka-pozn {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--nol-text-tlumeny);
}

.nol-paticka .nol-tlacitko { margin-top: 20px; height: 50px; }

.nol-paticka-boxy {
	padding-block: var(--nol-mezera-5) var(--nol-mezera-6);
	border-top: 1px solid var(--nol-ramecek);
}

.nol-paticka-pruh {
	background: var(--nol-pruh);
	color: var(--nol-na-tmave);
	font-size: 15px;
}

.nol-paticka-pruh .nol-obal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 28px;
	min-height: 64px;
	padding-block: 12px;
}

.nol-paticka-pruh a,
.nol-paticka-pruh button {
	padding: 0;
	border: 0;
	background: none;
	color: var(--nol-na-tmave);
	font: inherit;
	text-decoration: none;
	cursor: pointer;
}

.nol-paticka-pruh a:hover,
.nol-paticka-pruh button:hover { text-decoration: underline; }

.nol-paticka-pruh span { color: var(--nol-na-tmave-tlumene); }

@media (max-width: 1199px) {
	.nol-paticka-mrizka { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 575px) {
	.nol-paticka-mrizka { grid-template-columns: 1fr; gap: 32px; padding-block: 48px; }
	.nol-paticka-pruh .nol-obal { justify-content: flex-start; }
}

/* ── 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: 48px;
	height: 48px;
	border: 0;
	background: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
	box-shadow: inset 0 -3px 0 var(--nol-cervena), 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 svg { width: 22px; height: 22px; }
.nol-nahoru:hover { background: var(--nol-primarni-tmava); }
.nol-nahoru.je-videt { opacity: 1; visibility: visible; transform: none; }