/*
Theme Name: Dunkelzeit
Description: Dunkelretreat in Böhmen (dunkeltherapie.eu). Klassisches Theme mit theme.json, Entwurf A „Nacht“ vom 21. 10. 2026.
Author: Tomáš Roud
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.2
Text Domain: dunkelzeit
*/

/*
 * Barvy, písma, šířky a tlačítka jsou v theme.json (palette, fontFamilies,
 * layout). Tady je jen to, co theme.json neumí: hlavička, patička, třídy
 * pro sekce úvodní stránky (dávají se v editoru do „Další třídy CSS“),
 * rezervační formulář a výpis volných termínů z IS.
 */

:root {
	--dz-nacht: #0e0f12;
	--dz-nacht-hell: #16171b;
	--dz-linie: #2c2d33;
	--dz-linie-leise: #24252b;
	--dz-text: #ece7dd;
	--dz-text-leise: #c9c3b8;
	--dz-grau: #a9a39a;
	--dz-kerze: #e0a458;
	--dz-kerze-hell: #f0c287;
	--dz-auf-kerze: #17120b;
	--dz-serif: 'Cormorant Garamond', Georgia, serif;
	--dz-sans: 'Work Sans', system-ui, sans-serif;
	--dz-breite: 1240px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

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

:focus-visible {
	outline: 2px solid var(--dz-kerze);
	outline-offset: 3px;
}

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

.screen-reader-text:focus {
	clip: auto;
	width: auto;
	height: auto;
	padding: 12px 16px;
	background: var(--dz-kerze);
	color: var(--dz-auf-kerze);
	z-index: 1000;
	top: 8px;
	left: 8px;
}

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

.dz-kopf {
	position: relative;
	z-index: 50;
}

.dz-kopf-innen {
	max-width: var(--dz-breite);
	margin: 0 auto;
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.dz-logo {
	font-family: var(--dz-serif);
	font-size: 30px;
	letter-spacing: 0.06em;
	color: var(--dz-text);
	text-decoration: none;
	line-height: 1;
}

.dz-logo:hover {
	color: var(--dz-text);
}

.dz-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 15px;
}

.dz-nav a {
	color: var(--dz-text-leise);
	text-decoration: none;
}

.dz-nav a:hover,
.dz-nav .current-menu-item > a {
	color: var(--dz-text);
}

/* Položka menu s třídou dz-cta = tlačítko (Menüs → CSS-Klassen). */
.dz-nav .dz-cta a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--dz-kerze);
	color: var(--dz-auf-kerze);
	font-weight: 600;
}

.dz-nav .dz-cta a:hover {
	background: var(--dz-kerze-hell);
	color: var(--dz-auf-kerze);
}

.dz-menu-knopf {
	display: none;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--dz-linie);
	border-radius: 999px;
	background: none;
	color: var(--dz-text);
	font: inherit;
	font-size: 15px;
	cursor: pointer;
}

@media (max-width: 900px) {
	.dz-menu-knopf {
		display: inline-flex;
		align-items: center;
		gap: 8px;
	}

	.dz-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--dz-nacht);
		border-bottom: 1px solid var(--dz-linie);
		padding: 8px 24px 24px;
	}

	.dz-kopf.ist-offen .dz-nav {
		display: block;
	}

	.dz-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: 18px;
	}

	.dz-nav li a {
		display: block;
		padding: 14px 0;
		border-bottom: 1px solid var(--dz-linie-leise);
	}

	.dz-nav .dz-cta {
		margin-top: 16px;
	}

	.dz-nav .dz-cta a {
		justify-content: center;
		border-bottom: 0;
	}
}

/* ---------------------------------------------------------------- Obsah */

.dz-inhalt {
	min-height: 50vh;
}

/* Obyčejné stránky a články: nadpis nad obsahem, úzký sloupec z theme.json. */
.dz-seitenkopf {
	max-width: 760px;
	margin: 0 auto;
	padding: 48px 24px 8px;
}

.dz-seitenkopf h1 {
	margin: 0;
	font-size: clamp(38px, 5vw, 58px);
}

