/*
Theme Name: LFKBR Hessen
Description: Block-Theme für die Website der Landesvereinigung klassisch-barocke Reiterei – Hessen – Rhein-Main – Frankfurt e.V. Auf der Testinstanz erprobt und für die kontrollierte Bereitstellung auf LIVE vorbereitet. Theme-Aktivierung und öffentliche Freigabe erfolgen gesondert.
Version: 0.3.3
Author: HBC Digital
License: GPL-2.0-or-later
Text Domain: lfkbr-hessen
*/

/* ==========================================================================
   Zusatz-CSS des Themes

   Grundsatz: theme.json ist die primäre Quelle für Farben, Schrift, Abstände, Layout,
   Elementstile und Block-Varianten. Diese Datei enthält nur, was theme.json nicht sauber
   abbildet. Sie ist bewusst nicht minifiziert. Es gibt keine Verläufe, keine Schatten,
   keine Schriftdefinitionen (@font-face), keine url()-Aufrufe und keine externen Ressourcen.

   Alle Farben stammen aus der freigegebenen Palette (E-019) und werden ausschließlich über
   die von theme.json erzeugten Variablen --wp--preset--color--<rolle> verwendet.

   Inhalt
    1  Fokus, Sprunglink und Bewegung (Barrierefreiheit)
    2  Grundlagen und Seitenrahmen
    3  Links und dunkle Flächen
    4  Schaltflächen
    5  Kopfzeile und Navigation
    6  Fußzeile
    7  Abschnitte, Karten und Bausteine
    8  Medien-Platzhalter, Kicker und Entwurfskennzeichnung
    9  Formulare (Suche)
   10  Startseite: Hero
   11  Bilder in Abschnitten (Pferdewohl, Der Verein)
   12  Unterseiten (Seitenkopf und Lesebreite)
   ========================================================================== */


/* 1  Fokus, Sprunglink und Bewegung (Barrierefreiheit) ----------------------
   Fokusring: 3 px, Abstand 2 px. Dunkles Bordeaux auf hellem Grund (13,63 : 1),
   Helles Creme auf dunklem Grund (13,63 : 1). Der Ring wird nie entfernt. */

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

:is(.has-primary-dark-background-color, .has-primary-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--base);
}

/* Sprunglink des Kerns: Farben an die Palette anpassen. */
body .skip-link.screen-reader-text:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	outline-color: var(--wp--preset--color--base);
}

/* Hilfsklasse für nur visuell versteckte Inhalte (für Screenreader lesbar). */
.lfkbr-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Übergänge nur bei erlaubter Bewegung und kurz. */
@media (prefers-reduced-motion: no-preference) {
	a,
	.wp-block-button__link {
		transition: color 0.2s, background-color 0.2s, border-color 0.2s;
	}
}

@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;
	}
}


/* 2  Grundlagen und Seitenrahmen -------------------------------------------- */

/* Zeilenhöhe Fließtext: 1,6 mobil (theme.json), 1,65 ab 1024 px. */
@media (min-width: 1024px) {
	html body {
		line-height: 1.65;
	}
}

/* Kein synthetisches Fett oder Kursiv (Saira erst nach Lizenz- und Dateiprüfung, E-015). */
body {
	font-synthesis: none;
}

strong,
b {
	font-weight: 600;
}

/* Kopfzeile, Inhalt und Fußzeile schließen ohne Lücke aneinander. */
.wp-site-blocks > :is(header, main, footer) {
	margin-block-start: 0;
}

html {
	scroll-padding-top: var(--wp--preset--spacing--60);
}


/* 3  Links und dunkle Flächen ------------------------------------------------
   Linien und Abstand der Unterstreichung (in theme.json nicht abbildbar). */

a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1.5px;
	text-underline-offset: 0.15em;
}

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

/* Auf dunklen Flächen erben Überschriften und Links die helle Textfarbe. */
:is(.has-primary-dark-background-color, .has-primary-background-color) :is(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--base);
}

:is(.has-primary-dark-background-color, .has-primary-background-color) a:where(:not(.wp-element-button)) {
	color: inherit;
}

