/*
 * Custom mobile navigation panel — replaces Astra's default mobile drawer
 * styling. Astra's own hamburger button ("#ast-mobile-header .menu-toggle")
 * is kept (accessible, already wired up); its own default menu content
 * ("ast-mobile-header-content") is hidden below and this panel takes over.
 */

/* Astra's own mobile drawer is fully hidden — this panel replaces it. */
@media (max-width: 921px) {
	.ast-mobile-header-content {
		display: none !important;
	}
}

/*
 * The toggle button itself: a mist squircle in the header that becomes a solid
 * black circle while the panel is open.
 *
 * Two Astra defaults are overridden here. The trigger is Astra's "minimal"
 * variant, which ships as a bare transparent button with no box of its own, and
 * Astra's dynamic (Customizer-generated) CSS hardcodes the icon's fill to the
 * brand green with
 * `[data-section="section-header-mobile-trigger"] ... .ast-mobile-svg{fill:#4A7C3A}`,
 * an attribute + class selector, so the "#ast-mobile-header" ID below outranks
 * it without !important. Handing the icons back to `currentColor` (what the
 * markup already declares) lets the button's own color drive them, which is what
 * makes the navy -> white flip on open a single transition rather than two
 * separate rules.
 *
 * Black is the search icon's color (assets/search.css: .astra-search-icon), so
 * the two header controls read as one set.
 */
@media (max-width: 921px) {
	#ast-mobile-header .menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 0;
		/* Squircle closed, circle open. Animating border-radius between a
		   length and a percentage interpolates fine here because the box is a
		   fixed square, so 50% is a stable 20px target. */
		border-radius: var(--fc-radius-md);
		background: var(--fc-mist);
		color: #000;
		-webkit-tap-highlight-color: transparent;
		transition:
			background-color 280ms cubic-bezier( 0.4, 0, 0.2, 1 ),
			border-radius 280ms cubic-bezier( 0.4, 0, 0.2, 1 ),
			color 180ms ease,
			transform 120ms ease;
	}

	/* The button is restyled from Astra's default, so its focus ring is
	   restated rather than left to whatever Astra's button reset leaves behind. */
	#ast-mobile-header .menu-toggle:focus-visible {
		outline: 2px solid #000;
		outline-offset: 2px;
	}

	#ast-mobile-header .menu-toggle:active {
		transform: scale( 0.94 );
	}

	#ast-mobile-header .menu-toggle.fc-toggle-open {
		background: #000;
		border-radius: 50%;
		color: #fff;
	}

	#ast-mobile-header .menu-toggle.fc-toggle-open:focus-visible {
		outline-color: #000;
	}

	/* Undoes Astra's hardcoded green fill (see the note above) for both icons,
	   closed and open. */
	#ast-mobile-header .menu-toggle .mobile-menu-toggle-icon .ast-mobile-svg {
		fill: currentColor;
	}

	@media ( prefers-reduced-motion: reduce ) {
		#ast-mobile-header .menu-toggle {
			transition-duration: 1ms;
		}

		#ast-mobile-header .menu-toggle:active {
			transform: none;
		}
	}
}

/*
 * Hamburger-to-X morph on the toggle button. Astra's Header Builder trigger
 * already renders both icons — ".mobile-menu-toggle-icon" wraps ".ast-menu-svg"
 * (bars) and ".ast-close-svg" (X), both "fill: currentColor" so they already
 * pick up the site's real toggle color — and already hard-swaps them via
 * "display:none/block" on its own ".toggled" class, but that class is only
 * ever applied by Astra's core JS when the header's configured mobile type
 * is "dropdown" (this site's isn't), so it never fires and never animates.
 * This drives the same two existing icons off "fc-toggle-open" instead (the
 * class mobile-menu.js already keeps in sync with the panel's own open/close
 * state), crossfading + rotating between them — no extra icon, no color
 * override, just a transition Astra's version doesn't have.
 */
@media (max-width: 921px) {
	#ast-mobile-header .menu-toggle .mobile-menu-toggle-icon {
		position: relative;
	}

	#ast-mobile-header .menu-toggle .ast-mobile-svg {
		display: block !important;
		position: absolute;
		top: 0;
		left: 0;
		transition: transform 200ms cubic-bezier( 0.4, 0, 0.2, 1 ), opacity 150ms ease;
	}

	#ast-mobile-header .menu-toggle .ast-menu-svg {
		position: relative;
		opacity: 1;
		transform: rotate( 0deg ) scale( 1 );
	}

	#ast-mobile-header .menu-toggle .ast-close-svg {
		opacity: 0;
		transform: rotate( -45deg ) scale( 0.7 );
	}

	#ast-mobile-header .menu-toggle.fc-toggle-open .ast-menu-svg {
		opacity: 0;
		transform: rotate( 45deg ) scale( 0.7 );
	}

	#ast-mobile-header .menu-toggle.fc-toggle-open .ast-close-svg {
		opacity: 1;
		transform: rotate( 0deg ) scale( 1 );
	}

	@media ( prefers-reduced-motion: reduce ) {
		#ast-mobile-header .menu-toggle .ast-mobile-svg {
			transition-duration: 1ms;
		}
	}
}