.dz-seitenkopf .dz-datum {
	margin: 16px 0 0;
	color: var(--dz-grau);
	font-size: 15px;
}

.entry-content {
	padding-bottom: 96px;
}

.entry-content > :first-child {
	margin-top: 32px;
}

.home .entry-content > :first-child,
.dz-ohne-titel .entry-content > :first-child {
	margin-top: 0;
}

.entry-content p,
.entry-content li {
	color: var(--dz-text-leise);
}

.entry-content strong {
	color: var(--dz-text);
}

.entry-content h2 {
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.entry-content h3 {
	margin-top: 1.8em;
	margin-bottom: 0.4em;
}

.entry-content ul,
.entry-content ol {
	padding-left: 1.2em;
}

.entry-content li + li {
	margin-top: 0.4em;
}

.entry-content .wp-block-image img {
	border-radius: 4px;
}

.entry-content figcaption {
	color: var(--dz-grau);
	font-size: 15px;
}

.entry-content table {
	border-collapse: collapse;
	width: 100%;
}

.entry-content th,
.entry-content td {
	padding: 12px 12px 12px 0;
	border-bottom: 1px solid var(--dz-linie);
	text-align: left;
}

.entry-content th {
	color: var(--dz-grau);
	font-weight: 500;
	font-size: 15px;
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 1px solid #5a564f;
	background: transparent;
	color: var(--dz-text);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	border-color: var(--dz-kerze);
	color: var(--dz-text);
}

.entry-content details {
	border-bottom: 1px solid var(--dz-linie);
	padding: 18px 0;
}

.entry-content details summary {
	cursor: pointer;
	list-style: none;
	position: relative;
	padding-right: 32px;
	color: var(--dz-text);
	font-weight: 600;
	font-size: 19px;
}

.entry-content details summary::-webkit-details-marker {
	display: none;
}

.entry-content details summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: -2px;
	color: var(--dz-kerze);
	font-size: 24px;
	font-weight: 400;
}

.entry-content details[open] summary::after {
	content: "−";
}

.entry-content details > :not(summary) {
	margin: 12px 0 0;
}

/* ------------------------------------------- Třídy sekcí (editor: Další třídy CSS) */

/* Sekce přes celou šířku se svislým odsazením. */
.dz-sektion {
	padding-top: clamp(64px, 9vw, 112px);
	padding-bottom: clamp(64px, 9vw, 112px);
}

.entry-content > .dz-sektion {
	margin-top: 0;
	margin-bottom: 0;
}

.dz-sektion-hell {
	background: var(--dz-nacht-hell);
}

.dz-sektion-linie {
	border-top: 1px solid var(--dz-linie-leise);
}

.dz-sektion > :first-child {
	margin-top: 0;
}

.dz-sektion > :last-child {
	margin-bottom: 0;
}

.dz-kicker {
	margin: 0 0 20px;
	font-size: 14px !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dz-grau) !important;
}

.dz-lead {
	font-size: 19px;
	color: var(--dz-text-leise);
}

/* Užší úvodní odstavec jen v hero sekci; na podstránkách by se v
   constrained layoutu vycentroval a odskočil od ostatního textu. */
.dz-hero .dz-lead {
	max-width: 34em;
}

/* Řádek drobných údajů pod hlavním tlačítkem (cena od, recenze, jazyk). */
.dz-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	font-size: 15px !important;
	color: var(--dz-grau) !important;
}

.dz-meta span {
	white-space: nowrap;
}

.dz-hero h1 {
	margin-top: 0;
}

.dz-hero .wp-block-image img,
.dz-bild-hoch img {
	width: 100%;
	height: clamp(380px, 48vw, 620px);
	object-fit: cover;
}

.dz-bild-mittel img {
	width: 100%;
	height: clamp(320px, 40vw, 540px);
	object-fit: cover;
}

/* Tři věty vedle sebe: nadpis H3 ve svíčkové barvě. */
.dz-drei h3 {
	margin-top: 0;
	color: var(--dz-kerze);
}

/* Seznam chatek jako řádky s odkazem vpravo. */
.dz-huetten {
	list-style: none;
	padding: 0 !important;
	margin: 0;
}

