/* ========================================
   Responsive adjustments (loaded last)
   (split from main.css, PLAN-165 D9)
   ======================================== */

/* Responsive Adjustments
   ---------------------------------------- */
/* The header runs out of room before the layout does (PLAN-287 D5): the
   GitHub link gives way first (it is in the footer too), then the version
   badge, then search collapses to its icon at 900 px, then the tabs move
   into the drawer at 768 px. */
@media (max-width: 1180px) {
  .header-npm {
    display: none;
  }
}

@media (max-width: 960px) {
  .site-header .version-badge {
    display: none;
  }

  .tabs-list {
    gap: var(--space-4);
  }
}

/* Below 900 px the tabs need the room: the search box collapses to its icon
   rather than shrinking to a sliver (PLAN-287 final review). */
@media (max-width: 900px) {
  /* Search collapses to its icon (PLAN-274 D4); focusing it opens the box
     across the bar. */
  .header-search {
    flex: 0 0 2.25rem;
  }

  .header-search .pagefind-ui__search-input:not(:focus) {
    color: transparent !important;
    padding-right: 0 !important;
  }

  .header-search .pagefind-ui__search-input:not(:focus)::placeholder {
    color: transparent !important;
  }

  .header-search:focus-within {
    position: absolute;
    top: calc((var(--header-height) - 32px) / 2);
    left: var(--space-3);
    right: var(--space-3);
    z-index: 300;
  }

  .search-kbd {
    display: none;
  }
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  /* The tabs move into the drawer (PLAN-287 D12). */
  .header-tabs,
  .search-kbd {
    display: none;
  }

  .drawer-tabs {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }

  .drawer-tabs .tabs-list {
    flex-direction: column;
    gap: 0;
  }

  .drawer-tabs .header-tab {
    height: auto;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
  }

  .drawer-tabs .header-tab.is-active {
    box-shadow: none;
    background-color: var(--color-accent-tint);
    color: var(--color-primary);
    font-weight: 600;
  }

  .menu-toggle {
    display: flex;
  }

  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 200;
    width: 280px;
    transition: left var(--transition-normal);
  }

  .sidebar.open {
    left: 0;
  }

  .main-content {
    padding: var(--space-6) var(--space-4);
  }

  h1 {
    font-size: var(--text-2xl);
  }

  h2 {
    font-size: var(--text-xl);
  }

  dl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  dt {
    margin-top: var(--space-2);
  }
}

@media (max-width: 480px) {
  .site-header {
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  /* Not enough room next to the wordmark + controls on phones. */
  .version-badge {
    display: none;
  }

  .header-controls {
    gap: var(--space-2);
  }

  .site-footer ul {
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
  }
}