/* mobile-fixes.css — shared mobile responsiveness layer for marketing pages.
   Loaded after each page's inline <style> so its rules win at equal specificity. */

/* Belt-and-braces: nothing in the marketing pages should drive horizontal scroll. */
html, body { overflow-x: hidden; }

/* ───── Mobile hamburger button (injected by mobile-nav.js) ───── */
.nav__hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 8px;
}
.nav__hamburger:focus-visible { outline: 2px solid #ff6b35; outline-offset: 2px; }
.nav__hamburger svg { width: 24px; height: 24px; display: block; }

/* ───── Mobile menu drawer (injected by mobile-nav.js) ───── */
.nav__mobile-menu {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(320px, 86vw);
  background: #fff;
  z-index: 200;
  padding: 4.5rem 1.25rem 1.5rem;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.12);
  overflow-y: auto;
  flex-direction: column;
  gap: 0.25rem;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.nav__mobile-menu.is-open { transform: translateX(0); display: flex; }
.nav__mobile-menu a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.75rem;
  border-radius: 8px;
  text-decoration: none;
  color: #1a1a2e;
  font-weight: 500;
  font-size: 1rem;
  min-height: 44px;
}
.nav__mobile-menu a:hover { background: #f5f5f7; color: #ff6b35; }
.nav__mobile-menu .nav__auth-btn {
  margin-top: 0.5rem;
  background: #ff6b35;
  color: #fff !important;
  justify-content: center;
}
.nav__mobile-menu .nav__mobile-lang { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid #eee; }

.nav__mobile-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 150;
}
.nav__mobile-backdrop.is-open { display: block; }

body.nav-mobile-open { overflow: hidden; }

/* ───── Mobile breakpoint overrides ───── */
@media (max-width: 600px) {
  /* Header: show hamburger, hide desktop links + lang selector (mirrored in drawer) */
  .nav__hamburger { display: inline-flex; }
  .nav__inner > .nav__links { display: none !important; }
  .nav__inner > #lang-selector { display: none !important; }
  .nav__inner { padding: 0 1rem; gap: 0.5rem; flex-wrap: nowrap; box-sizing: border-box; }
  .nav__inner > .nav__logo { flex: 0 0 auto; min-width: 0; }
  .nav__inner > .nav__logo span { font-size: 1.05rem; }

  /* Make sure no nav child can push past the right edge */
  .nav, .nav__inner { max-width: 100vw; }

  /* Footer: stack and wrap so links never overflow */
  .footer__inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box;
  }
  .footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    max-width: 100%;
  }
  .footer__links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.4rem;
    font-size: 0.95rem;
  }
  .footer__social { flex-wrap: wrap; justify-content: center; }
  .footer__social a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.4rem; }
  .footer__copy { max-width: 100%; word-wrap: break-word; }

  /* Tap target boost: any auth button stays comfortably tappable */
  .nav__auth-btn { white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

  /* Decorative hero clouds must never spill out of their container */
  .hero, .tl-clouds, .hero__visual { overflow: hidden; }

  /* Tables: render inside an internal horizontal scroll instead of breaking the page */
  .compare-table, .settings-table, .usage-table, .pricing-table, .table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Common settings/admin tables sit in a .card; let it scroll inside too */
  .card { max-width: 100%; box-sizing: border-box; overflow-x: auto; }

  /* Generic image responsiveness — only constrain max width, never stretch */
  main img, section img, article img { max-width: 100%; height: auto; }

  /* Sticky header offset so its 56–64px height never covers anchor content */
  main, section, article { scroll-margin-top: 72px; }

  /* Minimum readable font sizes for tiny badges */
  .badge, .release__tag, [class*="-tag"] { font-size: 0.75rem !important; }
}

/* Very narrow phones (~320px) */
@media (max-width: 360px) {
  .nav__inner > .nav__logo span { font-size: 0.95rem; }
  .footer__links { gap: 0.35rem 0.75rem; }
}