/*
 * JoNa Digital Solutions – Global Shell (Header + Footer) – JDS-4
 * ===========================================================================
 * Styling für den globalen Rahmen (Header, Navigation, Mobile-Menü, Footer).
 * Ausschließlich Design-Tokens aus design-system.css (--jds-*).
 *
 * Breakpoints (verbindlich, fest ausgeschrieben – var() ist in @media nicht erlaubt):
 *   Mobile   < 690px    (eigener Headerzustand)
 *   Tablet   690–999px  (Hamburger/Panel, keine gequetschte Desktop-Nav)
 *   Desktop  >= 1000px  (horizontale Navigation + CTA)
 *
 * Sticky: position: sticky (kein fixed) -> kein Layout-Sprung, Mobile-Safari-tauglich.
 * Kein Suchfeld, keine Social-Icons, keine externen Libraries.
 *
 * Version: 0.4.0
 */

/* ===========================================================================
 * HEADER
 * =========================================================================== */
.jds-header {
	position: sticky;
	top: 0;
	z-index: var(--jds-header-z);
	background-color: var(--jds-bg);
	border-bottom: var(--jds-border-width) solid var(--jds-border);
}

/* Dezenter Schatten erst im Scrollzustand (per JS-Klasse, optional). */
.jds-header.is-scrolled {
	box-shadow: var(--jds-shadow-subtle);
}

/* Admin-Bar-Offset (nur eingeloggt) */
.admin-bar .jds-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .jds-header {
		top: 46px;
	}
}

.jds-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jds-space-lg);
	min-height: var(--jds-header-height-desktop);
}

/* --- Logo --- */
.jds-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.jds-header__logo-link {
	display: inline-flex;
	align-items: center;
}

.jds-header__logo {
	display: block;
	width: 100%;
	height: auto; /* Seitenverhältnis bleibt erhalten (2.5253:1) */
	max-width: var(--jds-logo-width-desktop);
}

/* --- Navigation (Desktop) --- */
.jds-nav {
	display: flex;
	align-items: center;
	gap: var(--jds-space-xl);
	margin-left: auto;
}

.jds-nav__list {
	display: flex;
	align-items: center;
	gap: var(--jds-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-nav__list li {
	margin: 0;
}

.jds-nav__list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--jds-font-sans);
	font-size: var(--jds-font-size-body);
	font-weight: var(--jds-font-weight-medium);
	line-height: var(--jds-line-height-ui);
	color: var(--jds-navy);
	text-decoration: none;
	transition: color var(--jds-transition-fast);
}

/* dezente grüne Unterstreichung (Hover/Fokus/Aktiv) */
.jds-nav__list a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	height: 2px;
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-green);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform var(--jds-transition-base);
}

.jds-nav__list a:hover,
.jds-nav__list a:focus-visible {
	color: var(--jds-navy-dark);
}

.jds-nav__list a:hover::after,
.jds-nav__list a:focus-visible::after {
	transform: scaleX(1);
}

/* aktiver Menüpunkt: kräftiger + dauerhafte grüne Unterstreichung */
.jds-nav__list a[aria-current="page"],
.jds-nav__list .current-menu-item > a,
.jds-nav__list .current_page_item > a {
	font-weight: var(--jds-font-weight-semibold);
	color: var(--jds-navy);
}

.jds-nav__list a[aria-current="page"]::after,
.jds-nav__list .current-menu-item > a::after,
.jds-nav__list .current_page_item > a::after {
	transform: scaleX(1);
}

.jds-nav__cta {
	display: flex;
	align-items: center;
}

/* --- Hamburger (nur < 1000px) --- */
.jds-nav-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: var(--jds-border-width) solid transparent;
	border-radius: var(--jds-radius-medium);
	background-color: transparent;
	color: var(--jds-navy);
	cursor: pointer;
}

.jds-nav-toggle:hover {
	background-color: var(--jds-bg-soft);
}

.jds-nav-toggle__box {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 24px;
	height: 16px;
}

.jds-nav-toggle__bar {
	display: block;
	height: 2px;
	width: 100%;
	border-radius: var(--jds-radius-pill);
	background-color: currentColor;
	transition: transform var(--jds-transition-base),
		opacity var(--jds-transition-fast);
}

.jds-header.is-open .jds-nav-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.jds-header.is-open .jds-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}

.jds-header.is-open .jds-nav-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ===========================================================================
 * TABLET + MOBILE: Panel-Menü (Hamburger). Kein gequetschtes Desktop-Layout.
 * =========================================================================== */
