/*
Theme Name: CityMarina
Theme URI: https://ankerme.com/
Author: ankerme
Author URI: https://ankerme.com/
Description: FSE-Block-Theme für Marina-Instanzen (Liegeplatz-Vermietung mit MotoPress Hotel Booking). Portiert die Design-Sprache der City Marina Cuxhaven als Token-System: Navy-Stufen, Logo-Blau als Akzent, navy-getönte Schatten, zwei Radien, eine Motion-Rezeptur.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: citymarina
Tags: full-site-editing, block-patterns, custom-logo, editor-style, translation-ready, wide-blocks, accessibility-ready, one-column
*/

/*
 * Diese Datei enthält ausschließlich, was theme.json nicht ausdrücken kann:
 * Media Queries, Grid-Layouts, Pseudoklassen-Transforms, backdrop-filter,
 * Overlap-Utilities und den prefers-reduced-motion-Block.
 * Alle Werte kommen aus Tokens (--wp--preset--* / --wp--custom--*), die in
 * theme.json definiert sind. Ohne Important-Flags.
 */

/* ---------------------------------------------------------------------------
 * 1. Basis
 * ------------------------------------------------------------------------- */

.wp-site-blocks {
	min-height: 100vh;
}

/* Tabularziffern: Inter hat echte `tnum`. Überall dort, wo Zahlen in Spalten
 * stehen (Preise, Maße, Zeiten), damit Ziffern gleich breit laufen. */
.cm-tnum,
.wp-block-table,
.cm-price {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Eyebrow: kleine, schwere Versalzeile über der Überschrift (Audit: 0.82rem/800). */
.cm-eyebrow,
.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--wp--preset--spacing--20);
}

/* ---------------------------------------------------------------------------
 * 2. Glass-Header (sticky, volle Breite, Haarlinie)
 * ------------------------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

.cm-header {
	position: relative;
	/* Stapelkontext, damit das ::before mit z-index -1 im Header bleibt. */
	isolation: isolate;
	background-color: var(--wp--custom--glass--header);
	border-bottom: 1px solid var(--wp--custom--glass--hairline);
	box-shadow: var(--wp--custom--shadow--header);
}

/* ---------------------------------------------------------------------------
 * Mobiles Navigations-Overlay: blauer Verlaufs-Layer im Hero-Scrim-Look
 * (Nutzerwunsch), Menuepunkte als grosse, linksbuendige Tippflaechen.
 * Das Desktop-justifyContent:right wuerde sonst als align-items in die
 * Overlay-Spalte erben — deshalb hier explizit flex-start.
 * ------------------------------------------------------------------------- */

.cm-nav .wp-block-navigation__responsive-container.is-menu-open {
	/* Nutzerwunsch: links dunkles Marina-Navy hinter dem Text, nach
	 * rechts transparent auslaufend, sodass die Seite durchscheint —
	 * exakt der Hero-Scrim (0,88 -> 0,22 Alpha). Kein Blur, damit die
	 * Seite rechts wirklich sichtbar ist. */
	background: transparent;
	background-image: var(--wp--preset--gradient--hero-scrim);
}

/* Core setzt fuer Navigationen ohne eigene Hintergrundfarbe ein hartes
 * Weiss auf das offene Overlay — mit Spezifitaet 0,5,0:
 *   .wp-block-navigation:not(.has-background)
 *     .wp-block-navigation__responsive-container.is-menu-open
 *     :not(.disable-default-overlay) { background-color:#fff }
 * Diese Regel (0,6,0) neutralisiert genau das, sonst liegt der
 * Scrim-Verlauf auf Weiss statt auf der Seite. */
.wp-block-navigation.cm-nav:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: transparent;
	padding: calc(var(--wp--preset--spacing--50) + 2rem) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50);
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	align-items: flex-start;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a {
	display: block;
	width: 100%;
	padding: 0.65rem 0.9rem;
	border-radius: var(--wp--custom--radius--base);
	color: var(--wp--preset--color--surface);
	font-size: clamp(1.25rem, 5vw, 1.5rem);
	font-weight: 600;
	line-height: 1.3;
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:hover,
.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a:focus-visible {
	background-color: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--surface);
}

/* Aktiver Punkt: weisser Text auf dezentem Grund mit Cyan-Balken —
 * die Desktop-Pill (heller Grund) wird hier explizit ueberschrieben,
 * sonst sickert sie als unlesbares Hellblau-auf-Hellblau durch. */
.cm-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > a,
.cm-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.cm-nav .wp-block-navigation__responsive-container.is-menu-open [aria-current] {
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--eyebrow-cyan);
	border-radius: 0 var(--wp--custom--radius--base) var(--wp--custom--radius--base) 0;
	padding-left: calc(0.9rem - 3px);
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--surface);
	padding: 0.5rem;
}

