/* =============================================================
   MECHANICA NATURA — CORE (shared by every page, every family)
   Requires mn-tokens.css to be loaded first.

   Covers: base reset, nav, breadcrumb, hero shell, footer,
   disclaimer bar, buttons. This is the "always-on" layer —
   family stylesheets (mn-compound.css, mn-reference.css,
   mn-legal.css, etc.) layer their page-specific content styling
   on top of this, not instead of it.

   Visual direction: the compound-page system (dark sticky nav,
   photo hero with gradient overlay, dark footer) — confirmed as
   the site-wide standard, since Sourcing/Homepage want hero
   imagery too and a document-style plain header would've meant
   forking the nav a second time for no real reason.

   NOT YET WIRED IN: cbd.html and berberine.html still load their
   own copy of this styling directly from agent_style.css. This
   file is a clean extraction for future pages to build on — it
   intentionally does not replace agent_style.css yet, so nothing
   about the two live compound pages changes until that's a
   deliberate, separate step.
   ============================================================= */

/* ── RESET / BASE ────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--parch);
  color: var(--char);
  line-height: 1.7;
  font-size: 15px;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── NAVIGATION ──────────────────────────────────────────────── */
/* Transparent-over-photo by default; goes solid forest once the
   page scrolls past the hero (see the nav-scroll-state script
   pattern already in framework.html / pathways.html). */
.mn-nav {
  background: rgba(251,247,241,.1);
  border-bottom: 1px solid rgba(255,255,255,.15);
  padding: 0 var(--sp-xl);
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background .3s, border-color .3s;
}
.mn-nav--solid,
.mn-nav.scrolled {
  background: var(--forest);
  border-bottom-color: rgba(165,179,155,.25);
}

.nav-logo { display: flex; align-items: center; gap: 5px; }
.nav-logo-img { height: 38px; width: auto; display: block; }
.nav-logo-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--sage);
  letter-spacing: .04em;
}

.nav-links { display: flex; gap: 28px; list-style: none; align-items: center; }
.nav-links a {
  font-size: 13px;
  color: #fff;
  font-weight: 500;
  opacity: .65;
  transition: opacity .2s;
}
.nav-links a:hover,
.nav-links a.active { opacity: 1; }

.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 100px;
  padding: 7px 14px;
  width: 136px;
  transition: width .25s ease, background .2s, border-color .2s;
}
.nav-search:focus-within {
  width: 208px;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.45);
}
.nav-search-icon {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: color .15s;
}
.nav-search-icon:hover { color: #fff; }
.nav-search-icon svg { width: 14px; height: 14px; display: block; }
.nav-search-input {
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  width: 100%;
  padding: 0;
}
.nav-search-input::placeholder { color: rgba(255,255,255,.55); }

/* ── BREADCRUMB ──────────────────────────────────────────────── */
.crumb {
  padding: 8px var(--sp-xl);
  font-size: 12px;
  color: rgba(242,239,230,.55);
  display: flex;
  gap: 6px;
  align-items: center;
  background: rgba(251,247,241,.05);
}
.crumb a { color: rgba(242,239,230,.6); }
.crumb a:hover { color: rgba(242,239,230,.9); }
.crumb span { opacity: .3; color: rgba(242,239,230,.9); }

/* ── HERO SHELL ──────────────────────────────────────────────── */
/* .site-header carries the photo + gradient overlay. Every page
   sets its own background-image via a page-scoped rule (the
   photo differs — or may differ — per page), but the shell
   pattern (gradient + cover + center) stays identical.

   Height is content-driven by design (padding + whatever's
   inside .cmpd-hero-inner), not a fixed pixel value — a page
   with less content (shorter intro, no stat row) naturally
   renders a shorter hero. Two padding presets are provided as a
   convenience for pages that want to declare intent explicitly
   rather than relying on content length alone. */
.site-header {
  background-image: linear-gradient(to right, rgba(15,38,24,.88) 45%, rgba(15,38,24,.15)), var(--hero-image, none);
  background-size: cover;
  background-position: center;
}

.cmpd-hero { padding: 72px 0 80px; }
.cmpd-hero--tall    { padding: 96px 0 104px; }  /* Homepage-scale hero */
.cmpd-hero--compact { padding: 48px 0 56px; }   /* Sourcing-scale hero, shorter */

.cmpd-hero-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 var(--sp-xl);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 64px;
  align-items: center;
}
.cmpd-hero-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: 20px;
}
.page-hero-intro {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(242,239,230,.8);
}
.page-hero-intro strong { color: #fff; font-weight: 600; }

/* Compound identity box (Latin name + illustration) — used only
   on compound-profile pages, not by Framework/Pathways/Sourcing/
   Homepage, which override .cmpd-hero-inner to a single column
   instead (see each page's own page-hero-inner override). */
.cmpd-id-box {
  background: rgba(31,61,46,.65);
  border: 1px solid var(--sage);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto 200px;
  min-height: 270px;
  max-width: 498px;
}
.cmpd-id-text { padding: 38px 28px; display: flex; flex-direction: column; justify-content: center; }
.cmpd-latin {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--sage);
  margin-bottom: 8px;
  letter-spacing: .01em;
}
.cmpd-name {
  font-family: var(--font-serif);
  font-size: clamp(40px, 5vw, 66px);
  font-weight: 800;
  color: rgba(242,239,230,.96);
  line-height: .9;
  letter-spacing: -.02em;
  margin-bottom: 14px;
  max-width: 242px;
  overflow-wrap: break-word;
}
.cmpd-full {
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: rgba(242,239,230,.6);
  letter-spacing: .03em;
}
.cmpd-illustration {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  padding: 16px 26px 16px 0;
  box-sizing: border-box;
}

