/* mobile-nav.css
 * Mobile-only nav enhancements.
 * Every rule lives inside @media (max-width: 640px) so desktop is unaffected.
 * Pair with mobile-nav.js.
 */

/* Hamburger button: hidden above 640px so desktop flex layout is unchanged. */
.nav-hamburger {
  display: none;
}

/* Mobile menu: hidden above 640px and whenever the [hidden] attribute is set. */
.mobile-menu {
  display: none;
}

@media (max-width: 640px) {
  /* Shrink the desktop nav's outer padding on phones so the brand + CTA +
   * hamburger fit without overflowing. Most pages only address this at
   * 450px today; we extend the compact treatment up to 640px.
   * Targets the main `<nav>` only, not the sibling #mobile-menu (whose
   * own .mobile-menu rule below has higher specificity). */
  body > nav {
    padding-left: 1rem;
    padding-right: 1rem;
    gap: 0.75rem;
  }

  .nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 44px;
    height: 44px;
    margin-left: 0.25rem;
    background: transparent;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-hamburger:hover,
  .nav-hamburger:focus-visible {
    background: #f3f4f6;
    border-color: #d1d5db;
  }
  .nav-hamburger:focus-visible {
    outline: 2px solid #1a56db;
    outline-offset: 2px;
  }
  .nav-hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: #111827;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Hide the secondary links on phones. Keep .nav-cta visible so the
   * primary signup CTA stays one tap away. */
  .nav-right .nav-link,
  .nav-right .nav-signin {
    display: none;
  }
  .nav-right {
    gap: 0.5rem;
  }
  .nav-right .nav-cta {
    padding: 0.5rem 0.875rem;
    font-size: 13px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
  }

  /* Slide-down panel. Lives directly under the sticky nav. */
  .mobile-menu {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 8px 24px -12px rgba(15, 23, 42, 0.18);
    z-index: 99;
    padding: 4.5rem 1rem 1.25rem;
    max-height: 100vh;
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 0.22s ease;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-menu[hidden] {
    /* Keep it laid out but slid off-screen until JS toggles open.
     * Override the default hidden behavior so the transition still runs. */
    display: block;
  }
  .mobile-menu.is-open {
    transform: translateY(0);
  }
  .mobile-menu a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.625rem 0.75rem;
    font-size: 16px;
    font-weight: 500;
    color: #111827;
    text-decoration: none;
    border-radius: 8px;
    -webkit-tap-highlight-color: rgba(26, 86, 219, 0.1);
  }
  .mobile-menu a + a {
    margin-top: 2px;
  }
  .mobile-menu a:hover,
  .mobile-menu a:focus-visible {
    background: #f3f4f6;
  }
  .mobile-menu a:focus-visible {
    outline: 2px solid #1a56db;
    outline-offset: -2px;
  }
  .mobile-menu .mobile-menu-cta {
    margin-top: 0.75rem;
    background: #1a56db;
    color: #ffffff;
    font-weight: 700;
    justify-content: center;
  }
  .mobile-menu .mobile-menu-cta:hover,
  .mobile-menu .mobile-menu-cta:focus-visible {
    background: #1e40af;
  }

  /* When the menu is open, lock body scroll. */
  body.mobile-menu-open {
    overflow: hidden;
  }
}