.cm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Burger-Button im Glass-Header gut sichtbar. */
.cm-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--navy-heading);
	padding: 0.5rem;
}

/* Blur auf dem Pseudo-Element statt auf .cm-header selbst:
 * backdrop-filter macht sein Element zum Containing Block fuer
 * position:fixed — das mobile Navigations-Overlay (fixed, inset 0)
 * wurde dadurch im Header-Streifen eingesperrt und zeigte keine
 * Menuepunkte. isolation statt filter sperrt nichts ein. */
.cm-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	-webkit-backdrop-filter: var(--wp--custom--glass--header-blur);
	backdrop-filter: var(--wp--custom--glass--header-blur);
	pointer-events: none;
}

.cm-header .wp-block-site-logo img {
	display: block;
	height: auto;
}

/* Fallback: ohne gesetztes Logo trägt der Site-Titel den Kopfbereich; sobald ein
 * Logo existiert, entfällt die doppelte Wortmarke. */
.cm-header__brand .wp-block-site-logo + .wp-block-site-title {
	display: none;
}

/* Nav-Pills: Hover/Focus legt eine Pille unter den Punkt (Audit #e6f2fb/#075b9e). */
.cm-nav .wp-block-navigation-item__content {
	padding: 0.45rem 0.8rem;
	border-radius: var(--wp--custom--radius--pill);
	transition:
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.cm-nav .wp-block-navigation-item__content:hover,
.cm-nav .wp-block-navigation-item__content:focus-visible,
.cm-nav .current-menu-item > .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--nav-hover);
	color: var(--wp--preset--color--nav-hover-text);
}

/* ---------------------------------------------------------------------------
 * 3. Hero — Foto, linksdunkler Scrim, Copy links / Buchungskarte rechts
 * ------------------------------------------------------------------------- */

.cm-hero__grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		minmax(var(--wp--custom--hero--card-min), var(--wp--custom--hero--card-max));
	gap: var(--wp--preset--spacing--70);
	align-items: center;
	width: 100%;
}

/* Flow-Layout-Abstände der Blockebene im Grid neutralisieren. */
.cm-hero__grid > * {
	margin-block-start: 0;
	margin-block-end: 0;
	min-width: 0;
}

.cm-hero__title {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 0.96;
	letter-spacing: -0.02em;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
}

.cm-hero__lead {
	max-width: 46ch;
}

/* Schwebende Buchungskarte (Audit: rgba-Weiß, heller Rand, tiefer Schatten). */
.cm-booking-card {
	background-color: var(--wp--custom--glass--card);
	border: 1px solid var(--wp--custom--glass--card-border);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--floating);
}

/*
 * Die Karte liegt IM Cover-Block. Dessen Kern-CSS (wp-includes/blocks/cover/
 * style.min.css) setzt `:where(.wp-block-cover:not(.has-text-color)){color:#fff}`
 * und schaltet jede Überschrift, jeden Absatz und jeden Link OHNE eigene
 * Farbklasse per `:root :where(.wp-block-cover h2:not(.has-text-color))` auf
 * `color: inherit` — beide Regeln stehen bei Spezifität 0,1,0 gleichauf mit der
 * Element-Regel aus theme.json und werden später gedruckt. Ergebnis: weiße
 * Schrift auf der hellen Glaskarte, also unsichtbar.
 *
 * Hier kommen die Token-Farben zurück. Die Selektoren tragen dieselbe Form wie
 * die Kern-Regeln, nur eine Klasse mehr (0,3,1 bzw. 0,2,1) — damit reicht
 * Spezifität statt eines Important-Flags, unabhängig von der Druckreihenfolge.
 */
.wp-block-cover .cm-booking-card,
.wp-block-cover .cm-booking-card p:not(.has-text-color),
.wp-block-cover .cm-booking-card li:not(.has-text-color),
.wp-block-cover .cm-booking-card label {
	color: var(--wp--preset--color--ink);
}

.wp-block-cover .cm-booking-card h1:not(.has-text-color),
.wp-block-cover .cm-booking-card h2:not(.has-text-color),
.wp-block-cover .cm-booking-card h3:not(.has-text-color),
.wp-block-cover .cm-booking-card h4:not(.has-text-color),
.wp-block-cover .cm-booking-card h5:not(.has-text-color),
.wp-block-cover .cm-booking-card h6:not(.has-text-color) {
	color: var(--wp--preset--color--navy-heading);
}

.wp-block-cover .cm-booking-card a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent);
}

.wp-block-cover .cm-booking-card a:where(:not(.wp-element-button)):hover,
.wp-block-cover .cm-booking-card a:where(:not(.wp-element-button)):focus-visible {
	color: var(--wp--preset--color--accent-deep);
}

/* ---------------------------------------------------------------------------
 * 4. Überlappung — Signature-Move über die Hero-Unterkante
 * ------------------------------------------------------------------------- */

