/*
 * Mobile-Nav widget — a fixed bottom action bar (Menü + Kontakt) that opens a slide-in
 * sidebar menu (built from a real WordPress menu via wp_nav_menu(), or manual entries).
 * Visible only below 992px.
 */

.ac-mnav-root {
	--ac-mnav-dark: #111111;
	--ac-mnav-light: #ffffff;
	--ac-mnav-gray-300: #dee2e6;
	/*
	 * Separate token for the sidebar's own link/icon text so an Elementor Style control
	 * can recolor the drawer without also touching --ac-mnav-light, which the bottom-bar
	 * variants (pill/fab text, tabs background) still rely on independently.
	 */
	--ac-mnav-sidebar-fg: var( --ac-mnav-light );
}

.ac-mnav-bottom,
.ac-mnav-sidebar,
.ac-mnav-backdrop {
	display: none;
}

@media screen and ( max-width: 992px ) {
	.ac-mnav-bottom {
		display: block;
		position: fixed;
		z-index: 999;
		left: 50%;
		transform: translateX( -50% );
		bottom: 15px;
		width: calc( 100% - 30px );
		max-width: 420px;
	}

	/* The App-Tab-Leiste variant is edge-to-edge instead of a floating inset bar. */
	.ac-mnav-bottom--tabs {
		left: 0;
		right: 0;
		bottom: 0;
		transform: none;
		width: 100%;
		max-width: none;
	}

	/*
	 * Variant "pill": two large, equally-weighted actions (Menü / Kontakt) in a
	 * floating rounded bar — the plugin's default pill/button language.
	 */
	.ac-mnav-bar {
		display: flex;
		align-items: stretch;
		background: var( --ac-accent, #2e6741 );
		border-radius: 50px;
		box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.2 );
		overflow: hidden;
	}

	.ac-mnav-bar-divider {
		width: 1px;
		background: rgba( 255, 255, 255, 0.25 );
		margin: 10px 0;
	}

	/*
	 * appearance:none + explicit background/border/outline/color on every state
	 * (including :hover/:focus/:active/:visited) stops a theme's or Elementor's own
	 * global <button>/<a> styling (pink button hover, blue link hover, etc.) from
	 * bleeding through — background/color are set with !important specifically to
	 * win that fight without having to chase specificity.
	 */
	.ac-mnav-bar-btn,
	.ac-mnav-bar-btn:link,
	.ac-mnav-bar-btn:visited {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		padding: 16px 12px;
		appearance: none;
		outline: none;
		border: none;
		background-color: transparent !important;
		color: var( --ac-mnav-light ) !important;
		text-decoration: none;
		cursor: pointer;
		transition: background-color 0.25s;
	}

	.ac-mnav-bar-btn:hover,
	.ac-mnav-bar-btn:focus,
	.ac-mnav-bar-btn:active {
		background-color: rgba( 255, 255, 255, 0.12 ) !important;
		color: var( --ac-mnav-light ) !important;
	}

	.ac-mnav-bar-icon {
		display: inline-flex;
		font-size: 1.2rem;
		line-height: 1;
	}

	.ac-mnav-bar-label {
		font-family: 'Montserrat', sans-serif;
		font-size: 0.95rem;
		font-weight: 700;
		white-space: nowrap;
	}

	/*
	 * Elementor icon controls can render an inline <svg> instead of a font-icon <i>;
	 * svg doesn't scale with font-size on its own (see ac-start-hero.css for the same
	 * fix) — without this, icons rendered oversized. fill: currentColor makes the svg
	 * follow whatever `color` each icon's context already sets.
	 */
	.ac-mnav-bar-icon svg,
	.ac-mnav-sidebar-close svg,
	.ac-mnav-dropdown-toggle svg,
	.ac-mnav-fab-icon svg,
	.ac-mnav-tab-icon svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
		/*
		 * These icons are flex children of their button (display:flex on the button
		 * centers them). A flex item's default flex-shrink:1 can still squeeze it
		 * below an explicit width/height — even an !important one — since flex-basis
		 * negotiation happens before the box model is finalized, and width/height can
		 * end up shrunk unevenly (width more than height). flex:none takes the icon
		 * out of that negotiation entirely so the width/height above always win.
		 */
		flex: none !important;
	}

	/*
	 * Variant "fab": a slim, dark, semi-transparent bar carries the secondary Kontakt
	 * action; a large elevated accent-green circle floats above it for Menü — echoes
	 * the original prototype's raised center button, but now unambiguously signals
	 * Menü as the primary action (secondary actions stay visually subordinate).
	 */
	.ac-mnav-fab-wrap {
		position: relative;
		height: 60px;
	}

	.ac-mnav-fab-bar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		height: 52px;
		background: rgba( 17, 17, 17, 0.92 );
		backdrop-filter: blur( 6px );
		border-radius: 999px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20px;
	}

	/*
	 * Two groups pushed to opposite edges (space-between on the bar) so up to 4
	 * icon-only links never sit behind the floating center button.
	 */
	.ac-mnav-fab-bar-group {
		display: flex;
		align-items: center;
		gap: 16px;
	}

	.ac-mnav-fab-bar-icon-link,
	.ac-mnav-fab-bar-icon-link:link,
	.ac-mnav-fab-bar-icon-link:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 30px;
		height: 30px;
		color: var( --ac-mnav-light ) !important;
		font-size: 1.05rem;
		line-height: 1;
		text-decoration: none;
		transition: opacity 0.2s, transform 0.2s;
	}

	.ac-mnav-fab-bar-icon-link:hover,
	.ac-mnav-fab-bar-icon-link:focus {
		opacity: 0.75;
		transform: translateY( -2px );
	}

	.ac-mnav-fab-bar-icon-link svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
	}

	.ac-mnav-fab {
		position: absolute;
		left: 50%;
		bottom: 22px;
		transform: translateX( -50% );
		width: 68px;
		height: 68px;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		appearance: none;
		outline: none;
		border: 4px solid var( --ac-mnav-light );
		background-color: var( --ac-accent, #2e6741 ) !important;
		box-shadow: 0 10px 24px rgba( 46, 103, 65, 0.4 );
		cursor: pointer;
		transition: transform 0.25s, box-shadow 0.25s;
	}

	.ac-mnav-fab:hover,
	.ac-mnav-fab:focus {
		transform: translateX( -50% ) translateY( -3px );
		box-shadow: 0 14px 28px rgba( 46, 103, 65, 0.5 );
	}

	.ac-mnav-fab-icon {
		color: var( --ac-mnav-light );
		font-size: 1.05rem;
		line-height: 1;
		display: inline-flex;
	}

	.ac-mnav-fab-text {
		color: var( --ac-mnav-light ) !important;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 0.62rem;
		letter-spacing: 0.02em;
	}

	/*
	 * Variant "tabs": edge-to-edge native-app-style tab bar — two equally weighted
	 * tabs, icon above label, familiar and conventional rather than a brand statement.
	 */
	.ac-mnav-tabs {
		display: grid;
		grid-template-columns: repeat( 2, 1fr );
		background: var( --ac-mnav-light );
		border-top: 1px solid #e7ece8;
		box-shadow: 0 -6px 16px rgba( 0, 0, 0, 0.08 );
		padding-bottom: env( safe-area-inset-bottom, 0px );
	}

	.ac-mnav-tabs.ac-mnav-tabs--single {
		grid-template-columns: 1fr;
	}

	.ac-mnav-tab,
	.ac-mnav-tab:link,
	.ac-mnav-tab:visited {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		padding: 12px 8px;
		appearance: none;
		outline: none;
		border: none;
		background-color: var( --ac-mnav-light ) !important;
		color: #666 !important;
		text-decoration: none;
		cursor: pointer;
		transition: color 0.2s;
	}

	.ac-mnav-tab:hover,
	.ac-mnav-tab:focus {
		color: var( --ac-accent, #2e6741 ) !important;
	}

	.ac-mnav-tab-icon {
		font-size: 1.15rem;
		line-height: 1;
		display: inline-flex;
	}

	.ac-mnav-tab-label {
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 0.68rem;
	}

	/*
	 * Variant "smooth": a light, native-app-style bar where a floating rounded
	 * indicator glides to whichever tab is tapped, squashing and stretching along the
	 * way with an intensity that scales with how far it travels — ported from the
	 * "Smooth bottom bar CSS animation" CodePen reference (see ac-mobile-nav.js for the
	 * JS half). Deliberately light/white rather than accent-colored like the other
	 * three variants, for genuine visual variety rather than just a different animation
	 * on the same look.
	 */
	.ac-mnav-smooth {
		background: #fff;
		border-radius: 20px;
		box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.15 );
		overflow: hidden;
		padding-top: 8px;
	}

	.ac-mnav-smooth-list {
		display: flex;
		position: relative;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.ac-mnav-smooth-indicator {
		position: absolute;
		top: 0;
		left: 0;
		width: calc( 100% / var( --ac-mnav-smooth-count, 2 ) );
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		pointer-events: none;
		transform: translate( 0, -6px );
		transition: transform 0.35s cubic-bezier( 0.645, 0.045, 0.355, 1 );
		z-index: 0;
	}

	.ac-mnav-smooth-indicator::before {
		content: '';
		display: block;
		width: 40px;
		height: 40px;
		background: var( --ac-accent, #2e6741 );
		border-radius: 20px;
		border: 3px solid #fff;
		box-shadow: 0 4px 10px rgba( 0, 0, 0, 0.2 );
		transform: scale( 1, 1 );
	}

	/*
	 * Squash-and-stretch on the indicator itself, not the icon — a single keyframe
	 * driven by CSS custom properties the JS sets per click (how far the indicator is
	 * travelling) instead of the reference's four separate near-identical keyframes.
	 */
	.ac-mnav-smooth-indicator.ac-stretching::before {
		animation: ac-mnav-smooth-stretch 0.22s linear;
	}

	@keyframes ac-mnav-smooth-stretch {
		0% {
			transform: scale( 1, 1 );
		}
		50% {
			transform: scale( var( --ac-mnav-smooth-stretch-x, 2 ), var( --ac-mnav-smooth-stretch-y, 0.6 ) );
		}
		100% {
			transform: scale( 1, 1 );
		}
	}

	.ac-mnav-smooth-item {
		flex: 1;
		position: relative;
		z-index: 1;
		list-style: none;
	}

	.ac-mnav-smooth-link,
	.ac-mnav-smooth-link:link,
	.ac-mnav-smooth-link:visited {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		padding: 10px 4px 12px;
		appearance: none;
		outline: none;
		border: none;
		background-color: transparent !important;
		color: #7a8699 !important;
		text-decoration: none;
		cursor: pointer;
		font-family: 'Montserrat', sans-serif;
		font-size: 0.65rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		transition: color 0.2s ease-in-out 0.1s;
	}

	.ac-mnav-smooth-link.ac-active,
	.ac-mnav-smooth-link.ac-active:link,
	.ac-mnav-smooth-link.ac-active:visited {
		color: #111 !important;
		font-weight: 700;
	}

	.ac-mnav-smooth-icon {
		display: inline-flex;
		font-size: 1.15rem;
		line-height: 1;
		transition: transform 0.35s cubic-bezier( 0.645, 0.045, 0.355, 1 ), color 0.2s ease-in-out 0.1s;
	}

	.ac-mnav-smooth-link.ac-active .ac-mnav-smooth-icon {
		color: #fff !important;
		transform: translateY( -6px );
	}

	.ac-mnav-smooth-icon svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
	}

	/*
	 * "Menü als erhöhter Button in der Mitte" mode (smooth_center_button) — Menü moves
	 * out of the sliding-indicator row into its own raised circular button, echoing the
	 * FAB variant's floating center button; Kontakt/extra tabs split into two
	 * independent halves either side, each with its own indicator (see
	 * render_smooth_tab_list() — the JS already scopes indicator math to the closest
	 * .ac-mnav-smooth-list, so two lists on one bar need no extra JS).
	 */
	.ac-mnav-smooth--center {
		display: flex;
		align-items: center;
		overflow: visible;
	}

	.ac-mnav-smooth-half {
		flex: 1;
		min-width: 0;
		overflow: hidden;
	}

	.ac-mnav-smooth-center {
		position: relative;
		flex-shrink: 0;
		width: 60px;
		height: 60px;
		margin: -22px 6px 0;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		appearance: none;
		outline: none;
		border: 4px solid #fff;
		background-color: var( --ac-accent, #2e6741 ) !important;
		box-shadow: 0 10px 24px rgba( 46, 103, 65, 0.4 );
		cursor: pointer;
		transition: transform 0.25s, box-shadow 0.25s;
		z-index: 2;
	}

	.ac-mnav-smooth-center:hover,
	.ac-mnav-smooth-center:focus {
		transform: translateY( -3px );
		box-shadow: 0 14px 28px rgba( 46, 103, 65, 0.5 );
	}

	.ac-mnav-smooth-center-icon {
		color: #fff;
		font-size: 1.05rem;
		line-height: 1;
		display: inline-flex;
	}

	.ac-mnav-smooth-center-icon svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
	}

	.ac-mnav-smooth-center-label {
		color: #fff !important;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		font-size: 0.58rem;
		letter-spacing: 0.02em;
	}

	/*
	 * Variant "expand": inactive tabs show icon only; the active tab grows wider and
	 * reveals its label, with a circular bubble popping in behind the icon and an
	 * underline growing beneath — ported from the "Tab Bar Menu Navigation" CodePen
	 * reference. The reference's bespoke per-icon SVG line-art morph animations aren't
	 * replicated since our icons are admin-configurable (Font Awesome or an uploaded
	 * SVG), not fixed hand-drawn artwork — the bubble/underline/label-reveal
	 * choreography carries the same "expanding tab" feel independent of icon content.
	 */
	.ac-mnav-expand {
		display: flex;
		align-items: stretch;
		background: #fff;
		border-radius: 18px 18px 38px 38px;
		box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.15 );
		overflow: hidden;
		padding: 6px 4px 10px;
		gap: 2px;
	}

	.ac-mnav-expand-item {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0%;
		min-width: 0;
		position: relative;
		display: flex;
		transition: flex-grow 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
	}

	.ac-mnav-expand-item.ac-active {
		flex-grow: 2.4;
	}

	.ac-mnav-expand-bubble {
		position: absolute;
		top: 2px;
		left: 10px;
		width: 34px;
		height: 34px;
		border-radius: 50%;
		background: rgba( 46, 103, 65, 0.1 );
		transform: scale( 0 );
		transform-origin: center;
		transition: transform 0.45s cubic-bezier( 0.4, 0, 0.2, 1 );
		pointer-events: none;
	}

	.ac-mnav-expand-item.ac-active .ac-mnav-expand-bubble {
		transform: scale( 1 );
	}

	.ac-mnav-expand-trigger,
	.ac-mnav-expand-trigger:link,
	.ac-mnav-expand-trigger:visited {
		position: relative;
		z-index: 1;
		display: flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		padding: 8px 12px;
		appearance: none;
		outline: none;
		border: none;
		background-color: transparent !important;
		color: #7a8699 !important;
		text-decoration: none;
		cursor: pointer;
		overflow: hidden;
		font-family: 'Montserrat', sans-serif;
		transition: color 0.3s;
	}

	.ac-mnav-expand-item.ac-active .ac-mnav-expand-trigger,
	.ac-mnav-expand-item.ac-active .ac-mnav-expand-trigger:link,
	.ac-mnav-expand-item.ac-active .ac-mnav-expand-trigger:visited {
		color: var( --ac-accent, #2e6741 ) !important;
	}

	.ac-mnav-expand-icon {
		flex-shrink: 0;
		display: inline-flex;
		font-size: 1.1rem;
		line-height: 1;
	}

	.ac-mnav-expand-icon svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
	}

	.ac-mnav-expand-label {
		flex-shrink: 0;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
		font-size: 0.78rem;
		font-weight: 700;
		letter-spacing: 0.01em;
		transition: max-width 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ) 0.1s, opacity 0.25s ease 0.15s;
	}

	.ac-mnav-expand-label.ac-active {
		max-width: 140px;
		opacity: 1;
	}

	.ac-mnav-expand-underline {
		position: absolute;
		left: 12px;
		right: 12px;
		bottom: 0;
		height: 3px;
		border-radius: 2px 2px 0 0;
		background: var( --ac-accent, #2e6741 );
		transform: scaleX( 0 );
		transform-origin: left center;
		transition: transform 0.35s cubic-bezier( 0.4, 0, 0.2, 1 ) 0.1s;
	}

	.ac-mnav-expand-item.ac-active .ac-mnav-expand-underline {
		transform: scaleX( 1 );
	}

	.ac-mnav-sidebar {
		position: fixed;
		z-index: 1001;
		background: var( --ac-mnav-dark );
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/*
	 * Drawer style "right" (default): classic edge panel sliding in from the right.
	 */
	.ac-mnav-sidebar--right {
		top: 0;
		right: -100%;
		width: 85%;
		max-width: 360px;
		height: 100%;
		height: 100dvh;
		transition: right 0.4s ease;
		box-shadow: -10px 0 40px rgba( 0, 0, 0, 0.25 );
		border-radius: 16px 0 0 16px;
	}

	.ac-mnav-sidebar--right.ac-active {
		right: 0;
		display: block;
	}

	/*
	 * Drawer style "bottom": a bottom sheet, capped height with its own scroll and a
	 * small grabber affordance — a familiar mobile pattern distinct from the side panel.
	 */
	.ac-mnav-sidebar--bottom {
		left: 0;
		right: 0;
		bottom: -100%;
		width: 100%;
		/*
		 * Sized by its own content (no explicit height) up to this ceiling — kept close
		 * to the full viewport rather than a conservative fraction of it, so a full menu
		 * fits without triggering the inner scrollbar on most phones. Never 100dvh: that
		 * would remove the safety margin entirely and risk clipping content with no way
		 * to reach it if a menu is unusually long — overflow-y: auto (inherited from
		 * .ac-mnav-sidebar) stays as a fallback for that case only.
		 */
		max-height: 96dvh;
		transition: bottom 0.4s ease;
		box-shadow: 0 -10px 40px rgba( 0, 0, 0, 0.25 );
		border-radius: 22px 22px 0 0;
		padding-top: 8px;
		padding-bottom: env( safe-area-inset-bottom, 0px );
	}

	.ac-mnav-sidebar--bottom::before {
		content: '';
		display: block;
		width: 40px;
		height: 4px;
		border-radius: 2px;
		background: rgba( 255, 255, 255, 0.25 );
		margin: 0 auto 4px;
	}

	.ac-mnav-sidebar--bottom.ac-active {
		bottom: 0;
		display: block;
	}

	/*
	 * Drawer style "overlay": fullscreen fade + scale, no directional slide — a calmer,
	 * more "modern app menu" entrance than either edge-anchored panel.
	 */
	.ac-mnav-sidebar--overlay {
		inset: 0;
		width: 100%;
		height: 100dvh;
		opacity: 0;
		visibility: hidden;
		transform: scale( 0.96 );
		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
	}

	.ac-mnav-sidebar--overlay.ac-active {
		display: block;
		opacity: 1;
		visibility: visible;
		transform: scale( 1 );
	}

	.ac-mnav-sidebar-header {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 12px;
		padding: 18px 20px;
		border-bottom: 1px solid rgba( 255, 255, 255, 0.08 );
		background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.04 ), transparent );
	}

	.ac-mnav-sidebar--right .ac-mnav-sidebar-header {
		border-radius: 16px 0 0 0;
	}

	.ac-mnav-sidebar--bottom .ac-mnav-sidebar-header {
		border-radius: 22px 22px 0 0;
	}

	.ac-mnav-sidebar-logo {
		display: flex;
		align-items: center;
		margin-right: auto;
	}

	.ac-mnav-sidebar-logo img {
		display: block;
		max-height: 28px;
		width: auto;
	}

	.ac-mnav-sidebar-close {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.1rem;
		cursor: pointer;
		appearance: none;
		outline: none;
		background-color: rgba( 255, 255, 255, 0.08 ) !important;
		color: var( --ac-mnav-sidebar-fg ) !important;
		border: none;
		transition: background-color 0.3s, transform 0.3s;
	}

	.ac-mnav-sidebar-close:hover,
	.ac-mnav-sidebar-close:focus {
		background-color: var( --ac-accent, #2e6741 ) !important;
		color: var( --ac-mnav-light ) !important;
		transform: rotate( 90deg );
	}

	.ac-mnav-sidebar-content {
		padding: 10px 0 20px;
	}

	.ac-mnav-menu {
		list-style: none;
		margin: 0;
		padding: 0 12px;
	}

	.ac-mnav-menu-item {
		margin-bottom: 4px;
	}

	/*
	 * The link and its (optional) dropdown-toggle button sit in their own flex row —
	 * deliberately NOT position:absolute/relative for the toggle. Absolute positioning
	 * here depended on .ac-mnav-menu-item keeping position:relative; if any other
	 * stylesheet on the site ever neutralizes that (a reset, a global li rule), the
	 * button would silently re-anchor to the next positioned ancestor up the tree (the
	 * fixed sidebar) instead of erroring — invisible and mispositioned with no console
	 * warning. Flex layout has no such hidden dependency.
	 */
	.ac-mnav-menu-row {
		display: flex;
		align-items: center;
	}

	/*
	 * The whole row toggles the submenu on an expandable item (see ac-mobile-nav.js), so
	 * the hover/focus background is drawn once on the row itself (link + gap + chevron
	 * together) instead of separately on the link and the button — two adjacent shapes
	 * with a gap between them used to read as a visual seam. The link's own :hover rule
	 * further down is explicitly cancelled here to avoid double-drawing the same tint
	 * over the link portion.
	 */
	.ac-mnav-menu-row--has-children {
		cursor: pointer;
		border-radius: 10px;
		transition: background-color 0.25s;
	}

	.ac-mnav-menu-row--has-children:hover,
	.ac-mnav-menu-row--has-children:focus-within {
		background-color: rgba( 255, 255, 255, 0.06 );
	}

	.ac-mnav-menu-row--has-children:hover .ac-mnav-menu-link,
	.ac-mnav-menu-row--has-children:focus-within .ac-mnav-menu-link {
		padding-left: 20px;
	}

	.ac-mnav-menu-row--has-children .ac-mnav-menu-link:hover,
	.ac-mnav-menu-row--has-children .ac-mnav-menu-link:focus {
		background-color: transparent;
	}

	/*
	 * Explicit color on every link state (including :visited) — without this, the
	 * browser/theme default visited/hover link color (typically blue) can win over a
	 * single unqualified `color` declaration.
	 */
	.ac-mnav-menu-link,
	.ac-mnav-menu-link:link,
	.ac-mnav-menu-link:visited {
		display: block;
		flex: 1;
		min-width: 0;
		padding: 14px 16px;
		border-radius: 10px;
		color: var( --ac-mnav-sidebar-fg ) !important;
		text-decoration: none;
		font-size: 1rem;
		font-weight: 600;
		font-family: 'Montserrat', sans-serif;
		transition: background-color 0.25s, padding-left 0.25s;
	}

	.ac-mnav-menu-link:hover,
	.ac-mnav-menu-link:focus,
	.ac-mnav-menu-link:active {
		background-color: rgba( 255, 255, 255, 0.06 );
		color: var( --ac-mnav-sidebar-fg ) !important;
		padding-left: 20px;
	}

	.ac-mnav-dropdown-toggle {
		flex-shrink: 0;
		margin-right: 8px;
		font-size: 0.75rem;
		width: 32px;
		height: 32px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: background-color 0.3s, transform 0.3s;
		appearance: none;
		outline: none;
		background-color: transparent !important;
		color: var( --ac-mnav-sidebar-fg ) !important;
		border: none;
	}

	.ac-mnav-dropdown-toggle.ac-active {
		transform: rotate( 180deg );
		color: var( --ac-accent, #2e6741 ) !important;
	}

	/*
	 * Overrides the shared "width:1em/height:1em" svg-sizing rule (see above) with fixed
	 * pixels specifically for this icon. em-based sizing here depends on the button's own
	 * font-size cascading correctly into an inline <svg> with no width/height attributes
	 * of its own (only a viewBox) — every other icon in this rule works, this is the only
	 * one that sits inside a flex-row layout rather than being the row's sole content, so
	 * pinning it to an explicit, unambiguous pixel size removes that one remaining
	 * variable rather than continuing to depend on em/font-size inheritance for it.
	 */
	.ac-mnav-dropdown-toggle svg {
		display: block;
		width: 14px !important;
		height: 14px !important;
		fill: currentColor !important;
	}

	.ac-mnav-dropdown {
		display: none;
		list-style: none;
		background: rgba( 255, 255, 255, 0.03 );
		border-radius: 10px;
		padding: 4px 0;
		margin: 2px 0 8px;
	}

	.ac-mnav-dropdown.ac-active {
		display: block;
	}

	.ac-mnav-dropdown li a,
	.ac-mnav-dropdown li a:link,
	.ac-mnav-dropdown li a:visited {
		display: block;
		position: relative;
		padding: 10px 20px 10px 28px;
		color: var( --ac-mnav-gray-300 ) !important;
		text-decoration: none;
		font-size: 0.88rem;
		font-family: 'Amiko', sans-serif;
		transition: color 0.25s, background-color 0.25s;
	}

	.ac-mnav-dropdown li a:hover,
	.ac-mnav-dropdown li a:focus,
	.ac-mnav-dropdown li a:active {
		color: #fff !important;
		background-color: rgba( 255, 255, 255, 0.04 );
	}

	.ac-mnav-social {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
		padding: 20px 12px 4px;
		margin-top: 10px;
		border-top: 1px solid rgba( 255, 255, 255, 0.08 );
	}

	.ac-mnav-social-link,
	.ac-mnav-social-link:link,
	.ac-mnav-social-link:visited {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 50%;
		background-color: rgba( 255, 255, 255, 0.08 ) !important;
		color: var( --ac-mnav-sidebar-fg ) !important;
		font-size: 0.95rem;
		text-decoration: none;
		transition: background-color 0.25s, transform 0.25s;
	}

	/*
	 * Hover background always switches to the fixed accent green regardless of the
	 * configurable sidebar text color, so the icon color is pinned to white here too —
	 * guarantees contrast even if --ac-mnav-sidebar-fg has been set to a dark tone.
	 */
	.ac-mnav-social-link:hover,
	.ac-mnav-social-link:focus {
		background-color: var( --ac-accent, #2e6741 ) !important;
		color: #fff !important;
		transform: translateY( -2px );
	}

	.ac-mnav-social-link svg {
		width: 1em !important;
		height: 1em !important;
		fill: currentColor !important;
	}

	.ac-mnav-backdrop {
		display: block;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba( 0, 0, 0, 0.5 );
		backdrop-filter: blur( 3px );
		z-index: 1000;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s, visibility 0.3s;
	}

	.ac-mnav-backdrop.ac-active {
		opacity: 1;
		visibility: visible;
	}

	body.ac-mnav-open-body {
		overflow: hidden;
	}
}

@media screen and ( max-width: 360px ) {
	.ac-mnav-bar-label {
		font-size: 0.85rem;
	}
}