/* ============================================================
   RESPONSIVE — Complete responsive design for all breakpoints
   Mobile-first enhancements
   ============================================================ */

/* ── Tablet landscape & small desktop (max 1200px) ────────── */
@media (max-width: 1200px) {
  :root {
    --sidebar-width: 240px;
  }
  .site-main { grid-template-columns: 1fr; }
  .toc-sidebar { display: none; }
}

/* ── Tablet portrait (max 960px) ──────────────────────────── */
@media (max-width: 960px) {
  :root {
    --sidebar-width: 220px;
  }

  /* Footer */
  .site-footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .site-footer__col--brand {
    grid-column: 1 / -1;
  }
}

/* ── Mobile / Tablet small (max 768px) ────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-height: 56px;
  }

  /* App shell: single column, sidebar hidden */
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main";
  }

  .site-sidebar {
    position: fixed;
    left: -100%;
    top: var(--header-height);
    z-index: var(--z-sidebar);
    width: 85vw;
    max-width: 320px;
    transition: left var(--dur-normal) var(--ease-out);
    box-shadow: var(--shadow-2xl);
    height: calc(100vh - var(--header-height));
  }

  /* On mobile, home-hidden sidebar becomes a slide-in menu (not display:none) */
  .site-sidebar--home-hidden {
    display: block;
  }
  .site-sidebar.site-sidebar--open { left: 0; }

  /* Sidebar overlay when open */
  .site-sidebar.site-sidebar--open::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    background: rgba(0,0,0,.4);
    z-index: -1;
    pointer-events: auto;
  }

  /* Show hamburger */
  #sidebar-toggle { display: flex !important; }

  /* Header */
  .site-header__nav { display: none; }
  .site-header__inner {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }

  .site-logo {
    min-width: auto;
    font-size: var(--text-base);
  }
  .site-logo__icon {
    width: 30px;
    height: 30px;
    font-size: 1rem;
  }

  /* Search trigger compact */
  .search-trigger__text { display: none; }
  .search-trigger__kbd { display: none; }
  .search-trigger {
    padding: var(--space-2) var(--space-3);
  }

  /* Version selector compact */
  #version-selector {
    font-size: 10px;
    padding: 3px 6px;
  }

  /* Content area */
  .content-area {
    padding: var(--space-4) var(--space-3);
    max-width: 100%;
  }

  /* Page navigation stacked */
  .page-nav {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
  .page-nav__btn--next { text-align: left; }

  /* Breadcrumbs */
  .breadcrumbs {
    font-size: var(--text-xs);
    margin-bottom: var(--space-4);
  }

  /* Doc headings */
  .doc-heading--1 { font-size: var(--text-2xl); }
  .doc-heading--2 { font-size: var(--text-xl); }
  .doc-heading--3 { font-size: var(--text-lg); }

  /* Code blocks overflow */
  .code-block {
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .code-pre { padding: var(--space-3); }
  .code-pre code { font-size: 0.8rem; }
  .code-header { padding: var(--space-2) var(--space-3); }

  /* Tables horizontal scroll */
  .table-wrap {
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .doc-table th,
  .doc-table td {
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
  }

  /* Cards */
  .doc-card {
    padding: var(--space-4);
  }
  .doc-card__icon {
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
  }

  .domain-card {
    padding: var(--space-4);
    min-height: 130px;
  }
  .domain-card__icon { font-size: 1.5rem; }
  .domain-card__name { font-size: var(--text-base); }

  /* Note: Hero, stats, domain-grid, features-grid, updates-grid responsive
     rules are now in pages/home.css to avoid duplication and specificity conflicts */

  /* Search overlay full-screen on mobile */
  .search-box {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    margin: 0;
  }
  .search-filters {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .search-filters::-webkit-scrollbar { display: none; }
  .search-footer__hint kbd { display: none; }

  /* Alert boxes */
  .alert-box {
    margin-left: calc(var(--space-3) * -1);
    margin-right: calc(var(--space-3) * -1);
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  /* Footer on mobile */
  .site-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .site-footer__inner {
    padding: 0 var(--space-4);
  }
  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-2);
  }

  /* Home footer responsive rules are in pages/home.css */
}

/* ── Small mobile (max 480px) ─────────────────────────────── */
@media (max-width: 480px) {
  .content-area {
    padding: var(--space-3) var(--space-2);
  }

  .doc-heading--1 { font-size: var(--text-xl); }

  /* Card grid on mobile (non-home pages) */
  .card-grid { gap: var(--space-3); }

  /* Sidebar wider on very small screens */
  .site-sidebar {
    width: 100vw;
    max-width: none;
  }
}

/* ── Touch devices ────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch targets */
  .sidebar-nav__link {
    padding: var(--space-3) var(--space-4);
    min-height: 44px;
  }
  .sidebar-nav__sub-link {
    padding: var(--space-2) var(--space-4);
    min-height: 40px;
  }
  .nav-link {
    min-height: 44px;
  }
  .btn {
    min-height: 44px;
  }
  .toc-list__link {
    padding: var(--space-2) 0 var(--space-2) var(--space-3);
    min-height: 36px;
  }
  .copy-btn {
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
  }

  /* Disable hover effects on touch */
  .domain-card:hover {
    transform: none;
  }
  .doc-card:hover {
    transform: none;
  }
  .hook-card:hover {
    transform: none;
  }
}

/* ── Landscape phone — non-home layout adjustments ───────── */
@media (max-height: 500px) and (orientation: landscape) {
  .site-header { position: relative; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-sidebar,
  .toc-sidebar,
  .search-overlay,
  .hero-particles,
  .bg-stream-container,
  #reading-progress,
  #sidebar-toggle,
  .search-trigger,
  .theme-toggle,
  .copy-btn,
  .page-nav,
  .hero__search,
  .hero__actions,
  .stats-bar,
  .version-banner,
  .site-footer { display: none !important; }

  .app-shell {
    display: block;
  }
  .content-area {
    max-width: 100%;
    padding: 0;
  }
  .code-block {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
  .table-wrap {
    break-inside: avoid;
  }
  body {
    color: #000;
    background: #fff;
  }
  a { color: #000; text-decoration: underline; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}

/* ── Reduced motion ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
  .domain-card:hover,
  .doc-card:hover,
  .hook-card:hover,
  .btn:hover {
    transform: none;
  }
}

/* ── Container queries for adaptive cards ────────────────── */
@media (max-width: 768px) {
  /* Hook grid on mobile */
  .hook-grid { grid-template-columns: 1fr !important; }

  /* Param table scroll indicator */
  .param-table { min-width: 500px; }

  /* Tab navigation horizontal scroll on mobile */
  .tab-nav {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-nav::-webkit-scrollbar { display: none; }

  /* Alert boxes compact */
  .alert {
    flex-direction: column;
    gap: var(--space-2);
  }

  /* Checklist compact */
  .checklist li {
    font-size: var(--text-sm);
  }

  /* Quick links grid on mobile */
  .quick-links-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── High contrast mode ───────────────────────────────────── */
@media (forced-colors: active) {
  .domain-card,
  .doc-card,
  .hook-card,
  .feature-card {
    border: 2px solid CanvasText;
  }
  .btn--primary {
    border: 2px solid ButtonText;
  }
}