.cm-overlap,
.is-style-overlap {
	position: relative;
	z-index: 2;
	margin-top: var(--wp--custom--overlap--pull);
}

.cm-overlap--deep,
.is-style-overlap-deep {
	position: relative;
	z-index: 2;
	margin-top: var(--wp--custom--overlap--pull-deep);
}

/* Karten in einer Überlappungs-Reihe tragen den tieferen Schatten. */
.cm-overlap .is-style-panel,
.is-style-overlap .is-style-panel,
.cm-overlap--deep .is-style-panel,
.is-style-overlap-deep .is-style-panel {
	box-shadow: var(--wp--custom--shadow--overlap);
}

/* ---------------------------------------------------------------------------
 * 4a. .cm-stretch — gleich hohe Karten, unten bündige Aktionen
 * ------------------------------------------------------------------------- */

/*
 * Utility auf dem Container (wp:columns oder wp:group mit Grid-Layout). Löst
 * zwei Beobachtungen, die dieselbe Ursache haben: Rasterkinder strecken zwar,
 * ihr Inhalt tut es nicht.
 *
 *   a) Karten unterschiedlich hoch — die Spalte ist so hoch wie die höchste
 *      Nachbarin, die Panel-Gruppe darin bleibt aber textbündig kurz.
 *   b) Buttons auf unterschiedlicher Höhe — sie folgen dem Text statt am Fuß
 *      der Spalte zu stehen.
 *
 * Ein Container, eine Klasse. Die Regel für a) greift nur bei genau EINER
 * Gruppe je Spalte (:only-child); sonst würden in Fall b) auch Überschrift und
 * Absatz mitwachsen.
 */
.cm-stretch > .wp-block-column,
.cm-stretch.wp-block-group > .wp-block-group {
	display: flex;
	flex-direction: column;
}

.cm-stretch > .wp-block-column > .wp-block-group:only-child {
	flex: 1 1 auto;
}

.cm-stretch .wp-block-buttons {
	/* Unten buendig ueber alle Spalten — und nie direkt am Inhalt darueber
	 * klebend: auto verteilt den Freiraum, das Padding garantiert die
	 * Mindestluecke auch in der vollsten Spalte. */
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--50, 1.5rem);
}

/* ---------------------------------------------------------------------------
 * 5. Flächen — Panel und Notiz (Verläufe aus dem Audit)
 * ------------------------------------------------------------------------- */

.is-style-panel {
	background: var(--wp--preset--gradient--panel);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--card);
	padding: var(--wp--preset--spacing--50);
}

.is-style-note {
	background: var(--wp--preset--gradient--note);
	border-left: 3px solid var(--wp--preset--color--note-edge);
	border-radius: var(--wp--custom--radius--base);
	padding: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
 * 6. Tabellen — Preisleiter und Maßtabellen
 * ------------------------------------------------------------------------- */

.wp-block-table {
	background-color: var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: hidden;
}

.wp-block-table table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table th,
.wp-block-table td {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border-cell);
	text-align: left;
}

.wp-block-table thead {
	background-color: var(--wp--preset--color--table-head);
	color: var(--wp--preset--color--surface);
}

.wp-block-table thead th {
	font-weight: 700;
	border-color: var(--wp--preset--color--table-head);
}

.wp-block-table tbody tr:nth-child(even) {
	background-color: var(--wp--preset--color--surface-zebra);
}

/*
 * Tabellen-Fußnote. Der Kern gibt der figcaption weder Innenabstand noch eine
 * Kante (`.wp-block-table figcaption { color:#555; font-size:13px }`), sie
 * klebt deshalb randlos unter der Tabelle und wirkt wie abgerissen. Hier wird
 * sie zur eigenen Zeile der Tabellenkarte: Trennlinie oben, Zebra-Fläche,
 * dieselbe Polsterung wie die Zellen. Die Klasse `.wp-element-caption` kommt
 * vom Block selbst — mit ihr liegt die Regel über der des Kerns.
 */
.wp-block-table figcaption.wp-element-caption {
	margin: 0;
	padding: 0.7rem 0.9rem;
	background-color: var(--wp--preset--color--surface-zebra);
	border-top: 1px solid var(--wp--preset--color--border-cell);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.5;
	text-align: left;
}

/* ---------------------------------------------------------------------------
 * 7. Formularfelder (Audit: 46px Feldhöhe, 50px Submit, volle Breite)
 * ------------------------------------------------------------------------- */

