/* =========================================================================
   Mobile Off-Canvas Navigation für gaertnerei-ritter.de
   Sichtbar nur ≤ 860px. Ersetzt das native wp:navigation Mobile-Overlay.

   A11y:
   - Toggle/Close: 48×48 px Touch-Target
   - Menüpunkte: min-height 56 px, großzügiger Tap-Bereich
   - aria-hidden + visibility synchron mit data-open
   - Reduced-motion: kein Slide, nur Fade
   - Reduced-transparency: solider Backdrop statt blur
   - Hoher Kontrast: Ink/Paper, +2px Focus-Ring
   ========================================================================= */

:root {
	--mnav-ink: #0F2418;
	--mnav-paper: #F5F1E7;
	--mnav-amber: #A04500;
	--mnav-leaf: #2E5C3E;
	--mnav-muted: rgba(245, 241, 231, .7);
	--mnav-rule: rgba(245, 241, 231, .14);
}

/* Desktop: alles versteckt — native Navigation bleibt sichtbar */
.ritter-mnav,
.ritter-mnav__backdrop,
.ritter-mnav__toggle {
	display: none;
}

@media (max-width: 860px) {

	/* Nativer wp:navigation Block auf Mobile verstecken */
	.ritter-header-nav.wp-block-navigation,
	.wp-block-navigation.ritter-header-nav {
		display: none !important;
	}

	/* =====================================================================
	   Toggle (Hamburger) — top-right, fixiert sobald Header gescrollt ist
	   ===================================================================== */
	.ritter-mnav__toggle {
		position: fixed;
		top: 14px;
		right: 14px;
		z-index: 9998;
		display: inline-flex;
		align-items: center;
		gap: .55rem;
		min-height: 48px;
		min-width: 48px;
		padding: .6rem .9rem .6rem .75rem;
		background: var(--mnav-paper);
		color: var(--mnav-ink);
		border: 1px solid rgba(15, 36, 24, .22);
		border-radius: 999px;
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: .9rem;
		font-weight: 600;
		letter-spacing: .04em;
		cursor: pointer;
		box-shadow: 0 2px 14px rgba(15, 36, 24, .12);
		transition: background .2s, color .2s, transform .2s;
	}
	.ritter-mnav__toggle:hover,
	.ritter-mnav__toggle:focus-visible {
		background: var(--mnav-ink);
		color: var(--mnav-paper);
	}
	.ritter-mnav__toggle:focus-visible {
		outline: 3px solid var(--mnav-amber);
		outline-offset: 3px;
	}

	.ritter-mnav__toggle-bars {
		display: inline-flex;
		flex-direction: column;
		justify-content: space-between;
		width: 20px;
		height: 14px;
	}
	.ritter-mnav__toggle-bars span {
		display: block;
		width: 100%;
		height: 2px;
		background: currentColor;
		border-radius: 1px;
		transition: transform .25s, opacity .15s;
	}

	/* Hamburger → X, wenn Drawer offen */
	.ritter-mnav__toggle[aria-expanded="true"] .ritter-mnav__toggle-bars span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}
	.ritter-mnav__toggle[aria-expanded="true"] .ritter-mnav__toggle-bars span:nth-child(2) {
		opacity: 0;
	}
	.ritter-mnav__toggle[aria-expanded="true"] .ritter-mnav__toggle-bars span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* =====================================================================
	   Backdrop
	   ===================================================================== */
	.ritter-mnav__backdrop {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 9996;
		background: rgba(15, 36, 24, .45);
		-webkit-backdrop-filter: blur(4px);
		backdrop-filter: blur(4px);
		opacity: 0;
		transition: opacity .25s ease;
		pointer-events: none;
	}
	.ritter-mnav__backdrop[data-open="true"] {
		opacity: 1;
		pointer-events: auto;
	}
	.ritter-mnav__backdrop[hidden] { display: none !important; }

	/* =====================================================================
	   Drawer
	   ===================================================================== */
	.ritter-mnav {
		display: flex;
		flex-direction: column;
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		width: min(88vw, 380px);
		max-width: 100vw;
		z-index: 9997;
		background: var(--mnav-ink);
		color: var(--mnav-paper);
		padding: clamp(1.5rem, 5vw, 2.25rem) clamp(1.25rem, 4vw, 1.75rem);
		box-shadow: -12px 0 36px rgba(0, 0, 0, .25);
		transform: translateX(100%);
		transition: transform .32s cubic-bezier(.32, .72, 0, 1);
		visibility: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	.ritter-mnav[data-open="true"] {
		transform: translateX(0);
		visibility: visible;
	}

	/* Header (Eyebrow + Close-Button) */
	.ritter-mnav__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: clamp(1.25rem, 4vw, 1.75rem);
	}
	.ritter-mnav__eyebrow {
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: .72rem;
		text-transform: uppercase;
		letter-spacing: .22em;
		color: var(--mnav-muted);
	}
	.ritter-mnav__close {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		background: transparent;
		color: var(--mnav-paper);
		border: 1px solid var(--mnav-rule);
		border-radius: 999px;
		cursor: pointer;
		transition: background .2s, border-color .2s, transform .2s;
	}
	.ritter-mnav__close:hover,
	.ritter-mnav__close:focus-visible {
		background: rgba(245, 241, 231, .12);
		border-color: var(--mnav-paper);
	}
	.ritter-mnav__close:focus-visible {
		outline: 3px solid var(--mnav-amber);
		outline-offset: 3px;
	}
	.ritter-mnav__close svg { display: block; }

	/* Liste */
	.ritter-mnav__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: .15rem;
	}
	.ritter-mnav__item + .ritter-mnav__item {
		border-top: 1px solid var(--mnav-rule);
	}

	.ritter-mnav__link {
		display: block;
		min-height: 56px;
		padding: 1rem .25rem;
		font-family: var(--font-display, "Fraunces", Georgia, serif);
		font-size: clamp(1.4rem, 5vw, 1.75rem);
		font-weight: 500;
		line-height: 1.2;
		color: var(--mnav-paper);
		text-decoration: none;
		transition: color .15s, transform .2s;
	}
	.ritter-mnav__link:hover,
	.ritter-mnav__link:focus-visible {
		color: var(--mnav-amber);
		transform: translateX(4px);
	}
	.ritter-mnav__link:focus-visible {
		outline: 2px solid var(--mnav-amber);
		outline-offset: 4px;
		border-radius: 4px;
	}
	.ritter-mnav__link[aria-current="page"] {
		color: var(--mnav-amber);
	}
	.ritter-mnav__link[aria-current="page"]::after {
		content: "";
		display: inline-block;
		width: 6px;
		height: 6px;
		margin-left: .6em;
		vertical-align: middle;
		background: currentColor;
		border-radius: 50%;
	}

	/* Sublist (Unternehmen → Impressum/Datenschutz/…) */
	.ritter-mnav__sublist {
		list-style: none;
		margin: 0 0 .5rem 0;
		padding: 0 0 .25rem .25rem;
		display: flex;
		flex-direction: column;
		gap: 0;
	}
	.ritter-mnav__sublink {
		display: block;
		min-height: 44px;
		padding: .65rem 0;
		font-family: var(--font-body, system-ui, sans-serif);
		font-size: 1rem;
		color: var(--mnav-muted);
		text-decoration: none;
		transition: color .15s, transform .2s;
	}
	.ritter-mnav__sublink:hover,
	.ritter-mnav__sublink:focus-visible {
		color: var(--mnav-paper);
		transform: translateX(4px);
	}
	.ritter-mnav__sublink:focus-visible {
		outline: 2px solid var(--mnav-amber);
		outline-offset: 3px;
		border-radius: 4px;
	}
	.ritter-mnav__sublink[aria-current="page"] {
		color: var(--mnav-paper);
	}

	/* Footer (Kontakt-Quicklinks) */
	.ritter-mnav__footer {
		margin-top: auto;
		padding-top: clamp(1.5rem, 4vw, 2rem);
		display: flex;
		flex-direction: column;
		gap: .35rem;
	}
	.ritter-mnav__contact {
		display: inline-block;
		min-height: 44px;
		padding: .65rem 0;
		font-size: .98rem;
		color: var(--mnav-muted);
		text-decoration: none;
		border-bottom: 1px solid transparent;
		transition: color .15s, border-color .15s;
	}
	.ritter-mnav__contact:hover,
	.ritter-mnav__contact:focus-visible {
		color: var(--mnav-paper);
		border-color: var(--mnav-rule);
	}
	.ritter-mnav__contact:focus-visible {
		outline: 2px solid var(--mnav-amber);
		outline-offset: 3px;
		border-radius: 4px;
	}

	/* Body-Scroll-Lock, wenn Drawer offen */
	body.ritter-mnav-open {
		overflow: hidden;
	}
}

