/* ==========================================================================
   Chicago Building Code Expert — mobile-only layout fixes (HOME PAGE)
   Created 2026-08-10.

   SCOPE RULES:
   - Every rule in this file lives inside @media (max-width: 480px).
   - This file is linked ONLY from / (index.html), so no other page is affected.
   - 480px is Elementor's "mobile" breakpoint on this site. Desktop, laptop and
     tablet layouts cannot be reached from here.
   Backup of the pre-change files: /var/www/_backups/chicagobuildingcodeexpert-2026-08-10-mobile/
   ========================================================================== */

@media (max-width: 480px) {

  /* ------------------------------------------------------------------
     1. HERO — the 01 / 02 thumbnail cards were covering "View Services"
     ------------------------------------------------------------------
     The hero is a wdt-thumbs-slider. Its thumbnail strip
     (.wdt-thumbnail-carousel) is absolutely positioned at bottom:50px and
     is ~99px tall, so it occupied y=601-700. The slide's "View Services"
     button sits at y=610-664 with z-index:0, so the strip painted straight
     over it and swallowed the tap target.

     Fix: add a reserved band at the bottom of the slider's padding box and
     pin the thumbnail strip inside that band. The slides keep their own
     height, so nothing in the slide content moves or reflows -- the cards
     simply drop below the button instead of on top of it.                */

  .elementor-element-91bd88b .swiper.wdt-carousel-slider-thumb-91bd88b {
    padding-bottom: 132px !important;
    box-sizing: content-box !important; /* keep the 750px slide area intact */
  }

  .elementor-element-91bd88b .wdt-thumbnail-carousel {
    bottom: 16px !important;
  }

  /* the thumbnails are navigation: make them obviously tappable */
  .elementor-element-91bd88b .wdt-thumb-slider-thumbnail {
    border-radius: 10px;
  }

  /* ------------------------------------------------------------------
     2. HEADER — hamburger trigger was a 40x21 tap target
     ------------------------------------------------------------------ */

  .menu-trigger.menu-trigger-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }

  /* ------------------------------------------------------------------
     3. "OUR TRACK RECORD" — intro heading was 842px tall on a 390px screen
     ------------------------------------------------------------------
     The display heading kept its desktop font-size/line-height, so the
     single sentence ran to roughly two and a half phone screens before the
     stats were reached. Tighten it to a mobile-appropriate scale.        */

  .elementor-element-024d916 .wdt-elementor-repeater-container-wrapper,
  .elementor-element-024d916 .wdt-elementor-repeater-container-wrapper * {
    font-size: 22px !important;
    line-height: 1.35 !important;
  }

  /* ------------------------------------------------------------------
     4. TAP TARGETS — inline text links used as buttons were 22-31px tall
     ------------------------------------------------------------------
     Give the repeated CTA links a real 44px hit area without changing how
     they read. Applied only to the specific link roles, not to body copy. */

  .wdt-button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .wdt-blog-post .wdt-button,
  .wdt-post-readmore .wdt-button {
    padding-top: 11px !important;
    padding-bottom: 11px !important;
  }

  /* counter + service-list links inside carousels */
  .wdt-content-title a,
  .wdt-thumbs-slider-title a {
    display: inline-block !important;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

}