/*
 * Diese Regel ist die EINZIGE Quelle der Feldgeometrie der Site. Alles, was
 * eine Buchungsstrecke an Eingaben zeigt — Hero-Datumsfelder, /buchen/,
 * /hafenkarte/, MPHB-Suchformular und Checkout — landet hier; die
 * Spezialdateien (assets/css/buchung.css, hafenkarte.css, mphb.css) tragen
 * nur noch das Abweichende (Ziffernsatz, Raster, Rhythmus) nach.
 *
 * BEFUND, der `box-sizing` erzwingt (gemessen in Chromium, 1440px):
 * Ohne eigene Angabe gilt für Textfelder und <textarea> das UA-Default
 * `content-box`. Der Browser addiert dann Polsterung und Rahmen OBEN DRAUF:
 *   min-height 46px + 2 × 9.6px Polsterung + 2 × 1px Rahmen = 67.2px
 *   width 100% (= 331px Rasterspalte) + 29.2px                = 360.2px
 * Die Felder waren also nicht nur zu hoch, sie ragten auch 29px über ihre
 * Rasterspalte hinaus und schoben sich gegenseitig zu — genau der
 * „überlappende“ Eindruck im Checkout. <select> fiel nicht auf, weil dessen
 * UA-Regel bereits `border-box` setzt; im selben Raster standen deshalb
 * 67px-Eingaben neben 46px-Auswahlen.
 */
.wp-site-blocks input[type="text"],
.wp-site-blocks input[type="email"],
.wp-site-blocks input[type="tel"],
.wp-site-blocks input[type="url"],
.wp-site-blocks input[type="number"],
.wp-site-blocks input[type="date"],
.wp-site-blocks input[type="search"],
.wp-site-blocks input[type="password"],
.wp-site-blocks select,
.wp-site-blocks textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--wp--custom--control--height);
	padding: 0.6rem 0.85rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-input);
	border-radius: var(--wp--custom--radius--base);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
}

.wp-site-blocks textarea {
	min-height: calc(var(--wp--custom--control--height) * 2.5);
}

/*
 * Datumsfelder: die internen Bedienelemente von Chromium (Zifferngruppen und
 * Kalendersymbol) sind rund 26px hoch, also höher als eine Textzeile. Mit
 * der Polsterung eines Textfeldes wächst das Feld dadurch auf 46.98px und
 * steht einen knappen Pixel über allem daneben — auf /buchen/ direkt neben
 * einem 46px-Knopf sichtbar. Etwas weniger Polsterung oben und unten lässt
 * `min-height` wieder die Höhe bestimmen; horizontal bleibt alles gleich.
 */
.wp-site-blocks input[type="date"] {
	padding-block: 0.5rem;
}

.wp-site-blocks input[type="submit"],
.wp-site-blocks button[type="submit"] {
	box-sizing: border-box;
	min-height: var(--wp--custom--control--submit-height);
}

/*
 * Der Rhythmus einer Formularzeile, aus dem Audit abgeleitet und als Token
 * hinterlegt (theme.json → custom.control):
 *   Label → 0.35rem → Feld → 0.35rem → Hilfetext → 1.25rem → nächste Zeile.
 * Die Klassen dafür stehen in den Formulardateien; hier steht nur, was für
 * jedes Formular gilt: ein Hilfetext klebt am Feld darüber, nicht an der
 * Zeile darunter.
 */
.wp-site-blocks input + small,
.wp-site-blocks select + small,
.wp-site-blocks textarea + small {
	display: block;
	margin-top: var(--wp--custom--control--label-gap);
	color: var(--wp--preset--color--muted-soft);
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.45;
}

/* ---------------------------------------------------------------------------
 * 8. Motion — genau eine Rezeptur (Audit: 0.15s ease, -1px, brightness 1.05)
 * ------------------------------------------------------------------------- */

.wp-element-button,
.wp-block-button__link {
	transition:
		transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		filter var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.wp-element-button:hover,
.wp-element-button:focus-visible,
.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(var(--wp--custom--motion--lift));
	filter: brightness(var(--wp--custom--motion--brightness));
}

/* ---------------------------------------------------------------------------
 * 9. Breakpoints — nur 991px und 767px, sonst fluid
 * ------------------------------------------------------------------------- */

@media (max-width: 991px) {
	.cm-hero__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.cm-hero__lead {
		max-width: none;
	}

	/* Überlappung aufheben, sobald einspaltig gestapelt wird. */
	.cm-overlap,
	.is-style-overlap,
	.cm-overlap--deep,
	.is-style-overlap-deep {
		margin-top: 0;
	}
}

@media (max-width: 767px) {
	.cm-hero__title {
		font-size: var(--wp--custom--hero--title-hand);
	}

	.wp-block-table {
		overflow-x: auto;
	}

	.wp-block-table table {
		min-width: 620px;
	}
}

/* ---------------------------------------------------------------------------
 * 10. prefers-reduced-motion — Transform/Filter neutralisieren
 * ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}

	.wp-element-button,
	.wp-block-button__link,
	.cm-nav .wp-block-navigation-item__content {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-element-button:focus-visible,
	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: none;
		filter: none;
	}
}