/**
 * Global styles — base layer for the child theme.
 *
 * Layers semantic aliases over the design tokens defined in _tokens.css:
 * - Semantic color aliases (--oa-primary-color, --oa-heading-color, etc.)
 * - Surface role aliases (--oa-surface-*)
 * - Component-tier type sizes (--oa-size-card-title, etc.)
 * - Heading-specific line heights
 *
 * _tokens.css and fonts.css are enqueued separately by functions.php with
 * oa-global declared as a dependent — no @import here so styles load in
 * parallel and per-CPT files can opt into the same chain explicitly.
 *
 * Per-CPT styles live in sibling files (event.css, magazine.css, ...)
 * and load conditionally via functions.php.
 */

:root {
	/* ============================================================
	 * Semantic color aliases
	 * Prefixed (--oa-) for collision safety. Consumers that need
	 * unprefixed WP / parent-theme names (--primary-color, etc.)
	 * can re-alias these per template / partial.
	 * ============================================================ */
	--oa-primary-color: var(--oa-color-primary-500);
	--oa-secondary-color: var(--oa-color-secondary-500);
	--oa-heading-color: var(--oa-color-neutral-900);
	--oa-body-color: var(--oa-color-neutral-800);
	--oa-link-color: var(--oa-color-primary-500);

	/* Decorative paint alias. Derived from neutral-900 with alpha for the
	 * archive hero crosshatch, kept CSS-side because the Divi color picker
	 * doesn't expose alpha-bearing semantic roles. */
	--oa-grid-pattern-stroke: color-mix(in srgb, var(--oa-color-neutral-900), transparent 92%);

	/* ============================================================
	 * Surface roles
	 * Semantic aliases over the color scale, used by cards / sections.
	 * ============================================================ */
	--oa-bg-base: var(--oa-color-white);
	--oa-bg-subtle: var(--oa-color-neutral-100);
	--oa-bg-primary-tint: var(--oa-color-primary-100);
	--oa-bg-secondary-tint: var(--oa-color-secondary-100);
	--oa-bg-tertiary-tint: var(--oa-color-tertiary-100);
	--oa-bg-dark: var(--oa-color-primary-950);

	/* ============================================================
	 * Layout roles
	 * Three semantic widths for centered content containers. Per-template
	 * surfaces consume the one that fits their information density:
	 *   --oa-content-narrow   editorial prose bodies (magazine, blog)
	 *   --oa-content-max-w    default page container (most CMS surfaces)
	 *   --oa-content-wide     image-heavy / multi-column layouts
	 *                         (event archive + single, future similar CPTs)
	 * ============================================================ */
	--oa-content-narrow: 48rem;
	/*  768px @ 16px root — long-form prose cap */
	--oa-content-max-w: 75rem;
	/* 1200px @ 16px root — default page container */
	--oa-content-wide: 80rem;
	/* 1280px @ 16px root — image-heavy layouts */

	/* ============================================================
	 * Component-tier type sizes
	 * Sit between h6 and text-small; component-specific.
	 * ============================================================ */
	--oa-size-card-title: clamp(1.125rem, 1.05rem + 0.2vw, 1.375rem);
	--oa-size-button: clamp(0.9375rem, 0.9rem + 0.15vw, 1.125rem);
	--oa-size-eyebrow: clamp(0.75rem, 0.7rem + 0.1vw, 0.875rem);

	/* ============================================================
	 * Line-height roles
	 * Semantic aliases over the line-height token scale.
	 * ============================================================ */
	--oa-lh-heading: var(--oa-lh-tight);
	/* 1.1em — display headings */
	--oa-lh-body: var(--oa-lh-relaxed);
	/* 1.7em — long-form copy   */
}

/*
 * Divi 5 Theme Builder compatibility.
 * The generated preset selector for the header CTA has lower specificity than
 * Divi's generic `.et-db #et-boc .et-l .et_pb_button` reset, so reinforce the
 * preset with the Theme Builder wrapper path.
 */
