/* AB Locksmiths — mobile-first cleanup overrides
 * Loaded after inline page styles so these rules win.
 * !important used deliberately to override the per-page inline styles.
 *
 * Breakpoints:
 *   <= 768px  — phones + small tablets (most rules)
 *   <= 600px  — phones (stack everything, full-width buttons)
 *   <= 430px  — large iPhone (15 Pro Max, etc.)
 *   <= 390px  — standard iPhone
 */

/* ── 1. Section padding — universal tighten ─────────────────────────────── */
@media (max-width: 768px) {
  section { padding: 44px 0 !important; }
}
@media (max-width: 430px) {
  section { padding: 40px 0 !important; }
}

/* ── 2. Container — give content a bit more breathing room ─────────────── */
@media (max-width: 600px) {
  .container { padding: 0 18px !important; }
}

/* ── 3. Hero ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hero {
    /* 80px top = ~56px fixed-nav height + 24px breathing (≈ 44px visible) */
    padding: 80px 0 36px !important;
    text-align: center;
  }
  .hero h1 {
    font-size: clamp(28px, 7.5vw, 40px) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px !important;
  }
  .hero p.lead, .hero .lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 22px !important;
    max-width: none !important;
  }
  .hero-eyebrow {
    font-size: 11px !important;
    padding: 6px 12px !important;
    margin-bottom: 16px !important;
    letter-spacing: 0.06em !important;
  }
  .hero-ctas {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100%;
  }
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary,
  .hero-ctas a, .hero-ctas button {
    width: 100% !important;
    justify-content: center !important;
    padding: 15px 22px !important;
    font-size: 16px !important;
    box-sizing: border-box;
  }
  .hero-trust {
    margin-top: 24px !important;
    gap: 14px 18px !important;
    justify-content: center !important;
    font-size: 12px !important;
  }
  .hero-visual { margin-top: 28px; }
  .hero-badge { display: none !important; }
  /* Trim hero lead to short version on mobile (extra wrapped in .lead-extra) */
  .lead-extra { display: none !important; }
  .hero-stats { gap: 12px !important; flex-wrap: wrap; }
  .hero-stat { font-size: 14px !important; }
}

/* Hide hero image on very small phones to keep CTAs above the fold */
@media (max-width: 480px) {
  .hero-visual, .hero-img { display: none !important; }
}

/* ── 4. Section headings ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title {
    font-size: clamp(24px, 6vw, 32px) !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  .section-lead {
    font-size: 16px !important;
    line-height: 1.55 !important;
    margin-bottom: 32px !important;
    max-width: none !important;
  }
  /* Generic paragraphs in body sections */
  section p:not(.lead):not(.section-lead):not([class]) {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .section-eyebrow, .eyebrow {
    font-size: 11px !important;
    margin-bottom: 8px !important;
    letter-spacing: 0.08em !important;
  }
}

/* ── 5. Grids — single column on mobile ────────────────────────────────── */
@media (max-width: 768px) {
  .services-grid,
  .why-grid,
  .testimonials-grid,
  .industries-grid,
  .process-grid,
  .what-grid,
  .when-grid,
  .trust-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
  .gallery-grid,
  .suburbs-grid {
    grid-template-columns: 1fr 1fr !important;   /* still useful as 2-col on phone */
    gap: 10px !important;
  }
  .testimonial,
  .service-card,
  .industry-card,
  .trust-card,
  .what-item,
  .when-item {
    padding: 22px !important;
  }
  .service-icon {
    width: 44px !important;
    height: 44px !important;
    margin-bottom: 12px !important;
  }
  .service-card h3,
  .industry-card h3 {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }
  .service-desc,
  .industry-card p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }
  .why-item .num,
  .step .num {
    font-size: 36px !important;
  }
  .why-item h4 { font-size: 16px !important; }
  .why-item p, .step p { font-size: 14px !important; }
  .suburb-chip { padding: 12px 14px !important; font-size: 13px !important; }
}

/* ── 6. About section ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .about-inner { gap: 28px !important; }
  .about-stats { gap: 12px !important; padding-top: 24px !important; margin-top: 24px !important; }
  .about-stats .stat .num { font-size: 28px !important; }
  .about-stats .stat .label { font-size: 11px !important; }
  .about-text p { font-size: 15px !important; }
}

/* ── 7. Contact section ────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .contact-inner { gap: 28px !important; }
  .contact-form { padding: 24px !important; border-radius: 14px !important; }
  .contact-form h3 { font-size: 19px !important; }
  .field input, .field select, .field textarea { font-size: 16px !important; }  /* prevents iOS zoom on focus */
  .contact-methods { gap: 12px !important; margin-top: 22px !important; }
  .contact-method { padding: 16px !important; }
  .contact-method-info .value { font-size: 16px !important; }
}

/* ── 8. Footer ─────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  footer { padding: 32px 0 24px !important; }
  .footer-inner { gap: 24px !important; margin-bottom: 24px !important; }
  .footer-brand img { height: 50px !important; }
  .footer-bottom { flex-direction: column !important; gap: 12px !important; text-align: center; }
  .footer-socials { justify-content: center; }
}

/* ── 9. Real-estate portal mockup — keep readable on mobile ────────────── */
@media (max-width: 768px) {
  .portal-mockup { padding: 18px !important; border-radius: 12px !important; }
  .portal-mockup-head { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
  .portal-mockup-head .agency strong { font-size: 14px !important; }
  .status-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px 0 !important;
    font-size: 13px !important;
  }
  .status-row .badge {
    justify-self: start !important;
    font-size: 11px !important;
    padding: 3px 9px !important;
  }
  .checklist-card { padding: 22px !important; border-radius: 12px !important; }
  .checklist-card li { font-size: 14px !important; padding: 8px 0 !important; }
  .checklist-card h3 { font-size: 15px !important; }
}

