/* ── Mobile Navigation Toggle ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #111;
  transition: transform 0.2s, opacity 0.2s;
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ── Mobile: Tables ── */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 1rem 0;
}

/* ── Mobile: Code blocks ── */
pre {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: clamp(0.7rem, 2vw, 0.85rem);
}

/* ── Mobile breakpoints ── */
@media (max-width: 768px) {
  /* Nav */
  .nav-toggle { display: flex; }
  .nav-links, nav .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    flex-direction: column;
    padding: 1rem 2rem;
    border-bottom: 1px solid #d4d4d8;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    gap: 0.5rem;
    z-index: 100;
  }
  .nav-links.nav-open, nav .nav-links.nav-open {
    display: flex;
  }
  nav, .nav {
    position: relative;
    flex-wrap: wrap;
  }

  /* Typography */
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }

  /* Inputs: touch-friendly */
  input, select, textarea, button {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom */
  }

  /* Grids: stack on mobile */
  .grid, .stats-grid, .usage-grid, .features-grid {
    grid-template-columns: 1fr !important;
  }

  /* Sidebar layouts: stack */
  .docs-layout {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Tables */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* General spacing */
  .container, main, .content {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens */
  nav, .nav {
    padding: 12px 16px !important;
  }

  pre {
    padding: 12px !important;
    font-size: 0.72rem;
  }

  .method-badge {
    font-size: 0.65rem !important;
  }
  .endpoint {
    font-size: 0.8rem !important;
    word-break: break-all;
  }
}