/*
 * JoNa | Software – Designsystem (WS-2)
 * ---------------------------------------------------------------
 * Zentrale CSS-Tokens und generische Basisoberflächen des Child Themes.
 *
 * Verantwortung:
 *   - design-system.css  = Referenz für ALLE Designwerte (eine Quelle, CSS-Tokens).
 *   - theme.json         = konfiguriert den Gutenberg-Editor; referenziert dieselben
 *                          Tokens per var() – keine doppelten Rohwerte.
 *   - Blocksy (Parent)   = kapselt Layout/Header/Footer (ab WS-3 konfiguriert);
 *                          wird NICHT geändert.
 *
 * Scope (WS-2): Ausschließlich generische Grundlagen – keine fertigen Seiten-
 * bereiche (Hero, Leistungen, Portfolio, Kontakt, Header, Footer).
 *
 * Version: 0.2.0
 */

:root {
	/* ---------------------------------------------------------------
	 * 1. Farben
	 * JoNa-Markenfarben (unverändert, verbindlich):
	 */
	--jona-color-brand-blue: #1e3b5f;
	--jona-color-brand-green: #70a556;
	--jona-color-brand-gray: #595959;

	/* Abgeleitete neutrale Flächen, Kontrast nach WCAG beachten. */
	--jona-color-ink: #1c212b;
	--jona-color-text-secondary: #5a6470;
	--jona-color-bg: #ffffff;
	--jona-color-bg-muted: #f4f6f8;
	--jona-color-bg-dark: #13171c;
	--jona-color-surface: #ffffff;
	--jona-color-surface-muted: #f6f7f9;
	--jona-color-border: #d9dfe6;
	--jona-color-border-strong: #8b94a1;
	--jona-color-inverse-text: #ffffff;

	/* Interaktionsfarben. JoNa-Grün ist dekoraativ/Akzent (Weißkontrast ~2,9:1,
	 * dadurch für Normaltext ungeeignet). Für interaktive Zustände wird die
	 * kontrastreichere Ableitung accent-strong genutzt (~5,1:1 auf Weiß). */
	--jona-color-accent: var(--jona-color-brand-green);
	--jona-color-accent-strong: #4c7a3a;
	/* Grüne Tint-Fläche (z.B. Badge-Hintergründe im Capability Strip;
	 * wiederverwendbar für spätere grün getönte Akzent-Kacheln). */
	--jona-color-accent-tint: rgba(112, 165, 86, 0.14);
	--jona-color-link: var(--jona-color-brand-blue);
	--jona-color-link-hover: #162a43;
	--jona-color-brand-blue-dark: #162a43;
	--jona-color-subtle-blue: #e8edf3;
	--jona-color-focus-ring: #1e3b5f;
	--jona-color-focus-ring-dark-bg: #8fb8ff;

	/* Dezente helle Flächen/Trenner auf dunklem Grund (z.B. Offcanvas-Drawer,
	 * spätere dunkle Sektionen). Bewusst als Overlay-Werte – kein Voll-Weiß,
	 * damit die Tiefe der dunklen Fläche erhalten bleibt. */
	--jona-color-light-surface: rgba(255, 255, 255, 0.1);
	--jona-color-light-border: rgba(255, 255, 255, 0.16);

	/* Tiefes JoNa-Navy für großflächige dunkle Bänder (z.B. KI &
	 * Automatisierung). Bewusst markeneigenes Dunkelblau aus der brand-blue-
	 * Familie statt neutralem Anthrazit: große dunkle Flächen sollen sichtbar
	 * zur Marke gehören. navy = obere Bandkante, navy-deep = Verlauf nach
	 * unten. --jona-color-bg-dark (neutral) bleibt für kleinere dunkle
	 * Flächen (Offcanvas, Bento-Lead) unverändert. */
	--jona-color-bg-navy: #1b3350;
	--jona-color-bg-navy-deep: #132742;
	/* Hellere Brand-Blue-Ableitung für Kanten-/Hover-Zustände auf dunklem
	 * Grund. Nötig, weil der Standard-Hover (brand-blue-dark #162a43) auf
	 * Navy optisch „verschwindet“ – auf dunklen Flächen wird aufgehellt,
	 * nicht abgedunkelt. Wiederverwendbar für alle dunklen Sektionen. */
	--jona-color-brand-blue-soft: #35618f;

	/* ---------------------------------------------------------------
	 * 2. Typografie
	 */
	--jona-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;
	--jona-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", monospace;

	--jona-font-size-xs: 0.75rem;
	--jona-font-size-sm: 0.875rem;
	--jona-font-size-base: 1rem;
	--jona-font-size-lg: 1.125rem;
	--jona-font-size-xl: clamp(1.1875rem, 1.6vw, 1.5rem);
	--jona-font-size-2xl: clamp(1.375rem, 2.2vw, 2.125rem);
	--jona-font-size-3xl: clamp(1.75rem, 3vw, 2.75rem);

	--jona-font-weight-regular: 400;
	--jona-font-weight-medium: 500;
	--jona-font-weight-semibold: 600;
	--jona-font-weight-bold: 700;

	--jona-line-height-tight: 1.25;
	--jona-line-height-base: 1.65;
	--jona-line-height-ui: 1.2;

	--jona-letter-spacing-tight: -0.01em;
	--jona-letter-spacing-none: 0;

	/* ---------------------------------------------------------------
	 * 3. Spacing-Skala (4, 8, 12, 16, 24, 32, 48, 64, 96)
	 */
	--jona-space-1: 4px;
	--jona-space-2: 8px;
	--jona-space-3: 12px;
	--jona-space-4: 16px;
	--jona-space-5: 24px;
	--jona-space-6: 32px;
	--jona-space-7: 48px;
	--jona-space-8: 64px;
	--jona-space-9: 96px;

	--jona-space-gutter-lg: 32px;
	--jona-space-gutter-md: 24px;
	--jona-space-gutter-sm: 16px;
	--jona-space-section-lg: 96px;
	--jona-space-section-md: 64px;
	--jona-space-section-sm: 48px;

	/* Sektions-Abstand zwischen GROSSEN Hauptsektionen (WS-5A, Punkt 4.1):
	 * bewusst mehr Luft als bisher (+16–24 px) – Desktop 112 statt 96,
	 * Tablet 72, Mobile 56. Einsatz je Unterblock in den home-*.css-Dateien. */
	--jona-space-section-gap-lg: 112px;
	--jona-space-section-gap-md: 72px;
	--jona-space-section-gap-sm: 56px;

	/* ---------------------------------------------------------------
	 * 4. Containerbreiten
	 * wide/narrow entsprechen den Blocksy-Standardwerten (maxSiteWidth 1290,
	 * narrowContainerWidth 750); content ist die Zielbreite für Fließtext.
	 */
	--jona-container-narrow: 750px;
	--jona-container-content: 860px;
	--jona-container-wide: 1290px;

	/* ---------------------------------------------------------------
	 * 5. Border-Radien
	 */
	--jona-radius-none: 0;
	--jona-radius-sm: 4px;
	--jona-radius-md: 8px;
	--jona-radius-lg: 12px;
	--jona-radius-full: 9999px;

	/* ---------------------------------------------------------------
	 * 6. Borders
	 */
	--jona-border-width: 1px;
	--jona-border-color: var(--jona-color-border);
	--jona-border-color-strong: var(--jona-color-border-strong);

	/* ---------------------------------------------------------------
	 * 7. Schatten (dezente, kühle Tiefenwirkung)
	 */
	--jona-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08),
		0 1px 2px rgba(16, 24, 40, 0.04);
	--jona-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08),
		0 2px 4px rgba(16, 24, 40, 0.04);

	/* ---------------------------------------------------------------
	 * 8. Transitionen (bewusst dezent, keine Dauer-Animationen)
	 */
	--jona-transition-fast: 120ms ease;
	--jona-transition-base: 180ms ease;
	--jona-transition-slow: 280ms ease;

	/* ---------------------------------------------------------------
	 * 9. Focus-Ring
	 */
	--jona-focus-ring-color: var(--jona-color-focus-ring);
	--jona-focus-ring-color-dark-bg: var(--jona-color-focus-ring-dark-bg);
	--jona-focus-ring-width: 2px;
	--jona-focus-ring-offset: 2px;

	/* ---------------------------------------------------------------
	 * 10. Breakpoints (Quelle: Blocksy 2.1.56, theme.json viewport +
	 *     static/bundle/main.min.css): Mobile < 690px, Tablet 690–999px,
	 *     Desktop >= 1000px.
	 */
	--jona-breakpoint-sm: 690px;
	--jona-breakpoint-md: 1000px;
}