/* ── 10. Sticky call button — keep it on emergency page only ───────────── */
.sticky-call { display: none !important; }
body[data-emergency] .sticky-call,
body.emergency-page .sticky-call,
html[data-page="emergency"] .sticky-call {
  display: inline-flex !important;
}
@media (min-width: 769px) {
  body[data-emergency] .sticky-call,
  body.emergency-page .sticky-call,
  html[data-page="emergency"] .sticky-call {
    display: none !important;
  }
}
/* Reset body padding from the sticky-call rule when we're hiding it */
body:not([data-emergency]):not(.emergency-page) { padding-bottom: 0 !important; }

/* ── 11. Nav — keep it simple on mobile ────────────────────────────────── */
@media (max-width: 768px) {
  .nav-inner { padding: 12px 18px !important; }
  .nav-logo { font-size: 16px !important; }
  .nav-logo img { height: 32px !important; }
  /* Nav CTA on mobile — compact phone button */
  .nav-cta, .nav-call {
    padding: 10px 16px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #0a0a0c !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3) !important;
  }
}
@media (max-width: 430px) {
  /* Shorter label below 430px so it doesn't wrap.
     The whole button stays a strong, dark-on-yellow pill with a soft glow. */
  .nav-cta, .nav-call {
    font-size: 0 !important;       /* hide the phone number text */
    padding: 11px 18px !important;
    min-height: 42px;
    box-shadow: 0 6px 16px rgba(255, 215, 0, 0.35) !important;
    line-height: 1 !important;
  }
  .nav-cta::after, .nav-call::after {
    content: "📞 Call" !important;
    display: inline-block;
    font-size: 14px !important;
    font-weight: 900 !important;
    color: #0a0a0c !important;
    letter-spacing: 0.01em;
    line-height: 1 !important;
  }
  /* If there's an SVG inside (emergency.html does), keep it */
  .nav-call svg { display: inline-block !important; }
}

/* ── 12. Emergency page — specifics ────────────────────────────────────── */
@media (max-width: 768px) {
  .big-call { font-size: 22px !important; padding: 18px 22px !important; width: 100%; box-sizing: border-box; justify-content: center; }
  .emergency-badge { font-size: 11px !important; padding: 6px 12px !important; }
  .trust-strip { padding: 16px !important; gap: 12px !important; flex-wrap: wrap; justify-content: center; }
  .or-line { margin: 14px 0 !important; font-size: 12px !important; }
  .whatsapp-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 14px 22px !important;
    box-sizing: border-box;
    font-size: 16px !important;
  }
  .final-cta .big-call { font-size: 20px !important; }
}

/* ── 13. Real estate / commercial CTAs ─────────────────────────────────── */
@media (max-width: 600px) {
  .cta-ctas { flex-direction: column !important; gap: 10px !important; width: 100%; }
  .cta-ctas a, .cta-ctas button { width: 100% !important; justify-content: center !important; box-sizing: border-box; }
}

/* ── 14. Generic CTAs — ensure tap targets are 48px+ tall ──────────────── */
@media (max-width: 600px) {
  a.btn-primary, a.btn-secondary,
  button.btn-primary, button.btn-secondary,
  .cta a, .cta button {
    min-height: 48px;
  }
}

/* ── 15. Tables that might appear in pages — make horizontally scroll on mobile ── */
@media (max-width: 600px) {
  table { display: block !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
}

/* ── 16. Mobile menu (hamburger + drawer) ──────────────────────────────── */
.m-hamburger { display: none; }
.m-drawer, .m-backdrop { display: none; }

@media (max-width: 768px) {
  .m-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
  }
  .m-hamburger:hover { border-color: rgba(255, 215, 0, 0.4); }
  .m-hamburger span {
    display: block;
    width: 18px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s;
  }
  .m-hamburger.open {
    border-color: rgba(255, 215, 0, 0.4);
    background: rgba(255, 215, 0, 0.08);
  }
  .m-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .m-hamburger.open span:nth-child(2) { opacity: 0; }
  .m-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Backdrop */
  .m-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 89;
  }
  .m-backdrop.open { opacity: 1; pointer-events: auto; }

  /* Drawer */
  .m-drawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    padding: 76px 22px 28px;
    background: rgba(15, 15, 18, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 215, 0, 0.12);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
    transform: translateY(-110%);
    transition: transform 0.3s ease;
    z-index: 90;
  }
  .m-drawer.open { transform: translateY(0); }
  .m-drawer a {
    color: #f5f5f7 !important;
    padding: 16px 4px;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
  }
  .m-drawer a:last-of-type { border-bottom: none; }
  .m-drawer a.m-drawer-call {
    margin-top: 16px;
    background: #ffd700;
    color: #121214 !important;
    padding: 16px;
    text-align: center;
    border-radius: 10px;
    border: none;
    font-weight: 800;
    font-size: 16px;
  }

  /* Lock body scroll when drawer open */
  body.m-menu-open { overflow: hidden; }
}