/* ================================================================
   responsive.css — mobile & tablet breakpoints
   Edit this file to adjust layout at different screen sizes.
   ================================================================ */

/* ── NO HORIZONTAL SCROLL — global safeguard (all screen sizes) ────
   Keep every page within the viewport width so a sideways scrollbar
   never appears. Uses overflow-x: clip rather than hidden so the
   sticky header (header.css) keeps working — clip prevents scrolling
   without establishing a scroll container. box-sizing:border-box and
   img{max-width:100%} are already set globally in base.css. */
html, body { max-width: 100%; overflow-x: clip; }

/* Elements that most often push past the viewport edge */
img, video, canvas, svg, iframe { max-width: 100%; height: auto; }
/* Wide content scrolls inside its own box instead of stretching the page */
table { max-width: 100%; }
pre, code { max-width: 100%; overflow-x: auto; }

/* ── DESKTOP (≥ 769px): scrollbar starts below the header ─────────
   Make the body a viewport-tall flex column so the header (and the
   footer) stay fixed in place and only #main-content scrolls. The
   scrollbar then begins beneath the header instead of spanning the
   whole window height. The footer rejoins normal flow here — at the
   bottom of the column it's still always visible. */
@media (min-width: 769px) {
  html { overflow: hidden; scrollbar-gutter: auto; }
  body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;          /* clearance is handled on #main-content below */
  }
  .site-header { flex: 0 0 auto; }
  #main-content {
    flex: 1 1 auto;
    min-height: 0;              /* let it shrink below content size so it scrolls */
    overflow-y: auto;
    scrollbar-gutter: stable;
    padding-bottom: 80px;       /* clear the fixed footer pinned to the viewport bottom */
  }
  /* .site-footer keeps position:fixed (footer.css) so it stays pinned
     to the bottom of the viewport regardless of where it lands in the DOM. */
}

/* ── TABLET (≤ 768px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Recipe detail: single column with the photo pulled above ingredients.
     display:contents flattens the sidebar/main wrappers so every section
     becomes a direct flex item that we can reorder freely. */
  .det-layout {
    display: flex;
    flex-direction: column;
    padding: var(--sp-md);
    gap: var(--sp-md);
  }
  .det-sidebar,
  .det-main { display: contents; }

  #det-photo       { order: 1; }
  .scaler-box      { order: 2; }
  #det-ingredients { order: 3; }
  #det-attachments { order: 4; }
  #det-steps       { order: 5; }
  #det-notes       { order: 6; }

  /* Detail header: drop the action icons below the title + serving/difficulty
     meta line instead of beside the title. */
  .det-top     { flex-direction: column; align-items: flex-start; gap: var(--sp-sm); }
  .det-actions { width: 100%; }

  /* Settings sidebar: drop its desktop right-border on mobile (the admin
     page's own media query lays the tabs out as a horizontal strip) */
  .settings-sidebar {
    border-right: none; border-bottom: 1px solid var(--bo);
    display: flex; flex-wrap: wrap; gap: 2px; padding: var(--sp-xs);
  }

  /* Search full-width */
  .hdr-search { max-width: none; }

  /* Forms */
  .form-row    { grid-template-columns: 1fr; }

  /* Grid */
  .recipe-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Adv search */
  .adv-grid { grid-template-columns: 1fr 1fr; }
}

/* ── MOBILE (≤ 480px) ───────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Smaller logo — resize the anchor so name + slogan scale together */
  .logo { font-size: 22px; }

  /* Stack search below logo+nav row */
  .hdr-top {
    flex-wrap: wrap;
    height: auto;
    padding: .5rem .75rem;
    gap: .35rem;
  }
  .logo       { flex: 1; }
  .hdr-nav    { flex-shrink: 0; }
  .hdr-search {
    order: 3;       /* push below the first flex line */
    flex: 1 1 100%;
    max-width: none;
    padding-bottom: .4rem;
  }

  /* 2-column grid on small phones */
  .recipe-grid { grid-template-columns: 1fr 1fr; }

  /* Single-column adv grid */
  .adv-grid { grid-template-columns: 1fr; }

  /* Detail actions: keep icons in a row under the meta line */
  .det-actions { flex-direction: row; flex-wrap: wrap; align-items: center; }

  /* Category bar: tighter layout (collapse/expand handled in header.css —
     it's toggled by the browse button on the search row) */
  .cat-bar { gap: 3px; padding: .5rem .75rem; }

  /* Form boxes less padding */
  .form-box { padding: 1rem; }

  /* Stat grid 2-col on mobile */
  .stat-grid { grid-template-columns: 1fr 1fr; }

  /* Footer: prevent word wrap — shrink font + padding to fit one line */
  .site-footer {
    font-size: 10px;
    padding: .35rem .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .site-footer strong { font-size: 10px; }
  .footer-copyright { font-size: 9px; white-space: nowrap; }
}

/* ── PRINT ──────────────────────────────────────────────────────── */
@media print {
  .site-header, .cat-bar-wrap, .det-actions,
  .back-btn, .scaler-box, .no-print { display: none !important; }
  .det-layout { display: block; }
  .det-sidebar { border: none; padding: 0; }
  body { background: white; }
  .ing-checkbox { display: none; }
  .ing-content.checked { opacity: 1 !important; text-decoration: none !important; }
}