/* ===== Responsive Breakpoints ===== */

/* Desktop: ≥ 1024px — sidebar open by default */
@media (min-width: 1024px) {
  .sidebar {
    width: var(--sidebar-width);
  }

  .hamburger {
    /* On desktop, hamburger is in the top bar alongside content */
  }
}

/* Small mobile: < 640px */
@media (max-width: 639px) {
  .main-content {
    padding: 4rem 1.25rem 3rem;
  }

  .hero {
    padding: 1.5rem 0 2rem;
  }

  .hero-avatar {
    width: 72px;
    height: 72px;
  }

  .hero-name {
    font-size: 1.25rem;
  }

  h1 {
    font-size: 1.75rem;
  }

  .article-cover {
    width: calc(100% + 2 * 1.25rem);
    margin-left: -1.25rem;
    border-radius: 0;
  }

  .article-body pre {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

/* Mobile: < 1024px — sidebar hidden, overlay on open */
@media (max-width: 1023px) {
  .main {
    margin-left: 0 !important;
  }

  .sidebar {
    transform: translateX(-100%) !important;
    width: min(var(--sidebar-width), 85vw);
  }

  .sidebar.open {
    transform: translateX(0) !important;
  }

  .sidebar-header {
    padding-top: 4.5rem;
  }

  .sidebar-footer {
    padding: 0.75rem 0.75rem 1rem;
  }

  .theme-toggle {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }

  .theme-toggle svg {
    width: 14px;
    height: 14px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sidebar {
    transition: none;
  }
}

/* Reduced transparency */
@media (prefers-reduced-transparency: reduce) {
  .sidebar,
  .top-bar.scrolled,
  .hamburger,
  .back-btn {
    background: var(--color-surface);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* High contrast */
@media (prefers-contrast: more) {
  .sidebar {
    border-right-width: 2px;
  }

  .article-item {
    border-bottom-width: 2px;
  }

  .tag {
    border: 1px solid var(--color-ink-tertiary);
  }

  .hamburger,
  .back-btn {
    border-width: 2px;
  }
}