/*
 * Custom full-screen mobile nav overlay. Replaces the core navigation
 * block's built-in mobile panel (.wp-block-navigation__responsive-container)
 * below 768px — that panel doesn't grow to fill the viewport and ends up
 * scrollable, which causes accidental page scrolls on iPhone/Android.
 * Pairs with assets/js/mobile-nav-overlay.js, which clones the existing nav
 * links into the markup this file styles. Core's own JS still runs
 * alongside this (harmless — it only manipulates the hidden native panel).
 */

@media (max-width: 767px) {
	/* Hide the theme's native mobile menu panel entirely. */
	.wp-block-navigation__responsive-container {
		display: none !important;
	}

	/* Core auto-hides its own hamburger button at 600px+; keep it visible
	   and usable as our trigger up through the 768px breakpoint. */
	.wp-block-navigation__responsive-container-open {
		display: flex !important;
	}
}

.dmg-mobile-nav-overlay {
	position: fixed;
	top: 0;
	/* No `left` — anchoring via `right: 0` + a percentage `width` only is
	   what keeps this pinned to the right edge with a visible gap on the
	   left showing the page beneath. */
	right: 0;
	width: 85%;
	/* Reduced from 100vh so page content stays visible beneath the panel;
	   anchored to the top via `top` above (no `bottom`/`inset`). */
	height: 70vh;
	background: var(--wp--preset--color--gray-900, #1A1A1A);
	/* Core sets a high-specificity `.wp-block-navigation-item__content.wp-
	   block-navigation-item__content { color: inherit }` rule that beats a
	   direct color rule on that class — setting color here, on an ancestor,
	   satisfies that `inherit` correctly instead of fighting it. */
	color: #fff;
	z-index: 999999;
	opacity: 0;
	visibility: hidden;
	/* Slides in from the right rather than fading straight in. */
	transform: translateX(100%);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
	/* No overflow/scrolling here — that lives on .dmg-mobile-nav-links below.
	   Keeping this outer box static means the close button (positioned
	   relative to it) stays pinned in the corner even when a long expanded
	   submenu makes the inner content taller than the viewport and scrolls. */
	overflow: hidden;
}

.dmg-mobile-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

.dmg-mobile-nav-close {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	/* Explicit stacking above .dmg-mobile-nav-links — core gives every
	   .wp-block-navigation-item a `position: relative`, and with a tall
	   centered/overflowing menu those in-flow items can otherwise end up
	   geometrically overlapping this button's corner position and stealing
	   its clicks. */
	z-index: 10;
	background: transparent;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0.5rem;
	line-height: 0;
}

.dmg-mobile-nav-close:hover,
.dmg-mobile-nav-close:focus {
	color: var(--wp--preset--color--primary, #B20000);
}

.dmg-mobile-nav-close svg {
	width: 28px;
	height: 28px;
	display: block;
}

.dmg-mobile-nav-links {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	/* Items now sit near the top, alongside the close button, instead of
	   vertically centered in the (now shorter) panel. */
	justify-content: flex-start;
	overflow-y: auto;
	/* Extra top padding clears the close button (top: 1.5rem + its own
	   size) so the first nav item doesn't sit underneath it. */
	padding: 4.5rem 2rem 2rem;
	box-sizing: border-box;
}

.dmg-mobile-nav-list {
	list-style: none;
	/* Auto margins on a flex item re-center it on the cross axis, which
	   would silently override align-items: flex-end on the parent — plain
	   0 here lets the parent's flex-end alignment push this to the right. */
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1.5rem;
	text-align: right;
	width: 100%;
	max-width: 480px;
}

.dmg-mobile-nav-list .wp-block-navigation-item {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.dmg-mobile-nav-list .wp-block-navigation-item__content,
.dmg-mobile-nav-list .wp-block-navigation-submenu__toggle {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 700;
	text-decoration: none;
	background: transparent;
	border: none;
	padding: 0.25rem 0;
	cursor: pointer;
	font-family: inherit;
}

/*
 * Force right-alignment at every level. Plain <a> links already inherit
 * text-align: right from .dmg-mobile-nav-list correctly, but core has a
 * `button.wp-block-navigation-item__content { text-align: left }` rule
 * (type selector, only matches <button>s) that overrides the inherited
 * value specifically on the Communities/We Give Back submenu TOGGLE
 * buttons — this is why only those two looked misaligned. Submenu
 * containers and their items get the same explicit treatment so nothing
 * nested can drift left either.
 */
.dmg-mobile-nav-list,
.dmg-mobile-nav-list .wp-block-navigation-item,
.dmg-mobile-nav-list .wp-block-navigation-item__content,
.dmg-mobile-nav-list .wp-block-navigation-submenu__toggle,
.dmg-mobile-nav-list .wp-block-navigation__submenu-container,
.dmg-mobile-nav-list .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	text-align: right !important;
}

.dmg-mobile-nav-list .wp-block-navigation-item__content:hover,
.dmg-mobile-nav-list .wp-block-navigation-item__content:focus,
.dmg-mobile-nav-list .wp-block-navigation-submenu__toggle:hover,
.dmg-mobile-nav-list .wp-block-navigation-submenu__toggle:focus {
	color: var(--wp--preset--color--primary, #B20000);
}

/*
 * Submenu chevron. The JS moves this icon (a sibling in core's markup, used
 * for the desktop dropdown) inside its toggle button, after the label, so
 * it sits inline with the text and right-aligns together as one unit
 * instead of stacking on its own line under our column-flex layout.
 */
.dmg-mobile-nav-list .wp-block-navigation__submenu-icon {
	display: inline-flex;
	vertical-align: middle;
	margin-left: 0.5rem;
	width: 0.7em;
	height: 0.7em;
}

.dmg-mobile-nav-list .wp-block-navigation__submenu-icon svg {
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease;
}

/* Core's own rotation rule depends on the icon being an adjacent sibling
   of the toggle, which moving it inside the button breaks — this replaces
   it with a descendant selector keyed off the same aria-expanded state. */
.dmg-mobile-nav-list .wp-block-navigation-submenu__toggle[aria-expanded="true"] .wp-block-navigation__submenu-icon svg {
	transform: rotate(180deg);
}

/*
 * Submenu containers: our JS sets aria-expanded on the toggle button for
 * accessibility, but that also triggers core's OWN desktop-dropdown CSS
 * (absolute positioning, white background, border, opacity/visibility
 * toggling) via its `[aria-expanded=true]~.wp-block-navigation__submenu-
 * container` rule. The !importants below neutralize that so the submenu
 * renders inline in the overlay's flow instead of as a floating dropdown.
 */
.dmg-mobile-nav-list .has-child .wp-block-navigation__submenu-container {
	position: static !important;
	background: transparent !important;
	border: none !important;
	z-index: auto !important;
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	/* Right-padding shifts items in from the true right edge — since
	   everything here is right-aligned, indenting toward the left is what
	   reads as "nested under the parent" rather than a left margin. */
	padding-right: 1.25rem;
	flex-direction: column;
	align-items: flex-end;
	gap: 1rem;
}

.dmg-mobile-nav-list .has-child:not(.is-open) .wp-block-navigation__submenu-container {
	display: none !important;
	opacity: 0 !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
}

.dmg-mobile-nav-list .has-child.is-open > .wp-block-navigation__submenu-container {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	height: auto !important;
	width: auto !important;
	overflow: visible !important;
}

.dmg-mobile-nav-list .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.25rem;
	font-weight: 500;
	/* !important needed: core's same color:inherit rule (see overlay color
	   comment above) would otherwise flatten this to plain white, losing
	   the intended visual hierarchy vs. top-level items. */
	color: var(--wp--preset--color--gray-300, #BFBFBF) !important;
}

.dmg-mobile-nav-list .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.dmg-mobile-nav-list .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
	color: #fff;
}

/* Lock both html and body — iOS Safari can still rubber-band/bounce-scroll
   the page behind a fixed overlay during a fast swipe with only body
   locked, which is the exact accidental-scroll behavior this overlay
   exists to eliminate. */
html.dmg-mobile-nav-open,
body.dmg-mobile-nav-open {
	overflow: hidden;
}

@media (min-width: 768px) {
	.dmg-mobile-nav-overlay {
		display: none;
	}
}