.fc-mobile-nav {
	display: none;
}

@media (max-width: 921px) {
	.fc-mobile-nav {
		display: block;
	}

	.fc-mobile-nav-scrim {
		position: fixed;
		left: 0;
		right: 0;
		top: var( --fc-mobile-header-h, 60px );
		bottom: 0;
		background: rgba( 26, 31, 46, 0.35 );
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
		z-index: 9998;
	}

	.fc-mobile-nav.fc-open .fc-mobile-nav-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 0.3s ease, visibility 0s linear 0s;
	}

	.fc-mobile-nav-panel {
		position: fixed;
		left: 0;
		right: 0;
		top: var( --fc-mobile-header-h, 60px );
		max-height: calc( 100vh - var( --fc-mobile-header-h, 60px ) );
		/* 100vh is the toolbar-hidden height on iOS Safari, which pushes the
		   pinned footer (Tenant Login / Call / Email) behind the bottom
		   toolbar; dvh tracks the actually visible viewport. */
		max-height: calc( 100dvh - var( --fc-mobile-header-h, 60px ) );
		background: #fff;
		border-radius: 0 0 24px 24px;
		box-shadow: 0 20px 40px rgba( 0, 0, 0, 0.15 );
		transform: translateY( -10px );
		opacity: 0;
		visibility: hidden;
		transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.3s ease, visibility 0s linear 0.3s;
		z-index: 9999;
		display: flex;
		flex-direction: column;
		font-family: var( --font-body );
	}

	.fc-mobile-nav.fc-open .fc-mobile-nav-panel {
		transform: translateY( 0 );
		opacity: 1;
		visibility: visible;
		transition: transform 0.3s cubic-bezier( 0.16, 1, 0.3, 1 ), opacity 0.3s ease, visibility 0s linear 0s;
	}

	.fc-mobile-nav-scroll {
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 10px 22px 6px;
	}

	/* Toggled by mobile-menu.js while there's more list below the fold. */
	.fc-mobile-nav-scroll.fc-has-more {
		-webkit-mask-image: linear-gradient( to bottom, #000 calc( 100% - 48px ), transparent );
		mask-image: linear-gradient( to bottom, #000 calc( 100% - 48px ), transparent );
	}

	.fc-mobile-nav-list,
	.fc-mobile-nav-list ul.sub-menu,
	.fc-mobile-nav-list ul.sub-group-links {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.fc-mobile-nav-list > .menu-item {
		border-bottom: 1px solid #f0f0ee;
	}

	.fc-mobile-nav-list > .menu-item:last-child {
		border-bottom: none;
	}

	.fc-mobile-nav-list > .menu-item > a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-family: var( --font-body );
		font-size: 18px;
		font-weight: 600;
		color: var( --fc-slate-900 );
		padding: 16px 4px;
		text-decoration: none;
		border-radius: 10px;
		transition: background-color 120ms ease-out;
	}

	.fc-mobile-nav-list > .menu-item > a:active {
		background: var( --fc-green-pale );
	}

	.fc-mobile-nav-list > .menu-item.fc-current > a,
	.fc-mobile-nav-list > .menu-item.fc-current-ancestor > a {
		color: var( --fc-green-dark );
	}

	.fc-mobile-nav-list ul.sub-menu li.fc-current > a {
		color: var( --fc-green-dark );
		font-weight: 600;
	}

	.fc-mobile-nav-list > .menu-item.menu-item-has-children > a::after {
		content: "\f078";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		font-size: 11px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
		border-radius: 50%;
		background: #000;
		color: #fff;
		transition: transform 0.3s;
		flex: none;
		margin-left: 12px;
		position: relative;
		top: 2px;
	}

	.fc-mobile-nav-list > .menu-item.fc-expanded > a::after {
		transform: rotate( 180deg );
	}

	/* Accordion animates grid rows 0fr -> 1fr, i.e. to the submenu's real
	   height — no fixed max-height cap to clip a longer list, and no dead
	   time at the start of the close while max-height shrinks through the
	   unused space above the content. visibility keeps collapsed links out
	   of the tab order / accessibility tree, delayed on close so the links
	   stay visible while the panel shrinks. */
	.fc-mobile-nav-list .fc-sub-wrap {
		display: grid;
		grid-template-rows: 0fr;
		visibility: hidden;
		transition: grid-template-rows 0.4s cubic-bezier( 0.4, 0, 0.2, 1 ), visibility 0s linear 0.4s;
	}

	.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap {
		grid-template-rows: 1fr;
		visibility: visible;
		transition: grid-template-rows 0.4s cubic-bezier( 0.4, 0, 0.2, 1 ), visibility 0s linear 0s;
	}

	.fc-mobile-nav-list ul.sub-menu {
		min-height: 0;
		overflow: hidden;
	}

	/* Bottom breathing room lives inside the clipped box (padding on the ul
	   itself would keep 14px showing while collapsed). */
	.fc-mobile-nav-list ul.sub-menu::after {
		content: "";
		display: block;
		height: 14px;
	}

	/* Staggered entrance: each label / link drops 8px into place, 20ms
	   after the one above it (--fc-i set by mobile-menu.js), capped so the
	   last building doesn't lag noticeably behind the panel opening. Close
	   is a quick unstaggered fade. background/color keep their own 120ms
	   press-feedback transition with no delay. */
	.fc-mobile-nav-list .fc-sub-wrap .sub-group-label,
	.fc-mobile-nav-list .fc-sub-wrap li > a {
		opacity: 0;
		transform: translateY( -8px );
		transition: opacity 0.15s ease-out, transform 0.15s ease-out, background-color 120ms ease-out, color 120ms ease-out;
	}

	.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap .sub-group-label,
	.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap li > a {
		--fc-stagger: calc( 60ms + min( var( --fc-i, 0 ) * 20ms, 240ms ) );
		opacity: 1;
		transform: none;
		transition:
			opacity 0.3s ease-out var( --fc-stagger ),
			transform 0.35s cubic-bezier( 0.16, 1, 0.3, 1 ) var( --fc-stagger ),
			background-color 120ms ease-out,
			color 120ms ease-out;
	}

	@media ( prefers-reduced-motion: reduce ) {
		.fc-mobile-nav-list .fc-sub-wrap,
		.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap {
			transition: none;
		}

		.fc-mobile-nav-list .fc-sub-wrap .sub-group-label,
		.fc-mobile-nav-list .fc-sub-wrap li > a,
		.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap .sub-group-label,
		.fc-mobile-nav-list > .menu-item.fc-expanded > .fc-sub-wrap li > a {
			transform: none;
			transition: opacity 0.15s ease-out, background-color 120ms ease-out, color 120ms ease-out;
		}
	}

	.fc-mobile-nav-list ul.sub-menu li.sub-group {
		display: block;
	}

	.fc-mobile-nav-list ul.sub-menu .sub-group-label {
		display: block;
		font-family: var( --font-accent );
		font-size: 11px;
		font-weight: 600;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var( --fc-slate-500 );
		margin: 10px 0 4px;
		padding: 0 4px;
	}

	.fc-mobile-nav-list ul.sub-menu li.sub-group:first-child .sub-group-label {
		margin-top: 2px;
	}

	.fc-mobile-nav-list ul.sub-menu li a {
		display: block;
		font-family: var( --font-body );
		font-size: 15px;
		font-weight: 600;
		line-height: 1.3;
		color: var( --fc-slate-700 );
		text-decoration: none;
		/* Single column (scans top-to-bottom, long building names don't wrap). */
		padding: 7px 4px;
		border-radius: 6px;
		/* transition lives on the stagger rules above (it also carries the
		   entrance opacity/transform). */
	}

	.fc-mobile-nav-list ul.sub-menu li a:active {
		background: var( --fc-green-pale );
		color: var( --fc-green-dark );
	}

	/* Trailing "(Dog Friendly)" / "(Coming Soon)" from the menu title, split
	   out by fc_mobile_menu_label(). */
	.fc-mobile-nav-list .fc-nav-tag {
		display: inline-block;
		margin-left: 6px;
		padding: 2px 7px;
		border-radius: 999px;
		background: #f0f0ee;
		color: var( --fc-slate-500 );
		font-family: var( --font-accent );
		font-size: 11px;
		font-weight: 600;
		line-height: 1.4;
		letter-spacing: 0.02em;
		vertical-align: 1px;
		white-space: nowrap;
	}

	.fc-mobile-nav-footer {
		padding: 14px 22px 22px;
		border-top: 1px solid #f0f0ee;
		background: #fafaf8;
		border-radius: 0 0 24px 24px;
	}

	.fc-mobile-nav-tenant {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		background: var( --fc-heritage-purple );
		color: #fff !important;
		font-family: var( --font-body );
		font-size: 14.5px;
		font-weight: 600;
		padding: 13px;
		border-radius: var( --fc-radius-md );
		text-decoration: none;
		margin-bottom: 12px;
		transition: background-color 120ms ease-out, transform 120ms ease-out;
	}

	.fc-mobile-nav-tenant:active {
		background: var( --fc-heritage-purple-dark );
		transform: scale( 0.97 );
	}

	.fc-mobile-nav-pills {
		display: flex;
		gap: 8px;
	}

	.fc-mobile-nav-pills a {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-family: var( --font-accent );
		font-size: 15px;
		font-weight: 600;
		color: #000;
		text-decoration: none;
		background: #fff;
		border: 1px solid #e5e5e0;
		padding: 10px 8px;
		border-radius: 10px;
		transition: background-color 120ms ease-out, transform 120ms ease-out;
	}

	.fc-mobile-nav-pills a:active {
		background: var( --fc-green-pale );
		transform: scale( 0.97 );
	}

	.fc-mobile-nav-pills i {
		color: #000;
	}

	/* Press feedback stays a color change only for reduced-motion users; drop the scale. */
	@media ( prefers-reduced-motion: reduce ) {
		.fc-mobile-nav-tenant:active,
		.fc-mobile-nav-pills a:active {
			transform: none;
		}
	}
}