/* ============================================================
   mobile-drawer.css — Shared "Neon Elevated" sidebar menu.
   Identical to the drawer styles shipped in home-theme.css so
   every page that loads this file shows the SAME three-dot menu
   the home page shows (NAVIGATE / COMPANY / CONTACT sections,
   icon cards, social links, footer).

   Pages that include this file must also:
   - load main.js  (the JS attaches the click handler)
   - require_once 'includes/mobile-drawer.php'  (renders the markup)
   - have a <button class="menu-toggle"> somewhere
   ============================================================ */

/* === Base (always available so the markup never looks broken) === */
.mobile-drawer{display:none;position:fixed;inset:0;z-index:9999;}
.mobile-drawer.open{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  background:rgba(6,10,20,0.72) !important;
}
.mobile-drawer.open .mobile-drawer-inner{
  transform:translate3d(0,0,0) !important;
  position:absolute !important;
  top:0 !important; left:0 !important; bottom:0 !important;
  width:min(300px, 85vw) !important;
  max-width:300px !important;
  background:#0F1A2E !important;
  padding:18px 16px 24px !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  display:flex !important;
  flex-direction:column !important;
  box-shadow:8px 0 40px rgba(0,0,0,0.55) !important;
  border-right:1px solid rgba(255,255,255,0.1) !important;
}

