/*
 * Hafenkarte — schematische Belegungskarte (P10b, ADR-0004).
 *
 * Gestaltet ausschliesslich aus Theme-Token (theme.json): Palette, Radien,
 * Schatten, Motion und die daraus abgeleitete Karten-Gruppe --wp--custom--map--*.
 * Keine eigenen Farbwerte, keine Important-Flags. Geladen wird die Datei nur,
 * wenn der Shortcode [marina_hafenkarte] auf der Seite steht (map.php).
 *
 * Aufbau:
 *   .marina-map__stage   Rahmen mit dem Seitenverhaeltnis des SVG-viewBox.
 *   .marina-map__canvas  Inline-SVG: Wasser, Kaimauer, Stege. Nur Dekoration.
 *   .marina-map__slots   HTML-Overlay mit einem echten <button> je Liegeplatz
 *                        (kein foreignObject) — Fokus, Tastatur und
 *                        Formularwert kommen damit vom Browser.
 * Beide Ebenen decken sich, weil das Overlay prozentual positioniert ist und
 * die Buehne dasselbe Seitenverhaeltnis traegt wie das viewBox.
 */

.marina-map {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------------------
 * 1. Datumsauswahl
 * ------------------------------------------------------------------------- */

.marina-map__dates {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--wp--custom--control--row-gap) var(--wp--preset--spacing--30);
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	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);
}

.marina-map__field {
	display: flex;
	flex: 1 1 12rem;
	flex-direction: column;
	gap: var(--wp--custom--control--label-gap);
	margin: 0;
}

.marina-map__field label {
	color: var(--wp--preset--color--navy-heading);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
}

/*
 * Wie in buchung.css: die Feldoptik gehört style.css §7. Diese Regel hatte
 * dieselbe Spezifität wie die dortige (0,2,1) und verlor die Polsterung an
 * die Quellreihenfolge, behielt aber ihr `height` — 46px Inhalt plus 19.2px
 * fremde Polsterung plus Rahmen ergaben 67px hohe Datumsfelder, die über
 * ihre Flex-Spalte hinausstanden. Übrig bleiben die Tabellenziffern.
 */
