/*
Theme Name: Südstrandliebe
Theme URI: https://www.suedstrandliebe.de/
Author: Frank Schulte
Author URI: https://www.suedstrandliebe.de/
Description: Block-Theme für die beiden Ferienwohnungen Meerzeitliebe und ZweiteLiebe in der Arne-Jacobsen-Siedlung am Südstrand Fehmarn. Ohne Plugin-Abhängigkeiten, ohne externe Requests im Frontend.
Version: 2.45.0
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suedstrandliebe
Tags: block-theme, full-site-editing, accessibility-ready, custom-colors, custom-menu, translation-ready
*/

/* --------------------------------------------------------------------------
   Basis-CSS.
   Das Design-System (Farben, Typoskala, Abstände) steckt in theme.json und
   erzeugt die --wp--preset--* Variablen. Hier steht nur, was theme.json nicht
   ausdrücken kann: Reset, Fokus, Bewegungsregeln, Gestaltungsmotive.

   Palette "Sonnenwarm": Muschel, Düne, Tiefsee, Ostsee, Sonne, Treibholz.
   Die gemessenen Kontraste stehen am Dateiende.
   -------------------------------------------------------------------------- */

/* 1. Reset ---------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-synthesis-weight: none;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Bilder mit gesetztem aspect-ratio füllen ihren Rahmen, statt zu verzerren. */
img[style*="aspect-ratio"],
.wp-block-image img,
.wp-block-post-featured-image img {
	object-fit: cover;
}

/* 2. Typografische Feinheiten --------------------------------------------- */

/* Zeilenlänge: als Utility, nicht global – sonst brechen Tabellen und Raster.
   In Patterns per Klasse setzen: <p class="ssl-lesbreite">. */
.ssl-lesbreite {
	max-width: var(--wp--custom--ssl--lesbreite);
}

/* Zahlen in Tabellen, Kalendern und Preisen sollen untereinander stehen. */
table,
.ssl-zahlen {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* Vorzeile über einer Überschrift: die Einordnung vor der Aussage.
   „Verfügbarkeit" sagt, worum es geht; „Was hier frei aussieht, ist frei."
   sagt, was daran wichtig ist. Zusammen braucht keine der beiden Zeilen
   einen Nebensatz.
   Klein, gesperrt, im Seegrün – sie soll gelesen werden, bevor das Auge auf
   der Überschrift landet, und danach nicht mehr stören. Die Horizontlinie
   wandert bei Bedarf hierher, damit die Reihenfolge stimmt: Strich,
   Einordnung, Überschrift. */
.ssl-vorzeile {
	margin-block-end: 0.5rem;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ostsee);
}

.ssl-dunkel .ssl-vorzeile {
	color: var(--wp--custom--ssl--sekundaerdunkel);
}

/* Subline unter einer Überschrift: der eine Satz, der die Stimmung setzt.
   Kursive Serifenschrift, damit sie als Zwischenton gelesen wird und nicht
   als zweite Überschrift. Steht bewusst nur dort, wo kein Einleitungsabsatz
   folgt – drei Textebenen übereinander liest niemand. */
.ssl-subzeile {
	margin-block-start: 0.35rem;
	margin-block-end: 0;
	max-width: var(--wp--custom--ssl--lesbreite);
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.45;
	color: var(--wp--preset--color--ostsee);
}

.ssl-dunkel .ssl-subzeile {
	color: var(--wp--custom--ssl--sekundaerdunkel);
}

/* Der Abstand gehört zwischen Vorzeile und Überschrift, nicht doppelt. */
.ssl-vorzeile + h1,
.ssl-vorzeile + h2,
.ssl-vorzeile + h3 {
	margin-block-start: 0;
}

/* Sekundärtext: ein warmes Taupe, kein Grau. Begründung am Dateiende. */
.ssl-sekundaer {
	color: var(--wp--custom--ssl--sekundaertext);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
}

/* Auf Tiefsee braucht der Sekundärtext einen hellen Ton. */
.ssl-dunkel .ssl-sekundaer {
	color: var(--wp--custom--ssl--sekundaerdunkel);
}

p,
li,
dd {
	text-wrap: pretty;
}