:is(.has-primary-dark-background-color, .has-primary-background-color) a:where(:not(.wp-element-button)):hover {
	color: var(--wp--preset--color--accent);
}


/* 4  Schaltflächen ------------------------------------------------------------
   Mindestgröße 48 px Höhe, 44 px Breite (Zielgröße). */

.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 3rem;
	text-align: center;
}


/* 5  Kopfzeile und Navigation -------------------------------------------------
   Leiste ab 1080 px, darunter Menü-Schaltfläche (E-036, ersetzt den Wert 1024 px aus E-034). Der
   Kern-Navigationsblock kennt keinen eigenen Umschaltpunkt und wechselt fest bei 600 px; zwischen
   600 und 1079 px wird deshalb der Kernzustand „Menü-Schaltfläche“ per CSS gehalten (siehe unten).
   Kernregeln haben teils höhere Spezifität als eine einzelne Klasse (z. B.
   `.wp-block-navigation .wp-block-navigation-item { display: flex }`); Regeln, die etwas
   ausblenden oder umschalten, verwenden hier deshalb bewusst spezifischere Selektoren (F-01). */

.lfkbr-site-header {
	border-block-end: 1px solid var(--wp--preset--color--surface-strong);
}

/* Markenbereich links: bisher nur die Wortmarke (kein Vereinslogo im Projekt, OP-17). Ein später
   eingefügtes Logo (core/site-logo oder core/image) steht links neben der Wortmarke; die Höhe ist begrenzt,
   damit die Kopfzeile und der Umschaltpunkt (E-036) unverändert bleiben. */
.lfkbr-brand {
	min-width: 0;
}

.lfkbr-brand :is(.wp-block-site-logo, .wp-block-image) {
	margin: 0;
	line-height: 0;
}

.lfkbr-brand :is(.wp-block-site-logo, .wp-block-image) img {
	width: auto;
	max-height: 3rem;
}

.lfkbr-wordmark {
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: 0.01em;
}

.lfkbr-wordmark a {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: none;
}

.lfkbr-wordmark a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lfkbr-wordmark-sub {
	margin-block: 0.2rem 0;
	font-size: 0.75rem;
}

/* Navigationspunkte: Unterstreichung als Zustand, nicht nur Farbe. */
.lfkbr-site-header .wp-block-navigation-item__content {
	padding-block: 0.5rem;
	border-block-end: 3px solid transparent;
}

.lfkbr-site-header .wp-block-navigation-item__content:hover {
	border-block-end-color: var(--wp--preset--color--primary);
}

.lfkbr-site-header .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.lfkbr-site-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--primary-dark);
	border-block-end-color: var(--wp--preset--color--primary);
}

/* Menü-Schaltfläche mit sichtbarer Beschriftung zusätzlich zum Symbol. */
.wp-block-navigation__responsive-container-open {
	gap: 0.5rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.5rem 1rem;
	border: 2px solid currentColor;
	border-radius: 2px;
	font-weight: 600;
}

.wp-block-navigation__responsive-container-open::after {
	content: "Menü";
}

.wp-block-navigation__responsive-container-close {
	min-width: 2.75rem;
	min-height: 2.75rem;
}

.wp-block-navigation__responsive-container-close::after {
	content: "Schließen";
	margin-inline-start: 0.5rem;
	font-weight: 600;
}

/* Geöffnetes Menü (dunkler Grund, große Zeilen). */
.lfkbr-site-header .is-menu-open .wp-block-navigation-item__content {
	padding-block: 1rem;
	border-block-end: 1px solid var(--wp--preset--color--primary);
	font-size: 1.25rem;
	font-weight: 500;
}

.lfkbr-site-header .is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.lfkbr-site-header .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--wp--preset--color--accent);
}

/* Kontakt ist sekundär (E-017, E-035): nur im geöffneten Menü, nie in der Desktop-Leiste.
   „Mitglied werden“ steht nicht im Menü, sondern als Button in der Kopfzeile (E-035). */
