/*
 * Vhanja Constructions Limited
 * Public Website Mobile Responsive Fix V1
 * Scope: public website only. ERP/Admin/API/Database untouched.
 * Upload: /public_html/assets/css/vhanja-mobile-responsive-v1.css
 */

html{max-width:100%;overflow-x:hidden;-webkit-text-size-adjust:100%}
body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,iframe{max-width:100%;height:auto}
svg{max-width:100%}
pre,code{max-width:100%}
.vg-site main,.vg-site section,.vg-site .container,.vg-site .container-fluid{min-width:0}
.vg-site .row>*{min-width:0}

/* Wide content must scroll inside its own region, never widen the page. */
.vg-site .table-responsive,
.vg-site .table-wrap,
.vg-site .vg-table-wrap,
.vg-site .comparison-table,
.vg-site .plan-canvas,
.vg-site .drawing-wrap,
.vg-site .svg-wrap{
  width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain
}
.vg-site table{max-width:none}
.vg-site input,.vg-site select,.vg-site textarea,.vg-site button{max-width:100%}

/* Avoid floating action overlap with iPhone/Android safe areas. */
.vg-site .fixed-bottom,
.vg-site [class*="floating"],
.vg-site [class*="whatsapp"]{max-width:calc(100vw - 24px)}

@media (max-width:991.98px){
  .vg-site .container{max-width:100%}
  .vg-site .sticky-top{position:relative!important;top:auto!important}
  .vg-service-megamenu{
    width:100%!important;max-width:100vw!important;
    max-height:calc(100dvh - 76px)!important;
    overflow-y:auto!important;overflow-x:hidden!important;
    border-radius:0 0 20px 20px!important
  }
  .vg-premium-service-menu{
    width:100%!important;max-width:100%!important;
    margin:0!important;padding:14px!important;border-radius:18px!important
  }
  .vg-menu-header{align-items:flex-start!important;flex-direction:column!important}
  .vg-menu-estimate{width:100%;justify-content:center;white-space:normal!important;text-align:center}
  .vg-service-layout{grid-template-columns:1fr!important}
}

@media (max-width:767.98px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  .vg-site .container,
  .vg-site .container-fluid,
  .vg-site .v3-wrap{
    width:100%!important;max-width:100%!important;
    padding-left:16px!important;padding-right:16px!important
  }

  /* Header / brand */
  .vg-site .vg-brand{min-width:0!important;max-width:calc(100vw - 86px)!important}
  .vg-site .vg-brand img{
    width:44px!important;height:44px!important;max-width:44px!important;
    flex:0 0 44px!important;object-fit:contain
  }
  .vg-site .vg-brand strong{
    min-width:0;white-space:normal!important;overflow-wrap:anywhere;
    font-size:15px!important;line-height:1.1!important
  }
  .vg-site .navbar-toggler{flex:0 0 auto}

  /* Global grids: collapse common public-site layouts safely. */
  .vg-site .v3-stats,
  .vg-site .v3-card-grid,
  .vg-site .v3-timeline,
  .vg-site .v3-trust-grid,
  .vg-site .v3-city-grid,
  .vg-site .service-grid,
  .vg-site .services-grid,
  .vg-site .project-grid,
  .vg-site .projects-grid,
  .vg-site .city-grid,
  .vg-site .feature-grid,
  .vg-site .features-grid,
  .vg-site .package-grid,
  .vg-site .packages-grid{
    grid-template-columns:minmax(0,1fr)!important
  }

  /* Typography */
  .vg-site h1{font-size:clamp(2rem,10vw,3rem)!important;line-height:1.05!important;overflow-wrap:anywhere}
  .vg-site h2{font-size:clamp(1.65rem,8vw,2.35rem)!important;line-height:1.1!important;overflow-wrap:anywhere}
  .vg-site h3{overflow-wrap:anywhere}
  .vg-site p,.vg-site li{overflow-wrap:anywhere}

  /* Buttons and form actions become thumb-friendly. */
  .vg-site .v3-actions,
  .vg-site .hero-actions,
  .vg-site .cta-actions,
  .vg-site .form-actions{flex-wrap:wrap!important}
  .vg-site .v3-actions .v3-btn,
  .vg-site .hero-actions .btn,
  .vg-site .cta-actions .btn{
    width:100%!important;max-width:100%!important;justify-content:center;text-align:center
  }
  .vg-site input:not([type="checkbox"]):not([type="radio"]),
  .vg-site select,.vg-site textarea{width:100%;font-size:16px}

  /* Technical tools keep their designed canvas but scroll locally. */
  .vg-site #planSvg,
  .vg-site [id*="planSvg"],
  .vg-site .plan-svg{
    max-width:none!important
  }
  .vg-site #planSvg{display:block}
  .vg-site table{font-size:.92rem}

  /* Embedded media */
  .vg-site iframe{width:100%!important}
}

@media (max-width:479.98px){
  .vg-site .container,
  .vg-site .container-fluid,
  .vg-site .v3-wrap{padding-left:14px!important;padding-right:14px!important}
  .vg-premium-service-menu{padding:12px!important}
  .vg-site .vg-brand img{width:40px!important;height:40px!important;max-width:40px!important;flex-basis:40px!important}
  .vg-site .vg-brand strong{font-size:14px!important}
}

/* Modern safe-area support for fixed/floating public CTAs. */
@supports (padding: max(0px)){
  .vg-site .fixed-bottom,
  .vg-site [class*="floating"],
  .vg-site [class*="whatsapp"]{
    margin-bottom:max(0px,env(safe-area-inset-bottom))
  }
}