/*
 * Atlantik – ergänzendes CSS.
 * Alles, was über theme.json / Stile einstellbar ist, steht NICHT hier.
 * Hier nur: Breakpoints, Navigation-Overlay, Icons, Feinschliff.
 * Farben/Schriften immer über Preset-Variablen, damit Änderungen in „Stile“ durchschlagen.
 */

:root {
	--atlantik-bp-nav: 991px; /* Doku-Wert, CSS-Variablen gehen nicht in Media Queries */
}

a {
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--neon-blue);
	outline-offset: 3px;
}

/* Header, Inhalt, Newsletter-Band und Footer schließen ohne Lücke aneinander an */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------- Header ---------- */

/* Sprachumschalter (Polylang): „Deutsch  English“ wie bisher */
.site-header__lang ul,
ul.site-header__lang {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1;
}

.site-header__lang a {
	text-decoration: none;
}

.site-header__lang .current-lang a {
	font-weight: 700;
	text-decoration: underline;
}

.site-header__logo img {
	height: var(--wp--custom--header--logo-height);
	width: auto;
}

.site-header .wp-block-navigation .wp-block-navigation-item__content {
	padding-bottom: 5px;
	border-bottom: 2px solid transparent;
	transition: border-color var(--wp--custom--transition);
}

.site-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	border-bottom-color: currentColor;
}

/* Meta-Navigation oben rechts */
.wp-block-navigation.is-style-meta {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1;
	gap: 40px;
}

/*
 * Mega-Menü (Desktop): Untermenüs öffnen als volle Breite in Hellblau unter dem Header,
 * die dritte Ebene (Konferenzen, Besondere Formate, Regionalgruppen) als zweite Spalte.
 * Funktioniert mit Hover und mit „Untermenüs bei Klick öffnen“.
 */
@media (min-width: 992px) {
	/* kein Übergang: Verlauf → Farbe lässt sich nicht animieren und blitzt sonst weiß auf */
	.site-header {
		position: relative;
		z-index: 50;
	}

	/*
	 * Core setzt die Navigation auf position: relative – dann wäre das Panel nur so breit
	 * wie die Navigation. Statisch gesetzt bezieht es sich auf den ganzen Header.
	 */
	.site-header .wp-block-navigation,
	.site-header .wp-block-navigation__container,
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open),
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-close,
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog,
	.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
		position: static !important;
	}

	.site-header :where(.wp-block-navigation__container) > .wp-block-navigation-item.has-child {
		position: static;
	}

	.site-header .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-container {
		position: absolute;
		top: 100% !important;
		left: 0 !important;
		right: 0;
		min-width: 0 !important;
		width: 100% !important;
		box-sizing: border-box;
		padding: 50px max(20px, calc((100% - 1160px) / 2)) !important;
		background: var(--wp--preset--color--light-neon-blue-40) !important;
		color: var(--wp--preset--color--navy-blue) !important;
		border: 0 !important;
		gap: 35px;
		flex-direction: column;
		align-items: flex-start;
		font-size: var(--wp--preset--font-size--navi);
		font-weight: 700;
	}

	/* offenes Panel bekommt volle Breite (Core setzt im Ruhezustand width/height auf 0) */
	.site-header .wp-block-navigation__container > .has-child.open-on-hover-click:is(:hover, :has(:focus-visible)) > .wp-block-navigation__submenu-container,
	.site-header .wp-block-navigation__container > .has-child > [aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		width: auto !important;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
		position: static;
		width: auto;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: 0 0 5px !important;
		border-bottom: 2px solid transparent;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		border-bottom-color: currentColor;
	}

	/* dritte Ebene: zweite Spalte im selben Panel */
	.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
		position: absolute;
		top: 50px !important;
		left: calc(max(20px, (100% - 1160px) / 2) + 400px) !important;
		padding: 0 !important;
		background: transparent !important;
		border: 0 !important;
		gap: 35px;
		min-width: 320px !important;
	}

	.site-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
		transform: rotate(-90deg);
		margin-left: 8px;
	}

	/* Header färbt sich mit, solange ein Panel offen ist */
	.site-header:has(.wp-block-navigation__container > .has-child.open-on-hover-click:is(:hover, :has(:focus-visible))),
	.site-header:has(.wp-block-navigation__container > .has-child > [aria-expanded="true"]) {
		background: var(--wp--preset--color--light-neon-blue-40) !important;
	}

	/* aktiver Hauptpunkt: unterstrichen, Pfeil nach oben */
	.site-header .wp-block-navigation__container > .has-child.open-on-hover-click:is(:hover, :has(:focus-visible)) > .wp-block-navigation-item__content,
	.site-header .wp-block-navigation__container > .has-child > [aria-expanded="true"] {
		border-bottom-color: currentColor;
	}

	.site-header .wp-block-navigation__container > .has-child.open-on-hover-click:is(:hover, :has(:focus-visible)) > .wp-block-navigation__submenu-icon svg,
	.site-header .wp-block-navigation__container > .has-child > [aria-expanded="true"] .wp-block-navigation__submenu-icon svg,
	.site-header .wp-block-navigation__container > .has-child > [aria-expanded="true"] + .wp-block-navigation__submenu-icon svg {
		transform: rotate(180deg);
	}
}

/* Startseite: Header liegt auf demselben Verlauf wie der Hero */
.home .site-header,
.front-page .site-header {
	background: var(--wp--preset--gradient--hero-verlauf);
}

/*
 * Core schaltet das Burger-Menü erst unter 600px. Die alte Seite nutzt 991px.
 * Diese Regeln ziehen den Breakpoint nach oben.
 */
@media (max-width: 991px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.site-header__logo img {
		height: var(--wp--custom--header--logo-height-mobile);
	}

	.site-header__meta {
		display: none !important;
	}
}

