/*
Theme Name: Frauenhaus Südpfalz
Description: Child-Theme für GeneratePress. Trägt die Design-Tokens (theme.json), die lokal eingebundenen Schriften, Fokus- und Bewegungsregeln sowie die Komponentenklassen der Webseite Frauenhaus Südpfalz. Keine externen Anfragen.
Author: JA KLAR
Template: generatepress
Version: 0.1.0
Requires at least: 6.6
Requires PHP: 8.2
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: frauenhaus-suedpfalz
*/

/* ==========================================================================
   Frauenhaus Südpfalz - Basisregeln des Child-Themes

   Quelle aller Werte ist theme.json (--wp--preset--* und --wp--custom--*).
   Diese Datei setzt die Tokens im Frontend durch, weil GeneratePress seine
   eigenen Regeln (main.css und Customizer-CSS) nach den WordPress-Global-Styles
   ausgibt. Die Child-CSS lädt als Letztes (Handle generate-child) und gewinnt
   damit bei gleicher Spezifität.

   Komponentenklassen (.fhs-*) liegen in assets/css/components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Kurz-Aliase auf die theme.json-Tokens (nur Lesbarkeit, keine neuen Werte)
   -------------------------------------------------------------------------- */
:root {
	--fhs-orange: var(--wp--preset--color--orange);
	--fhs-orange-dark: var(--wp--preset--color--orange-dark);
	--fhs-orange-light: var(--wp--preset--color--orange-light);
	--fhs-cream: var(--wp--preset--color--cream);
	--fhs-ink: var(--wp--preset--color--ink);
	--fhs-graphite: var(--wp--preset--color--graphite);
	--fhs-white: var(--wp--preset--color--white);
	--fhs-exit: var(--wp--preset--color--exit);
	--fhs-orange-hover: var(--wp--custom--orange-hover);
	/* Richtung B (08.09.2026): Schiefer ist der dunkle Gegenspieler zum Orange,
	   Papier der Seitengrund, Linie ersetzt die Kartenraender. */
	--fhs-schiefer: var(--wp--preset--color--schiefer);
	--fhs-papier: var(--wp--preset--color--papier);
	--fhs-linie: var(--wp--preset--color--linie);

	--fhs-space-xs: var(--wp--preset--spacing--xs);
	--fhs-space-s: var(--wp--preset--spacing--s);
	--fhs-space-m: var(--wp--preset--spacing--m);
	--fhs-space-l: var(--wp--preset--spacing--l);
	--fhs-space-xl: var(--wp--preset--spacing--xl);
	--fhs-space-xxl: var(--wp--preset--spacing--xxl);
	--fhs-space-xxxl: var(--wp--preset--spacing--xxxl);

	--fhs-fs-klein: var(--wp--preset--font-size--klein);
	--fhs-fs-fliesstext: var(--wp--preset--font-size--fliesstext);
	--fhs-fs-gross: var(--wp--preset--font-size--gross);
	/* WordPress schreibt Slugs mit Ziffern in Kebab-Case um: aus dem Slug "h1" in
	   theme.json wird die Variable --wp--preset--font-size--h-1. Deshalb hier der
	   Bindestrich-Name plus der clamp-Wert als Rueckfall (Befund Welle 3, 07.09.2026:
	   ohne den Bindestrich war die Variable leer und alle Ueberschriften erbten die
	   Fliesstextgroesse). Werte identisch mit theme.json und docs/design-system.md. */
	--fhs-fs-h3: var(--wp--preset--font-size--h-3, clamp(1.375rem, 1.282rem + 0.381vw, 1.625rem));
	--fhs-fs-h2: var(--wp--preset--font-size--h-2, clamp(1.875rem, 1.504rem + 1.524vw, 2.875rem));
	--fhs-fs-h1: var(--wp--preset--font-size--h-1, clamp(2.5rem, 1.711rem + 3.238vw, 4.625rem));

	--fhs-radius: var(--wp--custom--radius);
	--fhs-radius-gross: var(--wp--custom--radius-gross);
	--fhs-target: var(--wp--custom--min-target);
	--fhs-bar-height: var(--wp--custom--bar-height);
	--fhs-dach-marke: var(--wp--custom--dach-marke);
	--fhs-focus-width: var(--wp--custom--focus-ring-width);
	--fhs-focus-offset: var(--wp--custom--focus-ring-offset);
}

/* --------------------------------------------------------------------------
   1. Grundschrift und Farben
   -------------------------------------------------------------------------- */
body,
button,
input,
select,
textarea {
	font-family: var(--wp--preset--font-family--source-sans-3);
}

body {
	background-color: var(--fhs-papier);
	color: var(--fhs-ink);
	font-size: var(--fhs-fs-fliesstext);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	/* Entwurf v1.2 (freigegeben 09.10.2026): Figtree 600 als Displayschrift,
	   Fliesstext bleibt Source Sans 3. Vorher Barlow Semi Condensed. */
	font-family: var(--wp--preset--font-family--figtree);
	color: var(--fhs-schiefer);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: -0.01em;
	text-wrap: balance;
	/* Lange deutsche Woerter ("Frauenberatungsstelle") in der schmalen Kopfspalte der
	   Achse mit Trennstrich umbrechen statt mitten im Wort (12.10.2026). */
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	overflow-wrap: break-word;
}