@media (max-width: 999px) {
	.jds-header__bar {
		min-height: var(--jds-header-height-mobile);
	}

	.jds-header__logo {
		max-width: var(--jds-logo-width-tablet);
	}

	.jds-nav-toggle {
		display: inline-flex;
	}

	/* Navigation wird zum Panel unter der Header-Zeile */
	.jds-nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		margin-left: 0;
		padding: var(--jds-space-sm) var(--jds-gutter) var(--jds-space-lg);
		background-color: var(--jds-bg);
		border-bottom: var(--jds-border-width) solid var(--jds-border);
		box-shadow: var(--jds-shadow-card);
		max-height: calc(100vh - var(--jds-header-height-mobile));
		overflow-y: auto;
	}

	.jds-header.is-open .jds-nav {
		display: flex;
	}

	.jds-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.jds-nav__list a {
		width: 100%;
		min-height: 48px;
		padding: var(--jds-space-sm) 0;
		border-bottom: var(--jds-border-width) solid var(--jds-border);
		font-size: var(--jds-font-size-body-lg);
	}

	/* Unterstreichung im Panel durch Trennlinien ersetzen */
	.jds-nav__list a::after {
		display: none;
	}

	.jds-nav__cta {
		margin-top: var(--jds-space-lg);
	}

	.jds-nav__cta .jds-btn {
		width: 100%;
	}
}

/* Tablet: etwas kleineres Logo */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-header__logo {
		max-width: var(--jds-logo-width-tablet);
	}
}

/* Mobile: eigener, kompakter Zustand (JDS-12) */
@media (max-width: 689px) {
	/* Kompaktere Headerhöhe + präsenteres Logo. Hamburger bleibt 48×48px
	 * (>= 44px Touchziel) und wird über align-items:center auf derselben
	 * horizontalen Achse wie das Logo gehalten. Kein Safe-Area-Padding:
	 * Der Viewport nutzt bewusst kein Cover-Scaling, daher darf die
	 * Safe Area NICHT zusätzlich über eigenes padding-top verdoppelt werden. */
	.jds-header__bar {
		min-height: var(--jds-header-height-mobile-compact);
	}

	.jds-header__logo {
		max-width: var(--jds-logo-width-header-mobile);
	}
}

/* ===========================================================================
 * FOOTER
 * =========================================================================== */
.jds-footer {
	background-color: var(--jds-navy-deep);
	color: var(--jds-text-inverse);
}

.jds-footer__main {
	padding-block: var(--jds-section-space);
}

.jds-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: var(--jds-grid-gap);
}

/* Logo auf dunklem Grund: weißes Brand-Tile (Masterlogo wird NICHT verändert;
 * das Logo ist Navy/Grün auf transparent und sonst auf Navy nicht lesbar).
 * JDS-12: Tile kompakter (weniger Padding, kleinerer Radius), damit es im
 * dunklen Footer weniger wie ein aufgesetztes weißes Schild wirkt. */
.jds-footer__logo-link {
	display: inline-flex;
}

.jds-footer__logo-tile {
	display: inline-flex;
	align-items: center;
	background-color: var(--jds-white);
	padding: 10px 14px;
	border-radius: var(--jds-radius-small);
}

.jds-footer__logo {
	display: block;
	width: 100%;
	height: auto;
	max-width: var(--jds-logo-width-tablet);
}

.jds-footer__tagline {
	margin: var(--jds-space-lg) 0 0;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-footer__heading {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-eyebrow);
	font-weight: var(--jds-font-weight-semibold);
	line-height: var(--jds-line-height-ui);
	letter-spacing: var(--jds-letter-spacing-eyebrow);
	text-transform: uppercase;
	color: var(--jds-green);
}

.jds-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-footer__list li {
	margin: 0 0 var(--jds-space-sm);
}

.jds-footer__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body);
	text-decoration: none;
	transition: color var(--jds-transition-fast);
}

.jds-footer__list a:hover,
.jds-footer__list a:focus-visible {
	color: var(--jds-text-inverse);
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Rechtsleiste */
.jds-footer__bottom {
	border-top: var(--jds-border-width) solid var(--jds-border-on-dark);
}

.jds-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jds-space-md);
	padding-block: var(--jds-space-lg);
}

.jds-footer__copyright {
	margin: 0;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body-sm);
}

.jds-footer__legal {
	display: flex;
	align-items: center;
	gap: var(--jds-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body-sm);
	text-decoration: none;
}

.jds-footer__legal a:hover,
.jds-footer__legal a:focus-visible {
	color: var(--jds-text-inverse);
	text-decoration: underline;
}

/* Footer auf dunklem Grund: heller Fokusring */
.jds-footer :focus-visible {
	outline-color: var(--jds-focus-ring-color-dark-bg);
}

/* ===========================================================================
 * FOOTER RESPONSIVE
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 689px) {
	.jds-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--jds-space-2xl);
	}

	.jds-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jds-space-sm);
	}

	.jds-footer__logo {
		max-width: var(--jds-logo-width-mobile);
	}
}

/* ===========================================================================
 * SKIP-LINK (Accessibility)
 * =========================================================================== */
.jds-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: calc(var(--jds-header-z) + 1);
	padding: var(--jds-space-sm) var(--jds-space-lg);
	background-color: var(--jds-navy);
	color: var(--jds-text-inverse);
	border-radius: 0 0 var(--jds-radius-medium) 0;
	font-size: var(--jds-font-size-body-sm);
	text-decoration: none;
}

.jds-skip-link:focus {
	left: 0;
}