/* ================================================================
   MOBILE NAVIGATION — schmale Kopfzeile + Vollbild-Overlay (Akkordeon)
   Vorlage: Design-File „BG Rein Mobile Menue.html" (claude.ai/design).

   Breakpoint: 768px — muss zum matchMedia in assets/js/mobile-nav.js
   passen. Ab 768px ist die komplette Komponente ausgeblendet, darunter
   ersetzt sie Top-Bar und Strichcode-Header.

   Farb-Mechanismus: jedes Menü-<li> trägt eine cat-<slug>-Klasse
   (inc/mobile-nav.php), die globale wp_head-Injektion liefert dazu
   .cat-<slug>{--cat:…}. Der Balken (.bgr-mnav__cat) nutzt var(--cat);
   Default siehe .bgr-mnav unten.

   Maße aus dem Design-File (390px-Frame): Balken 18px breit über die
   volle Zeilenhöhe (50px), bündig am linken Rand gestapelt → vertikaler
   Strichcode. Label 16px/500, Gruppen-Label 10px/700/2px Spacing.
   ================================================================ */

/* Desktop: Komponente komplett aus. */
.bgr-mnav {
	display: none;
	/* Fallback-Farbe für Balken ohne cat-<slug>-Match (scoped statt
	   :root, um var(--cat)-Fallbacks der Einzelbeiträge nicht zu kippen). */
	--cat: var(--color-text-meta);
}

/* Body-Scroll-Lock, solange das Overlay offen ist (JS setzt die Klasse). */
html.bgr-mnav-lock,
body.bgr-mnav-lock {
	overflow: hidden;
}

