/*
 * JoNa | Software – Global Header & Navigation (WS-3)
 * ---------------------------------------------------------------
 * Darstellung des globalen Headers (Blocksy-Struktur) im JoNa-Designsystem.
 *
 * Verantwortung:
 *   - design-system.css  = Tokens (--jona-*), Referenz für alle Werte.
 *   - header.css         = Header-/Navigations-Styling (diese Datei).
 *   - Blocksy (Parent)   = HTML-Struktur/JS (Header Builder, Offcanvas, Sticky).
 *   - theme.json         = Gutenberg (Editor); Header bleibt Blocksy+CSS.
 *
 * Stabile, verifizierte Blocksy-Struktur (Blocksy 2.1.56):
 *   <header id="header" class="ct-header" data-id="type-1">
 *     <div data-device="desktop|mobile">
 *       <div data-row="middle" data-column-set="2">
 *         <div class="ct-container">
 *           <div data-column="start"><div data-items="primary">
 *             <div class="site-branding" data-id="logo"> ...
 *           <div data-column="end"><div data-items="primary|secondary">
 *             <nav id="header-menu-1" class="header-menu-1 menu-container"> ...
 *             <button class="ct-header-trigger ct-toggle" ...> (nur mobile)
 *   Offcanvas: <div id="offcanvas" class="ct-panel ct-header" ...>
 *     .ct-panel-inner > .ct-panel-actions (Close) + .ct-panel-content > nav.mobile-menu
 *
 * Version: 0.5.0 (Header-Polish: kompakterer Desktop-Header, größeres Logo,
 *           Search-Element entfernt via header_placements, Kontakt als CTA
 *           über explizite Menüklasse .jona-menu-cta statt :last-child)
 *
 * Wichtig zu den Breakpoints: In @media-Queries dürfen KEINE CSS-Variablen
 * (var()) stehen – die komplette Regel wird sonst vom Browser verworfen.
 * Deshalb stehen hier feste Pixel-Werte, die den Tokens entsprechen:
 *   --jona-breakpoint-sm = 690px  -> Mobile  max-width: 689px
 *   --jona-breakpoint-md = 1000px -> Desktop min-width: 1000px
 */

/* ------------------------------------------------------------------
 * Header-Grundfläche (hell, ruhig, dezent getrennt)
 */
#header.ct-header {
	background-color: var(--jona-color-surface);
	border-bottom: var(--jona-border-width) solid var(--jona-color-border);
}

/* ------------------------------------------------------------------
 * Header-Höhen (Desktop/Tablet 72px, Mobile 60px)
 * Desktop wurde von 80px auf 72px kompaktiert (-8px, moderner
 * SaaS-Look). Mobile-Device-Wrapper ist bei Blocksy nur < 690px
 * sichtbar, Desktop-Wrapper ab 690px (auch Tablet) – deshalb ist
 * die Basisregel für den Desktop-Wrapper auch die Tablet-Höhe.
 */
#header [data-device="desktop"] [data-row="middle"] {
	min-height: 72px;
}

#header [data-device="mobile"] [data-row="middle"] {
	min-height: 60px;
}

/* ------------------------------------------------------------------
 * Logo
 *
 * Quellbild: jona-software-logo.png (2000x907 px, Seitenverhältnis 2.205:1).
 * Höhe setzen + width:auto -> Seitenverhältnis bleibt exakt erhalten,
 * Retina-scharf (Quelle 2000px breit). Keine zweite Datei nötig.
 *
 * Größen (Header-Polish): Desktop 64px (+23% ggü. 52px), Tablet 56px
 * (+22% ggü. 46px), Mobile 40px (+11% ggü. 36px). Die Row-Höhe oben
 * bleibt dabei kompakt; die Werte sind an das reale Layout angepasst.
 */
#header .site-logo-container {
	display: flex;
	align-items: center;
}

#header .site-logo-container img.default-logo {
	width: auto;
	height: 64px;
	object-fit: contain;
}

@media (min-width: 690px) and (max-width: 999px) {
	#header .site-logo-container img.default-logo {
		height: 56px;
	}
}

@media (max-width: 689px) {
	#header .site-logo-container img.default-logo {
		height: 40px;
	}
}

/* Site-Titel ausblenden, sobald ein Bild-Logo gesetzt ist */
#header .site-title-container {
	display: none;
}

/* ------------------------------------------------------------------
 * Desktop-Navigation (>= 690px sichtbar; Tablet zählt zum Desktop-Device)
 */
nav#header-menu-1 .menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--jona-space-2);
}

nav#header-menu-1 .menu > li > a.ct-menu-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--jona-space-3);
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-base);
	font-weight: var(--jona-font-weight-medium);
	line-height: var(--jona-line-height-ui);
	color: var(--jona-color-brand-blue);
	text-decoration: none;
	border-radius: var(--jona-radius-sm);
	transition: background-color var(--jona-transition-fast),
		color var(--jona-transition-fast);
}

