/* mn-responsive.css — site-wide responsive layer for Mechanica Natura.
 *
 * Linked LAST on every page (immediately before </head>, after each
 * page's inline <style>), so these media-query rules win by source
 * order without needing !important. Two breakpoints — 860px (tablet)
 * and 560px (phone) — matching the few breakpoints already used inline
 * on home/nutraceuticals/pathways, plus a 680px nav break.
 *
 * Before this file the site was effectively desktop-only: a fixed
 * 640/680px hero text column, 200-240px sidebars, 3-4 column card
 * grids, and no mobile nav. Pathways and nutraceuticals already
 * collapse their own body grids; the rules here reinforce those
 * identically and add every page that had none (framework, the legal
 * pages, sourcing, all compound pages) plus the hero + nav globally.
 */

/* ── TABLET (≤860px) ─────────────────────────────────────────── */
@media (max-width: 860px) {
  /* Every horizontal gutter uses --sp-xl; shrink it once here. */
  :root { --sp-xl: 24px; }

  /* Heroes → single fluid column. Covers pages that add
     .page-hero-inner and compound pages that use .cmpd-hero-inner. */
  .cmpd-hero-inner,
  .page-hero-inner { grid-template-columns: 1fr; gap: 28px; }
  /* Keep the identity box in its desktop 2-column form (name left,
     illustration right) wherever there's width — tablet-portrait and
     phone-landscape — just scale the fixed illustration column down from
     the desktop 200px. On phone PORTRAIT (≤560, below) the illustration is
     hidden instead, so the name keeps the full card width without needing
     to hyphenate. */
  .cmpd-id-box { width: 100%; box-sizing: border-box; grid-template-columns: auto 165px; }
  /* Lead with the identity box (compound name + image) so a reader landing
     mid-scroll sees WHICH compound they're on before the intro prose.
     order:-1 lifts it above the eyebrow/intro div in the stacked hero
     (only in this single-column range; desktop keeps its 2-col order). */
  .cmpd-hero-inner > .cmpd-id-box { order: -1; }

  /* Sidebar + content layouts → single column; sidebar un-stuck and
     stacked above the content. */
  .fw-body, .src-body, .nut-body, .atlas-body { grid-template-columns: 1fr; }
  .fw-toc, .src-sidebar, .nut-sidebar, .atlas-sidebar {
    position: static; top: auto; padding-right: 0; margin-bottom: 28px;
  }

  /* Card grids step down a level. */
  .cmpd-grid { grid-template-columns: repeat(2, 1fr); }

  /* Reference rows are flex with a nowrap "Source ↗" link — let the row
     wrap so the link drops to a new line instead of overflowing. */
  .refs li { flex-wrap: wrap; }

  /* Nothing should force the page to scroll sideways. (Not applied to
     an ancestor of the sticky nav, so stickiness is preserved.) */
  img, svg, video { max-width: 100%; height: auto; }
}

/* ── LONG-NAME COMPOUNDS (no plant image) ────────────────────────
   The hero's 2-column id-box assumes a short single-word name. A very long
   name (e.g. Piperlongumine) leaves no room for the decorative illustration
   beside it. This opt-out class — added to the .cmpd-id-box div at author
   time — drops the image at ALL widths and lets the name span the full box.
   Not media-scoped, and it lives here (cache-busted) so it reaches devices
   on the day such a page ships. See the add-compound runbook. */
.cmpd-id-box.id-box--no-plant { grid-template-columns: 1fr; }
.cmpd-id-box.id-box--no-plant .cmpd-illustration { display: none; }
.cmpd-id-box.id-box--no-plant .cmpd-name { max-width: 100%; }