body.et-db #page-container #et-boc .et-l .preset--module--divi-button--poqxsdz01h {
	background-color: var(--oa-color-primary-500) !important;
	border-color: var(--oa-color-primary-500) !important;
	border-radius: var(--oa-rounded-lg) !important;
	border-style: solid !important;
	border-width: 1px !important;
	color: var(--oa-color-white) !important;
}

/*
 * Styling the current page state in the editable header/footer navigation.
 * Keep this scoped away from content navs such as archive pagination, which
 * also use aria-current="page".
 */
.et-l--header nav a[aria-current="page"],
.et-l--header nav a[aria-current="page"] span,
.et-l--header nav button[aria-current="true"],
.et-l--header nav button[aria-current="true"] span,
.et-l--footer nav a[aria-current="page"],
.et-l--footer nav a[aria-current="page"] span,
.et-l--footer nav button[aria-current="true"],
.et-l--footer nav button[aria-current="true"] span,
.oa-php-header nav a[aria-current="page"],
.oa-php-header nav a[aria-current="page"] span,
.oa-php-header nav button[aria-current="true"],
.oa-php-header nav button[aria-current="true"] span,
.oa-php-footer nav a[aria-current="page"],
.oa-php-footer nav a[aria-current="page"] span,
.oa-php-footer nav button[aria-current="true"],
.oa-php-footer nav button[aria-current="true"] span {
	color: var(--oa-color-secondary-600) !important;
}

.et-l--header nav a[aria-current="page"],
.et-l--header nav button[aria-current="true"],
.et-l--footer nav a[aria-current="page"],
.et-l--footer nav button[aria-current="true"],
.oa-php-header nav a[aria-current="page"],
.oa-php-header nav button[aria-current="true"],
.oa-php-footer nav a[aria-current="page"],
.oa-php-footer nav button[aria-current="true"] {
	font-weight: 700;
}

/* Kontakt-Button: eigener Current-State */
.et-l--header nav #menu-button[aria-current="page"],
.et-l--header nav #menu-button[aria-current="page"] span,
.et-l--footer nav #menu-button[aria-current="page"],
.et-l--footer nav #menu-button[aria-current="page"] span,
.oa-php-header nav #menu-button[aria-current="page"],
.oa-php-header nav #menu-button[aria-current="page"] span,
.oa-php-footer nav #menu-button[aria-current="page"],
.oa-php-footer nav #menu-button[aria-current="page"] span {
	border-color: var(--oa-color-secondary-500) !important;
	background-color: transparent !important;
}

/* =========================================================================
   Desktop mega-menu dropdown
   ------------------------------------------------------------------------- */

/* "Für Kinder" sublinks are wrapped in an extra <li> (a markup quirk vs the
   other cards, whose links sit directly in the flex group), so the group's
   row-gap can't reach the three pills and they touch. Restore the 12px gap
   on that lone wrapper. Targeted by structure (sole <li> child of a group),
   not an auto-index class, so it only matches this case. */