.lfkbr-site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .lfkbr-nav-secondary {
	display: none;
}

.lfkbr-site-header .is-menu-open .lfkbr-nav-secondary > .wp-block-navigation-item__content {
	border-block-end: 0;
	font-size: 1.0625rem;
	font-weight: 400;
}

/* Umschaltpunkt 1080 px (E-036): Zwischen 600 und 1079 px setzt der Kern die Leiste ein und
   blendet die Menü-Schaltfläche aus. Hier wird der Zustand unter 600 px beibehalten:
   Schaltfläche sichtbar, Leiste ausgeblendet. Das geöffnete Menü (`.is-menu-open`) bleibt
   unverändert das Kern-Overlay. Die Selektoren sind um `.lfkbr-site-header` spezifischer als
   die Kernregeln. Der Wert ist so gewählt, dass Wortmarke, Leiste und Button oberhalb des
   Umschaltpunkts in einer Zeile Platz haben (kein zweizeiliger Desktop-Header, OP-39). */
@media (min-width: 600px) and (max-width: 1079.98px) {
	.lfkbr-site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lfkbr-site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Button in der Kopfzeile: auf allen Breiten sichtbar (E-035). */
.lfkbr-header-cta .wp-block-button__link {
	white-space: nowrap;
}


/* 6  Fußzeile -------------------------------------------------------------- */

.lfkbr-site-footer .lfkbr-wordmark a {
	color: var(--wp--preset--color--base);
}

.lfkbr-site-footer .wp-block-navigation-item__content {
	padding-block: 0.25rem;
}

.lfkbr-footer-bottom {
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--wp--preset--color--accent);
}

.lfkbr-footer-bottom p {
	margin: 0;
}


/* 7  Abschnitte, Karten und Bausteine ---------------------------------------- */

/* Kopfbereich eines Abschnitts: linksbündig, Zeilenlänge auf die Lesebreite begrenzt. Dasselbe gilt für
   Textblöcke der Unterseiten (lfkbr-prose). */
.lfkbr-block-head > *,
.lfkbr-prose > * {
	max-width: var(--wp--style--global--content-size);
}

/* Karten (Blockstil „Karte“; Farben, Rand und Innenabstand in theme.json). */
.is-style-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.is-style-card > .lfkbr-arrow-link:last-child {
	margin-block-start: auto;
}

.is-style-card .wp-block-post-featured-image {
	margin-block-end: 1rem;
}

/* Ein Link je Karte: die Klickfläche umfasst die ganze Karte. Sie liegt auf ::before, damit ::after für den
   Pfeil des Textlinks (lfkbr-arrow-link) frei bleibt; sonst säße der Pfeil oben links in der Karte. */
.lfkbr-stretched a::before {
	content: "";
	position: absolute;
	inset: 0;
}

/* Textlink mit Pfeil (Pfeil ohne Vorlesetext, sofern unterstützt). */
.lfkbr-arrow-link a {
	font-weight: 600;
}

.lfkbr-arrow-link a::after {
	content: " \2192";
	content: " \2192" / "";
}

/* Goldlinie über Überschriften (rein dekorativ). Umgesetzt als Trennlinien-Block ohne Bedeutung
   (core/separator mit HTML-Element div): Screenreader sagen sie nicht an, und der Editor zeigt keinen
   Platzhalter (eine leere Gruppe zeigte dort die Variationsauswahl, die Kicker und H1 überlagerte, K-01).
   Die Selektoren spiegeln die Kernregeln des Separators (u. a. width: 100px und der Rahmen), damit
   Breite, Rahmen und Ränder hier gewinnen. */
.wp-block-separator.lfkbr-rule-gold:not(.is-style-wide):not(.is-style-dots) {
	width: 4rem;
	height: 2px;
	margin-inline: 0;
	margin-block-end: 1rem;
	border: 0;
	background-color: var(--wp--preset--color--accent);
	opacity: 1;
}

/* Kernaussage: Zeilenlänge begrenzen. */
.lfkbr-kernaussage {
	max-width: var(--wp--style--global--content-size);
}