/* ── PHONE (≤560px) ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .cmpd-grid { grid-template-columns: 1fr; }

  /* Phone portrait: not enough width to sit the illustration beside the
     name without hyphenating the name. It's decorative — drop it and give
     the name the full card width (single column). */
  .cmpd-id-box { grid-template-columns: 1fr; }
  .cmpd-illustration { display: none; }

  /* Framework's L2 role cards (2-up) stack on phone portrait. */
  .l2-grid { grid-template-columns: 1fr; }

  /* Evidence-tier cards (3-up) leave ~60px of usable content per card on
     phone portrait — stack them. Used by Framework (.fw-content) AND all
     8 compound Summary views (#evidence); both want stacking here, so the
     rule is unscoped. */
  .ev-grid { grid-template-columns: 1fr; }

  /* Doctrine strip (compound hero): the nowrap "Functional Role" label
     eats a third of the width, cramming the 5 role pills into a ragged
     narrow column. Stack the label above the pills so they get full width. */
  .doctrine-strip-inner { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* Compound-page research data tables (.data-table is table-layout:fixed
     + width:100%, so it always shrinks to the wrapper — the overflow-x
     below never triggered and columns compressed to character-towers, e.g.
     a 4-col row 515px tall at phone). Give the table a min-width so it keeps
     readable columns and the wrapper scrolls horizontally instead. */
  .pkr-table-wrap, .onr-table-wrap, .safr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pkr-table-wrap .data-table,
  .onr-table-wrap .data-table,
  .safr-table-wrap .data-table { min-width: 480px; }
  .data-table { font-size: 12px; }
  /* The caption strip must span the full scrollable table width, not just
     the viewport — otherwise its cream shading stops mid-table and the
     scrolled-in columns show bare white above them. Match the table min-width. */
  .pkr-cap, .onr-cap, .safr-cap { min-width: 480px; box-sizing: border-box; }
  /* Co-dosing table: its first column holds the category pill. At 24% of the
     480px min-width (~115px) the pill collapses into a tall 83×103 blob. Give
     that column ~42% so the pill reads as a proper 1–2 line pill. !important
     overrides the table's inline <col style="width:24%">. */
  .pkr-table-wrap:has(.codose-cell) col:first-child { width: 42% !important; }
}

/* ── CO-DOSING consult callout (base rule; lives here so it reaches
   cache-busted devices). Clay-shaded directive above each compound's
   co-dosing table, routing the avoid/combine/separate decision to the
   reader's physician. */
.codose-consult { display: flex; gap: 8px; align-items: flex-start; background: rgba(200,106,75,.12); border-left: 3px solid var(--clay); color: var(--bark); font-weight: 600; font-size: 13px; line-height: 1.5; padding: 10px 14px; border-radius: var(--r-sm); margin: 0 0 16px; }
.codose-consult i { color: var(--clay); flex-shrink: 0; margin-top: 2px; }

/* ── SOURCING product cards (≤1024px) ────────────────────────────
   The featured card's fixed 347px column heights and the other-products
   row's fixed 120+102px columns overflow at mid widths (phone-landscape,
   tablet-portrait): the featured links spill into the next section and
   the alt cards' link column pushes past the card edge. Stack the
   featured card, release the fixed heights, force a 2-up alt grid, and
   let the link column flex so it can never overflow a narrow card. */
@media (max-width: 1024px) {
  .src-featured { grid-template-columns: 1fr; }
  .src-featured-visual, .src-featured-text { height: auto; }
  .src-alt-grid { grid-template-columns: 1fr 1fr; }
  .src-product-row { grid-template-columns: 110px minmax(0, 1fr); }
}
@media (max-width: 560px) {
  /* Phone portrait: single-column other-products (this rule follows the
     ≤1024 one, so it wins the tie at ≤560). */
  .src-alt-grid { grid-template-columns: 1fr; }
}

/* ── FOOTER (≤680px) ─────────────────────────────────────────────
   .ft-grid is 4 fixed columns on desktop; stack it for small screens.
   Brand spans the top, link columns go 2-up (then 1-up on tiny widths).
   CSS-only, no markup change, safe to ship site-wide. */
@media (max-width: 680px) {
  /* Brand spans the top; Explore / Resources / Legal stay 3-up even on
     a narrow phone. Tight column gap so all three fit; labels wrap
     within their own cell if a phone is very small. */
  .ft-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 12px; }
  .ft-grid > div:first-child { grid-column: 1 / -1; }

  /* Bottom bar: the 5-col grid pins copyright + edu note to fixed
     columns with nowrap, so they collide on a phone. Stack them into
     one centred column, two rows. */
  .ft-btm { grid-template-columns: 1fr; row-gap: 8px; text-align: center; }
  .ft-btm-copyright, .ft-btm-edu { grid-column: 1; white-space: normal; }
}
/* Decorative footer plants are absolutely positioned + rotated, so their
   bounding box spills ~30px past the viewport on narrow screens and forces
   the mobile layout wide. Aria-hidden decoration — drop them on mobile. */
@media (max-width: 1024px) {
  .ft-plant, .ft-plant-left { display: none; }
}

/* ── MOBILE NAV (≤1024px) ────────────────────────────────────────
   Hamburger is progressive enhancement: mn-nav.js adds a .nav-burger
   button and the .has-burger class. Pages WITHOUT the script fall back
   to the wrap rules below (logo row + full-width wrapping links row) —
   so the hamburger can roll out one page at a time.
   Breakpoint 1024 so phone-landscape AND tablet-portrait get the
   hamburger; tablet-landscape (~1280) keeps the inline nav. */