.dz-huetten li {
	margin: 0 !important;
	border-top: 1px solid var(--dz-linie);
}

.dz-huetten li:last-child {
	border-bottom: 1px solid var(--dz-linie);
}

.dz-huetten a {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	padding: 18px 0;
	color: var(--dz-text);
	text-decoration: none;
	font-family: var(--dz-serif);
	font-size: 28px;
}

.dz-huetten a::after {
	content: "Freie Termine →";
	font-family: var(--dz-sans);
	font-size: 15px;
	color: var(--dz-grau);
	white-space: nowrap;
}

.dz-huetten a:hover::after {
	color: var(--dz-kerze);
}

/* Dovětek („· für Paare“) drží u jména, odkaz „Freie Termine“ zůstává vpravo. */
.dz-huetten em {
	margin-left: 10px;
	margin-right: auto;
	font-style: normal;
	font-family: var(--dz-sans);
	font-size: 15px;
	color: var(--dz-grau);
}

/* Cenové karty: skupina s třídou dz-preis, hlavní nabídka dz-preis-haupt. */
.dz-preis {
	border: 1px solid var(--dz-linie);
	border-radius: 6px;
	padding: 32px !important;
	height: 100%;
}

.dz-preis-haupt {
	border-color: var(--dz-kerze);
}

.dz-preis > * {
	margin: 0 !important;
}

.dz-preis h3 {
	margin: 4px 0 !important;
	font-size: 22px;
	color: var(--dz-text);
}

.dz-preis .dz-betrag {
	margin: 0 0 16px !important;
	font-family: var(--dz-serif);
	font-size: 56px;
	line-height: 1.1;
	color: var(--dz-text);
}

.dz-preis p {
	font-size: 15px;
	color: var(--dz-grau);
}

.dz-preis-haupt .dz-oben {
	color: var(--dz-kerze);
}

/* Vzdálenosti: seznam „Město <span>čas</span>“ ve dvou sloupcích. */
.dz-entfernungen {
	list-style: none;
	padding: 0 !important;
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	column-gap: 40px;
}

.dz-entfernungen li {
	margin: 0 !important;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid var(--dz-linie);
	color: var(--dz-text);
}

/* Čas smí zalomit (u Zürichu je to věta); město vlevo se nesmí zmáčknout. */
.dz-entfernungen li span {
	color: var(--dz-kerze);
	text-align: right;
}

.dz-unterschrift {
	font-family: var(--dz-serif);
	font-style: italic;
	font-size: 26px !important;
	color: var(--dz-kerze) !important;
}

.dz-hinweis {
	padding-top: 24px;
	border-top: 1px solid var(--dz-linie);
	font-size: 15px !important;
	color: var(--dz-grau) !important;
}

.dz-pozn {
	font-size: 15px !important;
	color: var(--dz-grau) !important;
}

.dz-mitte {
	text-align: center;
}

.dz-mitte .wp-block-buttons {
	justify-content: center;
}

@media (max-width: 781px) {
	.dz-umkehren {
		flex-direction: column-reverse;
	}
}

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

.dz-fuss {
	border-top: 1px solid var(--dz-linie-leise);
	font-size: 14px;
	color: var(--dz-grau);
}

.dz-fuss-hinweis {
	max-width: var(--dz-breite);
	margin: 0 auto;
	padding: 32px 24px 0;
}

.dz-fuss-hinweis p {
	margin: 0;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--dz-linie-leise);
	font-size: 14px;
	line-height: 1.6;
	color: var(--dz-grau);
}

.dz-fuss-hinweis strong {
	color: var(--dz-text-leise);
}