nav#header-menu-1 .menu > li > a.ct-menu-link:hover {
	color: var(--jona-color-brand-blue-dark);
	background-color: var(--jona-color-subtle-blue);
}

/* Aktiver Punkt nicht nur per Farbe: dezente Unterstreichung.
 * Der Kontakt-CTA (li.jona-menu-cta) ist explizit ausgenommen: er hat
 * eigene, weiter unten stehende Regeln (blaue Fläche, kein Unterstrich). */
nav#header-menu-1 .menu > li.current-menu-item:not(.jona-menu-cta) > a.ct-menu-link,
nav#header-menu-1 .menu > li.current_page_item:not(.jona-menu-cta) > a.ct-menu-link,
nav#header-menu-1 .menu > li.current-menu-ancestor:not(.jona-menu-cta) > a.ct-menu-link {
	color: var(--jona-color-link-hover);
	font-weight: var(--jona-font-weight-semibold);
	box-shadow: inset 0 -2px 0 0 var(--jona-color-brand-blue);
}

/* ------------------------------------------------------------------
 * Kontakt als dezenter CTA-Button (Desktop >= 1000px)
 *
 * Der Menüpunkt „Kontakt" erhält per Bootstrap (WP-CLI) die explizite
 * Klasse `jona-menu-cta` (Menüpunkt-Meta _menu_item_classes) – stabil
 * gegen spätere Menü-Umordnung, kein :last-child mehr nötig.
 * Er bleibt ein normales Menü-Link (gleiche URL /kontakt/), wird nur
 * visuell als Primary-Button gestaltet. Im Offcanvas (Mobile) bleibt er
 * ein normaler Menüpunkt. Kein JS, keine neue Kontakt-URL, keine
 * Builder-Abhängigkeit.
 */
@media (min-width: 1000px) {
	nav#header-menu-1 .menu > li.jona-menu-cta > a.ct-menu-link {
		min-height: 44px;
		padding: var(--jona-space-3) var(--jona-space-5);
		margin-left: var(--jona-space-2);
		background-color: var(--jona-color-brand-blue);
		color: var(--jona-color-inverse-text);
		font-weight: var(--jona-font-weight-semibold);
		border-radius: var(--jona-radius-md);
		box-shadow: none;
		transition: background-color var(--jona-transition-fast),
			color var(--jona-transition-fast);
	}

	/* Hover + Tastatur-Fokus: dunkleres Blau, weißer Text, kein Unterstrich */
	nav#header-menu-1 .menu > li.jona-menu-cta > a.ct-menu-link:hover,
	nav#header-menu-1 .menu > li.jona-menu-cta > a.ct-menu-link:focus-visible {
		background-color: var(--jona-color-brand-blue-dark);
		color: var(--jona-color-inverse-text);
		box-shadow: none;
	}

	/* Aktive Kontaktseite: CTA bleibt Button, leicht abgedunkelt (wie Hover),
	 * ohne Konflikt mit der Unterstreichungs-Regel der normalen Punkte. */
	nav#header-menu-1 .menu > li.jona-menu-cta.current-menu-item > a.ct-menu-link,
	nav#header-menu-1 .menu > li.jona-menu-cta.current_page_item > a.ct-menu-link {
		background-color: var(--jona-color-brand-blue-dark);
		color: var(--jona-color-inverse-text);
		box-shadow: none;
	}
}

/* ------------------------------------------------------------------
 * Mobile-Trigger (Hamburger, nur mobile-Device-Wrapper sichtbar)
 */
#header .ct-header-trigger {
	min-width: 44px;
	min-height: 44px;
	padding: var(--jona-space-2);
	border-radius: var(--jona-radius-sm);
	color: var(--jona-color-brand-blue);
	transition: color var(--jona-transition-fast),
		background-color var(--jona-transition-fast);
}

#header .ct-header-trigger:hover {
	color: var(--jona-color-brand-blue-dark);
	background-color: var(--jona-color-subtle-blue);
}

/* ------------------------------------------------------------------
 * Offcanvas / Mobile-Navigation (Blocksy-Struktur)
 *
 * Der sichtbare Drawer ist `.ct-panel-inner`. Blocksy färbt ihn standard-
 * mäßig fast schwarz (rgba(18,21,25,0.98), siehe blocksy/css/global.css).
 * Der dunkle Grund bleibt bewusst erhalten (WS-3-Fix: Mobil-Lesbarkeit);
 * er wird auf den dunklen Design-Token konsolidiert und alle Inhalte sind
 * für dunklen Grund gestylt: heller Text, sichtbare Trennlinien, heller
 * Fokusring und ein gut erkennbares Close-Icon.
 *
 * Hinweis Spezifität: `#offcanvas.ct-panel .ct-panel-inner` erreicht genau
 * die Spezifität von Blocksys Regel und gewinnt durch spätere Lade-
 * Reihenfolge (header.css lädt nach blocksy/css/global.css).
 */
