/* ==========================================================================
   AP Pro Appliance Service — MOBILE-SPECIFIC STYLES
   All hand-authored responsive overrides live in this file, separate from
   assets/css/style.css. Tailwind's own responsive utility classes (sm:/md:/
   lg:/xl: prefixes used inline in the HTML) still apply everywhere; the
   rules below fine-tune the custom component classes (buttons, cards, page
   hero, swiper, forms, mobile nav, sticky call bar, etc.) for touch screens.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Tablet & below (<= 1279px) — mega menu is off, sticky call bar is on
--------------------------------------------------------------------- */
@media (max-width: 1279px) {
  .mobile-call-bar { display: grid; }
  body { padding-bottom: 5.5rem; }

  #back-to-top { bottom: 5.5rem; }

  .section-pad { padding-top: 4rem; padding-bottom: 4rem; }

  /* Sticky call bar — floats clear of the screen edges (rounded pill,
     side + bottom margin) with a raised circular Home button centered
     on its top edge; the two buttons read as one merged strip with a
     soft seam between them instead of a hard divider line. */
  .mobile-call-btn { transition: background-color 0.2s ease, transform 0.15s ease; }
  .mobile-call-btn:active { transform: scale(0.96); }
  .mobile-call-btn:first-child { box-shadow: inset -3px 0 10px -4px rgba(0,0,0,0.25); }
  .mobile-home-btn { transition: transform 0.15s ease, background-color 0.2s ease; }
  .mobile-home-btn:active { transform: translateX(-50%) scale(0.92); }
}

/* ---------------------------------------------------------------------
   Small laptops / large tablets (<= 1023px)
--------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  .page-hero { padding-top: 3rem; padding-bottom: 3rem; }

  .swiper-nav-btn { width: 2.35rem; height: 2.35rem; font-size: 0.85rem; }

  .section-title h2 { font-size: 1.9rem !important; }

  .icon-box { width: 2.9rem; height: 2.9rem; font-size: 1.15rem; }

  /* Diagonal hero: below the split point it stacks — photo on top
     (full width, fixed height, no clip-path), red panel + form below. */
  .hero-photo-wrap {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 260px !important;
  }
  .hero-clip { clip-path: none !important; }
  .hero-section .grid > [aria-hidden="true"] { display: none; }
}

/* ---------------------------------------------------------------------
   Tablets / mobile landscape (<= 767px)
--------------------------------------------------------------------- */
@media (max-width: 767px) {
  .section-pad { padding-top: 3rem; padding-bottom: 3rem; }

  .page-hero { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .page-hero h1 { font-size: 1.85rem !important; }

  .hero-photo-wrap { height: 200px !important; }
  .hero-form-col h1 { font-size: 1.5rem !important; }
  .hero-form-col { padding-top: 1.5rem !important; padding-bottom: 2.5rem !important; }

  .section-title h2 { font-size: 1.6rem !important; line-height: 1.3 !important; }
  .section-title p { font-size: 0.925rem !important; }

  .btn-primary, .btn-outline, .btn-white {
    width: 100%;
    padding-top: 0.9rem;
    padding-bottom: 0.9rem;
  }
  .btn-inline { width: auto !important; }

  .card { border-radius: 1rem; }

  .faq-item { border-radius: 0.85rem; }
  .faq-question { padding: 1rem !important; }
  .faq-answer { padding-left: 1rem !important; padding-right: 1rem !important; }

  .swiper-nav-btn { display: none; }

  .stat-number { font-size: 1.85rem !important; }

  .form-input, .select2-container .select2-selection--single, .choices__inner {
    font-size: 1rem;
  }

  .mobile-call-bar a { font-size: 0.8rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
  .mobile-call-bar { padding-bottom: env(safe-area-inset-bottom, 0); }

  #back-to-top { width: 2.6rem; height: 2.6rem; right: 1rem; bottom: 5.25rem; }

  .flatpickr-calendar { width: 92vw !important; max-width: 320px; }
}

/* ---------------------------------------------------------------------
   Phones (<= 639px)
--------------------------------------------------------------------- */
@media (max-width: 639px) {
  .container { padding-left: 1rem; padding-right: 1rem; }

  .badge-pill { font-size: 0.7rem; padding: 0.3rem 0.75rem; }

  .page-hero h1 { font-size: 1.55rem !important; }
  .breadcrumb { font-size: 0.8rem; }

  .icon-box { width: 2.6rem; height: 2.6rem; font-size: 1rem; border-radius: 0.7rem; }

  #mobile-menu { max-height: 75vh; }

  .gallery-thumb::after { font-size: 1.1rem; }

  .select2-container .select2-selection--single,
  .choices__inner { min-height: 2.85rem !important; height: auto !important; }

  .swiper-services .swiper-slide,
  .swiper-related .swiper-slide { width: 84% !important; }
}

/* ---------------------------------------------------------------------
   Small phones (<= 380px)
--------------------------------------------------------------------- */
@media (max-width: 380px) {
  .page-hero h1 { font-size: 1.35rem !important; }
  .section-title h2 { font-size: 1.35rem !important; }
  .mobile-call-bar a span { display: none; }
}

/* ---------------------------------------------------------------------
   Touch devices — remove hover-only affordances, enlarge tap targets
--------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .dropdown-item { padding-top: 0.85rem; padding-bottom: 0.85rem; }
  a, button { -webkit-tap-highlight-color: transparent; }
}