/**
 * Ulannii — the hamburger panel on phones.
 *
 * Astra's dropdown mobile menu drops the navigation in below the header with
 * no separation from the page behind it, so it reads as part of the page
 * rather than something opened over it. This gives it the edges and the
 * dimmed backdrop that say "panel".
 *
 * Item spacing is deliberately left alone beyond padding: the site's
 * Customizer CSS already sets a 12px gap between these items, and overriding
 * it here would leave that setting looking broken to whoever edits it next.
 */

.ast-header-break-point .ast-mobile-header-wrap .ast-mobile-header-content {
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	box-shadow: 0 18px 40px rgba(60, 40, 20, 0.16);

	/* The inner navigation block is rounded to match rather than the panel
	   clipping it. Clipping worked, but `overflow: hidden` on a container
	   Astra slides open is a plausible way to collapse that animation, and
	   rounding both boxes gets the same corner with nothing to interfere. */
}

/* Roomier tap targets — these rows are reached with a thumb, and Astra's
   default padding leaves them tighter than the rest of the site's rhythm. */
.ast-header-break-point #ast-hf-mobile-menu .menu-link {
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Dims the page behind the open panel. Sits under the header, which the
   site's own CSS already pins at z-index 999, so the panel stays above it.
 *
 * Deliberately click-through: dismissing by tapping the backdrop would mean
 * driving Astra's toggle from script, and a backdrop that swallowed taps
 * without closing would be worse than none. The X is right there. */
.ast-header-break-point.ast-main-header-nav-open::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(23, 15, 8, 0.42);
	pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
	.ast-header-break-point.ast-main-header-nav-open::after {
		animation: u-menu-scrim 0.18s ease-out;
	}

	@keyframes u-menu-scrim {
		from { opacity: 0; }
		to { opacity: 1; }
	}
}

/* The block that actually paints white inside the panel. Rounding it as well is
   what makes the corner visible, in place of clipping the parent. */
.ast-header-break-point .ast-mobile-header-wrap .ast-builder-menu-mobile {
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	overflow: hidden;
}