/* ===================================================================
 * VPH MOBILE — all @media breakpoint rules.
 * Breakpoints: <=480 (small phone), 481-767 (phablet),
 * 768-1024 (tablet), <=768 (mobile emergency pill).
 * ================================================================ */

/* Header mobile breakpoint (Avanam hamburger kicks in at <=1024) */
@media (max-width: 1024px) {
	.site-main-header-inner-wrap {
		min-height: 96px;
	}
	.vph-image-logo img,
	.custom-logo {
		max-height: 80px !important;
	}
	/* Hide top contact bar on tablet/mobile — the sticky bottom
	   emergency CTA already exposes the phone number. */
	.site-top-header-wrap {
		display: none !important;
	}
}

/* "Our Best Services" mobile stack */
@media (max-width: 767px) {
	.home .elementor-element-6291fbe .elementor-widget-wrap,
	.home-page .elementor-element-6291fbe .elementor-widget-wrap {
		flex-wrap: wrap !important;
	}
	.home .elementor-element-6291fbe .elementor-widget-image-box,
	.home-page .elementor-element-6291fbe .elementor-widget-image-box {
		flex: 1 1 100% !important;
		margin: 0 0 20px 0 !important;
	}
}

/* ===================================================================
 * MOBILE OPTIMIZATION BLOCK
 * ================================================================ */