/* ------------------------------------------------------------------
 * Basis
 */
body {
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-base);
	line-height: var(--jona-line-height-base);
	font-weight: var(--jona-font-weight-regular);
	color: var(--jona-color-ink);
	background-color: var(--jona-color-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Links im Inhalt sind zusätzlich zur Farbe unterstrichen (A11y: nicht nur per
 * Farbe unterscheidbar). Header-/Navigations-Links bleiben Blocksy überlassen. */
.entry-content a,
.jona-content a:not(.wp-element-button):not(.jona-button) {
	color: var(--jona-color-link);
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

.entry-content a:hover,
.jona-content a:not(.wp-element-button):not(.jona-button):hover {
	color: var(--jona-color-link-hover);
}

::selection {
	background-color: var(--jona-color-subtle-blue);
	color: var(--jona-color-ink);
}

/* ------------------------------------------------------------------
 * Typografie (responsive über clamp, Werte aus den Tokens)
 */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--jona-font-sans);
	font-weight: var(--jona-font-weight-semibold);
	line-height: var(--jona-line-height-tight);
	letter-spacing: var(--jona-letter-spacing-tight);
	color: var(--jona-color-ink);
	margin: 0 0 var(--jona-space-4);
}

h1 {
	font-size: var(--jona-font-size-3xl);
}