.et_pb_dropdown_0_tb_header .et_pb_group > li:only-child {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Divi's min-width:max-content can push the Programme panel past the viewport
   and crop it. The ONLY thing CSS does here is cap
   the width so it always fits — keeping it on-screen, open/close state,
   ARIA and keyboard nav are owned by assets/js/header-navigation.js.
   Do NOT reintroduce position/top/left here: overriding them disables that JS
   constraint and detaches the panel from its trigger (which broke hover and
   cut into the logo). */
@media (min-width: 981px) {
	/* Mega-menu panel width. Divi's FLOATING dropdown IGNORES the VB Sizing→Width
	   field (oaris-dev/diviops-dev#946-2), so the width must be forced in CSS:
	   width!important + min-width:0 (defeat Divi's min-width:max-content) +
	   max-width:none. The 850px cap fits three existing 250px audience cards,
	   two 24px gaps, 24px wrapper padding on each side and the panel border
	   (848px total), without the former empty space at the right. The viewport
	   cap retains a 16px gutter on each side. On-screen keeping stays owned by
	   assets/js/header-navigation.js. */
	.et_pb_dropdown_0_tb_header.et_pb_dropdown {
		min-width: 0 !important;
		width: min(850px, calc(100vw - 32px)) !important;
		max-width: none !important;
	}

	/* Mobile drawer is mobile-only. The drawer module also carries Disable-On →
	   Desktop (VB-native), but a drawer left OPEN when the viewport crosses up to
	   desktop keeps its open-state display:flex, which overrides Divi's
	   responsive-disable. The browser then lays out the 92vw drawer + its expanded
	   nested sections at desktop width, blocking the main thread for ~7s (tab
	   crash on rapid resizes). This authoritative hide wins over the open-state so
	   the drawer is never laid out at desktop. The `body:not(.et-fb) #et-boc`
	   prefix keeps the drawer editable in Visual Builder / Theme Builder while
	   still beating Divi's id-scoped deferred CSS on the frontend. */
	body:not(.et-fb) #et-boc .et-l #oa-mobile-menu {
		display: none !important;
	}

	/* Slide + fade the mega-menu in on open. Divi toggles display:none↔flex,
	   so this keyframe re-runs each open. Uses `translate` (vertical only) so
	   it never touches the JS-managed left/top positioning. */
	.et_pb_dropdown_0_tb_header.et_pb_dropdown.et_pb_dropdown_visible,
	.et_pb_dropdown_0_tb_header.et_pb_dropdown:not(.et_pb_dropdown_hidden) {
		animation: oa-dropdown-in 0.22s ease both;
	}
}