h1,
h2 {
	line-height: var(--wp--custom--line-height--display);
}

h1 {
	font-size: var(--fhs-fs-h1);
}

h2 {
	font-size: var(--fhs-fs-h2);
}

h3 {
	font-size: var(--fhs-fs-h3);
}

h4 {
	font-size: var(--fhs-fs-gross);
}

h5,
h6 {
	font-size: var(--fhs-fs-fliesstext);
}

p,
li {
	overflow-wrap: break-word;
}

small,
.has-klein-font-size {
	font-size: var(--fhs-fs-klein);
}

/* Arabische Schnipsel: eigene Schrift und Zeilenhöhe. Die Attribute lang="ar" und dir="rtl"
   stehen im Block-Markup; .fhs-lang-ar ist die Klassen-Alternative.

   Nachbesserung 08.09.2026: Die Schriftdatei wird nur dort geladen, wo arabischer
   Text den Inhalt traegt (Body-Klasse fhs-has-arabic, gesetzt in functions.php).
   Vorher lud jede Seite 73 KB fuer das eine Wort "العربية" in der Zugangszeile;
   dort genuegt die Schrift des Geraets. Zeilenhöhe und Leserichtung bleiben
   ueberall gesetzt, damit die Darstellung stimmt. */
[lang="ar"],
.fhs-lang-ar {
	line-height: var(--wp--custom--line-height--arabic);
}

.fhs-has-arabic [lang="ar"],
.fhs-has-arabic .fhs-lang-ar {
	font-family: var(--wp--preset--font-family--noto-sans-arabic);
}

/* --------------------------------------------------------------------------
   2. Links: orange-dark, immer unterstrichen. Hover ändert nicht nur die
      Farbe, sondern auch die Linienstärke.
   -------------------------------------------------------------------------- */
a:where(:not(.wp-block-button__link):not(.wp-element-button)) {
	color: var(--fhs-orange-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.12em;
}

a:where(:not(.wp-block-button__link):not(.wp-element-button)):hover,
a:where(:not(.wp-block-button__link):not(.wp-element-button)):focus-visible {
	color: var(--fhs-orange-hover);
	text-decoration-thickness: 2px;
}

/* Automatische Textfarbe auf dunklen Paletten-Flächen: die Redakteurin wählt
   nur den Hintergrund, die Schrift folgt (Kontrast weiß auf graphite 10,70:1). */
.has-schiefer-background-color,
.has-graphite-background-color,
.has-ink-background-color,
.has-exit-background-color {
	color: var(--fhs-white);
}

.has-schiefer-background-color :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)),
.has-graphite-background-color :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)),
.has-ink-background-color :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)),
.has-exit-background-color :is(h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link)) {
	color: var(--fhs-white);
}

/* Logo-Orange als Fläche: dunkle Schrift (4,11:1 reicht nur für große Schrift,
   deshalb nur für Überschriften oder dekorative Flächen ohne Fließtext). */
.has-orange-background-color,
.has-orange-background-color :is(h1, h2, h3, h4, h5, h6) {
	color: var(--fhs-ink);
}

/* orange-dark als waehlbare Hintergrundfarbe: Schrift weiss (5,84:1), sonst ink 2,42:1.
   Nachtrag Projektleitung 07.09.2026 nach Befund Welle 1 Nr. 11. */
.has-orange-dark-background-color,
.has-orange-dark-background-color :is(h1, h2, h3, h4, h5, h6, a:where(:not(.wp-block-button__link))) {
	color: var(--fhs-white);
}

.has-orange-dark-background-color :focus-visible {
	outline-color: var(--fhs-white);
}

/* --------------------------------------------------------------------------
   3. Fokus: 2 px orange-dark, 2 px Abstand, überall gleich.
      GeneratePress blendet Fokusrahmen für Mausnutzer aus (.using-mouse :focus),
      :focus-visible bleibt für Tastaturnutzerinnen sichtbar.
   -------------------------------------------------------------------------- */
:focus-visible {
	outline: var(--fhs-focus-width) solid var(--fhs-orange-dark);
	outline-offset: var(--fhs-focus-offset);
}

.using-mouse :focus-visible {
	outline: var(--fhs-focus-width) solid var(--fhs-orange-dark);
	outline-offset: var(--fhs-focus-offset);
}

/* Auf graphitgrauen Flächen hätte orange-dark nur 1,83:1, dort ist der Ring weiß. */
.has-schiefer-background-color :focus-visible,
.has-graphite-background-color :focus-visible,
.has-ink-background-color :focus-visible,
.has-exit-background-color :focus-visible,
.fhs-footer :focus-visible,
.fhs-sektion--graphite :focus-visible {
	outline-color: var(--fhs-white);
}

