/* Water Cleanic Boreholes — V49 final site consistency & mobile containment
   Purpose: mirror the stable behaviour of the main Water Cleanic website.
   No workflow, Supabase, assessment-form or mobile-menu JS logic is changed. */

:root{
  --wc-final-navy:#062f49;
  --wc-final-blue:#087fbd;
  --wc-final-cyan:#08aeea;
}

/* Hard containment: the public site must never pan sideways on mobile. */
html,body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  overflow-x:clip;
}
body{min-width:0}
*,*::before,*::after{box-sizing:border-box}
header,main,footer,section,article,aside,nav,form{max-width:100%}
img,svg,video,canvas{max-width:100%}
iframe{max-width:100%}
input,select,textarea,button{max-width:100%;min-width:0}
table{max-width:100%}
pre,code{max-width:100%;overflow-wrap:anywhere}
a,p,h1,h2,h3,h4,h5,h6,span,strong,small,label{overflow-wrap:break-word}

/* Keep shared containers and grid children shrinkable. */
.wrap,.nav,.links,.wc-footer-container,
.hero-grid,.split,.booking-grid,.form-grid-book,.packages,.type-grid,
.problem-cards,.treatment-grid,.commitment,.service-feature-grid,
.clean-feature-grid,.wc-source-grid,.wc-contact-cards,.wc-about-grid,
.wc-about-points,.service-process-grid{
  min-width:0;
}
.hero-grid>*,.split>*,.booking-grid>*,.form-grid-book>*,
.packages>*,.type-grid>*,.problem-cards>*,.treatment-grid>*,
.commitment>*,.service-feature-grid>*,.clean-feature-grid>*,
.wc-source-grid>*,.wc-contact-cards>*,.wc-about-grid>*,
.wc-about-points>*,.service-process-grid>*{
  min-width:0;
}

/* One consistent header/footer behaviour across every public page. */
.header .links{align-items:center}
.header .links a{white-space:nowrap}
.header .nav-cta{flex:0 0 auto}
.wc-global-footer,.wc-global-footer *{box-sizing:border-box}
.wc-global-footer a,.wc-global-footer .wc-footer-item{overflow-wrap:anywhere}
.wc-footer-legal{gap:14px;flex-wrap:wrap}

/* Buttons and action rows should wrap rather than force the viewport wider. */
.actions{flex-wrap:wrap}
.actions .btn,.btn,.nav-button{max-width:100%}
.wa-float{max-width:calc(100vw - 24px)}

/* Images remain proportional. */
.problem-card img,.wc-source-photo img,.service-photo img,
.visual-card img,.about-photo-card img{
  max-width:100%;
}

/* Mobile: same principles used on the main site — contained, readable, no horizontal drift. */
@media (max-width:820px){
  html,body{
    width:100%!important;
    max-width:100%!important;
    overflow-x:hidden!important;
    overflow-x:clip!important;
  }

  .wrap,.wc-footer-container{
    width:100%!important;
    max-width:100%!important;
    padding-left:18px!important;
    padding-right:18px!important;
  }

  .header .nav{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding-left:16px!important;
    padding-right:16px!important;
  }

  .header .brand-lockup{min-width:0;max-width:calc(100% - 64px)}
  .header .brand-lockup img{max-width:100%;height:auto}
  .header .nav-cta{display:none!important}

  /* V7 menu remains isolated; this only constrains it to the viewport. */
  .header nav.links{
    box-sizing:border-box!important;
    max-width:calc(100vw - 32px)!important;
    overflow-x:hidden!important;
  }
  .header nav.links.open>a{
    width:100%;
    max-width:100%;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }

  .topbar-inner{min-width:0}
  .topbar .top-left,.topbar .top-right{min-width:0}

  .hero-grid,.split,.booking-grid,.service-feature-grid,.wc-about-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .hero-copy,.evidence-copy,.booking-card,.booking-side,
  .wc-about-copy,.wc-about-statement{max-width:100%!important}

  .form-grid-book{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .form-grid-book .span2{grid-column:auto!important}

  .wc-footer-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    gap:28px 22px!important;
  }
  .wc-footer-brand{grid-column:1/-1}

  .wc-footer-legal{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:100%!important;
  }

  .service-process-grid{
    max-width:100%;
  }

  .problem-cards,.type-grid,.treatment-grid,.packages,
  .commitment,.wc-source-grid,.wc-contact-cards,.clean-feature-grid{
    max-width:100%;
  }

  .cta-inner{min-width:0;gap:22px}
  .cta-inner .actions{width:100%;max-width:100%}
}

@media (max-width:640px){
  .wrap,.wc-footer-container{
    padding-left:16px!important;
    padding-right:16px!important;
  }

  h1{font-size:clamp(2rem,10vw,3.2rem)!important}
  h2{font-size:clamp(1.65rem,7.5vw,2.45rem)!important}

  .problem-cards,.packages,.commitment,.wc-source-grid,
  .wc-contact-cards,.clean-feature-grid,.wc-about-points{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Water-source cards can remain compact without creating sideways scroll. */
  #water-types .type-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }
  #water-types .type-card{
    min-width:0!important;
    width:auto!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  .service-process-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
  }
  .service-process-grid>i{
    transform:rotate(90deg);
    justify-self:center;
  }

  .wc-footer-main{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .actions{
    width:100%;
    gap:10px;
  }
  .actions .btn{
    width:100%;
    justify-content:center;
    text-align:center;
  }

  .wa-float .label{display:none}
}

@media (max-width:430px){
  #water-types .type-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  .header nav.links{
    left:12px!important;
    right:12px!important;
    max-width:calc(100vw - 24px)!important;
  }
}