/* Brotkrumen. Nur auf Unterseiten, deshalb selten zu sehen – und bewusst
   klein: Der Weg ist eine Orientierungshilfe, keine zweite Navigation.
   Das Trennzeichen steht in ::before und nicht im Markup, damit es beim
   Kopieren des Textes nicht mitwandert. */
.ssl-krume {
	margin-block-end: var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--custom--ssl--sekundaertext);
}

.ssl-krume__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ssl-krume__liste li + li::before {
	content: "\203A";
	margin-inline-end: 0.5em;
	opacity: 0.6;
}

.ssl-krume a {
	color: inherit;
}

.ssl-krume [aria-current="page"] {
	color: var(--wp--preset--color--tiefsee);
}

h1,
h2,
h3 {
	text-wrap: balance;
}

/* 3. Gestaltungsmotiv: die Horizontlinie ----------------------------------- */

/* 3a. Abschnittstrenner: 1 px über die volle Breite. */
.wp-block-separator,
hr.ssl-horizont {
	border: 0;
	border-top: 1px solid var(--wp--custom--ssl--hairline);
	height: 0;
	margin-block: var(--wp--preset--spacing--70);
	opacity: 1;
	width: 100%;
}

.wp-block-separator.has-css-opacity {
	opacity: 1;
}

/* 3b. Kurzer Strich über einer Überschrift: Bernstein mit einer 14 px dunklen
       Kappe am linken Ende. Das Signaturdetail aus Version 1.2.0.
       Als Klasse an die Überschrift oder an die umgebende Gruppe. */
.ssl-strich::before {
	background: linear-gradient(
		to right,
		var(--wp--preset--color--tiefsee) 0 14px,
		var(--wp--preset--color--sonne) 14px 100%
	);
	content: "";
	display: block;
	height: 1px;
	margin-bottom: 1.25rem;
	width: var(--wp--custom--ssl--strichlaenge);
}

/* Auf dunklem Grund kehrt sich die Kappe um: hell statt dunkel. */
.ssl-dunkel .ssl-strich::before {
	background: linear-gradient(
		to right,
		var(--wp--preset--color--muschel) 0 14px,
		var(--wp--preset--color--sonne) 14px 100%
	);
}

/* 4. Links und Fokus ------------------------------------------------------- */

a {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* Sichtbarer Fokusring: 3 px Tiefsee, 3 px Offset. Bewusst nicht Sonne –
   Bernstein auf Muschel schafft nur 2,3:1 und verfehlt damit die 3:1, die
   WCAG für Bedienelemente verlangt. */
:focus-visible {
	outline: 3px solid var(--wp--preset--color--tiefsee);
	outline-offset: 3px;
	border-radius: 1px;
}

/* Browser ohne :focus-visible bekommen den klassischen Fokus. */
:focus:not(:focus-visible) {
	outline: none;
}

/* Auf dunklen Flächen wäre ein Tiefsee-Ring unsichtbar – dort Muschel. */
.has-tiefsee-background-color :focus-visible,
.ssl-dunkel :focus-visible {
	outline-color: var(--wp--preset--color--muschel);
}

/* 5. Skip-Link ------------------------------------------------------------- */

/* WordPress fügt in Block-Themes automatisch einen Skip-Link ein. */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--tiefsee);
	border-radius: var(--wp--custom--ssl--radiusbutton);
	color: var(--wp--preset--color--muschel);
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: 1rem;
	font-weight: 500;
	left: 1rem;
	line-height: 1;
	padding: 1rem 1.25rem;
	text-decoration: none;
	top: 1rem;
	z-index: 100000;
}

/* 6. Buttons --------------------------------------------------------------- */

/* Der primäre CTA steht in theme.json: Bernstein mit dunkler Schrift.
   Der sekundäre Button ist ein Umriss, damit Bernstein der einzige
   Flächenakzent bleibt. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) {
	background: transparent;
	border: 1px solid var(--wp--preset--color--tiefsee);
	color: var(--wp--preset--color--tiefsee);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--tiefsee);
	color: var(--wp--preset--color--muschel);
}

/* Auf dunklem Grund dreht sich der Umriss-Button um. */
.ssl-dunkel .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--muschel);
	color: var(--wp--preset--color--muschel);
}