.marina-map__field input[type="date"] {
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.marina-map__field-submit {
	flex: 0 0 auto;
}

.marina-map__dates .marina-map__go {
	box-sizing: border-box;
	height: var(--wp--custom--control--height);
	padding: 0 1.25rem;
	font-size: var(--wp--preset--font-size--s);
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------------------------
 * 2. Statuszeile
 * ------------------------------------------------------------------------- */

.marina-map__status {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
}

.marina-map__status.is-error {
	color: var(--wp--preset--color--accent-deep);
	font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * 3. Karte — Buehne, SVG-Grundriss
 * ------------------------------------------------------------------------- */

.marina-map__pick {
	margin: 0;
}

/* Schmale Viewports scrollen die Karte statt sie unlesbar zu stauchen —
 * dieselbe Behandlung wie bei den Masstabellen (style.css). */
.marina-map__scroll {
	overflow-x: auto;
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--shadow--card);
}

.marina-map__stage {
	position: relative;
	min-width: 640px;
	border-radius: var(--wp--custom--radius--base);
	overflow: hidden;
}

.marina-map__canvas {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
}

/* Verlaufsstopps des Wassers: als CSS-Eigenschaft, nicht als
 * Präsentationsattribut — var() wirkt dort nicht zuverlässig. */
.marina-map__water-top {
	stop-color: var(--wp--custom--map--water);
}

.marina-map__water-bottom {
	stop-color: var(--wp--custom--map--water-deep);
}

.marina-map__wave {
	fill: none;
	stroke: var(--wp--custom--map--wave);
	stroke-width: 2;
}

.marina-map__quay {
	fill: var(--wp--custom--map--quay);
}

.marina-map__jetty {
	fill: var(--wp--custom--map--jetty);
	stroke: var(--wp--custom--map--jetty-edge);
	stroke-width: 1;
}

.marina-map__jetty-label {
	fill: var(--wp--custom--map--jetty-label);
	font-family: var(--wp--preset--font-family--text);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

/* ---------------------------------------------------------------------------
 * 4. Liegeplätze — HTML-Overlay über dem SVG
 * ------------------------------------------------------------------------- */

.marina-map__slots {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.marina-map__slot-item {
	position: absolute;
	margin: 0;
	padding: 0;
}

.marina-map__slot {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	width: 100%;
	height: 100%;
	padding: 0.15rem;
	color: var(--wp--custom--map--free-text);
	font-family: inherit;
	font-size: clamp(0.62rem, 1.05vw, 0.82rem);
	font-weight: 700;
	line-height: 1.15;
	font-feature-settings: "tnum" 1;
	font-variant-numeric: tabular-nums;
	text-align: center;
	background: var(--wp--custom--map--free-surface);
	border: 1.5px solid var(--wp--custom--map--free-edge);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: var(--wp--custom--map--slot-shadow);
	cursor: pointer;
	transition: transform var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		background-color var(--wp--custom--motion--duration) var(--wp--custom--motion--easing),
		box-shadow var(--wp--custom--motion--duration) var(--wp--custom--motion--easing);
}

.marina-map__slot-loa {
	font-size: 0.86em;
	font-weight: 400;
	opacity: 0.75;
}

.marina-map__slot.is-free:hover {
	background: var(--wp--custom--map--free-hover);
	transform: translateY(var(--wp--custom--motion--lift));
	box-shadow: var(--wp--custom--shadow--button);
}

.marina-map__slot:focus-visible {
	outline: 3px solid var(--wp--preset--color--navy-heading);
	outline-offset: 2px;
	z-index: 2;
}

/*
 * Belegt: gedämpfte Fläche PLUS Diagonalschraffur. Die Schraffur trägt die
 * Aussage auch dort, wo Farbe sie nicht trägt (Farbfehlsichtigkeit, Ausdruck);
 * das aria-label sagt sie ohnehin.
 */
.marina-map__slot.is-booked,
.marina-map__slot.is-unknown {
	color: var(--wp--custom--map--booked-text);
	background-color: var(--wp--custom--map--booked-surface);
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 5px,
		var(--wp--custom--map--booked-stripe) 5px 7px
	);
	border-color: var(--wp--custom--map--booked-edge);
	border-style: solid;
	box-shadow: none;
	cursor: not-allowed;
}

.marina-map__slot.is-unknown {
	background-image: none;
}

.marina-map__slot[disabled] {
	cursor: default;
}

/* ---------------------------------------------------------------------------
 * 4a. Zweiter Weg — ohne Platzwahl weiter
 * ------------------------------------------------------------------------- */

/*
 * Prominent, aber nicht laut: die Karte bleibt der Hauptweg dieser Seite, der
 * Button darunter ist das gleichwertige Angebot fuer alle, denen der Platz
 * egal ist. Deshalb Flaeche wie ein Sekundaerbutton (heller Rahmen statt
 * Verlauf) in voller Breite der Karte.
 */
.marina-map__auto {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0 0;
}

.marina-map__auto .marina-map__auto-go {
	flex: 0 1 auto;
	min-height: var(--wp--custom--control--height);
	padding: 0.6rem 1.25rem;
	color: var(--wp--preset--color--accent-deep);
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--s);
	font-weight: 700;
	line-height: 1.25;
	background: var(--wp--preset--color--surface);
	background-image: none;
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--base);
	box-shadow: none;
	cursor: pointer;
}

.marina-map__auto .marina-map__auto-go:hover,
.marina-map__auto .marina-map__auto-go:focus-visible {
	color: var(--wp--preset--color--accent-deep);
	background: var(--wp--preset--color--nav-hover);
	box-shadow: none;
}

.marina-map__auto .marina-map__auto-go[disabled] {
	color: var(--wp--preset--color--muted-soft);
	background: var(--wp--preset--color--surface-zebra);
	border-color: var(--wp--preset--color--border);
	cursor: not-allowed;
}

.marina-map__auto-note {
	flex: 1 1 14rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

/* ---------------------------------------------------------------------------
 * 5. Legende
 * ------------------------------------------------------------------------- */

.marina-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
	list-style: none;
}

.marina-map__legend-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.marina-map__swatch {
	display: inline-block;
	width: 1.5rem;
	height: 1rem;
	border-radius: 0.25rem;
}

.marina-map__swatch--free {
	background: var(--wp--custom--map--free-surface);
	border: 1.5px solid var(--wp--custom--map--free-edge);
}

.marina-map__swatch--booked {
	background-color: var(--wp--custom--map--booked-surface);
	background-image: repeating-linear-gradient(
		135deg,
		transparent 0 5px,
		var(--wp--custom--map--booked-stripe) 5px 7px
	);
	border: 1.5px solid var(--wp--custom--map--booked-edge);
}

.marina-map__noscript {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--s);
}

/* ---------------------------------------------------------------------------
 * 6. Schmale Viewports und prefers-reduced-motion
 * ------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.marina-map__slot-loa {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.marina-map__slot {
		transition: none;
	}

	.marina-map__slot.is-free:hover {
		transform: none;
	}
}