/* Veranstaltungs-Datumsfeld. */
.lfkbr-event-date {
	min-width: 4.5rem;
	border-radius: 2px;
	text-align: center;
	line-height: 1.1;
}

.lfkbr-event-date p {
	margin: 0;
}

/* Abfrage-Schleifen: Abstand zur Blätterfunktion. */
.wp-block-query-pagination {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* Vorschau-Abschnitte ohne Inhalt ausblenden (leerer Zustand bleibt als Rückfall,
   falls der Browser :has() nicht unterstützt). Nur im Frontend: Im Block-Editor trägt jeder Block die Klasse
   block-editor-block-list__block. Dort (Editor-Canvas und Muster-Vorschau im Einfüger) bleibt der Abschnitt
   sichtbar, damit Redakteure ihn auch ohne veröffentlichte Beiträge sehen, einfügen und bearbeiten können (0.3.1). */
.lfkbr-hide-when-empty:not(.block-editor-block-list__block):has(.wp-block-query-no-results) {
	display: none;
}


/* 8  Medien-Platzhalter, Kicker und Entwurfskennzeichnung ---------------------- */

.lfkbr-media-placeholder {
	display: grid;
	place-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--surface-strong);
	color: var(--wp--preset--color--contrast-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	text-align: center;
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: -0.75rem;
}

.lfkbr-media-placeholder > * {
	max-width: 18rem;
	margin: 0;
}

.lfkbr-ratio-3x2 {
	aspect-ratio: 3 / 2;
}

.lfkbr-ratio-4x5 {
	aspect-ratio: 4 / 5;
}

.lfkbr-ratio-16x9 {
	aspect-ratio: 16 / 9;
}

/* Kicker: kleine Großbuchstaben-Rubrik (Blockstil „Kicker“ und Klasse lfkbr-kicker).
   Goldton als Text nur in der Textvariante (5,3 : 1 auf Creme). */
.lfkbr-kicker,
.is-style-kicker {
	margin-block-end: 0.5rem;
	color: var(--wp--preset--color--accent-text);
	font-size: var(--wp--preset--font-size--kicker);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.lfkbr-kicker a {
	color: inherit;
	text-decoration: none;
}

.lfkbr-kicker a:hover {
	text-decoration: underline;
}

:is(.has-primary-dark-background-color, .has-primary-background-color) :is(.lfkbr-kicker, .is-style-kicker) {
	color: var(--wp--preset--color--accent);
}

/* Entwurfskennzeichnung: markiert Texte, die fachlich nicht freigegeben sind (E-014).
   Nach Freigabe eines Textes die Klasse lfkbr-entwurf entfernen; sind alle Texte
   freigegeben, kann diese Regel entfallen. Warnung auf Warnungsfläche: 5,15 : 1. */
.lfkbr-entwurf::before {
	content: "Entwurf";
	display: inline-block;
	margin-inline-end: 0.5em;
	padding: 0 0.4em;
	border-radius: 2px;
	background-color: var(--wp--preset--color--warning-surface);
	color: var(--wp--preset--color--warning);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.6;
	text-transform: uppercase;
	vertical-align: 0.1em;
}


/* 9  Formulare (Suche) ------------------------------------------------------------
   Beschriftung sichtbar über dem Feld, Rand 4,07 : 1 auf Helles Creme. */

.wp-block-search__label {
	font-weight: 600;
	color: var(--wp--preset--color--primary-dark);
}

.wp-block-search__input {
	min-height: 3rem;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 2px;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font: inherit;
}

.wp-block-search__button {
	min-height: 3rem;
}


/* 10  Startseite: Hero -----------------------------------------------------------
   Text steht auf einer ruhigen Fläche neben dem Bild, nie auf dem Foto. */

.lfkbr-hero-columns > .wp-block-column {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.lfkbr-hero-lead {
	max-width: 32rem;
}

.lfkbr-hero-secondary {
	margin: 0;
	font-weight: 500;
}

/* Reitfoto: quadratisch (Originalformat 640 × 640 px), nie verzerrt, nie beschnitten. Die Breite ist auf
   die Originalbreite (40 rem = 640 px) begrenzt, damit das Foto nicht hochgerechnet und unscharf wird.
   Ab dem Spaltenumbruch (782 px) steht es rechts, darunter linksbündig unter dem Text. Das feste
   Seitenverhältnis reserviert den Platz vor dem Laden (keine Layout-Sprünge). Object-fit und
   object-position sichern den Motivschwerpunkt (Reiterin und Pferd, Bildmitte rechts), falls später
   ein anderes Foto im gleichen Block eingesetzt wird. */
.lfkbr-hero-photo {
	width: 100%;
	max-width: 40rem;
	margin: 0;
}

.lfkbr-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	border-radius: 2px;
	object-fit: cover;
	object-position: 60% 55%;
}

@media (min-width: 782px) {
	.lfkbr-hero-photo {
		margin-inline-start: auto;
	}
}


/* 11  Bilder in Abschnitten (Pferdewohl, Der Verein)
   Beide Bildfelder behalten das Seitenverhältnis 3 : 2 des früheren Platzhalters, damit die Abschnittshöhe
   gleich bleibt und beim Laden nichts springt. Das Pferdefoto (1600 × 1066 px, fast genau 3 : 2) füllt das Feld
   ohne sichtbaren Zuschnitt. Das Vereinslogo (quadratisch, transparenter Hintergrund) steht mittig und
   vollständig im Feld; seine Seite ist zwei Drittel der Feldbreite und damit so hoch wie das Feld. */

.lfkbr-section-photo {
	margin: 0;
}

.lfkbr-section-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	border-radius: 2px;
	object-fit: cover;
	object-position: 50% 50%;
}

.lfkbr-section-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	aspect-ratio: 3 / 2;
}

