/* Water Cleanic Boreholes V58 — LAUNCH SIDEBAR
   STRICT SCOPE: mobile navigation only.
   No page sections, forms, images, desktop navigation or workflow styling. */

.wc-mobile-shell{
  display:none;
}

@media (max-width:1250px){
  html,body{
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  /* The original desktop nav is not used as the mobile panel. */
  .header nav.links{
    display:none !important;
  }

  /* Existing header button remains the single menu/close control. */
  .header button.menu{
    display:grid !important;
    place-items:center !important;
    width:52px !important;
    height:52px !important;
    min-width:52px !important;
    padding:0 !important;
    margin-left:auto !important;
    position:relative !important;
    z-index:12020 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#0a3b5d !important;
    box-shadow:none !important;
    font-size:2rem !important;
    line-height:1 !important;
    touch-action:manipulation !important;
  }

  /*
   * Independent viewport layer.
   * It is appended directly to <body>, so surrounding page CSS cannot
   * reposition it and it cannot reposition those elements.
   */
  .wc-mobile-shell{
    position:fixed !important;
    inset:0 !important;
    z-index:12000 !important;
    display:block !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    background:transparent !important;
    transition:opacity .16s ease, visibility .16s ease !important;
  }

  .wc-mobile-shell.is-open{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }

  .wc-mobile-panel{
    position:absolute !important;
    left:24px !important;
    right:24px !important;
    top:var(--wc-menu-top, 190px) !important;
    bottom:18px !important;

    display:flex !important;
    flex-direction:column !important;
    gap:12px !important;

    margin:0 !important;
    padding:24px 22px 26px !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain !important;
    touch-action:pan-y !important;

    background:rgba(255,255,255,.99) !important;
    border:1px solid #d7e9f3 !important;
    border-radius:28px !important;
    box-shadow:0 16px 42px rgba(3,40,68,.16) !important;

    transform:translateY(-6px) scale(.99) !important;
    transform-origin:top center !important;
    transition:transform .16s ease !important;
  }

  .wc-mobile-shell.is-open .wc-mobile-panel{
    transform:translateY(0) scale(1) !important;
  }

  .wc-mobile-panel > a{
    flex:0 0 auto !important;
    width:100% !important;
    min-width:0 !important;
    min-height:62px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;

    margin:0 !important;
    padding:0 16px 0 20px !important;

    color:#123b5b !important;
    background:#fff !important;
    border:0 !important;
    border-radius:14px !important;
    box-shadow:0 2px 0 #e7f0f5 !important;

    font-size:1rem !important;
    font-weight:800 !important;
    line-height:1.2 !important;
    text-decoration:none !important;
    white-space:normal !important;
    touch-action:manipulation !important;
  }

  .wc-mobile-panel > a.wc-menu-page::after{
    content:"›" !important;
    display:grid !important;
    place-items:center !important;
    flex:0 0 40px !important;
    width:40px !important;
    height:40px !important;
    margin-left:14px !important;
    border-radius:50% !important;
    background:#eef8fc !important;
    color:#187dab !important;
    font-size:1.7rem !important;
    font-weight:700 !important;
    line-height:1 !important;
  }

  .wc-mobile-panel > a.is-current{
    color:#fff !important;
    background:#49a5dd !important;
    box-shadow:none !important;
  }

  .wc-mobile-panel > a.is-current::after{
    background:rgba(255,255,255,.22) !important;
    color:#fff !important;
  }

  .wc-mobile-panel > a.wc-mobile-track{
    min-height:56px !important;
    margin-top:4px !important;
    border:2px solid #a9ddf5 !important;
    border-radius:14px !important;
    box-shadow:none !important;
    color:#247eae !important;
    background:#fff !important;
  }

  .wc-mobile-panel > a.wc-mobile-track::before{
    content:"⌕" !important;
    margin-right:auto !important;
    color:#247eae !important;
    font-size:1.4rem !important;
  }

  .wc-mobile-panel > a.wc-mobile-assessment{
    min-height:56px !important;
    margin-top:2px !important;
    border-radius:14px !important;
    background:#49a5dd !important;
    color:#fff !important;
    box-shadow:none !important;
  }

  .wc-mobile-panel > a.wc-mobile-assessment::after{
    content:"→" !important;
    color:#fff !important;
    font-size:1.55rem !important;
    font-weight:500 !important;
  }

  /* WhatsApp never overlaps the open panel. */
  body.wc-menu-open .wa-float{
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
}

@media (max-width:430px){
  .wc-mobile-panel{
    left:16px !important;
    right:16px !important;
    bottom:12px !important;
    padding:20px 18px 22px !important;
    gap:10px !important;
    border-radius:24px !important;
  }

  .wc-mobile-panel > a{
    min-height:60px !important;
    padding-left:18px !important;
    padding-right:14px !important;
  }
}