/* ── DISCLAIMER BAR ──────────────────────────────────────────── */
.disc-bar {
  background: var(--cream);
  border-top: 1px solid var(--bdr);
  padding: 12px var(--sp-xl);
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── FOOTER ──────────────────────────────────────────────────── */
/* Identical on every page. The two decorative plant images
   (.ft-plant on the right, .ft-plant-left on the left) default
   to Berberine (left) and CBD (right) everywhere EXCEPT compound
   profile pages, where both point at that compound's own image
   instead. This is an HTML-level convention (which src each page
   sets), not something this stylesheet enforces — .ft-plant /
   .ft-plant-left below only define position/opacity/size, not
   which image. */
footer {
  background: var(--deep);
  color: rgba(255,255,255,.6);
  padding: 44px var(--sp-xl) 28px;
  position: relative;
  overflow: hidden;
}
/* Structural fix (home.html, first adopter): .disc-bar is meant to sit
   directly above the footer, always — previously a separate sibling
   element that had to be remembered on every page (missed once
   already on home.html's first draft). Nesting it as footer's first
   child instead makes it impossible to add a footer without it. This
   negative margin pulls it back out to full-bleed against footer's
   own padding box so it still reads as its own bar, not an inset
   box inside the dark footer. Inert (matches nothing) on any page
   that still has .disc-bar as a sibling rather than a child — safe
   to land now, ahead of propagating the same restructure everywhere
   else. */
footer .disc-bar {
  margin: -44px calc(-1 * var(--sp-xl)) 28px;
}
.ft-plant {
  position: absolute;
  bottom: -30px;
  right: 10px;
  width: 200px;
  height: auto;
  opacity: .14;
  transform: rotate(-45deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}
.ft-plant-left {
  position: absolute;
  bottom: -55px;
  left: 50px;
  width: 230px;
  height: auto;
  opacity: .14;
  transform: rotate(60deg);
  transform-origin: center;
  pointer-events: none;
  z-index: 0;
}
.ft-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}
.ft-brand { display: flex; align-items: flex-start; gap: 10px; }
.ft-brand-img { height: 34px; width: auto; display: block; }
.ft-brand-text { min-width: 0; }
.ft-brand-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--pearl);
  letter-spacing: .02em;
  margin-bottom: 6px;
}
.ft-tag {
  font-size: 12px;
  font-style: italic;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  max-width: 200px;
}
.ft-ctitle {
  font-family: var(--font-serif);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
  color: rgba(255,255,255,.55);
  margin-bottom: 12px;
}
.ft-links { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ft-links a { font-size: 12.5px; color: rgba(255,255,255,.75); transition: color .2s; }
.ft-links a:hover { color: #fff; }
.ft-divider {
  height: 1px;
  background: rgba(255,255,255,.09);
  width: calc(100% - 220px);
  position: relative;
  z-index: 1;
}
.ft-btm {
  padding-top: 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,.55);
  position: relative;
  z-index: 1;
}
.ft-btm-copyright { grid-column: 2; white-space: nowrap; }
.ft-btm-edu { grid-column: 4; text-align: center; white-space: nowrap; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sage);
  color: var(--forest);
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background .2s, box-shadow .2s, transform .2s;
  cursor: pointer;
  border: none;
}
/* Fill is moss (not sage — the button's own resting fill), at 50%
   opacity so the color underneath still shows through slightly,
   matching the same "50% opacity fill" language used on .btn-ghost's
   hover below. Shadow will mostly only read on light backgrounds
   (this button's real-world context, the parch Sourcing section) —
   negligible against a dark one. */
