/* =========================================================
   RESPONSIVE.CSS — Breakpoint overrides
   ---------------------------------------------------------
   Architecture: base rules in style.css target the 1200–1440px
   "desktop" range. This file layers max-width overrides downward
   (laptop → tablet → mobile → small mobile) and a min-width
   enhancement upward (large desktop), matching the requested
   breakpoint set:

     min-width:1441px            → Large Desktop
     992px  – 1440px (max:1440)  → Desktop / small-laptop tune-down
     768px  – 991px  (max:991)   → Tablet content layout
     576px  – 767px  (max:767)   → Large Mobile
     max-width:575px             → Mobile
     max-width:375px             → Small Mobile

   Navigation is the one exception to those numbers: the off-canvas menu switches on at
   max-width:1300px instead of 991px, because the desktop nav bar's content (8 links + 2
   dropdowns + logo + CTA) doesn't actually fit in less than ~1250px — see the FIX note above
   the nav block below for the full explanation.

   FIX SUMMARY (see inline comments for detail):
   - Off-canvas mobile nav rebuilt with real slide-in panel + overlay
     (previously an inline dropdown panel with no overlay/scroll-lock).
   - minmax(0,1fr) grid tracks everywhere (see style.css) so nothing
     overflows horizontally on any breakpoint.
   - Floating action buttons repositioned per breakpoint via the new
     single .floating-stack wrapper — no more back-to-top/fab overlap.
   - Added explicit small-mobile (<=375px) and large-desktop (>=1441px)
     tuning that did not exist before.
   ========================================================= */

/* =====================================================
   LARGE DESKTOP  min-width: 1441px
   ===================================================== */
@media (min-width: 1441px){
  .container{max-width:1320px;}
  .hero-visual img{height:460px;}
  :root{--space-xl: 6.5rem;}
}

/* =====================================================
   LAPTOP / SMALL DESKTOP  max-width: 1440px (down to 992px handled below)
   ===================================================== */
