/* Mobile / tablet layout fixes — 25 Sep 2026 (rev 2).
   Loaded from includes/header.php on every page. Each rule fixes one bug found
   in a live audit at 360 / 390 / 600 / 768 / 900 / 1024px. !important because
   page-level <style> blocks load after this file. */

/* Homepage hero: the flex child would not shrink below its content, so on
   360px phones the H1 and the CTA box ran past both screen edges. */
.ms-hero-content{min-width:0!important;max-width:100%}

/* Practice pages (cleaning, health & beauty, local business, auto, home
   services, legal, medical): ONE menu. They have their own header and their
   own full-screen menu, so the site's floating MENU pill is hidden on them and
   the page's own menu button comes back, inside its header. */
@media (max-width:1080px){
  html:has(.cln-nav,.hlt-nav,.biz-nav,.aut-nav,.hms-nav,.lgl-nav,.med-nav) .ms-mob-trigger{display:none!important}
  .cln-burger,.hlt-burger,.biz-burger,.aut-burger,.hms-burger,.lgl-burger,.med-burger{display:flex!important}
}
/* Their full-screen menu must sit above the Google Ads offer toast. */
.cln-mnav,.hlt-mnav,.biz-mnav,.aut-mnav,.hms-mnav,.lgl-mnav,.med-mnav{z-index:100000!important}
/* The top strip had 150px of right padding to dodge the pill — give it back. */
@media (max-width:921px){
  html .cln-nav-top-in,html .hlt-nav-top-in,html .biz-nav-top-in,html .aut-nav-top-in,html .hms-nav-top-in,html .lgl-nav-top-in,html .med-nav-top-in{padding-right:40px!important}
}
@media (max-width:560px){
  html .cln-nav-top-in,html .hlt-nav-top-in,html .biz-nav-top-in,html .aut-nav-top-in,html .hms-nav-top-in,html .lgl-nav-top-in,html .med-nav-top-in{padding-right:20px!important}
}
/* Phones and portrait tablets: logo + menu button only. "Book a call" is in the menu. */
@media (max-width:760px){
  .cln-nav-cta,.hlt-nav-cta,.biz-nav-cta,.aut-nav-cta,.hms-nav-cta,.lgl-nav-cta,.med-nav-cta,.iw-nav-cta{display:none!important}
}

/* /industries/ has no menu of its own, so it keeps the pill — its header
   reserves the pill's space so nothing sits underneath it. */
@media (max-width:1080px){ .iw-nav-in{padding-right:72px!important} }
@media (max-width:420px){ .iw-nav-in .tag{display:none!important} }

/* /saas/: the one-column grid sized itself to its content and pushed the
   "What is SaaS" text off the right edge of the screen. */
@media (max-width:768px){
  .ss-what-grid,.ss-hero-grid{grid-template-columns:minmax(0,1fr)!important}
  .ss-what-grid>*,.ss-hero-grid>*{min-width:0!important}
  .ss-what-diagram{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .ss-what-visual{padding:22px!important}
}

/* Google Ads offer toast: 288px tall on a phone — a third of the screen over
   the hero. Keep the offer and the button, drop the two explainer lines. */
@media (max-width:640px){
  .pp-toast .pp-sub,.pp-toast .pp-match{display:none!important}
}

/* 2026-09-26 — remove the empty band above page heroes.
   These page wrappers still carried padding-top:80px from when the header was position:fixed;
   the header is sticky (in flow) now, so that padding was dead space on every screen size. */
html body main.vs-page, html body main.js-main, html body main.jg-main, html body main.jw-main,
html body main.sh-main, html body main.sa-main, html body main.sg-main, html body main.sw-main,
html body main.tm-main, html body main.wm-main, html body main.sae-main, html body main.sap-main,
html body main.sam-main, html body main.sat-main, html body main.saa-main, html body main.sag-main,
html body main.pc-main, html body main.pcs-main, html body main.pcg-main, html body main.pcw-main,
html body main.cc-main, html body main.ccs-main, html body main.ccg-main, html body main.ccw-main,
html body main.cip, html body main.gve-main, html body main.gvp-main, html body main.gvm-main,
html body main.gva-main, html body main.gvt-main, html body main.gvg-main, html body main.ga-main { padding-top: 0 !important; }

/* Phones: hero top padding sized for desktop left a tall empty band under the header. */
@media (max-width: 760px) {
  html body div.tl-hero.tl-hero.tl-hero, html body section.se-hero.se-hero.se-hero, html body div.ct-hero.ct-hero.ct-hero,
  html body div.rf-hero.rf-hero.rf-hero, html body div.th-hero.th-hero.th-hero, html body div.sd-hero.sd-hero.sd-hero,
  html body div.cs-hero.cs-hero.cs-hero, html body div.ba-hero.ba-hero.ba-hero, html body div.ppd-hero.ppd-hero.ppd-hero,
  html body section.lgl-hero.lgl-hero.lgl-hero, html body section.pc-hero.pc-hero.pc-hero, html body section.pcs-hero.pcs-hero.pcs-hero,
  html body section.pcg-hero.pcg-hero.pcg-hero, html body section.pcw-hero.pcw-hero.pcw-hero, html body section.cc-hero.cc-hero.cc-hero,
  html body section.ccs-hero.ccs-hero.ccs-hero, html body section.ccg-hero.ccg-hero.ccg-hero, html body section.ccw-hero.ccw-hero.ccw-hero,
  html body section.cip-hero.cip-hero.cip-hero, html body section.gvm-hero.gvm-hero.gvm-hero, html body section.gva-hero.gva-hero.gva-hero,
  html body section.gvt-hero.gvt-hero.gvt-hero, html body section.cln-hero.cln-hero.cln-hero, html body section.hlt-hero.hlt-hero.hlt-hero,
  html body section.biz-hero.biz-hero.biz-hero, html body section.hms-hero.hms-hero.hms-hero, html body section.aut-hero.aut-hero.aut-hero,
  html body section.gls-hero.gls-hero.gls-hero, html body section.cr-hero.cr-hero.cr-hero { padding-top: 24px !important; }
  html body section.lh-hero.lh-hero.lh-hero, html body section.os-hero.os-hero.os-hero, html body section.wp-hero.wp-hero.wp-hero,
  html body section.lp-hero.lp-hero.lp-hero, html body section.asc-hero.asc-hero.asc-hero, html body section.sh-hero.sh-hero.sh-hero,
  html body section.sa-hero.sa-hero.sa-hero, html body section.sg-hero.sg-hero.sg-hero, html body section.sw-hero.sw-hero.sw-hero,
  html body section.tm-hero.tm-hero.tm-hero, html body section.wm-hero.wm-hero.wm-hero, html body section.mia-hero.mia-hero.mia-hero,
  html body section.tpa-hero.tpa-hero.tpa-hero, html body section.orl-hero.orl-hero.orl-hero, html body section.lau-hero.lau-hero.lau-hero,
  html body section.stp-hero.stp-hero.stp-hero, html body section.wpb-hero.wpb-hero.wpb-hero, html body section.npl-hero.npl-hero.npl-hero,
  html body section.sar-hero.sar-hero.sar-hero, html body section.chs-hero.chs-hero.chs-hero, html body section.atl-hero.atl-hero.atl-hero,
  html body section.sav-hero.sav-hero.sav-hero, html body section.ga-hero.ga-hero.ga-hero, html body section.med-hero.med-hero.med-hero { padding-top: 40px !important; }
}