@media (max-width: 767.98px) {

	/* Desktop-Header + Top-Bar weichen der mobilen Kopfzeile. */
	.bgrein-topbar,
	.bgrein-header {
		display: none;
	}

	/* GeneratePress' native mobile Navigation sicherheitshalber aus
	   (der GP-Header ist zwar ersetzt, aber Optionen/Plugins könnten
	   Toggle-Markup ausgeben) → kein zweiter Hamburger. */
	.menu-toggle,
	#mobile-header,
	.main-navigation,
	.mobile-menu-control-wrapper {
		display: none !important;
	}

	/* GP-Header-Wrapper: Innenabstand weg (sonst weißer Streifen über
	   der Kopfzeile). Bewusst NICHT sticky – scrollt normal mit. */
	.site-header {
		position: relative;
		z-index: 1100;
	}

	.site-header .inside-header {
		padding: 0;
	}

	.bgr-mnav {
		display: block;
	}

	/* ── Geschlossener Zustand: schmale Kopfzeile ────────────────── */

	.bgr-mnav__bar,
	.bgr-mnav__overlay-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 0.75rem;
		min-height: 64px;
		padding: 0.5rem var(--spacing-sm);
		background: var(--color-surface);
		box-shadow: var(--shadow-nav);
	}

	/* Schmales Logo (ab 1.9.4): Schulname · Strichcode · Motto.
	   inline-grid + max-content → Strichcode und Motto übernehmen exakt
	   die Breite des Schulnamens. */
	.bgr-mnav__logo {
		display: inline-grid;
		grid-template-columns: max-content;
		justify-items: stretch;
		row-gap: 3px;
		min-width: 0;
		max-width: 100%;
		text-decoration: none;
	}

	.bgr-mnav__logo img {
		max-height: 40px;
		width: auto;
		display: block;
	}

	.bgr-mnav__logo-text {
		display: block;
		font-family: var(--font-display); /* Cormorant Garamond – Vorgabe Schulname */
		font-weight: 600;
		/* Schulname auch auf schmalen Handys vollständig (nicht „BUNDESGYMNASIUM …“):
		   neben Lupe + Hamburger ab 320 px Breite einzeilig. */
		font-size: clamp(0.8125rem, 4.4vw, 1.3rem);
		line-height: 1.1;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--color-primary);
		white-space: nowrap;
	}

	/* Strichcode als Trennlinie zwischen Schulname und Motto */
	.bgr-mnav__logo-strich {
		display: block;
		width: 100%;
		height: 3px;
	}

	.bgr-mnav__logo-tagline {
		display: block;
		font-family: var(--font-handwriting);
		font-size: clamp(0.875rem, 4vw, 1.05rem);
		font-weight: 700;
		line-height: 1.05;
		color: var(--color-brand-green);
		white-space: nowrap;
	}

	.bgr-mnav__toggle {
		flex: 0 0 auto;
		background: none;
		border: 0;
		padding: 0.625rem;
		margin: -0.625rem -0.375rem -0.625rem 0; /* größere Tap-Fläche ohne Layout-Versatz */
		cursor: pointer;
	}

	.bgr-mnav__toggle:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}

	.bgr-mnav__toggle-box {
		display: flex;
		flex-direction: column;
		gap: 5px;
		width: 24px;
	}

	.bgr-mnav__toggle-box span {
		display: block;
		height: 2px;
		width: 100%;
		background: var(--color-primary);
		border-radius: 1px;
	}

	/* ── Offener Zustand: Vollbild-Overlay (laut Design-File) ────── */

	.bgr-mnav__overlay {
		position: fixed;
		inset: 0;
		z-index: 1200;
		background: var(--color-surface);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/* Kein Seiten-Padding: die Balkenspalte liegt bündig am Rand.
		   Innenabstände tragen die einzelnen Blöcke selbst. */
		padding: 0 0 3rem;
	}

	.bgr-mnav__overlay[hidden] {
		display: none;
	}

	/* GeneratePress-Buttonstile neutralisieren: GP setzt auf button:hover/
	   button:focus (Spezifität 0,1,1) einen dunklen Hintergrund + weiße
	   Schrift. Da das JS beim Öffnen den Schließen-Button fokussiert,
	   wurde „✕ SCHLIESSEN" sonst als dunkler Block dargestellt. */
	.bgr-mnav .bgr-mnav__toggle,
	.bgr-mnav .bgr-mnav__toggle:hover,
	.bgr-mnav .bgr-mnav__toggle:focus,
	.bgr-mnav .bgr-mnav__row,
	.bgr-mnav .bgr-mnav__row:hover,
	.bgr-mnav .bgr-mnav__row:focus {
		background: none;
	}

	.bgr-mnav .bgr-mnav__close,
	.bgr-mnav .bgr-mnav__close:hover,
	.bgr-mnav .bgr-mnav__close:focus {
		background: none;
		color: #999;
	}

	.bgr-mnav .bgr-mnav__close:hover {
		color: var(--color-primary);
	}

	.bgr-mnav .bgr-mnav__row:hover,
	.bgr-mnav .bgr-mnav__row:focus {
		color: var(--color-primary);
	}

	/* Eingeloggt: Overlay unter der WP-Admin-Leiste beginnen lassen,
	   sonst verdeckt sie die Schnelllinks. */
	.admin-bar .bgr-mnav__overlay {
		top: var(--wp-admin--admin-bar--height, 46px);
	}

	/* Schnelllinks oben (Mail · Teams · WebUntis · UniFlow · Bildungsportal
	   · Kalender) – Symbol + Beschriftung, Tippfläche min. 36px hoch.
	   Bricht auf schmalen Geräten in eine zweite Zeile um. */
	.bgr-mnav__quicklinks {
		padding: 0.625rem 16px 0;
	}

	.bgr-mnav__quicklist {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: flex-end;
		flex-wrap: wrap;
		gap: 0.25rem 0.875rem;
	}

	.bgr-mnav__quicklist li {
		margin: 0;
	}

	.bgr-mnav__quicklist a {
		display: inline-flex;
		align-items: center;
		gap: 0.35rem;
		min-height: 36px;
		font-family: var(--font-ui);
		font-size: 0.8125rem; /* 13px – gut tippbar */
		color: var(--color-text-muted);
		text-decoration: none;
		white-space: nowrap;
	}

	.bgr-mnav__quicklist a svg {
		flex-shrink: 0;
	}

	.bgr-mnav__quicklist a:hover,
	.bgr-mnav__quicklist a:focus-visible {
		color: var(--color-primary);
		text-decoration: underline;
	}

	/* Overlay-Kopfzeile: gleiche Maße wie die geschlossene Kopfzeile (Regel
	   oben), bleibt beim Scrollen stehen. „✕ Schließen“ sitzt genau dort,
	   wo vorher der Hamburger war – kein Überlappen mit dem Schulnamen. */
	.bgr-mnav__overlay-head {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--color-surface);
		border-bottom: 1px solid #ECECEC;
	}

	/* ✕ über kleiner Beschriftung – schmal wie der Hamburger */
	.bgr-mnav__close {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		gap: 0.2rem;
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
		background: none;
		border: 0;
		cursor: pointer;
		padding: 0.25rem 0;
		margin-right: -0.375rem;
		font-family: var(--font-ui);
		font-size: 0.5625rem; /* 9px Versalien */
		font-weight: 700;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: #000;
	}

	.bgr-mnav__close:focus-visible {
		outline: 2px solid var(--color-primary);
		outline-offset: 2px;
		border-radius: var(--radius-sm);
	}

	.bgr-mnav__close-x {
		font-size: 1.25rem;
		line-height: 1;
		font-weight: 400;
	}

	/* ── Menü als gruppierte Liste mit Balkenspalte ──────────────── */

	.bgr-mnav__nav {
		margin-top: 1.25rem;
	}

	.bgr-mnav__menu,
	.bgr-mnav__grouplist,
	.bgr-mnav__sub {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.bgr-mnav__sub[hidden] {
		display: none;
	}

	/* Gruppen-Sektion: Trennlinie + graue Versalien-Überschrift */
	.bgr-mnav__group {
		margin: 0;
		border-top: 1px solid #ECECEC;
		padding-top: 0.875rem;
	}

	.bgr-mnav__menu > .bgr-mnav__group:first-child {
		border-top: 0;
		padding-top: 0;
	}

	.bgr-mnav__group-label {
		display: block;
		padding: 0 22px 8px;
		font-family: var(--font-ui);
		font-size: 0.625rem; /* 10px laut Design */
		font-weight: 700;
		letter-spacing: 2px;
		text-transform: uppercase;
		color: #000;
	}

	.bgr-mnav__item {
		position: relative;
		margin: 0;
	}

	/* Trennlinie zwischen Zeilen: beginnt nach der Balkenspalte. */
	.bgr-mnav__item + .bgr-mnav__item::before {
		content: '';
		position: absolute;
		top: 0;
		left: 60px; /* 44px Balken + 16px Abstand = Label-Beginn */
		right: 0;
		height: 1px;
		background: #ECECEC;
	}

	/* Menüzeile: Farbbalken (volle Höhe) + Label + Chevron */
	.bgr-mnav__row {
		display: flex;
		align-items: center;
		gap: 0;
		width: 100%;
		min-height: 50px; /* Zeilenhöhe laut Design */
		padding: 0 14px 0 0;
		background: none;
		border: 0;
		cursor: pointer;
		text-align: left;
		text-decoration: none;
		font-family: var(--font-ui);
		font-size: 1rem;      /* 16px laut Design */
		font-weight: 500;
		line-height: 1.3;
		color: var(--color-primary);
	}

	.bgr-mnav__row:focus-visible {
		outline: 2px solid var(--color-green-mid);
		outline-offset: -2px;
	}

	/* Balken: 44px breit (= Mindest-Tippfläche), volle Zeilenhöhe, bündig
	   links → die Zeilen stapeln sich zum vertikalen Strichcode. Darin
	   das Symbol der Desktop-Nav (weiß, 20px, zentriert). Passt auch auf
	   320px-Geräte (iPhone SE 1. Gen.): 44 + 16 + Label + Chevron. */
	.bgr-mnav__cat {
		flex: 0 0 auto;
		width: 44px;
		align-self: stretch;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0;
		background: var(--cat);
	}

	.bgr-mnav__cat svg {
		display: block;
	}

	.bgr-mnav__row-label {
		flex: 1 1 auto;
		min-width: 0;
		margin-left: 16px;
	}

	.bgr-mnav__chevron {
		flex: 0 0 auto;
		margin-left: 0.5rem;
		color: #CCC;
		transition: transform var(--transition-base);
	}

	.bgr-mnav__row[aria-expanded="true"] .bgr-mnav__chevron {
		transform: rotate(90deg);
	}

	/* Aktiver Menüpunkt: Kategoriefarbe + fett (z. B. „Erasmus+") */
	.bgr-mnav__item.current-menu-item > .bgr-mnav__row,
	.bgr-mnav__item.current-menu-ancestor > .bgr-mnav__row {
		color: var(--cat);
		font-weight: 700;
	}

	/* Unterpunkte (Akkordeon): schmalerer Balken, kompaktere Zeilen */
	.bgr-mnav__sub .bgr-mnav__row {
		min-height: 44px;
		font-size: 0.9375rem;
		font-weight: 400;
		color: var(--color-text-light);
	}

	/* Unterpunkte: schmaler Balken ohne Symbol, unter dem Haupt-Balken
	   eingerückt, Label fluchtet leicht eingerückt zum Hauptlabel. */
	.bgr-mnav__sub .bgr-mnav__cat {
		width: 10px;
		margin-left: 34px; /* rechtsbündig unter dem 44px-Balken */
		opacity: 0.65;
	}

	.bgr-mnav__sub .bgr-mnav__row-label {
		margin-left: 26px; /* 44px + 26px = 70px → 10px eingerückt */
	}

	.bgr-mnav__sub .bgr-mnav__item + .bgr-mnav__item::before {
		left: 70px;
		background: #F3F3F3;
	}
}


/* Sehr schmale Geräte (iPhone SE 1. Gen., 320px): „SCHLIESSEN" würde den
   Schulnamen überlappen → nur das ✕ zeigen (Text bleibt für Screenreader). */
@media (max-width: 359.98px) {
	.bgr-mnav__close-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.bgr-mnav__close {
		padding: 0.375rem;
		margin-right: -0.375rem;
	}

	.bgr-mnav__close-x {
		font-size: 1.125rem;
	}
}