/*
 * JoNa | Software – Global Footer (WS-6)
 * ---------------------------------------------------------------
 * Dunkles JoNa-Navy-Abschlussband unter dem (hellen) Abschluss-CTA.
 * Bewusst kompakt: Marke · Navigation · Kontakt/Rechtliches + Bottom Bar
 * (kein klassisches 5-Spalten-Schema). Der Inhalt wird vom Child-Theme-
 * Modul inc/footer.php über den Blocksy-Filter
 * `blocksy:builder:footer:custom-output` in Blocksys <footer id="footer">
 * gerendert – daher genau EIN Footer, kein Parent-Theme-Eingriff, kein JS.
 *
 * Verantwortung:
 *   - design-system.css = Tokens (--jona-*), Referenz.
 *   - footer.css        = Layout/Styling des Footers.
 *
 * Breakpoints FEST geschrieben (kein var() in @media – vgl. WS-4-Fix):
 *   --jona-breakpoint-sm = 690px  -> Mobile  max-width: 689px
 *   --jona-breakpoint-md = 1000px -> Desktop >= 1000px
 *
 * Version: 0.19.0 (WS-6)
 */

/* Blocksys Footer-Wrapper neutralisieren (kein eigener Hintergrund/Padding,
 * keine Trennlinie). Das tiefe Navy liefert .jona-footer selbst. */
#footer.ct-footer {
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.jona-footer {
	background-color: var(--jona-color-bg-navy-deep);
	background-image: linear-gradient(
		180deg,
		var(--jona-color-bg-navy) 0%,
		var(--jona-color-bg-navy-deep) 100%
	);
	color: var(--jona-color-inverse-text);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.jona-footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr);
	gap: var(--jona-space-7);
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
	padding-block: var(--jona-space-8);
}

/* ------------------------------------------------------------------
 * Marke: Logo (hell/monochrom für Kontrast auf Navy) + kurzer Satz.
 * Das Original-Logo ist navy/grün und wäre auf Navy kaum lesbar; die
 * Monochrom-Behandlung nutzt dieselbe Datei (kein neues Asset).
 */
.jona-footer__brand {
	min-width: 0;
}

.jona-footer__logo-link {
	display: inline-flex;
	border-radius: var(--jona-radius-sm);
}

.jona-footer__logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: auto;
	filter: brightness(0) invert(1);
	opacity: 0.94;
}

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

.jona-footer__tagline {
	max-width: 40ch;
	margin-block: var(--jona-space-4) 0;
	font-size: var(--jona-font-size-sm);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.74);
}

/* ------------------------------------------------------------------
 * Gruppenlabels (bewusst keine Überschriften – hält die Heading-Outline
 * der Seite sauber; die Navigation trägt ihr aria-label selbst).
 */
.jona-footer__heading {
	margin-block: 0 var(--jona-space-3);
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	font-weight: var(--jona-font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.jona-footer__nav,
.jona-footer__contact {
	min-width: 0;
}

.jona-footer__contact {
	display: grid;
	gap: var(--jona-space-6);
	align-content: start;
}

.jona-footer__links {
	display: grid;
	gap: var(--jona-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.jona-footer__links a {
	color: rgba(255, 255, 255, 0.9);
	font-size: var(--jona-font-size-sm);
	text-decoration: none;
	transition: color var(--jona-transition-fast);
}

.jona-footer__links a:hover {
	color: var(--jona-color-inverse-text);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Kontakt-CTA: klarer, aber ruhiger Outline-Link auf Navy. */
.jona-footer .jona-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--jona-space-2);
	min-height: 44px;
	padding: var(--jona-space-2) var(--jona-space-4);
	border: var(--jona-border-width) solid var(--jona-color-light-border);
	border-radius: var(--jona-radius-full);
	color: var(--jona-color-inverse-text);
	font-weight: var(--jona-font-weight-semibold);
	text-decoration: none;
}

.jona-footer .jona-footer__cta:hover,
.jona-footer .jona-footer__cta:focus-visible {
	background-color: var(--jona-color-light-surface);
	border-color: rgba(255, 255, 255, 0.34);
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Bottom Bar: feine Trennlinie, dynamisches Copyright + Markenzeile.
 */
.jona-footer__bottom {
	border-block-start: var(--jona-border-width) solid var(--jona-color-light-border);
}

.jona-footer__bottom-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--jona-space-2) var(--jona-space-5);
	width: 100%;
	max-width: var(--jona-container-wide);
	margin-inline: auto;
	padding-inline: var(--jona-space-gutter-lg);
	padding-block: var(--jona-space-4);
}

.jona-footer__copyright {
	margin: 0;
	font-size: var(--jona-font-size-sm);
	color: rgba(255, 255, 255, 0.72);
}

.jona-footer__brandline {
	margin: 0;
	font-family: var(--jona-font-mono);
	font-size: var(--jona-font-size-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

/* ------------------------------------------------------------------
 * Focus-visible auf dunklem Grund (heller Ring).
 */
.jona-footer :focus-visible {
	outline: 2px solid var(--jona-color-focus-ring-dark-bg);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Tablet (690–999 px): Marke oben (volle Breite), darunter Navigation
 * und Kontakt/Rechtliches zweispaltig.
 */
@media (min-width: 690px) and (max-width: 999px) {
	.jona-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--jona-space-6) var(--jona-space-7);
		padding-inline: var(--jona-space-gutter-md);
		padding-block: var(--jona-space-7);
	}

	.jona-footer__brand {
		grid-column: 1 / -1;
	}

	.jona-footer__bottom-inner {
		padding-inline: var(--jona-space-gutter-md);
	}
}

/* ------------------------------------------------------------------
 * Mobile (<690 px): 1 Spalte. Reihenfolge Marke → Navigation → Kontakt/
 * Rechtliches → Trennlinie → Copyright. Kein horizontaler Overflow.
 */
@media (max-width: 689px) {
	.jona-footer__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jona-space-6);
		padding-inline: var(--jona-space-gutter-sm);
		padding-block: var(--jona-space-7);
	}

	.jona-footer__contact {
		gap: var(--jona-space-5);
	}

	.jona-footer__logo {
		max-width: 170px;
	}

	.jona-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		padding-inline: var(--jona-space-gutter-sm);
	}
}

/* ------------------------------------------------------------------
 * Reduced Motion: keine animierte Informationsvermittlung.
 */
@media (prefers-reduced-motion: reduce) {
	.jona-footer__links a,
	.jona-footer .jona-footer__cta {
		transition: none;
	}
}