.ssl-dunkel .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--muschel);
	color: var(--wp--preset--color--tiefsee);
}

/* 7. Dunkle Flächen -------------------------------------------------------- */

/* Ostsee auf Tiefsee erreicht nur 1,9:1. Auf dunklen Flächen sind Links
   deshalb Muschel, unterstrichen zur Unterscheidung vom Fließtext. */
.ssl-dunkel a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--muschel);
	text-decoration: underline;
}

.ssl-dunkel a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 2px;
}

.ssl-dunkel .wp-block-separator {
	border-top-color: rgb(250 247 240 / 25%);
}

/* 8. Kopf- und Fußbereich -------------------------------------------------- */

.ssl-kopf {
	border-bottom: 1px solid var(--wp--custom--ssl--hairline);
}

/* Wortmarke mit Ortszusatz. Der Name trägt die Serifenschrift, der Ort
   darunter die Grotesk – gesperrt und klein, damit er als Beiwerk gelesen
   wird und dem Namen nicht die Aufmerksamkeit wegnimmt. */
.ssl-marke > * {
	margin-block: 0;
}

.ssl-marke__ort {
	margin-block-start: 0.15em;
	font-family: var(--wp--preset--font-family--grotesk);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ostsee);
	opacity: 0.8;
}

.ssl-fuss .wp-block-navigation a {
	font-family: var(--wp--preset--font-family--grotesk);
}

/* 9. Flächenwechsel und Karten --------------------------------------------- */

/* Der Rhythmus entsteht durch den Wechsel Muschel / Düne, nicht durch immer
   größere Abstände. Zwei gleichfarbige Abschnitte hintereinander brauchen
   deshalb keine doppelte Polsterung an der Nahtstelle. */
.has-duene-background-color + .has-duene-background-color {
	padding-top: 0;
}

/* Karten setzen sich mit Fläche und Haarlinie ab, nicht mit einem Schatten.
   Radius gestaffelt: Buttons 4 px, Bilder 2 px, Karten 0 px. */
.ssl-karte {
	background: var(--wp--preset--color--muschel);
	border: 1px solid var(--wp--custom--ssl--hairline);
	border-radius: 0;
}

/* 10. Bewegung ------------------------------------------------------------- */

/* Genau ein orchestrierter Moment beim Laden – Hero-Bild und Headline.
   Die Klassen setzt das Hero-Pattern (Schritt 6). */
@keyframes ssl-aufblenden {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Das Hintergrundbild des Cover-Blocks. Angesprochen wird die Klasse, die
   WordPress selbst vergibt – eine eigene Klasse am <img> würde den Block
   im Editor ungültig machen, weil sie in dessen save() nicht vorkommt. */
.ssl-hero > .wp-block-cover__image-background {
	animation: ssl-aufblenden 600ms ease-out both;
}

.ssl-hero__text {
	animation: ssl-aufblenden 600ms ease-out 150ms both;
}

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

	.ssl-hero > .wp-block-cover__image-background,
	.ssl-hero__text {
		animation: none;
		opacity: 1;
	}
}

/* 11. Layout-Hilfen -------------------------------------------------------- */

/* Randlose Bildbänder dürfen keinen seitlichen Innenabstand erben. */
.wp-site-blocks > .alignfull.ssl-randlos {
	padding-left: 0;
	padding-right: 0;
}

/* Platz unter dem Inhalt, damit die mobile Sticky-CTA-Leiste (Schritt 6)
   nichts verdeckt. Die Höhe wird dort auf --ssl-stickyhoehe gesetzt. */
body {
	--ssl-stickyhoehe: 0px;
}

.wp-site-blocks {
	padding-bottom: calc(var(--ssl-stickyhoehe) + env(safe-area-inset-bottom, 0px));
}

/* 12. Druck ---------------------------------------------------------------- */

@media print {
	.wp-block-navigation,
	.ssl-sticky-cta {
		display: none;
	}
}

/* Die gemessenen Kontrastwerte der Palette und die drei Regeln, die daraus
   folgen, stehen in FARBEN-KONTRASTE.md im Theme-Ordner. Sie stehen dort und
   nicht hier, weil eine Tabelle mit jedem Seitenaufruf mitgeladen würde. */