.dz-fuss-innen {
	max-width: var(--dz-breite);
	margin: 0 auto;
	padding: 40px 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.dz-fuss-marke {
	font-family: var(--dz-serif);
	font-size: 20px;
	color: var(--dz-text);
}

.dz-fuss ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.dz-fuss a {
	color: var(--dz-grau);
}

.dz-fuss a:hover {
	color: var(--dz-text);
}

/* ---------------------------------------------- Rezervační formulář (complete-forms)
 *
 * Převzato z lecba-tmou.cz (themes/_s/css/16-formulare.css
 * a 60-komponenty/rezervace-formular.css, stav 21. 10. 2026), barvy
 * přepsané na Dunkelzeit. Markup šablony formuláře je stejný jako u
 * německého formuláře 13290 na lecba-tmou.cz, chování dělá js/site.js.
 */

.complete-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.complete-form textarea,
.complete-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dz-linie);
	border-radius: 6px;
	background: var(--dz-nacht-hell);
	color: var(--dz-text);
	font: inherit;
	font-size: 17px;
}

.complete-form p > input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.complete-form p > select,
.complete-form p > textarea {
	display: block;
	margin-top: 6px;
}

.complete-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.complete-form textarea:focus,
.complete-form select:focus {
	border-color: var(--dz-kerze);
	outline: none;
}

.complete-form input[type="submit"] {
	min-height: 52px;
	padding: 16px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--dz-kerze);
	color: var(--dz-auf-kerze);
	font: inherit;
	font-weight: 600;
	font-size: 17px;
	cursor: pointer;
}

.complete-form input[type="submit"]:hover {
	background: var(--dz-kerze-hell);
}

.complete-form-errors,
.complete-form-ok {
	margin: 0 0 1em;
	padding: 0.75em 1em;
	border: 2px solid;
	border-radius: 6px;
}

.complete-form-errors {
	border-color: #e5684f;
}

.complete-form-ok {
	border-color: #7fbf7f;
}

.complete-field-error {
	display: block;
	margin-top: 0.25em;
	color: #f08a74;
	font-size: 0.85em;
}

.complete-form :is(input, textarea, select):has(+ .complete-field-error) {
	border-color: #e5684f;
}

#altEmail_container,
.altEmail_container {
	position: absolute !important;
	overflow: hidden !important;
	display: inline !important;
	height: 1px !important;
	width: 1px !important;
	z-index: -1000 !important;
}

.rez-form {
	max-width: 640px;
	--rez-accent: var(--dz-kerze);
	--rez-accent-soft: rgba(224, 164, 88, 0.14);
	--rez-accent-border: rgba(224, 164, 88, 0.55);
	counter-reset: rez-step;
	color: var(--dz-text);
}

.rez-form p,
.rez-form label {
	color: var(--dz-text);
}

