/* ForkFox shared responsive + mobile-nav styles
 * Loaded on every article + index page via <link rel="stylesheet" href="/css/responsive.css">
 * Designed to be additive — does not override desktop styles, only fires below 768px.
 */

/* Hamburger button (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  margin-left: auto;
  z-index: 110;
  position: relative;
}
.hamburger {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  position: relative;
  transition: background .2s;
}
.hamburger::before,
.hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
  transition: transform .2s, top .2s;
}
.hamburger::before { top: -7px; }
.hamburger::after { top: 7px; }
.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger::after { top: 0; transform: rotate(-45deg); }

/* Infinite scroll loader */
.scroll-loading { display: none; }
.scroll-loading.active { display: block; }

/* ── MOBILE (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-toggle { display: block; }

  /* Collapse desktop nav-link list (handles .nav-links, nav.site ul, .nav-right) */
  .nav-links,
  nav.site ul,
  nav.site-nav .nav-right,
  .nav-right {
    display: none !important;
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, .98);
    backdrop-filter: blur(12px);
    flex-direction: column !important;
    padding: 16px 24px !important;
    margin: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    list-style: none !important;
    z-index: 99;
  }
  .nav-links.active,
  nav.site ul.active,
  nav.site-nav .nav-right.active,
  .nav-right.active {
    display: flex !important;
  }
  .nav-links li,
  nav.site ul li {
    padding: 10px 0;
    width: 100%;
  }
  .nav-links a,
  nav.site ul a,
  .nav-right a {
    display: block;
    width: 100%;
    font-size: 15px !important;
    padding: 10px 0;
  }

  /* Stories group: flatten pill → individual links in dropdown */
  .nav-stories-group {
    display: contents;
  }
  .nav-stories-label {
    display: none !important;
  }

  /* Dish index nav: push hamburger to far right */
  nav.site .nav-toggle,
  nav.site-nav .nav-toggle {
    margin-left: auto;
  }

  /* Article prose column */
  .prose, .content-wrap, .body, .intro, .closing,
  [class*="prose"] {
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box;
  }
  .content-wrap { padding-top: 1.5rem; padding-bottom: 2rem; }
  .page-wrap { padding: 70px 16px 40px !important; }

  /* Hero shrinks on mobile */
  .hero, .hero-stage, .hero-cities {
    height: 250px !important;
    min-height: 250px !important;
    aspect-ratio: auto !important;
  }
  .hero-tagline .line { font-size: 22px !important; }
  .hero-content { padding: 1.25rem 1rem 1.25rem !important; }

  /* Two-column → single column */
  .two-col,
  [style*="grid-template-columns:65fr"],
  [style*="grid-template-columns:280px"] {
    display: block !important;
  }

  /* Sidebars become full-width */
  .sidebar, .toc, [class*="sidebar"] {
    position: static !important;
    width: 100% !important;
    margin-bottom: 24px;
  }

  /* Related cards: 1 column on phone, 2 on tablet */
  .related-grid, .more-articles {
    grid-template-columns: 1fr !important;
  }

  /* Carte top-picks become vertical */
  .pick { flex-direction: column !important; align-items: flex-start !important; }
  .pick-tag { margin-top: 8px !important; }

  /* Email form stacks */
  .email-inner { flex-direction: column !important; align-items: flex-start !important; gap: 1rem !important; }
  .email-form { width: 100% !important; }
  .email-form input { min-width: 0 !important; flex: 1 !important; width: 100% !important; }
  .email-form button { width: 100% !important; }

  /* Font sizes */
  h1, h1.article-title { font-size: 1.75rem !important; line-height: 1.15 !important; }
  h2, .prose h2, .content h2 { font-size: 1.3rem !important; }

  /* Images */
  img { max-width: 100% !important; height: auto !important; }
  /* Logo exception */
  img[alt="ForkFox"] { height: 40px !important; width: auto !important; max-width: 40px !important; }
  /* Cover-fit background images must stay height:100% so they fill their container */
  .hero-bg img, .brutal-bg img, .famous-bg img, .cta-bg img,
  .feat-img, .closing-photo,
  [class$="-bg"] img { height: 100% !important; width: 100% !important; object-fit: cover !important; }

  /* Closing/newsletter stage shrinks */
  .closing-stage { min-height: 360px !important; }
  .closing-content .hook { font-size: 24px !important; }

  /* Footer stacks */
  .footer { flex-direction: column !important; align-items: flex-start !important; }
}

/* Tablet — 2-col related grid */
@media (min-width: 481px) and (max-width: 768px) {
  .related-grid, .more-articles {
    grid-template-columns: 1fr 1fr !important;
  }
}