h2 {
	font-size: var(--jona-font-size-2xl);
}

h3 {
	font-size: var(--jona-font-size-xl);
}

h4 {
	font-size: var(--jona-font-size-lg);
}

/* Utility-Textgrößen für Sektionen/Snippets */
.jona-text-xs {
	font-size: var(--jona-font-size-xs);
}

.jona-text-sm {
	font-size: var(--jona-font-size-sm);
}

.jona-text-base {
	font-size: var(--jona-font-size-base);
}

.jona-text-lg {
	font-size: var(--jona-font-size-lg);
}

.jona-text-lead {
	font-size: var(--jona-font-size-lg);
	line-height: var(--jona-line-height-base);
}

/* ------------------------------------------------------------------
 * Container & Sektionen (generische Grundbausteine, keine Inhalte)
 */
.jona-container {
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
}

.jona-container-content {
	max-width: var(--jona-container-content);
}

.jona-container-narrow {
	max-width: var(--jona-container-narrow);
}

.jona-section {
	padding-block: var(--jona-space-section-lg);
}

/* Breakpoints (Tokens --jona-breakpoint-sm/-md, 690/1000px) werden in
 * @media-Queries FEST geschrieben, weil CSS-Variablen (var()) dort nicht
 * erlaubt sind und die Regel sonst vom Browser verworfen würde. */
@media (max-width: 689px) {
	.jona-section {
		padding-block: var(--jona-space-section-sm);
	}

	.jona-container {
		padding-inline: var(--jona-space-gutter-sm);
	}
}

@media (min-width: 690px) and (max-width: 999px) {
	.jona-container {
		padding-inline: var(--jona-space-gutter-md);
	}
}

/* Sektionsvarianten für helle/dunkle Flächen (Vorschaugrundlagen für spätere Blöcke) */
.jona-section--muted {
	background-color: var(--jona-color-bg-muted);
}

.jona-section--dark {
	background-color: var(--jona-color-bg-dark);
	color: var(--jona-color-inverse-text);
}

.jona-section--dark h1,
.jona-section--dark h2,
.jona-section--dark h3,
.jona-section--dark h4 {
	color: var(--jona-color-inverse-text);
}

/* ------------------------------------------------------------------
 * Surface & Card (generisch; keine fertigen Kartenkomponenten)
 */
.jona-surface {
	background-color: var(--jona-color-surface);
	border-radius: var(--jona-radius-md);
	padding: var(--jona-space-6);
}

.jona-surface--muted {
	background-color: var(--jona-color-surface-muted);
}

.jona-card {
	background-color: var(--jona-color-surface);
	border: var(--jona-border-width) solid var(--jona-color-border);
	border-radius: var(--jona-radius-lg);
	box-shadow: var(--jona-shadow-md);
	padding: var(--jona-space-6);
}

