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

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

  /* The title gives way first when the bar runs out of room. */
  .header-logo {
    flex-shrink: 1;
    min-width: 0;
    gap: var(--space-3);
  }

  .header-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 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;
  }

  .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: 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);
  }
}