/* Overlay Full-Screen Menu Styles */

/* ===== Body scroll lock when menu is open ===== */
body.menu-open {
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
  height: 100% !important;
}

/* Hide chat widget when overlay menu is open */
body.menu-open .chat-widget {
  display: none !important;
}

/* ===== Overlay (full screen) ===== */
.overlay{position:fixed;inset:0;background:#000;display:none;z-index:1000;overflow:hidden}
.overlay.open{display:block;animation:fadeIn var(--speed) ease forwards}
@keyframes fadeIn{from{opacity:0} to{opacity:1}}
.overlay-header{position:absolute;top:16px;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:10px;z-index:2}
.overlay-header a{display:flex;align-items:center;gap:10px;color:var(--white);text-decoration:none}
.overlay-header img{width:42px;height:42px}
.overlay-header .title{font-weight:900;letter-spacing:.2px;font-size:1.5rem;color:var(--white)}
.overlay-close{margin-left:auto;margin-right:0;background:transparent;border:1px solid rgba(255,255,255,.18);color:#fff;width:38px;height:38px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--speed) ease,border-color var(--speed) ease}
.overlay-close:hover,.overlay-close:focus-visible{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);outline:none}
.menu-wrap{position:absolute;top:0;left:0;right:0;bottom:0;display:flex;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scroll-behavior:smooth}
.menu-list{width:min(90vw,560px);padding:96px 28px 40px 28px;display:flex;flex-direction:column !important;gap:8px;align-items:flex-start;box-sizing:border-box;min-height:100%}

/* Overlay expandable */
.menu-item{width:100%;display:block !important}
.menu-list > *{width:100%;display:block !important}
.menu-toggle{display:inline-block;color:var(--white);background:transparent;border:none;cursor:pointer;font-weight:700;font-size:1.06rem;padding:10px 0;text-align:left;line-height:1;text-decoration:none;position:relative;width:auto}
.menu-toggle span{display:inline-block}
.menu-toggle .text{position:relative}
.menu-toggle .text::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--brand);transition:width var(--speed) ease}
.menu-toggle:hover .text::after,.menu-toggle:focus-visible .text::after{width:100%}
.menu-toggle .exp-caret{margin-left:6px}
.menu-toggle .exp-caret{display:inline-block;transition:transform var(--speed) ease,color var(--speed) ease}
.menu-item.open .menu-toggle .exp-caret{transform:rotate(90deg);color:var(--brand)}
.menu-toggle:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.menu-sub{overflow:hidden;max-height:0;opacity:.0;transform:translateY(-4px);transition:max-height var(--speed) ease,opacity var(--speed) ease,transform var(--speed) ease;padding-left:30px;display:flex;flex-direction:column;gap:4px}
.menu-item.open .menu-sub{max-height:800px;opacity:1;transform:translateY(0)}
.menu-sub a{display:block;color:var(--white);text-decoration:none;font-weight:700;font-size:1rem;padding:8px 0;position:relative;transition:all 0.4s ease;transform:scale(1);width:100%;margin-bottom:4px}
.menu-sub a:hover,.menu-sub a:focus-visible{color:var(--brand);transform:scale(1.05);text-shadow:0 0 8px rgba(0,229,255,0.3)}
.menu-sub a .sm-arrow{opacity:0;transform:translateX(-6px);transition:transform var(--speed) ease,opacity var(--speed) ease;color:var(--brand)}
.menu-sub a.clicked{color:var(--brand)}
.menu-sub a.clicked .sm-arrow{opacity:1;transform:translateX(0)}

/* Overlay footer removed per request */

/* Mobile scrolling enhancements */
@media (max-width: 1100px) {
  .overlay {
    touch-action: manipulation;
    height: 100vh;
    height: 100dvh; /* Use dynamic viewport height on modern browsers */
  }
  
  .menu-wrap {
    overscroll-behavior: contain;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .menu-list {
    padding-bottom: 40px; /* Consistent bottom spacing */
    min-height: auto; /* Let it size naturally */
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  
  .menu-list > * {
    width: 100% !important;
    display: block !important;
  }
}

/* Responsive adjustments for overlay footer */
@media (max-width: 768px) {
  
  .menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
  }
  
  .menu-list > *,
  .menu-item {
    width: 100% !important;
    display: block !important;
    flex: none !important;
  }
  
  .overlay-footer-content {
    gap: 12px;
  }
  
  .overlay-footer .legal-links { gap: 12px; flex-wrap: wrap; justify-content: center; }
  
  .overlay-footer .social-section {
    gap: 16px;
  }
  
  .overlay-footer .connect-text {
    font-size: 0.85rem;
  }
  
  .overlay-footer .social-link {
    width: 32px;
    height: 32px;
  }
  
  .overlay-footer .social-link svg {
    width: 18px;
    height: 18px;
  }
}