@media (max-width: 1440px){
  .products-grid, .cards-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .tile-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* =====================================================
   LAPTOP  max-width: 1199px (992–1199 "laptop" range starts inheriting here)
   ===================================================== */
@media (max-width: 1199px){
  .container{padding: 0 1.25rem;}
  .hero-visual img{height:380px;}
}

/* =====================================================
   TABLET  max-width: 991px  (covers 768–991)
   ===================================================== */
@media (max-width: 991px){
  .top-bar .top-bar-links{gap:1rem;}
  .top-bar .top-bar-links span:nth-child(2){display:none;} /* trim noisy secondary label */

  .hero-inner{grid-template-columns:minmax(0,1fr);}
  .hero-visual{order:-1;margin-bottom:1rem;}
  .hero-visual img{height:300px;}
  .hero-visual .spec-tag{font-size:0.66rem;padding:.4rem .6rem;}

  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .two-col{grid-template-columns:minmax(0,1fr);}
  .reason-list{grid-template-columns:minmax(0,1fr);}
  .quality-grid{grid-template-columns:minmax(0,1fr);}
  .testimonial-grid{grid-template-columns:minmax(0,1fr);}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products-grid, .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sitemap-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .form-grid{grid-template-columns:minmax(0,1fr);}

  /* two-column contact/quote layout collapses before the form does */
  .contact-panel{margin-top:2rem;}
}

/* =====================================================
   MOBILE / TABLET OFF-CANVAS NAVIGATION  max-width: 1300px
   FIX (nav overflow root cause): the desktop nav — 8 top-level items, 2 dropdowns, logo
   lockup, and the CTA button — needs roughly 1250px of uninterrupted width to lay out on one
   line without shrinking. The hamburger used to only take over at 991px, leaving a
   ~992–1300px "dead zone" where nav items were being squeezed below their natural content
   width, forcing link labels (and the old dropdown caret) to wrap mid-word. The off-canvas
   panel now takes over at the width where the desktop layout stops comfortably fitting,
   rather than being squeezed further.

   Rebuilt as a fixed slide-in panel from the right with a dimmed overlay behind it, an
   internal scroll area, sticky CTA footer, and dropdown items converted to inline accordions
   instead of desktop hover menus. Body scroll is locked via JS while open (see main.js).
   ===================================================== */
@media (max-width: 1300px){
  .menu-toggle{display:flex;}

  .main-nav{
    position:fixed;
    top:0; right:0;
    height:100%;
    height:100dvh;
    width:min(340px, 86vw);
    background:var(--white);
    z-index:600;
    transform:translateX(100%);
    transition: transform 320ms ease;
    box-shadow:-8px 0 30px rgba(11,31,58,0.18);
    display:block;
  }
  .main-nav.open{transform:translateX(0);}

  .nav-overlay{z-index:598;}

  .nav-list{
    display:flex;flex-direction:column;align-items:stretch;
    width:100%;height:100%;
    padding: 5.5rem 1.5rem 1.5rem;
    gap:.15rem;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-list > li{width:100%;border-bottom:1px solid var(--border-hairline);}
  .nav-list > li > a{
    display:flex;align-items:center;justify-content:space-between;
    padding: .95rem .25rem;
    min-height:44px;
    font-size:1rem;
  }
  .nav-list > li > a::after{display:none;}

  /* dropdown → accordion */
  .dd-caret{
    margin-left:auto;transition:transform var(--transition);
  }
  .has-dropdown.dd-open > a .dd-caret{transform:rotate(180deg);}
  .dropdown{
    position:static;box-shadow:none;border-top:none;
    opacity:1;visibility:visible;transform:none;
    display:none;
    padding: 0 0 .5rem .75rem;
    min-width:0;
  }
  .has-dropdown.dd-open .dropdown{display:block;}
  .dropdown a{padding:.7rem .5rem;font-size:0.92rem;min-height:44px;display:flex;align-items:center;}

  /* CTA footer inside the panel, always reachable without excess scrolling */
  .mobile-nav-cta{
    display:block;
    margin-top:1rem;
    padding-top:1rem;
    border-top:1px solid var(--border-hairline);
  }
  .mobile-nav-cta .btn{min-height:48px;}

  /* hamburger → close (X) animation */
  .menu-toggle.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.active span:nth-child(2){opacity:0;}
  .menu-toggle.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* =====================================================
   LARGE MOBILE  576px – 767px
   ===================================================== */
@media (max-width: 767px){
  :root{--space-xl: 3.5rem; --space-lg: 2.25rem;}
  .top-bar .top-bar-links{display:none;}
  .top-bar .container{justify-content:flex-end;}
  .hero-cta,.hero-actions,.cta-actions{flex-direction:column;align-items:stretch;}
  .hero-cta .btn,.hero-actions .btn,.cta-actions .btn{width:100%;justify-content:center;}
  .cta-banner{flex-direction:column;text-align:center;padding: var(--space-md);}
  .cta-banner .cta-actions{justify-content:center;}
  .footer-grid{grid-template-columns:minmax(0,1fr);gap:2rem;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .products-grid, .cards-grid{grid-template-columns:minmax(0,1fr);}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .blog-grid{grid-template-columns:minmax(0,1fr);}
  .sitemap-grid{grid-template-columns:minmax(0,1fr);}
  .two-col{gap:var(--space-md);}
}

/* =====================================================
   MOBILE  max-width: 575px
   ===================================================== */
@media (max-width: 575px){
  h1{font-size:1.85rem;}
  .hero h1{font-size:2rem;}
  .section{padding: var(--space-lg) 0;}
  .section-tight{padding: var(--space-md) 0;}
  .tile-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .stats-strip{grid-template-columns:repeat(2,minmax(0,1fr));}
  .quality-item{padding:1rem;}
  .testimonial{padding:1.25rem;}

  /* Floating stack: smaller buttons, tighter gap, safe-area aware */
  .floating-stack{right:1rem;bottom:1rem;gap:.6rem;}
  .fab{width:48px;height:48px;font-size:1.2rem;}
  .back-to-top{width:44px;height:44px;}

  .breadcrumb{font-size:0.72rem;}
  .breadcrumb-bar .breadcrumb{padding:.65rem 0;}

  /* form + card polish at narrow widths */
  .card .card-media{height:180px;}
  .contact-panel{padding:1.5rem;}
  .enquiry-popup-box{padding:1.5rem;}
  .lightbox{padding:1rem;}
  .lightbox-nav{font-size:1.5rem;padding:.6rem;}
}

/* =====================================================
   SMALL MOBILE  max-width: 375px
   ===================================================== */
@media (max-width: 375px){
  :root{--space-lg: 1.75rem; --space-xl: 2.75rem;}
  .brand-text strong{font-size:1rem;}
  .brand-text span{font-size:0.6rem;}
  .brand-mark{width:36px;height:36px;font-size:0.95rem;}
  .brand-mark-img{width:36px;height:36px;}
  .hero h1{font-size:1.7rem;}
  h2{font-size:1.4rem;}
  .eyebrow{font-size:0.7rem;}
  .tile-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.6rem;}
  .gallery-grid{grid-template-columns:minmax(0,1fr);}
  .stats-strip{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem;}
  .stat .num{font-size:1.9rem;}
  .floating-stack{right:.75rem;bottom:.75rem;gap:.5rem;}
  .fab{width:44px;height:44px;font-size:1.05rem;}
  .back-to-top{width:40px;height:40px;}
  .btn{padding:0.8rem 1.4rem;font-size:0.88rem;}
}