/* ==========================================================================
   locksmithil — mobile-specific styles
   Mobile is the primary breakpoint (most traffic). This file holds
   mobile-only components and tap-target adjustments that don't belong
   in the global design system.
   ========================================================================== */

/* Sticky bottom CTA bar — visible on mobile only, always tappable */
.sticky-mobile-cta {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--z-sticky);
	display: none;
	gap: var(--space-2);
	padding: 10px;
	background: var(--bg-secondary);
	border-top: 1px solid var(--border);
	box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.45);
	padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.sticky-mobile-cta .btn {
	flex: 1;
	min-height: 52px;
	font-size: 16px;
	padding: 0 12px;
}

.sticky-mobile-cta .btn-gold { color: #000000; }
.sticky-mobile-cta .btn-wa   { color: #ffffff; }

/* Hide joinchat floating bubble — inline <style> loads after our CSS,
   !important ensures we always win regardless of source order */
.joinchat { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.joinchat__button { display: none !important; }

/* Hamburger toggle (mobile only) */
.mobile-menu-toggle {
	display: none;
	width: var(--tap-min);
	height: var(--tap-min);
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	flex-direction: column;
}

/* Override Elementor kit button styles (.elementor-kit-69 button = 0,1,1).
   Use .site-header scope to reach 0,2,0 and !important as fallback. */
.site-header .mobile-menu-toggle,
.site-header button.mobile-menu-toggle {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	border-radius: var(--radius-sm) !important;
	min-height: 0 !important;
}

.mobile-menu-toggle:focus-visible {
	background: var(--bg-card) !important;
}

.mobile-menu-toggle .bar {
	display: block;
	width: 24px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
	margin: 5px 0;
	transition: transform var(--t-base), opacity var(--t-base);
}

/* Mobile nav drawer */
.mobile-nav {
	position: fixed;
	inset: 0;
	z-index: var(--z-overlay);
	background: var(--bg-primary);
	display: none;
	flex-direction: column;
	padding: var(--space-7) var(--space-5) var(--space-5);
}

.mobile-nav.is-open { display: flex; }

.mobile-nav a {
	display: block;
	padding: var(--space-3) 0;
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 500;
	border-bottom: 1px solid var(--border);
}

/* ---------- MOBILE BREAKPOINT (max 767px) ---------- */
@media (max-width: 767px) {
	/* Show mobile-only components */
	.sticky-mobile-cta  { display: flex; }
	.mobile-menu-toggle { display: inline-flex; }

	/* Reserve space for sticky CTA bar */
	body { padding-bottom: 84px; }

	/* Tap-target minimums */
	a, button, .btn {
		min-height: var(--tap-min);
	}

	/* Slightly larger body text on mobile (legibility) */
	body { font-size: 16px; }

	/* Full-width CTAs by default on mobile */
	.btn-cta-mobile {
		width: 100%;
		min-height: var(--cta-height);
	}

	/* Section padding tightens on mobile */
	.section {
		padding-block: clamp(48px, 12vw, 72px);
	}

	/* Hero responsive: ensure h1 stays readable */
	.hero h1 {
		font-size: clamp(28px, 8.5vw, 40px);
	}
}

/* Very small phones (<360px) */
@media (max-width: 359px) {
	:root {
		--container-px: 16px;
	}
	.btn { font-size: 16px; padding: 0 16px; }
}