/* Content styles (always present so links/cards look right even before media query fires) */
.mobile-drawer-brand{text-align:center;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.08);}
.mobile-drawer-brand .logo{justify-content:center;margin-bottom:8px;font-size:1.1rem;}
.mobile-drawer-brand p{font-size:0.8rem;color:#93A4C6;line-height:1.45;margin:0 auto;max-width:24ch;}
.mobile-drawer-section{margin-bottom:16px;}
.mobile-drawer-label{font-family:'JetBrains Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;color:#66789C;margin-bottom:8px;text-transform:uppercase;}
.mobile-drawer-section a{display:block;padding:8px 0;font-size:0.92rem;color:#EAF1FC;text-decoration:none;}
.mobile-drawer-section a:hover,.mobile-drawer-section a:active{color:#6FB4FF;}
.mobile-drawer-social{display:flex;gap:10px;margin-top:12px;}
.mobile-drawer-social .social-link{width:42px;height:42px;min-width:42px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.2);color:#EAF1FC;padding:0;}
.mobile-drawer-social .social-link svg{width:18px;height:18px;fill:#EAF1FC;display:block;}
.mobile-drawer-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,0.08);font-size:0.7rem;color:#66789C;text-align:center;line-height:1.55;}

/* Plain (non-card) mail link in the CONTACT section */
.mobile-drawer-section a.dw-mail{
  display:block !important;padding:6px 2px !important;
  font-size:0.82rem !important;color:#5cc8ff !important;text-decoration:none !important;
}
.mobile-drawer-section a.dw-mail:active{color:#8fd6ff !important;}

/* Icon-card variants (".mi") — visible only when the drawer is rendered.
   These match the homepage cards exactly. They're written without !important
   here because the !important versions live inside the mobile media query
   below (which is what the home page uses too). */
.mobile-drawer-section a.mi{
  display:flex;align-items:center;gap:11px;
  padding:11px 12px;margin:9px 0;
  border-radius:14px;font-size:0.88rem;color:#d5e6ff;text-decoration:none;
  position:relative;
  background:linear-gradient(150deg,#0f1a30,#0a1120);
  box-shadow:0 8px 18px -10px rgba(0,0,0,.8);
  transform:rotateY(6deg);transform-origin:left center;
  transition:transform .2s ease, box-shadow .2s ease, color .2s ease;
}
.mobile-drawer-section a.mi::before{
  content:"";position:absolute;inset:0;border-radius:14px;padding:1px;
  background:linear-gradient(150deg,rgba(80,160,255,.5),rgba(40,220,240,.15));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;
}
.mobile-drawer-section a.mi::after{
  content:"\203A";margin-left:auto;font-size:1.1rem;line-height:1;
  color:#5aa9ff;opacity:.45;
}
.mobile-drawer-section a.mi .mi-ic{
  width:32px;height:32px;flex-shrink:0;border-radius:9px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg,rgba(50,140,255,.25),rgba(30,210,230,.12));
  color:#5cc8ff;
  box-shadow:inset 0 0 0 1px rgba(90,180,255,.3);
}
.mobile-drawer-section a.mi .mi-ic svg{width:18px;height:18px;display:block;}
.mobile-drawer-section a.mi .mi-t{flex:1;font-weight:500;}
.mobile-drawer-section a.mi:active{transform:rotateY(2deg) scale(.99);}
.mobile-drawer-section a.mi.active{
  transform:rotateY(0deg) translateX(2px) scale(1.02);
  color:#fff;
  box-shadow:0 14px 30px -10px rgba(40,140,255,.8),0 0 22px rgba(40,200,255,.35);
}
.mobile-drawer-section a.mi.active::before{
  background:linear-gradient(150deg,#5aa9ff,#31e0ff);
}
.mobile-drawer-section a.mi.active::after{opacity:.9;}
.mobile-drawer-section a.mi.active .mi-ic{
  background:linear-gradient(150deg,#3b82f6,#22d3ee);
  color:#fff;
  box-shadow:0 0 14px rgba(50,180,255,.7);
}

/* ============================================================
   Mobile-only — exactly mirrors the @media(max-width:760px) block
   in home-theme.css so the drawer behaves the same everywhere.
   ============================================================ */
@media (max-width:760px){
  /* Force-hide the desktop nav and surface the menu toggle, even on
     pages whose own CSS hasn't declared those rules. */
  .desktop-nav{display:none !important;}
  .nav-links{display:none !important;}
  .menu-toggle{display:flex !important;z-index:210;position:relative;}
  .nav-cta{display:none !important;}

  /* ===== Neon Elevated (design C) ===== */
  .mobile-drawer{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:200 !important;
    background:radial-gradient(90% 50% at 10% 0%,rgba(0,120,255,.18),transparent 60%),rgba(4,7,14,.72) !important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
    transition:opacity .25s ease, visibility .25s ease !important;
  }
  .mobile-drawer.open{
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
  }
  .mobile-drawer-inner{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(300px, 85vw) !important;
    max-width:300px !important;
    background:#080d18 !important;
    border-right:1px solid rgba(60,130,255,.25) !important;
    padding:18px 15px 24px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    transform:translate3d(-110%,0,0) !important;
    transition:transform .3s cubic-bezier(.2,.8,.2,1) !important;
    display:flex !important;
    flex-direction:column !important;
    perspective:800px;
    box-shadow:8px 0 40px rgba(0,0,0,0.5),0 0 40px rgba(0,80,200,.2) !important;
  }
  .mobile-drawer.open .mobile-drawer-inner{
    transform:translate3d(0,0,0) !important;
  }

  .mobile-drawer-brand{
    text-align:center !important;
    margin-bottom:18px !important;
    padding-bottom:16px !important;
    border-bottom:1px solid rgba(255,255,255,0.08) !important;
    flex-shrink:0 !important;
  }
  .mobile-drawer-brand .logo{
    justify-content:center !important;
    margin-bottom:8px !important;
    font-size:1.1rem !important;
  }
  .mobile-drawer-brand p{
    font-size:0.8rem !important;
    color:#93A4C6 !important;
    line-height:1.45 !important;
    margin:0 auto !important;
    max-width:24ch !important;
  }

  .mobile-drawer-section{
    margin-bottom:16px !important;
    flex-shrink:0 !important;
  }
  .mobile-drawer-label{
    font-family:'JetBrains Mono',monospace !important;
    font-size:0.65rem !important;
    letter-spacing:0.14em !important;
    color:#4aa8ff !important;
    margin:6px 2px 10px !important;
    text-transform:uppercase !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
  }
  .mobile-drawer-label::before{
    content:"" !important;
    width:5px !important;height:5px !important;border-radius:50% !important;
    background:#31d0ff !important;box-shadow:0 0 9px #31d0ff !important;
    display:inline-block !important;
  }

  /* Neon elevated cards (nav + company) */
  .mobile-drawer-section a.mi{
    display:flex !important;
    align-items:center !important;
    gap:11px !important;
    padding:11px 12px !important;
    margin:9px 0 !important;
    border-radius:14px !important;
    font-size:0.88rem !important;
    color:#d5e6ff !important;
    text-decoration:none !important;
    position:relative !important;
    background:linear-gradient(150deg,#0f1a30,#0a1120) !important;
    box-shadow:0 8px 18px -10px rgba(0,0,0,.8) !important;
    transform:rotateY(6deg) !important;
    transform-origin:left center !important;
    transition:transform .2s ease, box-shadow .2s ease, color .2s ease !important;
  }
  .mobile-drawer-section a.mi::before{
    content:"" !important;
    position:absolute !important;inset:0 !important;
    border-radius:14px !important;padding:1px !important;
    background:linear-gradient(150deg,rgba(80,160,255,.5),rgba(40,220,240,.15)) !important;
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;mask-composite:exclude !important;
    pointer-events:none !important;
  }
  .mobile-drawer-section a.mi::after{
    content:"\203A" !important;
    margin-left:auto !important;
    font-size:1.1rem !important;line-height:1 !important;
    color:#5aa9ff !important;opacity:.45 !important;
  }
  .mobile-drawer-section a.mi .mi-ic{
    width:32px !important;height:32px !important;flex-shrink:0 !important;
    border-radius:9px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    background:linear-gradient(150deg,rgba(50,140,255,.25),rgba(30,210,230,.12)) !important;
    color:#5cc8ff !important;
    box-shadow:inset 0 0 0 1px rgba(90,180,255,.3) !important;
  }
  .mobile-drawer-section a.mi .mi-ic svg{width:18px !important;height:18px !important;display:block !important;}
  .mobile-drawer-section a.mi .mi-t{flex:1 !important;font-weight:500 !important;}
  .mobile-drawer-section a.mi:active{transform:rotateY(2deg) scale(.99) !important;}
  .mobile-drawer-section a.mi.active{
    transform:rotateY(0deg) translateX(2px) scale(1.02) !important;
    color:#fff !important;
    box-shadow:0 14px 30px -10px rgba(40,140,255,.8),0 0 22px rgba(40,200,255,.35) !important;
  }
  .mobile-drawer-section a.mi.active::before{
    background:linear-gradient(150deg,#5aa9ff,#31e0ff) !important;
  }
  .mobile-drawer-section a.mi.active::after{opacity:.9 !important;}
  .mobile-drawer-section a.mi.active .mi-ic{
    background:linear-gradient(150deg,#3b82f6,#22d3ee) !important;
    color:#fff !important;
    box-shadow:0 0 14px rgba(50,180,255,.7) !important;
  }

  /* plain email link (not a card) */
  .mobile-drawer-section a.dw-mail{
    display:block !important;padding:6px 2px !important;
    font-size:0.82rem !important;color:#5cc8ff !important;text-decoration:none !important;
  }
  .mobile-drawer-section a.dw-mail:active{color:#8fd6ff !important;}

  .mobile-drawer-social{
    display:flex !important;
    gap:10px !important;
    margin-top:12px !important;
  }
  .mobile-drawer-social .social-link{
    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    border-radius:12px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:linear-gradient(150deg,#0f1a30,#0a1120) !important;
    border:none !important;
    color:#dcecff !important;
    padding:0 !important;
    box-shadow:inset 0 0 0 1px rgba(90,180,255,.3),0 6px 14px -8px rgba(0,0,0,.7) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
  }
  .mobile-drawer-social .social-link:active{
    transform:translateY(-2px) !important;
    box-shadow:inset 0 0 0 1px rgba(120,200,255,.55),0 10px 20px -8px rgba(40,140,255,.6) !important;
  }
  .mobile-drawer-social .social-link svg{
    width:18px !important;
    height:18px !important;
    fill:#cfe6ff !important;
    display:block !important;
  }

  .mobile-drawer-footer{
    margin-top:auto !important;
    padding-top:16px !important;
    border-top:1px solid rgba(60,130,255,0.2) !important;
    font-size:0.7rem !important;
    color:#6f86ac !important;
    text-align:center !important;
    line-height:1.55 !important;
    flex-shrink:0 !important;
  }
}