/* Mobiles Overlay im Look des alten Offcanvas */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--light-neon-blue-40) !important;
	color: var(--wp--preset--color--navy-blue) !important;
	padding: var(--wp--preset--spacing--20);
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: stretch !important;
	gap: 0 !important;
}

.site-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	align-items: stretch !important;
}

.site-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	font-size: 26px;
	padding: 30px 0 !important;
	border-bottom: 2px solid var(--wp--preset--color--light-neon-blue) !important;
}

.site-header .is-menu-open .wp-block-navigation__submenu-container {
	padding: 10px 0 20px 0 !important;
	gap: 15px !important;
	font-size: var(--wp--preset--font-size--medium);
}

/* ---------- Newsletter-Band ---------- */

.newsletter-band > .wp-block-heading {
	flex: 1 1 520px;
	margin: 0;
}

/* ---------- Suche ---------- */

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
	background: transparent;
	color: var(--wp--preset--color--navy-blue);
	padding: 0;
	letter-spacing: 0;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.wp-block-search__input {
	border: 0;
	border-radius: 10px 0 0 10px;
	min-height: 52px;
	box-shadow: var(--wp--preset--shadow--weich);
	padding-inline: 20px;
	font: inherit;
}

.wp-block-search__input::placeholder {
	color: var(--wp--preset--color--light-navy-blue);
}

/* ---------- Kategorie-Badge ---------- */

.wp-block-post-terms a {
	display: inline-block;
	padding: 6px 10px;
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.7);
	line-height: 1.25;
	text-decoration: none;
}

.is-style-karte .wp-block-post-terms a {
	background: var(--wp--preset--color--light-navy-blue-10);
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
}

/* ---------- Überschrift unterstrichen / Dachzeile ---------- */

.wp-block-heading.is-style-unterstrichen {
	padding-bottom: 8px;
	border-bottom: 1px solid var(--wp--preset--color--light-navy-blue-40);
}

.is-style-dachzeile {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* ---------- Karten / Weiterlesen ---------- */

.wp-block-read-more,
.is-style-pfeil-link a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	width: fit-content;
}

.wp-block-read-more::after,
.is-style-pfeil-link a::after {
	content: "";
	width: 16px;
	height: 16px;
	background: currentColor;
	-webkit-mask: url("../images/arrow-sharp.svg") center / contain no-repeat;
	mask: url("../images/arrow-sharp.svg") center / contain no-repeat;
	transition: transform var(--wp--custom--transition);
}

.wp-block-read-more:hover::after,
.is-style-pfeil-link a:hover::after {
	transform: translateX(4px);
}

.is-style-karte > .wp-block-post-featured-image img {
	border-radius: 20px 20px 0 0;
}

.is-style-karte .wp-block-read-more,
.is-style-karte-transparent .wp-block-read-more {
	margin-top: auto;
}

.is-style-karte-transparent > .wp-block-post-featured-image img {
	border-radius: 20px 20px 0 0;
}

.wp-block-post-template.is-layout-grid > li {
	display: flex;
}

.wp-block-post-template.is-layout-grid > li > :is(.is-style-karte, .is-style-karte-transparent) {
	flex: 1;
}

/* Regionalgruppen-Kacheln im Karussell */
.regionalgruppe {
	text-align: center;
}

.regionalgruppe img {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	object-fit: cover;
}

.regionalgruppe a {
	text-decoration: none;
}

/* ---------- Akkordeon (Details-Block) ---------- */

.wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.1;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "";
	flex: 0 0 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--wp--preset--color--light-neon-blue-40) url("../images/plus.svg") center / 17px 17px no-repeat;
}

.wp-block-details[open] summary::after {
	background-image: url("../images/minus.svg");
}

.wp-block-details[open] > :not(summary) {
	margin-top: var(--wp--preset--spacing--30);
}

@media (min-width: 992px) {
	.wp-block-details {
		padding-inline: 30px;
	}

	.wp-block-details[open] > :not(summary) {
		margin-top: var(--wp--preset--spacing--20);
		padding-right: 100px;
	}
}

/* ---------- Zitat ---------- */

.wp-block-quote::before {
	content: "";
	display: block;
	width: 60px;
	height: 53px;
	margin-bottom: var(--wp--preset--spacing--20);
	background: currentColor;
	-webkit-mask: url("../images/quote.svg") center / contain no-repeat;
	mask: url("../images/quote.svg") center / contain no-repeat;
}

/* ---------- Footer ---------- */

.site-footer__bottom .wp-block-social-links {
	margin: 0;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer .wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	line-height: 1.4;
}

.site-footer__logo img {
	height: var(--wp--custom--header--logo-height);
	width: auto;
}

.site-footer__bottom {
	border-top: 1px solid var(--wp--preset--color--navy-blue);
}

/* Social Icons: kleine Navy-Quadrate wie bisher, ohne Font Awesome */
.wp-block-social-links.is-style-quadrat .wp-social-link {
	background: var(--wp--preset--color--navy-blue) !important;
	color: var(--wp--preset--color--white) !important;
	border: 1px solid transparent;
	border-radius: 5px;
	transition: all var(--wp--custom--transition);
}

.wp-block-social-links.is-style-quadrat .wp-social-link a {
	padding: 4px;
}

.wp-block-social-links.is-style-quadrat .wp-social-link svg {
	width: 14px;
	height: 14px;
}

.wp-block-social-links.is-style-quadrat .wp-social-link:hover {
	background: var(--wp--preset--color--white) !important;
	color: var(--wp--preset--color--navy-blue) !important;
	border-color: var(--wp--preset--color--navy-blue);
	transform: none;
}

/* ---------- Bewegung reduzieren ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}