.lfkbr-section-logo img {
	display: block;
	width: 66.6667%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
}


/* 12  Unterseiten (Seitenkopf und Lesebreite)
   Alle Unterseiten folgen demselben Raster (docs/THEME_ARCHITEKTUR.md, Abschnitt 17.8): Seitenkopf
   (lfkbr-page-head: Goldlinie, Kicker, H1, Einleitung, Entwurfshinweis, optional ein Bild), danach abwechselnd
   helle und cremefarbene Abschnitte (lfkbr-section) mit Textblöcken in Lesebreite (lfkbr-prose), Karten
   (is-style-card) und Vereinsdaten, zuletzt ein Abschluss mit einer passenden nächsten Aktion. Farben, Schrift,
   Abstände und Schaltflächen kommen unverändert aus theme.json und den Abschnitten 3 bis 10. Nur das quadratische
   Reitfoto im Seitenkopf wird kleiner gehalten als im Hero der Startseite, damit der Kopf niedrig bleibt. */

.lfkbr-page-head .lfkbr-hero-photo {
	max-width: 22rem;
}

/* Gestapelt (unter 782 px) bleibt der Seitenkopf niedriger als der Hero der Startseite. */
@media (max-width: 781px) {
	.lfkbr-page-head .lfkbr-hero-photo {
		max-width: 16rem;
	}
}

/* Lange Wörter in Kartenüberschriften (z. B. „Verantwortungsvoller“) brechen um, statt aus der Karte zu laufen. */
.is-style-card :is(h3, h4) {
	overflow-wrap: break-word;
	hyphens: auto;
}


/* 13  Redaktionell gepflegte Seiten (Seiteninhalt aus WordPress, 0.3.0)
   Seiten und Startseite kommen aus dem Seiteninhalt (wp:post-content, Klasse lfkbr-page-content).
   Die Abschnitte der Startmuster sind Vollbreite-Gruppen; wie bisher sollen sie ohne Lücke aneinander
   anschließen. Der Standardabstand des Layouts (blockGap) gilt zwischen ihnen nicht. Lose, nicht
   vollbreite Blöcke, die Redakteure auf oberster Ebene ergänzen, behalten den normalen Abstand. */
.wp-block-post-content.lfkbr-page-content.is-layout-constrained > .alignfull {
	margin-block-start: 0;
}