/* ==========================================================================
   WebPro360 — mobile navigation layer  (nav.css)
   Loads AFTER site.css. Owns every nav rule at <= 1040px.
   Desktop (>1040px) is untouched except the caret glyph + focus rings.
   ========================================================================== */

:root{ --navh: 72px; }

/* --- shared: caret drawn in CSS (markup no longer ships a ▾ character) --- */
.nav .sub-toggle{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.nav .sub-toggle .chev{
  width:9px;height:9px;flex:none;margin-left:2px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .28s cubic-bezier(.4,0,.2,1);
}

/* --- focus visibility (keyboard + switch control) --- */
.nav a:focus-visible,.nav button:focus-visible,.nav .sub-toggle:focus-visible{
  outline:2px solid var(--cyan-bright,#4fd8e4);outline-offset:3px;border-radius:6px;
}

/* --- hamburger → X ------------------------------------------------------- */
.nav-toggle{ position:relative; }
.nav-toggle .bars{ display:block;width:20px;height:14px;position:relative;margin:0 auto; }
.nav-toggle .bars i{
  position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .18s linear;
}
.nav-toggle .bars i:nth-child(1){top:0}
.nav-toggle .bars i:nth-child(2){top:6px}
.nav-toggle .bars i:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(2){opacity:0;transform:scaleX(.2)}
.nav-toggle[aria-expanded="true"] .bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- backdrop ------------------------------------------------------------ */
.nav-backdrop{
  position:fixed;inset:0;z-index:8990;
  background:rgba(3,9,19,.62);backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s;
}
body.nav-open .nav-backdrop{opacity:1;visibility:visible}

/* --- items that only exist inside the drawer ----------------------------- */
.nav-drawer-only{display:none}

/* ==========================================================================
   MOBILE / TABLET
   ========================================================================== */
@media (max-width:1040px){

  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:46px;height:44px;                 /* >= 44px touch target */
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    z-index:9100;
  }
  .nav-toggle:active{transform:scale(.94)}

  /* header keeps a solid surface while the drawer is open */
  body.nav-open .nav{background:rgba(6,16,31,.97);backdrop-filter:blur(14px);border-bottom:1px solid var(--line,#1d2c44)}

  /* ---- the drawer --------------------------------------------------- */
  .nav .nav-links{
    display:flex;                            /* always flex; visibility via transform */
    position:fixed;
    top:var(--navh);
    left:0;right:0;
    max-height:calc(100dvh - var(--navh));
    max-height:calc(100vh - var(--navh));    /* fallback first, dvh wins below */
    max-height:calc(100dvh - var(--navh));
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin:0;
    padding:8px 20px calc(28px + env(safe-area-inset-bottom,0px));
    background:var(--navy-deep,#08131f);
    border-bottom:1px solid var(--line,#1d2c44);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.8);
    white-space:normal;

    /* the two fixes: it scrolls, and the scroll stays inside it */
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    z-index:9050;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .26s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s;
  }
  .nav .nav-links.open{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
  }
  /* while a finger is dragging the sheet down, kill the transition */
  .nav .nav-links.dragging{transition:none}

  /* drag handle — the affordance that says "you can flick me away" */
  .nav .nav-links::before{
    content:"";display:block;flex:none;
    width:44px;height:4px;margin:2px auto 10px;border-radius:99px;
    background:var(--line,#22354f);
  }

  /* ---- rows ---------------------------------------------------------- */
  .nav .nav-links > a,
  .nav .nav-item > .sub-toggle{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;min-height:52px;              /* comfortable thumb target */
    padding:12px 4px;margin:0;
    font-size:1.06rem;font-weight:600;
    color:var(--ink,#e8eef6);
    border-bottom:1px solid rgba(255,255,255,.06);
    background:none;border-left:0;border-right:0;border-top:0;
    text-align:left;white-space:normal;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
    transition:background .18s,color .18s,padding-left .18s;
    border-radius:0;
  }
  .nav .nav-links > a::after{display:none}   /* kill the desktop underline sweep */
  .nav .nav-links > a:active,
  .nav .nav-item > .sub-toggle:active{background:rgba(43,184,196,.10);padding-left:10px}
  .nav .nav-links > a:hover,
  .nav .nav-item:hover .sub-toggle{color:var(--ink,#e8eef6)}  /* no hover-stuck states on touch */

  .nav .nav-item{
    flex-direction:column;align-items:stretch;width:100%;position:relative;
  }
  .nav .nav-item::after{display:none}        /* desktop hover bridge */
  .nav .nav-item > .sub-toggle .chev{transform:rotate(45deg) translateY(-2px)}
  .nav .nav-item.open > .sub-toggle{color:var(--cyan-bright,#4fd8e4)}
  .nav .nav-item.open > .sub-toggle .chev{transform:rotate(-135deg) translateY(-2px)}

  /* ---- accordion submenu --------------------------------------------- */
  .nav .nav-item .submenu,
  .nav .nav-item:hover .submenu,
  .nav .nav-item:focus-within .submenu{
    position:static;transform:none;box-shadow:none;border:0;background:transparent;
    opacity:1;visibility:visible;
    left:auto;right:auto;top:auto;min-width:0;width:100%;
    display:block;
    height:0;overflow:hidden;padding:0;margin:0;
    transition:height .3s cubic-bezier(.4,0,.2,1);
  }
  .nav .nav-item.open .submenu{height:auto}  /* JS animates px → then releases to auto */
  .nav .nav-item .submenu::before{display:none}

  .nav .submenu a{
    display:flex;align-items:center;min-height:48px;
    padding:10px 4px 10px 18px;margin:0;
    font-size:1rem;font-weight:500;
    color:var(--ink-soft,#a9bad0);
    border-bottom:1px solid rgba(255,255,255,.045);
    border-left:2px solid rgba(43,184,196,.28);
    border-radius:0;white-space:normal;
    -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  }
  .nav .submenu a:last-child{border-bottom:1px solid rgba(255,255,255,.045)}
  .nav .submenu a:active{background:rgba(43,184,196,.10);color:var(--cyan-bright,#4fd8e4)}
  .nav .submenu a:hover{background:none;color:var(--ink-soft,#a9bad0)}

  /* ---- phone + CTA live in the drawer -------------------------------- */
  .nav-drawer-only{display:block}
  .nav .nav-drawer-cta{
    display:flex;flex-direction:column;gap:12px;
    margin-top:22px;padding-top:4px;
  }
  .nav .nav-drawer-cta .btn{width:100%;justify-content:center;min-height:52px;font-size:1rem}
  .nav .nav-drawer-cta .nav-phone-lg{
    display:flex;align-items:center;justify-content:center;gap:10px;
    min-height:52px;border:1px solid var(--line,#22354f);border-radius:11px;
    font-weight:700;font-size:1.05rem;color:var(--ink,#e8eef6);
    -webkit-tap-highlight-color:transparent;
  }
  .nav .nav-drawer-cta .nav-phone-lg:active{background:rgba(255,255,255,.05)}
  .nav .nav-drawer-cta .nav-phone-lg::after{display:none}
  .nav .nav-drawer-hint{
    margin:14px 0 0;text-align:center;font-size:.78rem;letter-spacing:.04em;
    text-transform:uppercase;color:var(--ink-soft,#7f90a6);opacity:.6;
  }
}

/* small phones: the header "Book a call" button crowds the logo — drawer has it */
@media (max-width:600px){
  .nav-inner{padding:12px 18px;gap:12px}
  .nav-cta{display:none}
}

/* landscape phones: short viewport, make sure the sheet still scrolls */
@media (max-width:1040px) and (max-height:480px){
  .nav .nav-links{padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
  .nav .nav-links > a,.nav .nav-item > .sub-toggle{min-height:46px;padding:8px 4px}
  .nav .submenu a{min-height:42px}
}

/* pointer:coarse — never rely on hover anywhere in the nav */
@media (pointer:coarse){
  .nav-item:hover .submenu{opacity:0;visibility:hidden}
  .nav-item.open .submenu{opacity:1;visibility:visible}
}
@media (max-width:1040px) and (pointer:coarse){
  .nav .nav-item .submenu{opacity:1;visibility:visible}
}

@media (prefers-reduced-motion:reduce){
  .nav .nav-links,.nav .nav-item .submenu,.nav-toggle .bars i,.nav .sub-toggle .chev{transition:none!important}
}