/*
 * PCL Mobile — targeted refinements layered after responsive.css.
 * Covers phones + small tablets; tablet/desktop tuning lives here too.
 */

/* ── Tablet / mobile nav (<=980px): anchor dropdown directly under the bar ── */
@media (max-width: 980px) {
	.pcl-nav-links {
		top: 100%;
	}
	/* Lower hero so its first element (gem) clears the fixed 84px nav with a
	 * comfortable gap — fixes the hero being clipped behind the nav bar. */
	.pcl-hero {
		padding-top: 108px !important;
	}
}

/* ── Small tablet (<=820px): tighten section density ── */
@media (max-width: 820px) {
	.pcl-section { padding: var(--pcl-section-y-tight) 0; }
	.pcl-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
}

/* ── Phones (<=640px) ── */
@media (max-width: 640px) {
	/* Hero — comfortable, non-clipping headline + readable lede */
	.pcl-hero h1 {
		font-size: clamp(1.9rem, 8vw, 2.6rem) !important;
		line-height: 1.12 !important;
		margin: 22px 0 18px !important;
	}
	.pcl-hero p.has-text-color {
		font-size: 1rem !important;
		line-height: 1.7 !important;
		max-width: none;
	}
	.pcl-hero-ctas .wp-block-button__link {
		font-size: .8rem !important;
		padding: 13px 22px !important;
	}

	/* Footer registration — left-aligned + legible */
	.pcl-footer-reg,
	.pcl-f-reg {
		text-align: left;
		font-size: .75rem;
		line-height: 1.7;
	}

	/* Calculator — full-width steppers */
	.pcl-calc-panel .pcl-stepper {
		width: 100%;
	}

	/* Generic full-width tap targets on mobile */
	.pcl-btn,
	.wp-block-button__link,
	.pcl-whatsapp-float {
		min-height: 46px;
	}
}

/* ── Small phones (<=544px) ── */
@media (max-width: 544px) {
	.pcl-hero h1 {
		font-size: clamp(1.75rem, 8.5vw, 2.3rem) !important;
	}
}