/* ------------------------------------------------------------------
 * Buttons / Interaktion (Gutenberg-kompatibel)
 *
 * Grundverhalten, noch keine fertigen CTAs. Touch-Höhe >= 44px,
 * sichtbarer :focus-visible-Zustand, subtile Transitionen.
 */
.wp-block-button__link,
.wp-element-button,
input[type="button"],
input[type="submit"],
button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6875rem 1.5rem;
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-base);
	font-weight: var(--jona-font-weight-semibold);
	line-height: var(--jona-line-height-ui);
	text-decoration: none;
	text-align: center;
	cursor: pointer;
	border-radius: var(--jona-radius-md);
	border: 1px solid transparent;
	transition: background-color var(--jona-transition-fast),
		border-color var(--jona-transition-fast),
		color var(--jona-transition-fast);
}

/* Primary (Gutenberg-Default: .is-style-fill bzw. ohne Stil) */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-element-button,
input[type="button"],
input[type="submit"],
button[type="submit"] {
	background-color: var(--jona-color-brand-blue);
	color: var(--jona-color-inverse-text);
	border-color: var(--jona-color-brand-blue);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
button[type="submit"]:hover,
button[type="submit"]:focus-visible {
	background-color: var(--jona-color-brand-blue-dark);
	border-color: var(--jona-color-brand-blue-dark);
}

/* Secondary (Gutenberg-Style .is-style-outline) */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--jona-color-brand-blue);
	border-color: var(--jona-color-border-strong);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--jona-color-subtle-blue);
	border-color: var(--jona-color-brand-blue);
	color: var(--jona-color-brand-blue-dark);
}

/* Disabled-Zustand */
.wp-element-button[disabled],
.wp-block-button__link[disabled],
input[type="button"][disabled],
input[type="submit"][disabled],
button[type="submit"][disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* ------------------------------------------------------------------
 * Accessibility: globaler Keyboard-Fokus
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--jona-focus-ring-width) solid var(--jona-focus-ring-color);
	outline-offset: var(--jona-focus-ring-offset);
}

/* Focus-Ring auf dunklen Flächen (höhere Sichtbarkeit) */
.jona-section--dark :focus-visible {
	outline-color: var(--jona-focus-ring-color-dark-bg);
}

/* ------------------------------------------------------------------
 * Dark-Surface-Utility: Buttons & Fokus auf dunklen Flächen
 *
 * Generische Anpassung des Button-Systems für dunkle Hintergründe – kein
 * sektionsspezifischer Sonderbutton. Auf hellen Flächen bleibt das
 * Standardverhalten unangetastet. Auf Dunkel:
 *   - Primary bleibt die Marken-Blue-Familie, erhält aber eine hellere
 *     Kante und wird bei Hover/Fokus aufgehellt (statt wie auf Hell
 *     abgedunkelt – brand-blue-dark würde auf Navy verschwinden).
 *   - Secondary (Outline) wechselt von Brand-Blau auf eine helle Linie,
 *     damit Text und Kante auf Navy lesbar bleiben.
 *   - Der Fokus-Ring wird kontrastreich (dunkle Fläche).
 */
.jona-on-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link,
.jona-on-dark .wp-block-button.is-style-fill .wp-block-button__link {
	background-color: var(--jona-color-brand-blue);
	border-color: var(--jona-color-brand-blue-soft);
	color: var(--jona-color-inverse-text);
}

.jona-on-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.jona-on-dark .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible,
.jona-on-dark .wp-block-button.is-style-fill .wp-block-button__link:hover,
.jona-on-dark .wp-block-button.is-style-fill .wp-block-button__link:focus-visible {
	background-color: var(--jona-color-brand-blue-soft);
	border-color: var(--jona-color-brand-blue-soft);
}

.jona-on-dark .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--jona-color-inverse-text);
	border-color: var(--jona-color-light-border);
}

.jona-on-dark .wp-block-button.is-style-outline .wp-block-button__link:hover,
.jona-on-dark .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--jona-color-light-surface);
	border-color: var(--jona-color-accent);
	color: var(--jona-color-inverse-text);
}

.jona-on-dark :focus-visible {
	outline-color: var(--jona-focus-ring-color-dark-bg);
}

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