/* Lens marketing-site mobile nav — polished drawer.
 *
 * Desktop nav is untouched. Below the 900px breakpoint these rules override
 * the per-page inline mobile styles so the drawer feels like a designed
 * component rather than a stack of plain text rows:
 *
 *   - Hamburger button uses proper SVG icons and swaps to an X when open
 *   - Drawer card has a soft drop-shadow and rounded link rows
 *   - Plain links show a right-pointing chevron and slide on hover
 *   - "Book Demo" is restored as a prominent orange CTA inside the drawer
 *   - "Login" is muted and separated from the main link list
 *   - Body scroll is locked while the drawer is open
 *
 * Loaded AFTER the per-page inline <style> so these rules win on specificity
 * ties. Where we need to defeat existing !important declarations we use
 * !important too.
 */

@media (max-width: 900px) {

  /* ── Toggle button ─────────────────────────────────────────────── */
  .nav-toggle {
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    color: #1E4D6B !important;
    background: transparent !important;
    border: none !important;
    transition: background 0.15s, color 0.15s !important;
    font-size: 0 !important; /* hide any leftover &#9776; if pages still ship the old markup */
  }
  .nav-toggle:hover { background: #EBF5FB !important; }
  .nav-toggle:focus-visible {
    outline: 3px solid rgba(74,127,165,0.35) !important;
    outline-offset: 2px !important;
  }
  .nav-toggle svg {
    display: block;
    width: 26px;
    height: 26px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .nav-toggle .icon-close { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-open { display: none; }
  .nav-toggle[aria-expanded="true"] .icon-close { display: block; }

  /* ── Drawer container ──────────────────────────────────────────── */
  .nav-links {
    padding: 12px 12px 20px !important;
    gap: 2px !important;
    background: #FFFFFF !important;
    border-top: 1px solid #EAEAEA !important;
    box-shadow: 0 14px 28px rgba(15,42,74,0.10);
  }

  /* ── Standard link rows ────────────────────────────────────────── */
  .nav-links a {
    padding: 13px 16px !important;
    border-bottom: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #1A2E3B !important;
    background: transparent;
    border-radius: 10px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    transition: background 0.15s, color 0.15s, transform 0.1s;
  }
  .nav-links a:not(.cta-nav):not(.login)::after {
    content: '';
    width: 8px;
    height: 8px;
    border-top: 2px solid #4A6070;
    border-right: 2px solid #4A6070;
    transform: rotate(45deg);
    margin-right: 6px;
    margin-left: 12px;
    flex-shrink: 0;
    transition: border-color 0.15s, transform 0.15s;
  }
  .nav-links a:not(.cta-nav):not(.login):hover {
    background: #EBF5FB;
  }
  .nav-links a:not(.cta-nav):not(.login):hover::after {
    border-top-color: #F97316;
    border-right-color: #F97316;
    transform: rotate(45deg) translate(2px, -2px);
  }
  .nav-links a.current {
    background: #EBF5FB !important;
    color: #1E4D6B !important;
  }

  /* ── Login link: muted + separated ─────────────────────────────── */
  .nav-links .login {
    background: transparent !important;
    color: #4A6070 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    border-radius: 10px !important;
    margin-top: 10px !important;
    padding-top: 18px !important;
    border-top: 1px solid #EAEAEA !important;
    justify-content: flex-start !important;
  }
  .nav-links .login:hover { background: #EBF5FB !important; color: #1E4D6B !important; }

  /* ── Book Demo CTA: full-width orange button ───────────────────── */
  .nav-links .cta-nav {
    background: #F97316 !important;
    color: #FFFFFF !important;
    padding: 14px 20px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    margin-top: 10px !important;
    justify-content: center !important;
    text-align: center;
    box-shadow: 0 6px 16px rgba(234,88,12,0.28);
  }
  .nav-links .cta-nav:hover {
    background: #EA580C !important;
    color: #FFFFFF !important;
  }

  /* ── Body scroll lock while open ───────────────────────────────── */
  body.nav-open { overflow: hidden; }
}