/*
 * Responsive — mobile-first adjustments. Kept last in the cascade so its
 * media-query overrides win. Breakpoints: 1024 (tablet), 768 (mobile).
 */

@media (max-width: 1024px) {
	.fd-srp { grid-template-columns: 1fr; }
	.fd-srp__rail { position: static; }
	.fd-vdp { grid-template-columns: 1fr; }
	.fd-vdp__rail { position: static; }
	.fd-footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
	/* Collapse desktop nav → hamburger + off-canvas drawer (assets/js/fdmrv.js). */
	.fd-nav { display: none; }
	.fd-hamburger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 44px; height: 44px;
		background: none; border: 0; cursor: pointer; color: var(--fd-navy-800);
	}
	.fd-utility { display: none; } /* utility row hides on mobile */
	.fd-main-header__inner { min-height: var(--fd-main-h-mobile); }

	.fd-footer__top { grid-template-columns: 1fr; }
	.fd-footer__bottom { flex-direction: column; align-items: flex-start; }

	/* Sticky mobile CTA on the VDP. */
	.fd-sticky-cta { display: flex; }
	.single-vehicle .fd-main { padding-bottom: 5rem; } /* clear the sticky bar */
}

/* Off-canvas mobile drawer + scrim (toggled by JS via [data-open]). */
.fd-mobile-nav {
	position: fixed;
	inset: 0 0 0 auto;
	width: min(88vw, 360px);
	z-index: var(--z-mobile-nav);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform var(--fd-transition-slow), visibility var(--fd-transition-slow);
	background: var(--fd-navy-900);
	color: var(--fd-mist);
	padding: 1.5rem;
	overflow-y: auto;
}
.fd-mobile-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
.fd-scrim {
	position: fixed; inset: 0;
	z-index: var(--z-overlay-scrim);
	background: rgba(12,26,48,0.5);
	opacity: 0; visibility: hidden;
	transition: opacity var(--fd-transition);
}
.fd-scrim[data-open="true"] { opacity: 1; visibility: visible; }

/* Drawer nav: uppercase links + expandable Boats/RVs groups (native <details>). */
.fd-mobile-nav nav { display: grid; margin-block: 0.5rem 1rem; }
.fd-mobile-nav nav > a,
.fd-mnav__group summary {
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.8rem 0.25rem; min-height: 44px;
	color: var(--fd-mist); text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase; letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--lg);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.fd-mobile-nav nav > a:hover, .fd-mnav__group summary:hover { color: var(--fd-orange-400); }
.fd-mnav__group summary { cursor: pointer; list-style: none; }
.fd-mnav__group summary::-webkit-details-marker { display: none; }
.fd-mnav__group summary::after {
	content: ""; width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; flex: none;
	border-right: 2px solid var(--fd-orange-400); border-bottom: 2px solid var(--fd-orange-400);
	transform: rotate(45deg); transition: transform var(--fd-transition);
}
.fd-mnav__group[open] summary::after { transform: rotate(-135deg); }
.fd-mnav__sub { display: grid; padding: 0.25rem 0 0.6rem 1rem; }
.fd-mnav__sub a {
	display: flex; align-items: center; min-height: 40px; padding: 0.5rem 0.25rem;
	color: var(--fd-steel-200); text-decoration: none;
	font-size: var(--wp--preset--font-size--base);
}
.fd-mnav__sub a:hover { color: var(--fd-orange-400); }