/* =========================================================================
   Bondifly global navigation — single source of truth.

   This file is enqueued on EVERY page (homepage, Hörgeschichten, Mein Konto,
   login, legal, …) AFTER theme.css and after whichever page skin loads
   (bondifly-home.css on the front page / bondifly-pages.css elsewhere). Because
   it loads last it owns the mobile header + menu for the whole site, so the
   navigation looks and behaves identically everywhere.

   Selectors are deliberately written for both `body.home` and `body:not(.home)`
   so they match — and, loading later, beat — the desktop nav rules the two page
   skins declare with that same specificity. The rules themselves are shared:
   there is no homepage-specific menu design any more.

   Desktop (>960px) navigation is intentionally left to the page skins; only the
   mobile experience is unified here.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Hamburger / close trigger (shared, all widths).
   A soft, clearly tappable 44×44 button whose three rounded lines morph into a
   clean X when the menu is open. The lines are absolutely positioned so the
   icon never shifts between the open and closed states.
   ------------------------------------------------------------------------- */
.menu-toggle {
	align-items: center;
	background: rgba(255, 249, 236, 0.6);
	border: 1px solid rgba(61, 44, 30, 0.14);
	border-radius: 12px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
	box-sizing: border-box;
	display: none;
	height: 44px;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: background 0.2s ease, border-color 0.2s ease;
	width: 44px;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
	background: rgba(255, 249, 236, 0.95);
	border-color: rgba(167, 130, 45, 0.45);
}

.menu-toggle__line {
	background: var(--bf-brown, #3d2c1e);
	border-radius: 999px;
	display: block;
	height: 2.5px;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: transform 0.25s ease, opacity 0.18s ease;
	width: 22px;
}

.menu-toggle__line:nth-child(1) { transform: translate(-50%, calc(-50% - 6px)); }
.menu-toggle__line:nth-child(2) { transform: translate(-50%, -50%); }
.menu-toggle__line:nth-child(3) { transform: translate(-50%, calc(-50% + 6px)); }

body.is-menu-open .menu-toggle__line:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
body.is-menu-open .menu-toggle__line:nth-child(2) { opacity: 0; transform: translate(-50%, -50%) scaleX(0.4); }
body.is-menu-open .menu-toggle__line:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Dimming backdrop behind the open menu (rendered in header.php).
   Sits above page content but below the header/panel, so hero text and images
   no longer bleed through. Tapping it closes the menu (handled by theme.js's
   outside-click logic). Hidden / non-interactive on desktop.
   ------------------------------------------------------------------------- */
.site-nav-backdrop {
	background: rgba(40, 30, 18, 0.34);
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	transition: opacity 0.22s ease;
	z-index: 30;
}

/* The in-panel "Abo starten ♡" CTA (rendered in header.php) only exists for the
   mobile menu — hidden by default, revealed inside the panel below. */
.site-nav__cta {
	display: none;
}

/* -------------------------------------------------------------------------
   Mobile layout (≤960px): one consistent full-width menu everywhere.
   ------------------------------------------------------------------------- */
@media (max-width: 960px) {
	.menu-toggle {
		display: flex;
	}

	/* Sticky, warm, near-opaque header — identical on every page. */
	body.home .site-header,
	body:not(.home) .site-header {
		background: rgba(245, 239, 224, 0.97);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid rgba(61, 44, 30, 0.12);
		box-shadow: 0 6px 18px -10px rgba(61, 44, 30, 0.35);
		position: sticky;
		top: 0;
		z-index: 50;
	}

	/* Brand on the left, hamburger on the right; both vertically centred. */
	body.home .site-header__inner,
	body:not(.home) .site-header__inner {
		align-items: center;
		justify-content: space-between;
	}

	/* The desktop pill CTA is replaced by the in-panel CTA on mobile. */
	body.home .site-header__account,
	body:not(.home) .site-header__account {
		display: none;
	}

	/* Full-width slide-down panel anchored directly under the header. It spans
	   the whole viewport (the header is full width and is the containing block),
	   so it reads as the real mobile navigation — never a floating card. */
	body.home .site-navigation,
	body:not(.home) .site-navigation {
		background: linear-gradient(180deg, #FBF6E7 0%, #F4EAD0 100%);
		border: 0;
		border-top: 1px solid rgba(61, 44, 30, 0.10);
		border-radius: 0 0 20px 20px;
		box-sizing: border-box;
		box-shadow: 0 26px 38px -22px rgba(61, 44, 30, 0.6);
		display: block;
		left: 0;
		margin: 0;
		opacity: 0;
		padding: 10px 20px 18px;
		pointer-events: none;
		position: absolute;
		right: 0;
		top: 100%;
		transform: translateY(-10px);
		transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s;
		visibility: hidden;
		width: 100%;
		z-index: 40;
	}

	body.home.is-menu-open .site-navigation,
	body:not(.home).is-menu-open .site-navigation {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
		visibility: visible;
	}

	body.home.is-menu-open .site-nav-backdrop,
	body:not(.home).is-menu-open .site-nav-backdrop {
		opacity: 1;
		pointer-events: auto;
	}

	/* Menu items: large, tappable, evenly spaced, with subtle dividers. */
	body.home .bondifly-menu,
	body:not(.home) .bondifly-menu {
		align-items: stretch;
		display: flex;
		flex-direction: column;
		gap: 0;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	body.home .bondifly-menu li + li,
	body:not(.home) .bondifly-menu li + li {
		border-top: 1px solid rgba(61, 44, 30, 0.10);
	}

	body.home .bondifly-menu a,
	body:not(.home) .bondifly-menu a {
		border-radius: 12px;
		color: var(--bf-brown, #3d2c1e);
		display: block;
		font-size: 17px;
		font-weight: 600;
		letter-spacing: 0.2px;
		padding: 15px 12px;
		text-decoration: none;
		white-space: normal;
	}

	body.home .bondifly-menu a:hover,
	body.home .bondifly-menu a:focus,
	body:not(.home) .bondifly-menu a:hover,
	body:not(.home) .bondifly-menu a:focus {
		background: rgba(201, 169, 97, 0.16);
		color: var(--bf-gold-deep, #b47a16);
	}

	/* Primary "Abo starten ♡" CTA inside the panel: full-width gold, centred,
	   matching the main site CTAs. */
	.site-nav__cta {
		align-items: center;
		background: var(--bf-btn-gold);
		border: 1px solid var(--bf-btn-gold-border);
		border-radius: var(--bf-btn-radius);
		box-shadow: var(--bf-btn-gold-shadow);
		box-sizing: border-box;
		color: var(--bf-btn-gold-text);
		display: flex;
		font-size: 16px;
		font-weight: var(--bf-btn-font-weight);
		gap: 8px;
		justify-content: center;
		letter-spacing: 0.2px;
		margin-top: 12px;
		padding: 15px 18px;
		text-align: center;
		text-decoration: none;
		width: 100%;
	}

	.site-nav__cta:hover,
	.site-nav__cta:focus {
		box-shadow: 0 16px 28px -12px rgba(167, 130, 45, 0.72);
		color: #2A1C0B;
	}
}

/* Tighten the panel side padding so menu items line up with the header content
   at the narrow phone widths where the header uses 20px gutters. */
@media (max-width: 760px) {
	body.home .site-navigation,
	body:not(.home) .site-navigation {
		padding-left: 20px;
		padding-right: 20px;
	}
}