/* Silver Spider Media enhancement stylesheet -- mobile header overflow fix.
   Root cause: Astra's dynamic customizer CSS sets the header logo to 104px wide
   at the 921px (tablet) breakpoint, then OVERRIDES it back UP to 250px wide at
   the 544px (mobile) breakpoint -- an inverted/misconfigured customizer value.
   That 250px logo, next to the mobile nav-toggle button, overflows a 320-374px
   viewport (body.scrollWidth 346px against a 320px viewport pre-fix), pushing
   ~60% of the hamburger tap target off-canvas. The three service-hub pages
   (/plastering/, /rendering/, /damp-proofing/) ship the same header markup with
   NO dynamic customizer CSS at all, so the logo sits at its raw 250px width on
   every viewport there -- same overflow, different cause. This stylesheet fixes
   both cases with !important overrides scoped to the narrow phone range.
   Cache note: served from /wp-content/ which vercel.json caches immutable for
   1 year. Bump the ?v= query on every edit or the fix will not be visible to
   returning visitors. Current version: v1. */

@media (max-width: 480px) {
  header .custom-logo-link img,
  .ast-header-break-point .site-branding img,
  .ast-header-break-point .custom-logo-link img,
  .ast-header-break-point .site-logo-img .custom-mobile-logo-link img,
  .site-logo-img img,
  img.custom-logo {
    max-width: 110px !important;
    width: 110px !important;
    height: auto !important;
  }
  .astra-logo-svg {
    width: 110px !important;
  }

  #masthead .ast-builder-grid-row-has-sides {
    flex-wrap: nowrap !important;
    gap: 8px;
  }
  #masthead .site-header-primary-section-left,
  #masthead .site-header-primary-section-right {
    min-width: 0;
  }
  #masthead .menu-toggle.main-header-menu-toggle {
    flex-shrink: 0;
  }
  #masthead .site-primary-header-wrap.ast-container,
  #ast-mobile-header .site-primary-header-wrap.ast-container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}