/* ─────────────────────────────────────────────────────────────
   mobile-shared.css
   Shared mobile-responsive layer for the marketing + auth pages.

   Works with the standard header pattern used across the site:
   .site-header > .header-inner > .brand + .nav-links + .header-ctas

   On screens narrower than 900px the inline per-page CSS hides
   .nav-links / .header-ctas. This file restores navigation via a
   hamburger button + full-screen drawer injected by js/mobile-nav.js.

   Uses CSS variables with fallbacks so it is safe on every page.
   ───────────────────────────────────────────────────────────── */

/* ── Base defaults: everything hidden on desktop so the DOM
   elements injected by js/mobile-nav.js never leak onto large
   screens. Revealed only inside the mobile breakpoint below. ── */
.hamburger { display: none; }
.mobile-nav-backdrop { display: none; }
.mobile-nav { display: none; }

/* Breakpoint where the shared mobile nav takes over.
   Matches the inline "hide .nav-links under 900px" rules. */
@media (max-width: 900px) {

  /* ── Hamburger button ── */
  .hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    border: 1px solid rgba(14, 47, 93, 0.14);
    border-radius: 10px;
    background: #ffffff;
    color: var(--brand, #0e2f5d);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 601;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
  }
  .hamburger:hover,
  .hamburger:focus-visible {
    background: var(--accent-soft, #e7eef8);
    border-color: var(--accent, #0f64d9);
    color: var(--accent, #0f64d9);
    outline: none;
  }
  .hamburger:focus-visible {
    box-shadow: 0 0 0 3px rgba(15, 100, 217, 0.35);
  }

  /* Move the brand/logo to the left, keep a small gap so nothing
     overlaps the new button. */
  .header-inner { gap: 1rem; }
  .header-inner .brand { margin-right: auto; }

  /* ── Backdrop ── */
  .mobile-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(7, 26, 53, 0.45);
    backdrop-filter: blur(2px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 598;
  }
  .mobile-nav-backdrop.show {
    opacity: 1;
    visibility: visible;
  }

  /* ── Drawer ── */
  .mobile-nav {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    width: min(86vw, 360px);
    height: 100dvh;
    background: #ffffff;
    box-shadow: -12px 0 40px rgba(7, 26, 53, 0.18);
    z-index: 600;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0.28s ease;
    flex-direction: column;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .mobile-nav.open {
    transform: translateX(0);
    visibility: visible;
  }

  .mobile-nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line, #dde3ea);
    flex-shrink: 0;
  }
  .mobile-nav-head .brand { margin: 0; flex: 1; min-width: 0; }
  .mobile-nav-head .brand img { max-width: 120px; height: auto; }

  .mobile-nav-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 10px;
    background: var(--background, #f4f6f8);
    color: var(--brand, #0e2f5d);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .mobile-nav-close:hover {
    background: #e8edf4;
    color: var(--accent, #0f64d9);
  }

  .mobile-nav .mobile-nav-scroll { flex: 1; overflow-y: auto; padding: 1.1rem; }

  .mobile-nav .mobile-nav-links {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }
  .mobile-nav .mobile-nav-links a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 0.9rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--brand, #0e2f5d);
    min-height: 48px; /* comfortable touch target */
  }
  .mobile-nav .mobile-nav-links a:hover,
  .mobile-nav .mobile-nav-links a.active {
    background: var(--accent-soft, #e7eef8);
    color: var(--accent, #0f64d9);
  }

  .mobile-nav .mobile-nav-ctas {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 1px solid var(--line, #dde3ea);
    padding-top: 1.1rem;
  }
  .mobile-nav .mobile-nav-ctas .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
    font-size: 0.95rem;
  }
}

/* Prevent horizontal scroll caused by wide comparison tables on
   small screens (e.g. index comparison table, billing tables). */
.mobile-scroll,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Generic mobile tightening (safe on every page) ── */
@media (max-width: 640px) {
  img, video, svg { max-width: 100%; height: auto; }

  .site-header { position: sticky; }

  /* Keep buttons from wrapping awkwardly inside headers/hero CTAs */
  .btn {
    white-space: normal;
    text-align: center;
  }

  h1, h2 {
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

/* Lock body scroll while the drawer is open */
body.mobile-nav-open {
  overflow: hidden;
}