@keyframes oa-dropdown-in {
	from { opacity: 0; translate: 0 -12px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes oa-mobile-drawer-in {
	from { opacity: 0; translate: 0 -8px; }
	to   { opacity: 1; translate: 0 0; }
}

@keyframes oa-nav-link-pending-spin {
	to { transform: rotate(360deg); }
}

/* Lock background scroll while the mobile drawer (#oa-mobile-menu) is open. It
   is a floating divi/dropdown covering ~92vw; without this the page behind it
   scroll-chains. Open state = the runtime removes et_pb_dropdown_hidden (the
   closed markup carries it). Scoped to mobile since the drawer is desktop-hidden.
   (Replaces the old body:has(.et_pb_section--absolute…) lock that pointed at the
   now-removed off-canvas canvas drawer.) */
@media (max-width: 980px) {
	body:has(#oa-mobile-menu:not(.et_pb_dropdown_hidden)) {
		overflow: hidden;
	}
}

@media (prefers-reduced-motion: reduce) {
	.et_pb_dropdown_0_tb_header.et_pb_dropdown,
	.et-db #et-boc .et-l #oa-mobile-menu,
	.et-db #et-boc .et-l #oa-mobile-menu .oa-nav-link-pending::before {
		animation: none !important;
	}
}

/* =========================================================================
   Mobile header drawer (#oa-mobile-menu) — accessible nested-dropdown drawer
   -------------------------------------------------------------------------
   Superseded the legacy Divi off-canvas drawer (.et_pb_section--absolute +
   canvas-post) on 2026-06-17; that drawer's styling + accordion JS were deleted
   in the 2026-06-22 cleanup pass. The drawer is a divi/dropdown (#oa-mobile-menu, floating,
   showOn:click) holding 4 nested inline section dropdowns + links;
   assets/js/header-navigation.js drives a11y + the multi-open accordion.
   Cosmetic styling lives in the modules' native Design
   settings; these are the irreducible STRUCTURAL rules.

   Scoped `.et-db #et-boc .et-l #oa-mobile-menu` (2 ids) ON PURPOSE: the module's
   own Custom-CSS freeForm compiles to a plain `.et_pb_dropdown_N_tb_header`
   (spec 0,1,0) that wins on Divi-builder pages but LOSES to Divi's id-scoped
   deferred CPT stylesheet on custom PHP templates (archive-event.php,
   single-*.php) — there the submenu rendered UA bullets, default <button>
   borders, and no chevron. global.css loads on every template and the 2-id
   prefix out-ranks the deferred `.et-db #et-boc .et-l .et_pb_*_tb_header` rules,
   so it holds everywhere. Mirrors the module freeForm; authoritative for PHP
   templates. See [[menu-polish-in-flight]] #5. */
.et-db #et-boc .et-l #oa-mobile-menu {
	--oa-focus-ring-color: var(--dvmd_actw_focus_ring_color, var(--oa-color-neutral-900));
	min-width: 0 !important;
	max-width: none !important;
	width: 92vw !important;
	max-height: 85vh !important; /* fallback for browsers without dvh */
	max-height: 85dvh !important;
	overflow-y: auto !important;
}
@media (max-width: 980px) {
	.et-db #et-boc .et-l #oa-mobile-menu {
		position: fixed !important;
		top: var(--oa-mobile-menu-top, 70px) !important;
		max-height: min(85vh, calc(100vh - var(--oa-mobile-menu-top, 70px) - 16px)) !important;
		max-height: min(85dvh, calc(100dvh - var(--oa-mobile-menu-top, 70px) - 16px)) !important;
		left: var(--oa-space-3) !important;
		right: var(--oa-space-3) !important;
		width: auto !important;
	}

	body:not(.et-fb) #et-boc .et-l #oa-mobile-menu:not(.et_pb_dropdown_hidden) {
		animation: oa-mobile-drawer-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
}
.et-db #et-boc .et-l #oa-mobile-menu .et_pb_dropdown {
	min-width: 0 !important;
	max-width: none !important;
	padding: 4px 16px;
}
.et-db #et-boc .et-l #oa-mobile-menu ul,
.et-db #et-boc .et-l #oa-mobile-menu li {
	list-style: none;
}
.et-db #et-boc .et-l #oa-mobile-menu ul:not(.et_pb_dropdown) {
	margin: 0;
	padding: 0;
}
.et-db #et-boc .et-l #oa-mobile-menu a[href] {
	display: block;
	text-decoration: none;
	transition: background-color 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]) {
	position: relative;
	cursor: pointer;
	transition: background-color 0.12s ease, opacity 0.12s ease, transform 0.12s ease;
}
.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]:focus-visible),
html[data-actw-focus-ring] body.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]:focus) {
	outline: 3px solid var(--oa-focus-ring-color) !important;
	outline-offset: 0 !important;
}
.et-db #et-boc .et-l #oa-mobile-menu a[href].stretched-link {
	position: static;
}
.et-db #et-boc .et-l #oa-mobile-menu a[href].stretched-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
@media (max-width: 980px) {
	.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]):active,
	.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]).oa-nav-link-pressed,
	.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]).oa-nav-link-pending,
	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link):active,
	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link).oa-nav-link-pressed,
	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link).oa-nav-link-pending {
		background-color: rgba(1, 110, 126, 0.1);
		background-color: color-mix(in srgb, var(--oa-color-primary-600) 10%, transparent);
		opacity: 0.82;
		transform: translateY(1px);
	}

	.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]).oa-nav-link-pending,
	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link).oa-nav-link-pending {
		cursor: progress;
	}

	.et-db #et-boc .et-l #oa-mobile-menu li:has(> a[href]).oa-nav-link-pending::before,
	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link).oa-nav-link-pending::before {
		content: '';
		position: absolute;
		right: 16px;
		top: 50%;
		z-index: 2;
		width: 14px;
		height: 14px;
		margin-top: -7px;
		border: 2px solid currentColor;
		border-right-color: transparent;
		border-radius: 999px;
		opacity: 0.65;
		pointer-events: none;
		animation: oa-nav-link-pending-spin 0.65s linear infinite;
	}

	.et-db #et-boc .et-l #oa-mobile-menu a[href]:not(.stretched-link).oa-nav-link-pending {
		position: relative;
		padding-right: 42px;
	}
}
.et-db #et-boc .et-l #oa-mobile-menu button[aria-controls] {
	position: relative;
	display: block;
	width: 100%;
	text-align: left;
	cursor: pointer;
	background: transparent;
	border: 0;
	margin: 0;
	font: inherit;
	font-weight: 600;
	padding: 16px 20px;
}
.et-db #et-boc .et-l #oa-mobile-menu button[aria-controls]::after {
	content: '';
	position: absolute;
	right: 20px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-60%) rotate(45deg);
	transition: transform 0.2s ease;
	opacity: 0.55;
}
.et-db #et-boc .et-l #oa-mobile-menu button[aria-expanded='true']::after {
	transform: translateY(-30%) rotate(225deg);
}
/* Builder-only: Divi force-shows the nested inline dropdowns so editors can
   select them, but the dropdown runtime can leave those panels out of normal
   flow. Keep the frontend drawer rules intact while making the TB/VB edit
   surface stack predictably. */