.nav-burger {
  display: none;               /* only shown ≤1024 on JS-enabled pages */
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  background: rgba(31, 61, 46, .5);         /* 50% forest — a steady chip on any hero texture */
  border: 1px solid rgba(255, 255, 255, .28); /* very faint */
  border-radius: var(--r-md);
  cursor: pointer;
  color: var(--cream); font-size: 24px; line-height: 1;
}
.nav-burger i { display: block; }

@media (max-width: 1024px) {
  /* Fallback (no JS): wrap. */
  .mn-nav { height: auto; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; }
  .nav-links { width: 100%; flex-wrap: wrap; gap: 10px 18px; margin-top: 6px; }
  .nav-logo-text { font-size: 17px; }

  /* Hamburger (JS present): show button, collapse links into a dropdown. */
  .mn-nav.has-burger { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; height: 68px; }
  .mn-nav.has-burger .nav-burger { display: inline-flex; }
  .mn-nav.has-burger .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    width: auto; margin: 0; gap: 0;
    background: var(--forest);
    border-bottom: 1px solid rgba(165,179,155,.25);
    box-shadow: 0 14px 24px rgba(0,0,0,.18);
    padding: 6px var(--sp-xl) 16px;
  }
  .mn-nav.has-burger.nav-open .nav-links { display: flex; }
  .mn-nav.has-burger .nav-links > li { width: 100%; }
  .mn-nav.has-burger .nav-links a { display: block; padding: 12px 0; font-size: 15px; }
  .mn-nav.has-burger .nav-search { width: 100%; margin-top: 8px; }
  .mn-nav.has-burger .nav-search-input { width: 100%; }
}

/* ── COLLAPSIBLE SIDEBAR (≤1024px) ───────────────────────────────
   mn-sidebar.js adds .mn-collapsible + a .sidebar-toggle button to a
   page's TOC / filter sidebar. Below 1024 the sidebar becomes a
   full-width panel, collapsed until the toggle is tapped. Keyed on the
   JS-added class, so it is inert on pages that don't load the script. */
.sidebar-toggle {
  display: none;                 /* desktop: hidden — sidebar shows normally */
  width: 100%; box-sizing: border-box;
  align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  background: var(--cream); border: 1px solid var(--bdr); border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; color: var(--forest); cursor: pointer;
}
.sidebar-toggle i { font-size: 18px; color: var(--moss); }

@media (max-width: 1024px) {
  /* Stack the body grid to one column so the main content isn't trapped
     in the sidebar's narrow track; span + un-stick the panel itself. */
  .mn-collapsed-body { grid-template-columns: 1fr; }
  .mn-collapsible { grid-column: 1 / -1; position: static; padding-right: 0; margin-bottom: 22px; }
  .mn-collapsible .sidebar-toggle { display: flex; }
  /* Collapse everything except the toggle and (on compound pages) the
     view-depth switcher, which must stay reachable without opening the panel. */
  .mn-collapsible:not(.sidebar-open) > :not(.sidebar-toggle):not(.sb-view-toggle) { display: none; }

  /* The toggle button now names the panel ("On this page" / "Filters" /
     "Search & filters"), so the sidebar's own eyebrow label repeats it once
     expanded — hide it. NOT listed: nutraceuticals' .nut-toc__label and
     pathways' .atlas-toc__label — both sit under a search box and separate it
     from the filters below, so they stay. Desktop (>1024) keeps every eyebrow. */
  .mn-collapsible .sb-label,
  .mn-collapsible .fw-toc__label,
  .mn-collapsible .src-sb-label,
  .mn-collapsible .sr-sidebar-label { display: none; }
}

/* ── COMPOUND page inner grids (≤860) ────────────────────────────
   Compound pages are desktop-first: fixed 2-col data grids (PK, onset,
   safety, the hero id-box) sit inside a 200px+1fr body that never
   collapsed, so their fixed min-width forced the mobile layout viewport
   wide — the whole page scaled/overflowed. The body now stacks via
   .mn-collapsed-body (mn-sidebar.js is loaded on compound pages too);
   stack these inner grids so nothing exceeds the viewport. */
@media (max-width: 860px) {
  .pk-grid, .onset-rows, .saf-grid { grid-template-columns: 1fr; }
}

/* ── AD PLACEHOLDER LEAK (Research view) ─────────────────────────
   mn-compound.css un-hides .ad-slot--research-only in Research mode
   (`display:block`), which leaks an AdSense placeholder into Research
   view while ads are still off. The canonical hide lives in
   mn-components.css, but that file isn't cache-busted, so stale copies
   kept showing it. This file IS cache-busted (?v=2, no-store) and loads
   last, so the override lands on every device immediately.
   TO GO LIVE: remove this rule AND the matching one in mn-components.css. */
.research-mode .ad-slot--research-only { display: none; }