/* ================================================================
   Sell My Car Online — mobile.css
   Responsive overrides. Loaded after global.css, before responsive.css.
   ================================================================ */


/* ----------------------------------------------------------------
   TABLET BREAKPOINT (≤ 1024px)
   ---------------------------------------------------------------- */
@media (max-width: 1024px) {

	:root {
		--header-height: 72px;
		--header-height-scrolled: 64px;
		--container-pad: 20px;
	}

	/* Hide desktop nav and CTA — show hamburger */
	.nav-primary,
	.header-actions {
		display: none;
	}

	.nav-toggle {
		display: flex;
	}

	/* Section padding scales down */
	.section { padding: var(--sp-16) 0; }
	.section--hero { padding: var(--sp-12) 0 var(--sp-10); }

	/* Footer columns stack */
	.footer-top {
		grid-template-columns: 1fr;
		gap: var(--sp-8);
		padding-bottom: var(--sp-8);
	}
}


/* ----------------------------------------------------------------
   MOBILE BREAKPOINT (≤ 640px)
   ---------------------------------------------------------------- */
@media (max-width: 640px) {

	:root {
		--container-pad: 16px;
	}

	/* Push footer up so sticky CTA bar doesn't cover content */
	body { padding-bottom: 76px; }

	/* Show mobile sticky CTA bar */
	.mobile-cta-bar { display: flex; }

	/* Hide desktop floating CTA on mobile — sticky bar serves the same role */
	.floating-cta { display: none; }

	/* Type scales down */
	.hero-title  { font-size: var(--fs-4xl); }
	.page-title  { font-size: var(--fs-3xl); }
	.error-title { font-size: var(--fs-2xl); }

	/* Buttons full-width on mobile when in stacked groups */
	.hero-ctas .btn,
	.error-ctas .btn {
		width: 100%;
	}
	.hero-ctas, .error-ctas { width: 100%; max-width: 360px; margin-inline: auto; }

	/* Footer columns split */
	.footer-cols { grid-template-columns: 1fr; gap: var(--sp-6); }

	/* Footer bottom stacks */
	.footer-bottom {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-legal { flex-wrap: wrap; }

	/* Mobile menu link size — tighter on small screens */
	.nav-mobile-menu a {
		padding: var(--sp-5) 0;
		font-size: var(--fs-lg);
	}

	/* Logo scales down */
	.site-logo .custom-logo { height: 28px; }
	.site-logo--text { font-size: 1.15rem; }
}


/* ----------------------------------------------------------------
   SMALL MOBILE (≤ 380px)
   ---------------------------------------------------------------- */
@media (max-width: 380px) {

	.mobile-cta-bar-btn {
		font-size: var(--fs-xs);
		padding: 12px 8px;
	}
	.mobile-cta-bar-btn .icon { width: 16px; height: 16px; }

	.btn { padding: 14px 22px; font-size: var(--fs-base); }
}