/* =========================================================================
   prefers-reduced-motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
	.ritter-mnav { transition: none; transform: translateX(0); opacity: 0; }
	.ritter-mnav[data-open="true"] { opacity: 1; }
	.ritter-mnav:not([data-open="true"]) { visibility: hidden; pointer-events: none; }
	.ritter-mnav__backdrop { transition: none; }
	.ritter-mnav__toggle-bars span { transition: none; }
	.ritter-mnav__link { transition: color .15s; }
	.ritter-mnav__link:hover,
	.ritter-mnav__link:focus-visible { transform: none; }
}

/* =========================================================================
   prefers-reduced-transparency / forced-colors
   ========================================================================= */
@media (prefers-reduced-transparency: reduce) {
	.ritter-mnav__backdrop {
		background: rgba(15, 36, 24, .85);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}
@media (forced-colors: active) {
	.ritter-mnav {
		background: Canvas;
		color: CanvasText;
		border-left: 2px solid CanvasText;
	}
	.ritter-mnav__link,
	.ritter-mnav__sublink,
	.ritter-mnav__contact { color: LinkText; }
	.ritter-mnav__link[aria-current="page"],
	.ritter-mnav__sublink[aria-current="page"] { color: ActiveText; }
	.ritter-mnav__toggle {
		background: Canvas;
		color: CanvasText;
		border: 2px solid CanvasText;
	}
	.ritter-mnav__close {
		color: CanvasText;
		border: 2px solid CanvasText;
	}
	.ritter-mnav__backdrop {
		background: rgba(0, 0, 0, .8);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}