#offcanvas.ct-panel .ct-panel-inner {
	background-color: var(--jona-color-bg-dark);
}

/* Close-Icon (X) hell auf dunklem Grund; Touch-Ziel >= 44px */
#offcanvas .ct-panel-actions .ct-toggle-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	border-radius: var(--jona-radius-sm);
	color: var(--jona-color-inverse-text);
	transition: color var(--jona-transition-fast),
		background-color var(--jona-transition-fast);
}

#offcanvas .ct-panel-actions .ct-toggle-close:hover {
	background-color: var(--jona-color-light-surface);
}

#offcanvas .ct-panel-actions .ct-toggle-close:focus-visible {
	outline: var(--jona-focus-ring-width) solid var(--jona-color-focus-ring-color-dark-bg);
	outline-offset: var(--jona-focus-ring-offset);
}

#offcanvas nav.mobile-menu ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

/* Dezent sichtbare Trennlinien zwischen den Punkten (dunkler Grund) */
#offcanvas nav.mobile-menu ul > li + li {
	border-top: var(--jona-border-width) solid var(--jona-color-light-border);
}

#offcanvas nav.mobile-menu ul > li > a.ct-menu-link {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: var(--jona-space-3) var(--jona-space-4);
	font-family: var(--jona-font-sans);
	font-size: var(--jona-font-size-lg);
	font-weight: var(--jona-font-weight-medium);
	line-height: var(--jona-line-height-ui);
	color: var(--jona-color-inverse-text);
	text-decoration: none;
	border-radius: var(--jona-radius-sm);
	transition: background-color var(--jona-transition-fast),
		color var(--jona-transition-fast);
}

/* Hover/Tap-Feedback: dezente helle Fläche, Text bleibt hell und lesbar */
#offcanvas nav.mobile-menu ul > li > a.ct-menu-link:hover {
	background-color: var(--jona-color-light-surface);
	color: var(--jona-color-inverse-text);
}

/* Aktiver Punkt: hell + halbfett + Akzent-Linie (nicht nur Farbe) +
 * dezente helle Fläche. */
#offcanvas nav.mobile-menu ul > li.current-menu-item > a.ct-menu-link,
#offcanvas nav.mobile-menu ul > li.current_page_item > a.ct-menu-link,
#offcanvas nav.mobile-menu ul > li.current-menu-ancestor > a.ct-menu-link {
	color: var(--jona-color-inverse-text);
	font-weight: var(--jona-font-weight-semibold);
	background-color: var(--jona-color-light-surface);
	box-shadow: inset 0 -2px 0 0 var(--jona-color-accent-strong);
}

/* Fokus auf dunklem Grund: spezifisches helles Focus-Token */
#offcanvas nav.mobile-menu a.ct-menu-link:focus-visible {
	outline: var(--jona-focus-ring-width) solid var(--jona-color-focus-ring-color-dark-bg);
	outline-offset: var(--jona-focus-ring-offset);
}

/* ------------------------------------------------------------------
 * Sticky Header (aktiviert in Blocksy-UI: Header Builder -> Row -> Sticky)
 *
 * Blocksy (Companion) erzeugt beim Aktivieren:
 *   <div class="ct-sticky-container"><div data-sticky="..."> ... Rows ...
 * Positions-/Scroll-Logik übernimmt Blocksy (sticky.js). Hier nur die
 * Optik: Header bleibt hell, dezenter Schatten im angehefteten Zustand,
 * gleiche Höhe (die Row-Höhe oben gilt weiterhin).
 */
#header .ct-sticky-container {
	z-index: 20;
	background-color: var(--jona-color-surface);
}

#header .ct-sticky-container [data-sticky][data-sticky*="yes"] {
	background-color: var(--jona-color-surface);
	box-shadow: var(--jona-shadow-sm);
}

/* ------------------------------------------------------------------
 * Accessibility: Keyboard-Fokus in der Desktop-Navigation
 */
nav#header-menu-1 a.ct-menu-link:focus-visible {
	outline: var(--jona-focus-ring-width) solid var(--jona-color-focus-ring-color);
	outline-offset: var(--jona-focus-ring-offset);
}

/* Reduced Motion: nur eigene Transitionen reduzieren (Globalregel des
 * Designsystems setzt Transitionen bereits auf Minimum). */
@media (prefers-reduced-motion: reduce) {
	nav#header-menu-1 .menu > li > a.ct-menu-link,
	#header .ct-header-trigger,
	#offcanvas nav.mobile-menu ul > li > a.ct-menu-link {
		transition: none;
	}
}