/* ===========================================================================
   Živé dědictví — vzhled tématu „Inventář".

   theme.json řeší barvy, písmo, rozestupy a tlačítka. Sem patří jen to, co
   se přes theme.json vyjádřit nedá: šikmý řez, hlavička, patička a výpisy.

   Jeden úhel řezu (--ded-w-rez) drží štítky sekcí i dlaždice. Barvu nese
   jen akce (červená podle manuálu); nic jiného barvou nekřičí.
   =========================================================================== */

:root {
	--ded-w-ink: var(--wp--preset--color--inkoust, #000000);
	--ded-w-soft: var(--wp--preset--color--text, #4a4a4a);
	--ded-w-mut: var(--wp--preset--color--tichy, #7d7d7d);
	--ded-w-line: var(--wp--preset--color--linka, #e2e2e2);
	--ded-w-band: var(--wp--preset--color--pas, #efefef);
	--ded-w-red: var(--wp--preset--color--cervena, #a81521);
	--ded-w-rez: 15px;
	--ded-w-obal: 1400px;

	/* Odvozené odstíny. Hodnoty tady jsou záložní pro starší prohlížeče;
	   níže se dopočítají z palety, aby se změnou značkové barvy odstíny
	   nezůstaly staré. */
	--ded-w-red-tm: #7e0f18;
	--ded-w-red-svetla: #fbeaec;
	--ded-w-prsten: rgba(168, 21, 33, .18);
	--ded-w-line-tm: #c9c9c9;
	--ded-w-stin: 0 1px 3px rgba(0, 0, 0, .07);
	--ded-w-radius: 4px;
	--ded-w-radius-lg: 6px;

	/* Stavové barvy. Nesou informaci (stav zápisu, úroveň uznání), takže
	   nejsou součástí značky a schválně se od červené odlišují. */
	--ded-stav-ok: #2f6b45;
	--ded-stav-pozor: #b8760c;
	--ded-stav-pozor-tm: #7a4e08;
	/* Schválně nesleduje značkovou barvu: chyba je červená proto, že to znamená
	   chybu, ne proto, že je červená značka. Dnes je to táž hodnota, ale kdyby
	   se značka změnila, chybová barva má zůstat červená. */
	--ded-stav-chyba: #a81521;
	--ded-stav-navrh: #4a4a8f;
	--ded-stav-navrh-svetla: #a9a9d4;
	--ded-stav-navrh-pozadi: #eeeef7;
	--ded-stav-narodni: #2d6a9f;
	--ded-stav-narodni-svetla: #85b7eb;
	--ded-stav-narodni-pozadi: #e6eef5;
}

/* Odstíny značkové barvy se počítají z palety, ne přepisují ručně.
   Bez toho zůstane po změně červené v theme.json stará barva na najetí myší,
   na světlém podkladu i na prstenci u zaostřeného pole a rozjede se to.

   Proč @supports a ne dvě deklarace za sebou: vlastní vlastnost přijme skoro
   cokoli už při čtení, takže by druhá deklarace vyhrála i tam, kde prohlížeč
   color-mix neumí, a barva by se pak nevykreslila vůbec. Takhle si starší
   prohlížeč nechá záložní hodnoty výše.

   Poměry jsou odečtené z původních odstínů, aby se vzhled nezměnil. */
@supports (color: color-mix(in srgb, red 50%, #000)) {
	:root {
		--ded-w-red-tm: color-mix(in srgb, var(--ded-w-red) 75%, #000);
		--ded-w-red-svetla: color-mix(in srgb, var(--ded-w-red) 9%, #fff);
		--ded-w-prsten: color-mix(in srgb, var(--ded-w-red) 18%, transparent);
		--ded-w-line-tm: color-mix(in srgb, var(--ded-w-line) 89%, #000);
	}
}

body { -webkit-font-smoothing: antialiased; }

/* Formulářová pole si prohlížeč jinak sází vlastním systémovým písmem,
   takže by uprostřed stránky v Open Sans stálo pole v Arialu. */
input,
select,
textarea,
button {
	font-family: inherit;
}

:where(a):focus-visible,
:where(button):focus-visible {
	outline: 2.5px solid var(--ded-w-red);
	outline-offset: 3px;
}

/* --- Značka -------------------------------------------------------------- */

.ded-znacka { display: flex; align-items: center; gap: 16px; }

/* Zaříznutá vlajka — nosný prvek návrhu Inventář.

   Logo je v ní bílé natvrdo, souborem `assets/logo-bile.png` (vzor
   „Značka v zaříznuté vlajce"). Převracení filtrem tu bylo dřív, ale
   selhává, jakmile má logo neprůhledný podklad: z celé plochy se stane
   bílý obdélník. Vyměnit logo jde přepsáním toho souboru; černá podoba
   v patičce zůstává blokem Logo webu a mění se v Přizpůsobit. */
.ded-vlajka {
	background: var(--ded-w-ink);
	/* Vlajka je vysoká jako tlačítko v hlavičce, ať spolu drží linku. */
	padding: 8px 24px 8px 14px;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--ded-w-rez)) 100%, 0 100%);
	line-height: 0;
}

.ded-vlajka .ded-vlajka-logo { margin: 0; }
.ded-vlajka .ded-vlajka-logo img {
	display: block;
	height: 33px;
	width: auto;
	max-width: none;
}

/* Na úzkém displeji se vlajka i řez zmenší, ať nepolyká celý řádek. */
@media (max-width: 600px) {
	.ded-vlajka { padding: 9px 18px 9px 11px; }
	.ded-vlajka .ded-vlajka-logo img { height: 27px; }
}

/* Logo podle manuálu: zjednodušená verze, černá na bílé. */
.ded-znacka .wp-block-site-logo,
.ded-paticka .wp-block-site-logo { margin: 0; }
.ded-znacka .wp-block-site-logo img { display: block; height: auto; }

/* Ochranný prostor kolem loga podle manuálu. */
.ded-znacka .wp-block-site-logo { padding-right: 4px; }

.ded-kraj {
	font-weight: 700;
	font-size: 13px;
	line-height: 1.15;
	letter-spacing: .05em;
	text-transform: uppercase;
	margin: 0;
}

/* --- Hlavička ------------------------------------------------------------ */

.ded-hlavicka { padding-block: 16px; }
.ded-hlavicka .wp-block-navigation { gap: 24px; }
.ded-hlavicka .wp-block-navigation a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Na mobilu se menu schová pod hamburger; položky nesmí zmizet bez náhrady. */
.ded-hlavicka .wp-block-navigation__responsive-container-open,
.ded-hlavicka .wp-block-navigation__responsive-container-close {
	color: var(--ded-w-ink);
}
.ded-hlavicka .wp-block-navigation__responsive-container.is-menu-open {
	background: #fff;
	padding: 80px 20px 36px;
}

/* Rozbalené menu na telefonu: položky nejsou drobný sloupeček textu u pravého
   okraje, ale plochy přes celou šířku, na které se dá trefit prstem. Odděluje
   je vlasová linka, stejná jako pod hlavičkou. */
.ded-hlavicka .is-menu-open .wp-block-navigation__responsive-container-content,
.ded-hlavicka .is-menu-open .wp-block-navigation__container {
	gap: 0;
	width: 100%;
	align-items: stretch;
}
.ded-hlavicka .is-menu-open .wp-block-navigation-item { width: 100%; }
.ded-hlavicka .is-menu-open .wp-block-navigation-item:not(.ded-nav-navrh) {
	border-bottom: 1px solid var(--ded-w-line);
}
.ded-hlavicka .is-menu-open .wp-block-navigation-item:not(.ded-nav-navrh):first-of-type {
	border-top: 1px solid var(--ded-w-line);
}
.ded-hlavicka .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 20px 2px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.2;
}
.ded-hlavicka .is-menu-open .wp-block-navigation-item__content:hover { text-decoration: none; }

/* Výzva je i v menu, ale jen tam: v hlavičce ji nese vlastní tlačítko. */
.ded-hlavicka .ded-nav-navrh { display: none; }
.ded-hlavicka .is-menu-open .ded-nav-navrh { display: block; margin-top: 28px; }
.ded-hlavicka .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-content .ded-nav-navrh .wp-block-navigation-item__content {
	background: var(--ded-w-red);
	color: #fff;
	text-align: center;
	border-radius: 3px;
	padding: 19px 20px;
	font-size: 19px;
}

/* Otevírání a zavírání menu je taky cíl pro prst, ne pro myš. */
.ded-hlavicka .wp-block-navigation__responsive-container-open,
.ded-hlavicka .wp-block-navigation__responsive-container-close { padding: 8px; }
.ded-hlavicka .wp-block-navigation__responsive-container-open svg,
.ded-hlavicka .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}

/* Značka se na úzkém displeji nesmí lámat přes celou šířku.
   Hranice je 599.98 px, ne 600: WordPress přepíná navigaci na hamburger až
   od 600 px dolů, takže při rovných 600 px se tlačítko schovalo, ale menu se
   ještě nesbalilo a výzva na chvíli zmizela z hlavičky úplně. */
@media (max-width: 599.98px) {
	.ded-znacka { gap: 10px; }
	.ded-kraj { font-size: 11px; letter-spacing: .04em; }
	.ded-hlavicka .wp-block-buttons { display: none; }
}

/* --- Uzavření hlavičky --------------------------------------------------- */

/* Hlavičku od obsahu dělí vlasová linka, ne barevný pruh. */
.ded-deliciLinka {
	border: 0;
	border-top: 1px solid var(--ded-w-line);
	margin: 0;
	opacity: 1;
}

/* --- Hero se šikmým řezem ------------------------------------------------ */

.ded-hero { align-items: center; }
.ded-hero h1 em { font-style: normal; color: var(--ded-w-red); display: block; }
.ded-hero-perex { font-size: var(--wp--preset--font-size--vetsi, 17.5px); font-weight: 700; line-height: 1.45; max-width: 44ch; }
.ded-hero p { max-width: 50ch; }

.ded-hero-obraz {
	clip-path: polygon(9% 0, 100% 0, 100% 100%, 0 100%);
	min-height: 470px;
	background: var(--ded-w-band);
}
.ded-hero-obraz img,
.ded-hero-obraz .wp-block-cover__image-background { object-fit: cover; }

@media (max-width: 1000px) {
	.ded-hero-obraz { clip-path: none; min-height: 260px; }
}

/* --- Štítek sekce -------------------------------------------------------- */

/* Štítek sedí ve vlastním odstavci; barevná plocha patří textu, ne řádku,
   jinak by se odstavec s inline-block nezarovnal se zbytkem obsahu a chip
   by uskočil k okraji okna. */
.ded-stitek-radek { margin: 0 0 14px; }

.ded-stitek {
	display: inline-block;
	background: var(--ded-w-ink);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 5px 18px 5px 11px;
	margin: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
}

/* --- Štítky taxonomií ---------------------------------------------------- */

/* Oblast, štítek dědictví i štítek aktuality. Objevují se na kartě, ve výpisu
   i v aktualitě, proto sedí tady, v souboru, který se načítá všude. */

/* Oblast, štítek dědictví i štítek aktuality vypadají stejně: zaříznutá
   vlaječka jako ostatní štítky webu, ne pilulka. */
.taxonomy-nkd_oblast.wp-block-post-terms,
.taxonomy-nkd_stitek.wp-block-post-terms,
.taxonomy-aktualita_stitek.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.taxonomy-nkd_oblast.wp-block-post-terms a,
.taxonomy-nkd_stitek.wp-block-post-terms a,
.taxonomy-aktualita_stitek.wp-block-post-terms a {
	display: inline-block;
	padding: 5px 15px 5px 11px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--ded-w-band);
	color: var(--ded-w-soft);
	clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%);
	transition: background .15s, color .15s;
}

.taxonomy-nkd_oblast.wp-block-post-terms a:hover,
.taxonomy-nkd_stitek.wp-block-post-terms a:hover,
.taxonomy-aktualita_stitek.wp-block-post-terms a:hover {
	background: var(--ded-w-ink);
	color: #fff;
}

/* WordPress mezi štítky sází čárky; mezera je tu od flexu. */
.taxonomy-nkd_oblast.wp-block-post-terms .wp-block-post-terms__separator,
.taxonomy-nkd_stitek.wp-block-post-terms .wp-block-post-terms__separator,
.taxonomy-aktualita_stitek.wp-block-post-terms .wp-block-post-terms__separator {
	display: none;
}

/* --- Výpisy příspěvků a karet -------------------------------------------- */

.ded-vypis .wp-block-post {
	border-bottom: 1px solid var(--ded-w-line);
	padding-bottom: 24px;
}
.ded-vypis .wp-block-post-title { font-size: 22px; letter-spacing: -0.02em; }
.ded-vypis .wp-block-post-title a { text-decoration: none; }
.ded-vypis .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ded-vypis .wp-block-post-excerpt__excerpt { color: var(--ded-w-soft); font-size: 15px; }
.ded-vypis .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; }

/* Dlaždicový výpis karet: čtvercová fotka, název pod ní. */
.ded-dlazdice .wp-block-post { border: 0; padding: 0; position: relative; }
.ded-dlazdice .wp-block-post-featured-image img { aspect-ratio: 1 / 1; }

/* --- Patička ------------------------------------------------------------- */

.ded-paticka {
	border-top: 1px solid var(--ded-w-line);
	font-size: 13.5px;
	color: var(--ded-w-soft);
}
.ded-paticka .wp-block-site-logo img { max-width: 180px; }
.ded-paticka a { color: var(--ded-w-ink); }

/* --- Drobnosti ----------------------------------------------------------- */

.ded-pas { background: var(--ded-w-band); }
.ded-linka-nahore { border-top: 1px solid var(--ded-w-line); }
.ded-tabulkove-cislice { font-variant-numeric: tabular-nums; }

.ded-podnadpis { font-size: 16px; font-weight: 700; color: var(--ded-w-soft); margin: 6px 0 0; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}

/* Fotka v hero vyplní zaříznutý sloupec celá, ne jen jeho horní část. */
.ded-hero-obraz { display: flex; align-self: stretch; }
.ded-hero-obraz > .wp-block-image,
.ded-hero-obraz > figure { width: 100%; margin: 0; }
.ded-hero-obraz img { width: 100%; height: 100%; min-height: 470px; object-fit: cover; display: block; }
@media (max-width: 1000px) {
	.ded-hero-obraz img { min-height: 260px; }
}

/* --- Souhrnná mapa ------------------------------------------------------- */

/* Mapa je široký prvek; drží se šířky obsahu, ať nepůsobí jako pruh. */
.ded-mapa-obal { padding-block: var(--wp--preset--spacing--50, 58px); border-top: 1px solid var(--ded-w-line); }
.ded-mapa-obal .nkd-mapa-souhrnna { margin: 26px 0 0; }
.ded-mapa-obal .ded-mapa-nadpis { margin-bottom: 10px; }
/* Vysvětlení se čte, proto má šířku odstavce, ne šířku mapy. Vyšší
   specifita než pravidlo blokové šablony, jinak by ho auto okraje
   vycentrovaly doprostřed. */
.ded-mapa-obal .nkd-msm-map-wrap,
.ded-mapa-obal .nkd-msm-split { border-radius: 4px; }

@media (max-width: 782px) {
	/* Na mobilu se mapa protáhne na výšku, aby v ní bylo co vidět. */
	.ded-mapa-obal .nkd-msm-split,
	.ded-mapa-obal .nkd-msm-map-wrap { height: 460px !important; }
}