body.et-fb #et-boc .et-l #oa-mobile-menu {
	max-height: none !important;
	overflow: visible !important;
}
body.et-fb #et-boc .et-l #oa-mobile-menu .et_pb_dropdown {
	position: static !important;
	transform: none !important;
	max-height: none !important;
	overflow: visible !important;
}
/* Hamburger trigger (sibling of the drawer): strip default <button> chrome. */
.et-db #et-boc .et-l button[aria-controls="oa-mobile-menu"] {
	border: none;
	background: none;
	-webkit-user-select: none;
	user-select: none;
}
/* Kill the mobile touch tap-highlight across the ENTIRE header. It only renders
   on TOUCH devices (never on desktop — which is why it evaded all desktop
   testing and showed up identically in every mobile Chromium browser). The
   browser default is `rgba(0,0,0,0.18)`, which paints a translucent box over
   the tapped element — including the hamburger's own group/column/row wrappers
   and the drawer's container/section/<li> elements, none of which are
   descendants of the buttons/links we'd suppressed individually. Since
   `-webkit-tap-highlight-color` is inherited, this single rule on the header
   wrapper covers the hamburger, every drawer container, and all controls. */
.et-db #et-boc .et-l--header {
	-webkit-tap-highlight-color: transparent;
}
/* Suppress the browser-default focus ring for POINTER/programmatic focus on the
   hamburger + every interactive element inside the drawer. Operating the menu
   shuffles keyboard focus between these <button>s (open keeps focus on the
   hamburger; clicking a section trigger moves focus to it), and a focused button
   paints the OS focus ring — the macOS-blue glow the user sees in Safari/Firefox.
   We target plain :focus (NOT :focus:not(:focus-visible)) on purpose: Safari and
   Firefox classify a mouse-clicked <button> as focus-visible differently from
   Chrome, so the :not(:focus-visible) gate leaks the UA ring on those engines.
   Only outline + box-shadow are cleared (never background) so the Kontakt CTA's
   fill survives. The keyboard ring is re-added via :focus-visible BELOW, which —
   being later in source order at equal specificity — wins for keyboard focus. */
.et-db #et-boc .et-l button[aria-controls="oa-mobile-menu"]:focus,
.et-db #et-boc .et-l button[aria-controls="oa-mobile-menu"]:active,
.et-db #et-boc .et-l #oa-mobile-menu button[aria-controls]:focus,
.et-db #et-boc .et-l #oa-mobile-menu button[aria-controls]:active,
.et-db #et-boc .et-l #oa-mobile-menu a[href]:focus,
.et-db #et-boc .et-l #oa-mobile-menu a[href]:active {
	outline: none;
	box-shadow: none;
}
/* Keyboard focus rings — MUST stay after the :focus suppression above. */
.et-db #et-boc .et-l button[aria-controls="oa-mobile-menu"]:focus-visible {
	outline: 3px solid var(--dvmd_actw_focus_ring_color, var(--oa-color-neutral-900));
	outline-offset: 0;
	border-radius: 4px;
}
.et-db #et-boc .et-l #oa-mobile-menu a[href]:focus-visible,
.et-db #et-boc .et-l #oa-mobile-menu button[aria-controls]:focus-visible {
	outline: 3px solid var(--oa-focus-ring-color);
	outline-offset: 0;
}
.et-db #et-boc .et-l #oa-mobile-menu a[href].stretched-link:focus-visible,
html[data-actw-focus-ring] body.et-db #et-boc .et-l #oa-mobile-menu a[href].stretched-link:focus {
	outline: none !important;
	box-shadow: none !important;
}