/* --- Phone + phablet baseline (<=767px) --- */
@media (max-width: 767px) {
	/* iOS HIG tap targets + legible body */
	body {
		font-size: 16px;
		-webkit-text-size-adjust: 100%;
	}
	/* Stop any rogue horizontal scroll at the root */
	html, body {
		overflow-x: hidden !important;
	}

	/* --- Home-page mobile polish --- */
	/* Consistent heading scale across all home demo sections */
	.home .elementor-element-3aafd21 .elementor-heading-title {
		font-size: 30px !important;
		line-height: 1.2 !important;
	}
	.home .elementor-element-cad7aeb .elementor-heading-title,
	.home .elementor-element-6291fbe .elementor-heading-title,
	.home .elementor-element-38cc643 .elementor-heading-title {
		font-size: 24px !important;
		line-height: 1.25 !important;
	}
	.home .elementor-element-cad7aeb .elementor-icon-box-title,
	.home .elementor-element-6291fbe .elementor-image-box-title,
	.home .elementor-element-38cc643 .elementor-icon-box-title {
		font-size: 18px !important;
		line-height: 1.3 !important;
	}
	/* Consistent section padding rhythm */
	.home .elementor-element-cad7aeb,
	.home .elementor-element-6291fbe,
	.home .elementor-element-38cc643,
	.home .elementor-element-0af5ab7 {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
	/* 44px tap targets + iOS-safe input font size */
	.home input, .home select, .home textarea,
	.home .elementor-button,
	.home .vph-btn {
		min-height: 48px !important;
		font-size: 16px !important; /* prevents iOS zoom-on-focus */
	}
	.home .elementor-button,
	.home .vph-btn {
		padding: 14px 24px !important;
	}
	/* ready-to-help: stack the 2 photos vertically on mobile */
	.home .elementor-element-38cc643 .elementor-widget-image {
		flex: 1 1 100% !important;
		max-width: 100% !important;
	}
	/* stats row: stack the 3 counters on mobile */
	.home .elementor-element-0af5ab7 .elementor-container {
		flex-direction: column !important;
		gap: 16px !important;
	}
	/* Min 44x44 on all Elementor buttons + icon-box links */
	.home a.elementor-button,
	.home .elementor-button-link,
	.home .elementor-icon-box-icon a.elementor-icon,
	.entry-content a.elementor-button {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
	}
	/* iOS auto-zoom avoidance on form inputs */
	input[type="text"], input[type="email"], input[type="tel"],
	input[type="url"], textarea, select {
		font-size: 16px !important;
	}

	/* ---- Why Choose Us (cad7aeb) mobile stack ---- */
	.home .elementor-element-cad7aeb .elementor-container {
		flex-direction: column !important;
	}
	.home .elementor-element-cad7aeb .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 100% !important;
		margin-bottom: 20px !important;
	}
	.home .elementor-element-cad7aeb .elementor-widget-icon-box .elementor-icon-box-wrapper {
		padding: 36px 24px 30px !important;
	}

	/* ---- Our Best Services (6291fbe) mobile stack ---- */
	.home .elementor-element-6291fbe .elementor-container {
		flex-direction: column !important;
	}
	.home .elementor-element-6291fbe .elementor-container > .elementor-column {
		width: 100% !important;
		margin-bottom: 24px !important;
	}

	/* ---- We Are Always Ready (38cc643) mobile stack ---- */
	.home .elementor-element-38cc643 {
		padding: 48px 20px !important;
	}
	.home .elementor-element-38cc643 .elementor-container {
		flex-direction: column !important;
	}
	.home .elementor-element-38cc643 .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* ABOUT US button: full-width minus container padding */
	.home .elementor-element-3f458fc {
		width: 100% !important;
		text-align: center !important;
	}
	.home .elementor-element-3f458fc .elementor-button {
		display: inline-flex !important;
		min-width: 220px;
		padding: 14px 32px !important;
	}

	/* ---- Counters (0af5ab7) mobile stack + tighten ---- */
	.home .elementor-element-0af5ab7 {
		padding: 40px 16px !important;
	}
	.home .elementor-element-0af5ab7 .elementor-container {
		flex-direction: column !important;
		gap: 24px;
	}
	.home .elementor-element-0af5ab7 .elementor-container > .elementor-column {
		width: 100% !important;
	}
	/* Scale down counter circles slightly for mobile */
	.home .elementor-element-0af5ab7 .elementor-counter-number-wrapper,
	.home .elementor-element-0af5ab7 .elementor-counter-number {
		font-size: 36px !important;
	}

	/* ---- Hero (first section) padding + H1 scale ---- */
	.home .elementor-element-3aafd21 {
		padding: 60px 0 !important;
	}
	.home .elementor-element-3aafd21 h1,
	.home .elementor-element-3aafd21 .elementor-heading-title {
		font-size: 34px !important;
		line-height: 1.15 !important;
	}

	/* ---- Tighten home section vertical padding ---- */
	.home .elementor-section.elementor-top-section {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}

	/* ---- Home location/content-page grids with inline minmax ---- */
	.entry-content [style*="minmax(280px"],
	.entry-content [style*="minmax(220px"],
	.entry-content [style*="minmax(230px"],
	.entry-content [style*="minmax(180px"] {
		grid-template-columns: 1fr !important;
		gap: 16px !important;
	}

	/* ---- VPH new home sections — mobile stacking ---- */
	.vph-section {
		padding: 64px 0 !important;
	}
	.vph-section-head {
		margin-bottom: 32px;
	}
	.vph-section-head h2 {
		font-size: 28px !important;
	}
	.vph-quick-quote-card {
		grid-template-columns: 1fr !important;
		padding: 30px 22px !important;
		gap: 24px !important;
	}
	.vph-quick-quote-intro h2 {
		font-size: 24px !important;
	}
	.vph-reviews-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
	.vph-local-grid {
		grid-template-columns: 1fr !important;
		gap: 24px !important;
	}
	.vph-local-cities {
		grid-template-columns: 1fr !important;
	}
	.vph-local-map iframe {
		height: 280px !important;
	}
	.vph-process-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
	.vph-offers-grid {
		grid-template-columns: 1fr !important;
		gap: 18px !important;
	}
	.vph-projects-grid {
		grid-template-columns: 1fr !important;
		gap: 20px !important;
	}
	.vph-project-card img {
		height: 220px !important;
	}
	.vph-final-cta-section {
		padding: 64px 0 !important;
	}
	.vph-final-cta-section h2 {
		font-size: 28px !important;
	}
	.vph-final-cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.vph-btn {
		padding: 16px 24px !important;
	}
	/* Home / service mobile card padding parity */
	.vph-reviews-card,
	.vph-local-card,
	.vph-process-step,
	.vph-offer-card,
	.vph-faq-item,
	.vph-final-cta-card {
		padding: var(--vph-space-card-mobile) !important;
	}
}

/* --- Tablet portrait (768px - 1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
	/* Why Choose Us: 2 cards per row instead of 4 */
	.home .elementor-element-cad7aeb .elementor-container {
		flex-wrap: wrap !important;
	}
	.home .elementor-element-cad7aeb .elementor-container > .elementor-column {
		width: 50% !important;
		max-width: 50% !important;
		flex: 0 0 50% !important;
		margin-bottom: 24px;
	}
	/* Our Best Services: 2 cards per row */
	.home .elementor-element-6291fbe .elementor-widget-image-box {
		flex: 0 0 48% !important;
		max-width: 48% !important;
	}
	.home .elementor-element-6291fbe .elementor-widget-wrap {
		flex-wrap: wrap !important;
		gap: 24px;
	}
	/* Counters: stack to single column */
	.home .elementor-element-0af5ab7 .elementor-container {
		flex-direction: column !important;
		gap: 20px;
		padding: 40px 40px !important;
	}
	.home .elementor-element-0af5ab7 .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* We Are Always Ready: stack photos above content */
	.home .elementor-element-38cc643 .elementor-container {
		flex-direction: column !important;
	}
	.home .elementor-element-38cc643 .elementor-container > .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
	/* VPH new sections — tablet 2-col layouts */
	.vph-reviews-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.vph-process-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.vph-offers-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.vph-projects-grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.vph-quick-quote-card {
		padding: 36px !important;
	}
}

