/* =====================================================================
   WHEELWORX – MOBILE + HEADER/FOOTER EXTRAS
   Loaded last on every public page. Your original CSS is untouched.

   - Hamburger menu on screens 960px and narrower
   - Tap-to-call "Call Us" button
   - Footer "Contact Us" list styling
   - Phone layouts for the home page sections that didn't stack
   ===================================================================== */

/* ---------- Header: desktop ---------- */

/* the ☰ button only appears on smaller screens */
.nav-toggle{
  display: none;
}

/* "Call Us" is now a real link (tel:) */
.call-us{
  cursor: pointer;
  transition: color .2s ease;
}

.call-us:hover{
  color: var(--red);
}

.call-us .phone-icon{
  display: inline-flex;
}

.call-us .phone-icon svg{
  width: 18px;
  height: 18px;
}

/* slightly tighter links on mid-size laptops so nothing wraps */
@media (max-width: 1180px){
  .nav-links{ gap: 16px; }
  .nav-logo img{ width: 170px; }
}


/* ---------- Footer: Contact Us column ---------- */

.footer-contact{
  display: grid;
  gap: 12px;
}

.footer-contact li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  line-height: 1.45;
}

.footer-contact svg{
  width: 16px;
  height: 16px;
  margin-top: 3px;
  flex: 0 0 16px;
  stroke: var(--red);
}

.footer-contact a:hover{
  color: #fff;
  text-decoration: underline;
}


/* =====================================================================
   TABLET + PHONE  (960px and narrower)
   ===================================================================== */
@media (max-width: 960px){

  /* --- Header bar: logo | call icon | Book Now | ☰ --- */
  .navbar{
    position: relative;
    width: calc(100% - 32px);
    padding: 12px 0;
    gap: 12px;
  }

  .nav-logo img{
    width: 150px;
  }

  .nav-actions{
    margin-left: auto;
    gap: 10px;
  }

  .nav-actions .btn-primary{
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Call Us shrinks to a round phone button */
  .call-us > span:not(.phone-icon){
    display: none;
  }

  .call-us .phone-icon{
    width: 42px;
    height: 42px;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
  }

  .call-us .phone-icon svg{
    stroke: var(--red);
  }

  /* the ☰ button */
  .nav-toggle{
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 11px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(255,255,255,0.04);
    cursor: pointer;
  }

  .nav-toggle span{
    display: block;
    height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .25s ease, opacity .2s ease;
  }

  /* ☰ turns into ✕ when open */
  .site-header.nav-open .nav-toggle span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2){ opacity: 0; }
  .site-header.nav-open .nav-toggle span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

  /* dropdown menu under the header */
  .nav-links{
    display: none;
    position: absolute;
    top: 100%;
    left: -16px;
    right: -16px;

    flex-direction: column;
    align-items: stretch;
    gap: 0;

    padding: 6px 16px 18px;
    background: #050505;
    border-bottom: 1px solid rgba(196,30,58,0.35);
    box-shadow: 0 24px 50px rgba(0,0,0,0.6);
  }

  .site-header.nav-open .nav-links{
    display: flex;
  }

  .nav-links li{
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }

  .nav-links li:last-child{
    border-bottom: 0;
  }

  .nav-links a{
    display: block;
    padding: 14px 4px;
    font-size: 16px;
  }

  /* --- Home: hero stacks text above the picture --- */
  .hero{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 48px 0 56px;
    min-height: 0;
  }

  .hero-image-wrapper img{
    height: 340px;
  }

  /* --- Home: services preview 4 cards -> 2 per row --- */
  .services-preview .services-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* --- Home: Why Wheelworx stacks --- */
  .why-wheelworx{
    grid-template-columns: 1fr;
    gap: 34px;
    padding: 72px 0;
  }

  .why-container{
    max-width: none;
  }
}


/* =====================================================================
   PHONE  (600px and narrower)
   ===================================================================== */
@media (max-width: 600px){

  .nav-logo img{
    width: 128px;
  }

  /* hero */
  .hero-badge{
    font-size: 13px;
    padding: 8px 14px;
  }

  .hero-buttons{
    flex-wrap: wrap;
  }

  .hero-buttons a{
    flex: 1 1 160px;
  }

  /* the 3 trust features stack instead of being cut off */
  .hero-features{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .hero-image-wrapper img{
    height: 280px;
  }

  .rating-badge{
    top: 14px;
    right: 14px;
    padding: 12px 14px;
    font-size: 18px;
    border-radius: 14px;
  }

  .stats-badge{
    bottom: 14px;
    left: 14px;
    padding: 10px 14px;
  }

  /* services preview: one card per row */
  .services-preview{
    padding: 64px 0 60px;
  }

  .services-preview .services-grid{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  /* why wheelworx benefit cards: one per row */
  .why-content{
    grid-template-columns: 1fr;
  }

  .why-benefits{
    min-height: 0;
  }

  /* red CTA band */
  .cta{
    padding: 40px 0;
  }

  .cta-content{
    padding: 32px 0;
  }

  /* page heroes on Quote / Book Now */
  .quote-hero,
  .book-hero{
    padding: 84px 0 64px;
  }

  .quote-hero p,
  .book-hero p{
    font-size: 16px;
  }

  /* About: founder quote mark smaller */
  .founder-quote::before{
    font-size: 200px;
    top: -30px;
  }

  /* Contact map shorter on phones */
  .map-card{
    height: 300px;
  }
}