.rez-block { margin-bottom: 28px; }
.rez-row { display: flex; gap: 0 16px; }
.rez-row p { flex: 1; min-width: 0; }
.rez-label { display: flex; align-items: baseline; gap: 10px; font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--dz-text); margin-bottom: 12px; counter-increment: rez-step; }
.rez-label p { display: contents; }
.rez-label::before { content: counter(rez-step); flex: none; color: var(--rez-accent); font-weight: 700; letter-spacing: normal; text-transform: none; }
.rez-tiles { display: flex; flex-wrap: wrap; gap: 9px; }
.rez-tiles p { display: contents; }
.rez-tiles br { display: none; }
.rez-tile { display: block; position: relative; flex: 1 1 140px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.rez-tile:hover { border-color: rgba(255, 255, 255, 0.4); }
.rez-tile:has(input:checked) { border-color: var(--rez-accent); background: var(--rez-accent-soft); }
.rez-tile input[type="radio"] { margin-right: 9px; accent-color: var(--rez-accent); }
.rez-badge { position: absolute; top: -9px; right: 12px; background: var(--rez-accent); color: var(--dz-auf-kerze); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.rez-hint { font-size: 14px; color: var(--dz-grau); margin: 10px 2px 0; display: none; }
.rez-hint.rez-hint-on { display: block; }
.rez-hint-static { font-size: 14px; color: var(--dz-grau); margin: 0 2px 12px; }
.rez-reveal { max-height: 0; overflow: hidden; transition: max-height 0.35s ease, margin 0.35s ease; font-size: 14px; }
.rez-reveal.rez-reveal-on { max-height: 160px; margin-top: 10px; }
.rez-pricebar { position: sticky; bottom: 0; padding: 12px 0; background: var(--dz-nacht); }
.rez-summary input[type="submit"] { display: block; width: 100%; margin-bottom: 8px; }
.rez-note { font-size: 12px; color: var(--dz-grau); line-height: 1.45; margin: 0; text-align: center; }
.rez-help { text-align: center; margin: 12px 0 0; }
.rez-help a { font-size: 14px; color: var(--dz-grau); }
.rez-tile-cena { display: block; margin-top: 4px; font-size: 13px; color: var(--dz-grau); }
.rez-skryte { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rez-karta { border: 1px solid var(--rez-accent-border); border-radius: 10px; padding: 12px 16px; margin-bottom: 20px; }
.rez-karta:empty { display: none; }
.rez-karta-radek { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.rez-karta-radek + .rez-karta-radek { margin-top: 4px; }
.rez-karta-detail { font-size: 14px; color: var(--dz-text-leise); }
.rez-karta-cena { font-size: 17px; white-space: nowrap; }
.rez-karta-zmenit { font-size: 13px; white-space: nowrap; color: var(--rez-accent); }
.rez-karta-puvodni { opacity: .55; font-weight: 400; font-size: 14px; }
.rez-karta-sleva { margin-top: 4px; font-size: 12.5px; color: var(--rez-accent); }
.rez-recenze { font-size: 14px; line-height: 1.5; margin: 0 0 20px; color: var(--dz-text-leise); }
.rez-recenze-hvezdy { color: var(--rez-accent); letter-spacing: 1px; }
.rez-recenze-citace { display: block; font-style: italic; }
.rez-recenze-citace[hidden] { display: none; }
.rez-pole-pozn { display: block; font-size: 13px; color: var(--dz-grau); margin-top: 4px; }
.rez-email-tip { font-size: 13px; margin: 6px 0 0; color: var(--rez-accent); }
.rez-email-oprava { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.rez-tiles:has(input[name="rez-termin"]) { flex-wrap: nowrap; }
.rez-tiles:has(input[name="rez-termin"]) .rez-tile { flex: 1 1 0; min-width: 0; padding: 12px 6px; text-align: center; white-space: nowrap; font-size: 15px; }
.rez-tiles:has(input[name="rez-termin"]) input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.rez-tiles:has(input[name="rez-termin"]) .rez-tile:has(input:focus-visible) { outline: 2px solid var(--rez-accent); outline-offset: 2px; }
.rez-form .rez-block > p:not(.rez-hint):not(.rez-hint-static),
.rez-form .rez-row > p { margin: 0 0 14px; line-height: 1.4; }
.rez-form .rez-block > p:not(.rez-hint):not(.rez-hint-static):last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.rez-row { flex-direction: column; }
	.rez-pricebar { padding: 6px 0 8px; }
	.rez-pricebar .rez-help { display: none; }
	.rez-karta-radek:first-child { flex-wrap: wrap; }
}

/* ------------------------------------------- Volné termíny z IS ([lecbatmou_terminy]) */

.entry-content ul.near {
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content li.near {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
	margin: 0;
	padding: 18px 0;
	border-bottom: 1px solid var(--dz-linie);
	color: var(--dz-text);
	font-size: 19px;
}

.entry-content li.near:first-child {
	border-top: 1px solid var(--dz-linie);
}

.entry-content li.near .near-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.entry-content li.near a,
.entry-content li.near a:visited {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--dz-kerze);
	color: var(--dz-auf-kerze);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.entry-content li.near a:hover {
	background: var(--dz-kerze-hell);
	color: var(--dz-auf-kerze);
}

.entry-content li.near a.near-btn-3,
.entry-content li.near a.near-btn-3:visited {
	background: transparent;
	border: 1px solid #5a564f;
	color: var(--dz-text);
}

.entry-content li.near a.near-btn-3:hover {
	border-color: var(--dz-kerze);
}

.entry-content li.near a::first-letter {
	text-transform: uppercase;
}

.entry-content li.near .near-sleva-stitek {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--dz-nacht-hell);
	color: var(--dz-kerze);
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.entry-content li.near a s {
	opacity: .7;
	font-weight: 400;
}

.entry-content .near-radek {
	margin-top: 12px;
	text-align: center;
	font-size: 15px;
}