/* ================================================================
   MOBILE NAVIGATION — Full-width dropdown attached to top navbar
   Matches modern educational website style (Tailwind-based)
   ================================================================ */

/* ── Desktop: hide hamburger & mobile-only elements ── */
#mobile-menu-button  { display: none !important; }
#mobile-menu-close   { display: none !important; }
#mobile-menu-overlay { display: none !important; }
#mobile-menu-backdrop{ display: none !important; }

/* ================================================================
   MOBILE  ≤ 768px
   ================================================================ */
@media (max-width: 768px) {

  /* ── 1. Override the floating pill nav → full-width top bar ── */
  #TopNavBar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;          /* kill -translate-x-1/2 */
    border-radius: 0 !important;         /* kill rounded-full */
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    border-bottom: 1px solid #e8ecf0 !important;
    box-shadow: 0 2px 12px rgba(0, 17, 58, 0.08) !important;
    padding: 0 20px !important;
    height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 9999 !important;
  }

  /* Logo sizing */
  #TopNavBar img {
    height: 36px !important;
    width: auto !important;
  }

  /* ── 2. Hide desktop links & CTA inside nav ── */
  #TopNavBar .hidden.md\:flex,
  #TopNavBar > div.flex.items-center.gap-4 {
    display: none !important;
  }

  /* ── 3. Hamburger button ── */
  #mobile-menu-button {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
    z-index: 10001 !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: background 0.2s ease !important;
  }

  #mobile-menu-button:hover {
    background: rgba(0, 17, 58, 0.05) !important;
  }

  #mobile-menu-button span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: #00113a !important;
    border-radius: 2px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    transform-origin: center !important;
  }

  /* Hamburger → X */
  #mobile-menu-button.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }
  #mobile-menu-button.active span:nth-child(2) {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  #mobile-menu-button.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  /* ── 4. Dropdown menu panel ── */
  #mobile-menu-overlay {
    display: block !important;           /* always in flow */
    position: fixed !important;
    top: 64px !important;                /* exactly below the 64px navbar */
    left: 0 !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 1px solid #f0f2f5 !important;
    box-shadow: 0 8px 24px rgba(0, 17, 58, 0.10) !important;
    z-index: 9998 !important;
    overflow: hidden !important;

    /* Hidden state */
    max-height: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
    transition:
      max-height 0.32s ease,
      opacity    0.25s ease,
      transform  0.25s ease !important;
  }

  /* Open state */
  #mobile-menu-overlay.active {
    max-height: 500px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }

  /* ── 5. Menu links ── */
  #mobile-menu-overlay a {
    display: block !important;
    width: 100% !important;
    padding: 16px 24px !important;
    color: #191c1e !important;
    font-family: 'Manrope', 'Hanken Grotesk', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 1px solid #f0f2f5 !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
  }

  #mobile-menu-overlay a:last-child {
    border-bottom: none !important;
  }

  #mobile-menu-overlay a:hover {
    background: #f5f7ff !important;
    color: #0058bc !important;
    padding-left: 32px !important;
  }

  #mobile-menu-overlay a:active {
    background: #eef2ff !important;
  }

  #mobile-menu-overlay a.active {
    color: #0058bc !important;
    background: #f0f5ff !important;
    border-left: 3px solid #0058bc !important;
    padding-left: 21px !important;
    font-weight: 700 !important;
  }

  /* ── 6. Backdrop (light dim) ── */
  #mobile-menu-backdrop {
    display: block !important;
    position: fixed !important;
    top: 64px !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 17, 58, 0.18) !important;
    z-index: 9997 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.25s ease !important;
  }

  #mobile-menu-backdrop.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* ── 7. Body scroll lock ── */
  body.menu-open {
    overflow: hidden !important;
  }

  /* ── 8. Push page content below the 64px navbar ── */
  body > main:first-of-type,
  main {
    padding-top: 64px !important;
  }
}

* { -webkit-tap-highlight-color: transparent; }