.btn-primary:hover {
  background: color-mix(in srgb, var(--moss) 50%, transparent);
  box-shadow: 0 6px 18px rgba(31,61,46,.15);
  transform: translateY(-2px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.75);
  padding: 12px 28px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-body);
  transition: all .2s;
  cursor: pointer;
  background: transparent;
}
/* 50% white fill on hover — switched text to forest (dark) rather
   than keeping the previous white-on-hover, since white text on a
   half-white fill loses most of its contrast. Shadow is real but
   will barely be visible against the hero's dark photo background,
   as expected. */
.btn-ghost:hover {
  border-color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.5);
  color: var(--forest);
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  transform: translateY(-2px);
}

.btn-forest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--forest);
  color: #fff;
  padding: 10px 22px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  transition: background .2s;
  cursor: pointer;
  border: none;
}
.btn-forest:hover { background: var(--pine); }

/* ── CALLOUT BOX ─────────────────────────────────────────────── */
/* Generic bordered highlight box. Ported from mn-styles.css, where
   it was capped at max-width:660px for narrow prose contexts —
   that cap is intentionally left off here; pages that want it
   narrow can add their own max-width, same as Framework already
   does for its own reasons. */
.mn-callout {
  background: #fff;
  border-top: 1px solid var(--bdr);
  border-right: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  border-left: 3px solid var(--forest);
  border-radius: var(--r-md);
  padding: 20px 24px;
  margin: 24px 0;
}
/* Callout's default text treatment — pulled out of .mn-callout
   itself so the box is just a shape, and any content can go inside
   it (this emphasis style, .body-muted, or anything else) rather
   than the box dictating what its content looks like. This is what
   Framework's callouts use; content that wants a quieter tone (like
   Pathways' Protect scope note, which shares this exact same box)
   uses .body-muted instead — see that migration for the reasoning. */
/* .callout-text is gone — callout content now uses .body-char
   directly, same as everywhere else that voice is used. */

/* ── EVIDENCE TIER CARDS ─────────────────────────────────────── */
/* Unified version of a card that existed twice with slight drift:
   Framework's own copy (14px radius, 14px title) and the compound
   pages' copy in agent_style.css (12px radius, 15px title, plus
   two extra pieces — badge and confidence bar — Framework didn't
   need). Settled on 14px radius / 15px title. cbd.html and
   berberine.html still use their own agent_style.css version for
   now — this is the canonical version future pages (and eventually
   those two, when migrated) should build against. */
.ev-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}
.ev-card {
  border-radius: var(--r-lg);
  padding: 22px;
  color: #fff;
  min-width: 0; /* grid-blowout guard — without this, a grid item won't shrink below
                   its content's intrinsic width even inside a 1fr track, so one
                   long unbroken string (a badge, a long word) can silently force
                   this card wider than its column and break the three-card equal-
                   width layout. Applies regardless of what's inside the card. */
}
.ev-card--human  { background: var(--forest); }
.ev-card--animal { background: var(--pine); }
.ev-card--vitro  { background: var(--moss); }
.ev-card__tier {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 6px;
}
.ev-card__name {
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}
/* Subtitle — used by compound pages (e.g. "Pharmacokinetics & safety
   data" under "Clinical Record"), not by Framework's version. Note:
   this keeps .ev-card__name's margin-bottom at 10px (Framework's
   existing value, left as-is) rather than tightening it to match
   the old agent_style.css title-to-subtitle gap (3px) — so on
   CBD/Berberine this will read about 7px looser between title and
   subtitle than before. Flagging in case that's worth tightening
   back up once you see it live. */
.ev-card__csub {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  margin-bottom: 14px;
  font-style: italic;
}
.ev-card__body {
  font-size: 12.5px;
  opacity: 0.85;
  line-height: 1.6;
}
.ev-card__body ul { padding-left: 14px; margin-top: 8px; }
.ev-card__body li { margin-bottom: 5px; font-size: 12px; }
.ev-card__note {
  font-size: 11px;
  opacity: 0.6;
  font-style: italic;
  line-height: 1.5;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 10px;
}
/* Optional extras carried over from the compound-page version —
   not used by Framework today, available if a future page (or a
   later cbd/berberine migration) wants them. */
.ev-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.7);
  /* Own typography rule, pulled out of mn-components.css's shared pill
     shape — that shape's white-space:nowrap is correct for the single-
     word role/status pills it's built for, but wrong here: this badge
     carries a short evidence-strength phrase (2-4 words), and forcing
     it onto one line can push the whole card wider than its grid
     track. See mn-components.css's note at the extraction point. */
  padding: 3px 12px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: normal;
  text-align: center;
}
.ev-card__conf-bar {
  height: 3px;
  background: rgba(255,255,255,.15);
  border-radius: 2px;
  margin-top: 12px;
  overflow: hidden;
}
.ev-card__conf-fill {
  height: 100%;
  border-radius: 2px;
  background: rgba(255,255,255,.5);
}