/* Skip-Link von GeneratePress: sichtbar bei Fokus, über der Sticky-Leiste (z-index 100010). */
.skip-link.screen-reader-text:focus {
	top: var(--fhs-space-s);
	left: var(--fhs-space-s);
	z-index: 100020;
	padding: var(--fhs-space-m) var(--fhs-space-l);
	background-color: var(--fhs-white);
	color: var(--fhs-orange-dark);
	border-radius: var(--fhs-radius);
	box-shadow: none;
	outline: var(--fhs-focus-width) solid var(--fhs-orange-dark);
	outline-offset: var(--fhs-focus-offset);
	font-size: var(--fhs-fs-fliesstext);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--button);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. Bewegung: keine Animationen und Übergänge, wenn das System es wünscht.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   5. Buttons (core/button)
      Standard = primär: orange-dark mit weißer Schrift.
      .is-style-fhs-sekundaer: Rahmen und Schrift Schiefer, durchsichtiger Grund.
      .is-style-fhs-exit: Schiefer mit weißer Schrift.
      Alle: --fhs-button-hoehe hoch (56 px, gesetzt in components.css Abschnitt 0,
      Rueckfall hier), Innenabstand 12/28 px, Radius 6 px, Schrift 18 bis 20 px.
      UX-Audit 08.09.2026 Befund 4: Eine Hoehe fuer alle Buttons, auch den
      Exit-Button des Plugins (components.css Abschnitt 12).
      Hover: dunkler plus Unterstreichung (nie nur Farbe). Aktiv = wie Hover.
      Spezifität (0,2,1) entspricht der GeneratePress-Regel
      a.wp-block-button__link:not(.has-background); die Child-CSS lädt später.
   -------------------------------------------------------------------------- */
.wp-block-button a.wp-block-button__link,
.wp-block-button button.wp-block-button__link,
.wp-block-button .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	min-height: var(--fhs-button-hoehe, 56px);
	padding: 12px 28px;
	border: 2px solid var(--fhs-orange-dark);
	border-radius: var(--fhs-radius);
	background-color: var(--fhs-orange-dark);
	color: var(--fhs-white);
	font-size: var(--fhs-fs-fliesstext);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--button);
	text-align: center;
	text-decoration: none;
	text-underline-offset: 0.15em;
	transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out;
}

.wp-block-button a.wp-block-button__link:hover,
.wp-block-button a.wp-block-button__link:focus-visible,
.wp-block-button a.wp-block-button__link:active,
.wp-block-button button.wp-block-button__link:hover,
.wp-block-button button.wp-block-button__link:focus-visible,
.wp-block-button button.wp-block-button__link:active {
	border-color: var(--fhs-orange-hover);
	background-color: var(--fhs-orange-hover);
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Sekundär */
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link {
	/* Richtung B: Rahmen in Schiefer statt orange-dunkel, durchsichtiger Grund. */
	border-color: var(--fhs-schiefer);
	background-color: transparent;
	color: var(--fhs-schiefer);
}

.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:hover,
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:focus-visible,
.wp-block-button.is-style-fhs-sekundaer .wp-block-button__link:active {
	border-color: var(--fhs-schiefer);
	background-color: var(--fhs-schiefer);
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Exit (Optik des Plugin-Buttons fhs-exit als Block-Stil, falls ein Kern-Button den Exit übernimmt) */
.wp-block-button.is-style-fhs-exit .wp-block-button__link {
	border-color: var(--fhs-exit);
	background-color: var(--fhs-exit);
	color: var(--fhs-white);
}

.wp-block-button.is-style-fhs-exit .wp-block-button__link:hover,
.wp-block-button.is-style-fhs-exit .wp-block-button__link:focus-visible,
.wp-block-button.is-style-fhs-exit .wp-block-button__link:active {
	border-color: var(--fhs-ink);
	background-color: var(--fhs-ink);
	color: var(--fhs-white);
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

/* Buttons-Block: Abstand zwischen mehreren Buttons, mobil untereinander mit voller Breite */
.wp-block-buttons {
	gap: var(--fhs-space-m);
}

@media (max-width: 480px) {
	.wp-block-buttons:not(.is-layout-flex.is-content-justification-center) > .wp-block-button,
	.wp-block-buttons:not(.is-layout-flex.is-content-justification-center) > .wp-block-button .wp-block-button__link {
		width: 100%;
	}
}

/* --------------------------------------------------------------------------
   6. Kleine Grundregeln
   -------------------------------------------------------------------------- */
img,
svg {
	max-width: 100%;
	height: auto;
}

hr,
.wp-block-separator {
	border: 0;
	height: 2px;
	margin: var(--fhs-space-xl) auto;
	background-color: var(--fhs-orange);
	max-width: 6rem;
}

blockquote,
.wp-block-quote {
	margin: 0 0 var(--fhs-space-l);
	padding: var(--fhs-space-m) var(--fhs-space-l);
	border-left: 4px solid var(--fhs-orange);
	background-color: var(--fhs-orange-light);
	border-radius: var(--fhs-radius);
	font-style: normal;
	font-size: var(--fhs-fs-fliesstext);
}

::selection {
	background-color: var(--fhs-orange-light);
	color: var(--fhs-ink);
}