/* --- Small phone tweaks (<=480px) --- */
@media (max-width: 480px) {
	.home .elementor-element-3aafd21 h1,
	.home .elementor-element-3aafd21 .elementor-heading-title {
		font-size: 28px !important;
	}
	.home .elementor-element-cad7aeb .elementor-icon-box-title {
		font-size: 18px !important;
	}
	/* Footer: kill the huge gaps in single-column layout */
	.site-footer .site-middle-footer-wrap .site-footer-row-columns-4 > * {
		margin-bottom: 24px !important;
	}
}

/* ===================================================================
 * SERVICE PAGE — mobile breakpoints
 * ================================================================ */
@media (max-width: 767px) {
	.vph-svc-hero {
		min-height: 0;
		padding: 72px 20px;
	}
	.vph-svc-hero-inner h1 {
		font-size: 30px;
		line-height: 1.18;
	}
	.vph-svc-hero-sub {
		font-size: 16px;
	}
	.vph-svc-hero-ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	.vph-svc-hero-ctas .vph-btn {
		width: 100%;
		text-align: center;
	}
	.vph-svc-hero-trust {
		gap: 14px;
		font-size: 13px;
		flex-direction: column;
		align-items: center;
	}

	.vph-svc-ps-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.vph-svc-ps-problem h2 {
		font-size: 26px;
	}

	.vph-svc-features-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}
	.vph-svc-feature-card {
		padding: 24px 22px;
	}

	.vph-svc-why-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.vph-svc-reviews-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vph-svc-process-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.vph-svc-area-grid {
		grid-template-columns: 1fr 1fr;
		gap: 10px;
	}
	.vph-svc-city-link {
		padding: 12px 14px;
		font-size: 14px;
	}

	.vph-svc-pricing-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	.vph-svc-faq-item summary {
		font-size: 16px;
		padding: 18px 22px;
		padding-right: 44px;
	}
	.vph-svc-faq-answer {
		padding: 4px 22px 20px;
	}

	.vph-svc-final-cta-section {
		padding: 56px 20px !important;
	}
	.vph-svc-final-cta-inner h2 {
		font-size: 28px;
	}
	.vph-svc-final-cta-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.vph-svc-final-cta-buttons .vph-btn {
		width: 100%;
		text-align: center;
	}
}

/* Tablet portrait — service pages */
@media (min-width: 768px) and (max-width: 1024px) {
	.vph-svc-features-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.vph-svc-reviews-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.vph-svc-process-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.vph-svc-pricing-grid {
		grid-template-columns: 1fr;
		max-width: 520px;
	}
	.vph-svc-area-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Small phones — service pages */
@media (max-width: 480px) {
	.vph-svc-hero-inner h1 {
		font-size: 26px;
	}
	.vph-svc-hero {
		padding: 56px 18px;
	}
	.vph-svc-area-grid {
		grid-template-columns: 1fr;
	}
}

/* ===================================================================
 * EMERGENCY PILL — mobile-specific rules
 * ================================================================ */
@media (prefers-reduced-motion: reduce) {
	.header-contact-wrap .header-contact-item:nth-child(4) {
		animation: none;
	}
	.vph-emergency-sticky {
		animation: none !important;
	}
}

@media (max-width: 768px) {
	/* Hide the header emergency item on mobile — sticky replaces it */
	.header-contact-wrap .header-contact-item:nth-child(4) {
		display: none !important;
	}

	.vph-emergency-sticky {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		position: fixed;
		right: 14px;
		bottom: 14px;
		z-index: 9999;
		background: #d32f2f;
		color: #fff !important;
		text-decoration: none !important;
		font-weight: 700;
		font-size: 15px;
		padding: 12px 18px;
		border-radius: 999px;
		box-shadow: 0 6px 20px rgba(0,0,0,0.25), 0 0 0 0 rgba(211, 47, 47, 0.55);
		animation: vph-pulse 2.2s ease-in-out infinite;
		font-family: var(--vph-font-family, sans-serif);
	}
	.vph-emergency-sticky:hover,
	.vph-emergency-sticky:focus {
		background: #b71c1c;
		color: #fff !important;
	}
	.vph-emergency-sticky-icon {
		font-size: 16px;
		line-height: 1;
	}
	/* Add padding so the sticky pill never overlaps final content */
	body {
		padding-bottom: 72px;
	}
}

@media (max-width: 380px) {
	.vph-emergency-sticky-label {
		display: none;
	}
	.vph-emergency-sticky {
		padding: 14px;
	}
}