/* ================================================================
   responsive-extra.css
   Extra responsive overrides for WooCommerce, single product,
   page templates, and global safe-defaults.

   Load order: after style.css (lower specificity = style.css wins
   where both apply; use !important only where Astra overrides need
   forcing).
   ================================================================ */

/* ── Safe global resets (NO max-width on everything) ── */
*, *::before, *::after { box-sizing: border-box; }

/* Prevent images / media from overflowing their containers */
img, svg, video, canvas, audio, iframe, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}
/* But inline SVGs inside buttons / links should stay inline */
button svg, a svg, span svg, .btn svg, .nav-link svg,
.hamburger-bar, .social-icon i, .trust-icon { display: inline; }

/* Scrollable tables without breaking their display model */
.table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.post-content table,
.product-specs-table { display: table; width: 100%; }

/* ── Sticky header on all breakpoints ── */
.site-header { position: sticky; top: 0; z-index: 1000; }

/* ── Mobile nav panel: must be scrollable on short screens ── */
.mobile-nav-panel { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.mobile-nav-list  { overflow-y: visible; flex: 1; }

/* Submenu height: 15 items × ~46px + "View All" row */
.mobile-submenu.is-open { max-height: 1000px; }

/* ================================================================
   LARGE TABLET (≤1200px)
   ================================================================ */
@media (max-width: 1200px) {
  .container { padding: 0 20px; }
}

/* ================================================================
   TABLET (≤1024px)
   ================================================================ */
@media (max-width: 1024px) {
  h1 { font-size: clamp(1.8rem, 4.5vw, 3rem); }
  h2 { font-size: clamp(1.4rem, 3.5vw, 2.2rem); }
  .section-pad { padding: 64px 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .categories-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
  .packages-grid { grid-template-columns: 1fr 1fr; }
  .package-card.featured { transform: scale(1.02); }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .testimonials-grid { grid-template-columns: 1fr 1fr; }
  .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
  .product-layout { grid-template-columns: 1fr !important; }
  .cities-grid { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
}

/* ================================================================
   NAV BREAK (≤860px) — hamburger replaces desktop nav
   ================================================================ */
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .trust-bar .trust-items { gap: 16px 32px; }
  .blog-grid { grid-template-columns: 1fr 1fr; }
  .packages-grid { grid-template-columns: 1fr 1fr; }

  /* Stacked sidebars */
  .faq-layout    { grid-template-columns: 1fr !important; }
  .faq-sidebar   { position: static !important; flex-direction: row; flex-wrap: wrap; }
  .faq-sidebar-card { flex: 1 1 220px; }
  .contact-layout { grid-template-columns: 1fr !important; }
  .quote-layout   { grid-template-columns: 1fr !important; }
  .shop-layout    { grid-template-columns: 1fr !important; }
  .shop-sidebar   { order: 2; }

  /* Service detail */
  .svc-detail-hero-inner { grid-template-columns: 1fr !important; }
  .svc-trust-card { display: grid; grid-template-columns: 1fr 1fr; }
  .svc-pkg-cta-box { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   MOBILE (≤768px)
   ================================================================ */
@media (max-width: 768px) {
  .container   { padding: 0 16px; }
  .section-pad { padding: 48px 0; }

  /* ── Typography ── */
  body { font-size: 15px; }
  h1   { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  h2   { font-size: clamp(1.3rem, 5vw, 1.9rem); }
  h3   { font-size: clamp(1rem,   4vw, 1.4rem); }

  /* ── Header ── */
  .header-inner { padding: 0 16px; height: 64px; }

  /* ── Hero ── */
  .hero-section           { min-height: 75vh; padding: 52px 0 40px; }
  .hero-section h1        { font-size: clamp(1.7rem, 7vw, 2.5rem); }
  .hero-section .hero-sub { font-size: 15px; }
  .hero-section .hero-buttons { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-section .hero-buttons .btn { width: 100%; justify-content: center; }

  /* ── Trust bar ── */
  .trust-bar .trust-items { flex-wrap: wrap; gap: 12px 24px; justify-content: center; }
  .trust-bar .trust-item  { font-size: 13px; }

  /* ── Section headers ── */
  .section-header { margin-bottom: 36px; }
  .section-header p { font-size: 15px; }

  /* ── Category grid ── */
  .categories-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .category-card .cat-image { height: 160px; }

  /* ── How it works ── */
  .how-it-works .steps { grid-template-columns: 1fr; gap: 28px; }

  /* ── Packages ── */
  .packages-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .package-card.featured { transform: none; }

  /* ── Testimonials ── */
  .testimonials-grid { grid-template-columns: 1fr; }

  /* ── Blog ── */
  .blog-grid { grid-template-columns: 1fr; }

  /* ── Service areas cities grid ── */
  .cities-grid  { grid-template-columns: 1fr 1fr; gap: 10px; }
  .city-link    { padding: 12px 14px; font-size: 13px; }

  /* ── SA regions ── */
  .sa-regions-grid { grid-template-columns: 1fr 1fr; }
  .sa-cities-grid  { grid-template-columns: 1fr 1fr; }

  /* ── CTA ── */
  .cta-section .cta-buttons { flex-direction: column; align-items: center; }
  .cta-section .cta-buttons .btn { width: 100%; max-width: 340px; justify-content: center; }

  /* ── Footer ── */
  .footer-grid   { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }

  /* ── Mobile sticky CTA ── */
  .mobile-sticky-cta { display: block; }

  /* ── Forms ── */
  .form-row,
  .form-row.three { grid-template-columns: 1fr !important; }
  .booking-form-wrap { padding: 20px 14px; }

  /* ── WooCommerce ── */
  .woocommerce ul.products { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .products { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 14px !important; padding: 12px 12px 4px !important;
  }
  .woocommerce ul.products li.product .price { font-size: 13px !important; padding: 0 12px !important; }
  .woocommerce ul.products li.product a.button {
    margin: 8px 12px 12px !important; width: calc(100% - 24px) !important;
    font-size: 12px !important; padding: 8px 14px !important;
  }

  /* ── Single product ── */
  .pricing-table { grid-template-columns: 1fr 1fr; gap: 10px; }
  .single-product-hero { padding: 40px 0; }
  .single-product-hero h1 { font-size: 1.5rem; }
  .product-specs-table { font-size: 13px; }
  .product-specs-table th,
  .product-specs-table td { padding: 9px 10px; }
  .pricing-box .price-amount { font-size: 20px; }

  /* ── Service detail ── */
  .svc-detail-hero      { padding: 40px 0 48px; }
  .svc-detail-hero-text h1 { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .svc-detail-tagline   { font-size: 14px; }
  .svc-detail-intro     { font-size: 15px; }
  .svc-detail-hero-ctas { flex-direction: column; gap: 10px; }
  .svc-detail-hero-ctas .btn { justify-content: center; }
  .svc-cards-grid       { grid-template-columns: 1fr; }
  .svc-equip-grid       { grid-template-columns: 1fr; }
  .svc-usecases-grid    { grid-template-columns: 1fr; }
  .svc-why-grid         { grid-template-columns: 1fr; }
  .why-grid             { grid-template-columns: 1fr 1fr; gap: 20px; }

  /* ── Packages page ── */
  .pkg-grid   { grid-template-columns: 1fr !important; }
  .pkg-card   { padding: 28px 20px; }
  .pkg-steps  { grid-template-columns: 1fr !important; }
  .pkg-step-divider { display: none; }
  .addons-grid { grid-template-columns: 1fr 1fr; }
  .svc-pkg-cta-box { padding: 24px 16px; }

  /* ── FAQ ── */
  .faq-group-title { font-size: 1.1rem; }
  .faq-search-bar input { font-size: 14px; padding: 12px 40px 12px 16px; }
  .faq-jump-list a { font-size: 12px; padding: 4px 10px; }
  .faq-question { font-size: 14.5px; padding: 15px 16px; }

  /* ── Contact ── */
  .contact-strips-inner { flex-direction: column; }
  .contact-strip-item   { border-right: none; border-bottom: 1px solid rgba(0,0,0,.07); padding: 16px; }
  .contact-info-col     { flex-direction: column; }

  /* ── Blog post ── */
  .post-content h2  { font-size: 1.3rem; margin-top: 28px; }
  .post-content h3  { font-size: 1.1rem; margin-top: 20px; }
  .post-content table th,
  .post-content table td { padding: 8px; font-size: 13px; }

  /* ── Page heros ── */
  .page-hero-section      { padding: 48px 0 40px; }
  .page-hero-section h1   { font-size: clamp(1.5rem, 6vw, 2.2rem); }
  .page-hero-section p    { font-size: 15px; }

  .cta-section { padding: 48px 0; }
  .cta-section h2 { font-size: clamp(1.3rem, 5vw, 1.9rem); }
  .cta-section p  { font-size: 15px; margin-bottom: 28px; }
}

/* ================================================================
   SMALL MOBILE (≤480px)
   ================================================================ */
@media (max-width: 480px) {
  .container   { padding: 0 12px; }
  .section-pad { padding: 36px 0; }

  /* ── Hero ── */
  .hero-section { min-height: 65vh; }
  .hero-section h1 { font-size: clamp(1.5rem, 8vw, 2rem); }

  /* ── Buttons ── */
  .btn    { padding: 12px 22px; font-size: 14px; }
  .btn-lg { padding: 14px 26px; font-size: 15px; }

  /* ── Grid resets ── */
  .categories-grid { grid-template-columns: 1fr; }
  .trust-bar .trust-items { flex-direction: column; align-items: center; gap: 10px; }
  .trust-bar { padding: 16px 0; }
  .packages-grid { max-width: 100%; }
  .pricing-table { grid-template-columns: 1fr 1fr; }
  .sa-regions-grid { grid-template-columns: 1fr; }
  .sa-cities-grid  { grid-template-columns: 1fr 1fr; }
  .addons-grid     { grid-template-columns: 1fr; }
  .why-grid        { grid-template-columns: 1fr; }
  .woocommerce ul.products { grid-template-columns: 1fr !important; }
  .products { grid-template-columns: 1fr !important; }

  /* ── Footer ── */
  .footer-logo-text { font-size: 18px; }
  .footer-col h4    { font-size: 12px; }
  .footer-col ul li a { font-size: 13px; }
  .footer-col p     { font-size: 13px; }
  .social-icon      { width: 36px; height: 36px; font-size: 14px; }
  .footer-bottom    { font-size: 12px; }

  /* ── Forms ── */
  .booking-form-wrap { padding: 16px 12px; }
  .booking-form-section-label { font-size: 11px; }
  .wpcf7 .wpcf7-submit { font-size: 15px !important; padding: 14px !important; }

  /* ── Mobile submenu ── */
  .mobile-submenu-link { padding: 11px 14px 11px 24px; font-size: 13px; }

  /* ── Back to top ── */
  .back-to-top { bottom: 72px; right: 16px; }
}

/* ================================================================
   TINY (≤360px)
   ================================================================ */
@media (max-width: 360px) {
  .container { padding: 0 10px; }
  .section-pad { padding: 28px 0; }
  .hero-section h1 { font-size: 1.4rem; }
  .trust-bar .trust-item { font-size: 12px; }
  .categories-grid { grid-template-columns: 1fr; }
  .sa-cities-grid { grid-template-columns: 1fr; }
  .pricing-table  { grid-template-columns: 1fr; }

  /* Mobile drawer panel */
  .mobile-nav-panel { width: 100vw; }
  .mobile-nav-link  { padding: 14px 16px; font-size: 14px; }
  .mobile-submenu-link { padding: 10px 12px 10px 20px; }
}