/* WeedCentral site kit: the design system every weed-central.com page shares.
   Source of the vocabulary: public/home.html (concept A). Page-specific rules
   stay in each page; anything a second page needs moves here. Behaviors live in
   /js/site.js; the header/footer markup in src/utils/siteChrome.ts.
   Rule: class-scoped except html/body/a/img defaults, so a page with its own
   palette (places) can load its stylesheet after this one and override. */

/* Inter (SIL OFL 1.1), self-hosted variable font: one latin woff2 covers 400-800. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin.woff2") format("woff2"); }

/* ── Tokens ─────────────────────────────────────────────────────────── */
:root {
  --primary: #2E7D32; --primary-light: #4CAF50; --primary-surface: #E8F5E9;
  --text: #1B5E20; --text-secondary: #4a5e4d; --text-tertiary: #6e7e70;
  --bg: #ffffff; --bg-soft: #F5FBF5; --border: #DCE7DC;
  --surface: #ffffff; --ink-on-primary: #ffffff; --header-bg: rgba(255,255,255,.92);
  --shadow: rgba(46,125,50,.14); --terp-outline: rgba(0,0,0,.12); --danger: #c62828;
  --warn: #B26A00; --warn-bg: #FFF4E5;
  --scrim: rgba(245,251,245,.72); --tip-bg: #1B5E20; --tip-ink: #ffffff;
  --hh: 64px;
  color-scheme: light;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #3ddc84; --primary-light: #5be39a; --primary-surface: #14271d;
  --text: #eaf5ee; --text-secondary: #a6c0b3; --text-tertiary: #8aa598;
  --bg: #0e1512; --bg-soft: #14201b; --border: #2c4137;
  --surface: #14201b; --ink-on-primary: #06210f; --header-bg: rgba(14,21,18,.9);
  --shadow: rgba(0,0,0,.5); --terp-outline: rgba(255,255,255,.18); --danger: #FF6B5E;
  --warn: #FFB74D; --warn-bg: #2a2115;
  --scrim: rgba(14,21,18,.78); --tip-bg: #eaf5ee; --tip-ink: #0e1512;
}
/* The 420 ms theme crossfade (the app's LeafSwitch); site.js toggles the class. */
html.theming, html.theming * { transition: background-color .42s ease, color .42s ease, border-color .42s ease !important; }

/* ── Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: var(--primary); }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.kicker { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primary); }
.leaf { display: inline-block; width: 1em; height: 1em; fill: currentColor; vertical-align: middle; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ── Header ─────────────────────────────────────────────────────────── */
header.site { position: sticky; top: 0; z-index: 30; height: var(--hh); background: var(--header-bg); -webkit-backdrop-filter: saturate(140%) blur(10px); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border); }
header.site .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; }
header.site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--primary); font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.leafwrap { position: relative; width: 30px; height: 30px; display: grid; place-items: center; }
.leafwrap::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(circle, var(--primary-light) 0%, transparent 70%); opacity: 0; transition: opacity .42s ease; }
.leafwrap .leaf { width: 28px; height: 28px; color: var(--primary); transition: transform .42s ease, color .42s ease; }
.leafwrap.lit::before { opacity: .5; }
.leafwrap.lit .leaf { transform: rotate(-10deg) scale(1.08); color: var(--primary-light); }
header.site .brand img.leaf { border-radius: 7px; display: block; }
header.site nav { display: flex; align-items: center; }
header.site nav a { color: var(--text-secondary); text-decoration: none; margin-left: 18px; font-size: 14px; font-weight: 500; }
header.site nav a:hover { color: var(--primary); }
/* Active link, keyed by data-active so the anchors stay byte-identical across pages. */
header.site nav[data-active="places"] a[href="/places"], header.site nav[data-active="budbracket"] a[href="/budbracket/"],
header.site nav[data-active="learn"] a[href="/learn/"], header.site nav[data-active="privacy"] a[href="/privacy"],
header.site nav[data-active="terms"] a[href="/terms"], header.site nav[data-active="dmca"] a[href="/dmca"],
header.site nav[data-active="contact"] a[href="/contact"] { color: var(--primary); font-weight: 600; }
.themebtn { cursor: pointer; border: 1px solid var(--border); background: var(--bg); color: var(--text); border-radius: 20px; padding: 6px 11px; font-size: 15px; line-height: 1; transition: .15s; margin-left: 18px; vertical-align: middle; position: relative; font-family: inherit; }
.themebtn:hover { border-color: var(--primary); }
html.is420 .themebtn::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 2px var(--bg); }

/* ── Learn sub-nav (one tier under the header, horizontal scroll when narrow) ── */
.subnav { background: var(--bg-soft); border-bottom: 1px solid var(--border); }
.subnav .wrap { display: flex; gap: 18px; padding: 10px 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.subnav .wrap::-webkit-scrollbar { display: none; }
.subnav a { color: var(--text-secondary); text-decoration: none; font-size: 14px; white-space: nowrap; font-weight: 500; }
.subnav a:hover { color: var(--primary); }
.subnav a.get { margin-left: auto; color: var(--primary); font-weight: 600; }
.subnav[data-active="guides"] a[href="/learn/"], .subnav[data-active="terpenes"] a[href="/learn/terpenes/"],
.subnav[data-active="cannabinoids"] a[href="/learn/cannabinoids/"], .subnav[data-active="coa"] a[href="/learn/coa/"],
.subnav[data-active="articles"] a[href="/learn/articles/"] { color: var(--primary); font-weight: 600; }

/* ── Buttons + badges ───────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px 18px; border-radius: 14px; font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; border: 1px solid transparent; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--ink-on-primary); }
.btn-primary:hover { background: var(--primary-light); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); margin-top: 10px; }
.btn-ghost:hover { border-color: var(--primary); }
.btn-inline { width: auto; padding: 10px 18px; border-radius: 32px; font-size: 15px; }
.badge { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 32px; background: #000; color: #fff; text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.badge svg { width: 18px; height: 18px; fill: #fff; }
.badge-android { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 32px; background: var(--primary); color: var(--ink-on-primary); text-decoration: none; font-weight: 600; font-size: 15px; box-shadow: 0 6px 18px var(--shadow); transition: background .15s; }
.badge-android:hover { background: var(--primary-light); }
.badge-android svg { width: 18px; height: 18px; fill: currentColor; }
.beta-hint { margin: 16px 0 0; font-size: 14px; color: var(--text-tertiary); }
.beta-hint a { color: var(--primary); font-weight: 600; text-decoration: none; }
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--primary-surface); color: var(--primary); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--primary-surface); color: var(--primary); text-decoration: none; }
.chip.outline { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 8px; }

/* ── Age gate ───────────────────────────────────────────────────────── */
#age-gate { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#age-gate.show { display: flex; }
.gate-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 36px 30px 28px; text-align: center; box-shadow: 0 24px 64px var(--shadow); animation: dealIn .34s cubic-bezier(.2,.85,.3,1) both; }
.gate-card .leaf { width: 56px; height: 56px; color: var(--primary); }
.gate-card .age { font-size: 60px; font-weight: 800; letter-spacing: -.04em; line-height: 1; margin: 6px 0 4px; }
.gate-card h2 { margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
.gate-card p { margin: 0 0 22px; color: var(--text-secondary); font-size: 15px; }
#age-gate.leaving .gate-card { animation: gateOut .42s ease forwards; }
#age-gate.leaving { animation: fadeOut .42s ease forwards; }

/* ── Content primitives ─────────────────────────────────────────────── */
.sec { padding: 104px 0; }
.sec h2 { font-size: clamp(30px, 3.4vw, 42px); letter-spacing: -.025em; font-weight: 700; margin: 10px 0 10px; line-height: 1.08; }
.lead { font-size: 18px; color: var(--text-secondary); max-width: 62ch; margin: 0; }
/* Reveal on scroll: site.js adds .in once; --i staggers siblings by 70 ms. */
.rv { opacity: 0; transform: translateY(16px) scale(.98); }
.rv.in { animation: dealIn .34s cubic-bezier(.2,.85,.3,1) both; animation-delay: calc(var(--i, 0) * 70ms); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 40px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px var(--shadow); }
.tile .em { font-size: 30px; line-height: 1; }
.tile h3 { margin: 12px 0 4px; font-size: 20px; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.tile .dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1px var(--terp-outline) inset; display: inline-block; }
.tile .aroma { margin: 0; color: var(--text-secondary); }
.tile .also { font-size: 13px; color: var(--text-tertiary); margin: 8px 0 0; }
.tbar { margin-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; }
.tbar .tr { flex: 1; height: 6px; border-radius: 3px; background: var(--bg-soft); box-shadow: 0 0 0 1px var(--terp-outline) inset; position: relative; overflow: hidden; }
.tbar .tr i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 3px; transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.2,.85,.3,1); }
.in .tbar .tr i { transform: none; }
.tbar b { font-variant-numeric: tabular-nums; min-width: 48px; text-align: right; }
.links { margin-top: 28px; display: flex; gap: 22px; flex-wrap: wrap; }
.links a { font-weight: 600; text-decoration: none; }
.links a:hover { text-decoration: underline; }
.nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; text-align: center; margin-top: 44px; }
.num b { display: block; font-size: clamp(40px, 5vw, 58px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.num span { color: var(--text-secondary); font-size: 15px; display: block; margin-top: 8px; }
.num[data-tip] { cursor: help; }
.faq { border-top: 1px solid var(--border); margin-top: 8px; }
.faq details { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq summary { font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; color: var(--text); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--text-tertiary); }
.faq details[open] summary::after { content: "\2212"; }
.faq .a { margin-top: 8px; color: var(--text-secondary); line-height: 1.6; }
.faq-section { max-width: 760px; margin: 0 auto; padding: 88px 20px; }
.faq-section h2 { margin: 0 0 12px; font-size: 28px; letter-spacing: -.02em; text-align: center; }
.breadcrumb { font-size: 14px; color: var(--text-tertiary); margin-bottom: 16px; }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--primary); }
.disclaimer { font-size: 13px; color: var(--text-tertiary); background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 26px 0 8px; line-height: 1.6; }
.callout { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--text); border-radius: 14px; padding: 14px 16px; font-size: 15px; }

/* Long-form prose (legal pages, guides): readable measure, quiet headings. */
.prose { max-width: 760px; margin: 0 auto; padding: 56px 20px; color: var(--text-secondary); line-height: 1.6; }
.prose h1 { color: var(--text); font-size: clamp(30px, 4vw, 38px); letter-spacing: -.02em; margin: 0 0 8px; line-height: 1.12; }
.prose .meta { color: var(--text-tertiary); font-size: 14px; margin-bottom: 36px; }
.prose h2 { color: var(--text); font-size: 22px; margin: 36px 0 12px; letter-spacing: -.01em; scroll-margin-top: calc(var(--hh) + 16px); }
.prose h3 { color: var(--text); font-size: 17px; margin: 20px 0 8px; font-weight: 600; }
.prose p, .prose li { font-size: 16px; }
.prose ul, .prose ol { padding-left: 20px; }
.prose li { margin: 6px 0; }
.prose strong { color: var(--text); }
.prose .table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.prose .table th, .prose .table td { padding: 12px; text-align: left; border-bottom: 1px solid var(--border); }
.prose .table th { background: var(--bg-soft); font-weight: 600; color: var(--text); font-size: 13px; }
.prose .table tr:last-child td { border-bottom: 0; }

/* Entity card (strain / brand / farm pages): centered, one column. */
.entity { max-width: 640px; margin: 0 auto; padding: 48px 20px 24px; text-align: center; }
.entity .logo { width: 96px; height: 96px; border-radius: 24px; object-fit: contain; background: var(--bg-soft); border: 1px solid var(--border); display: inline-block; }
.entity .logo.placeholder { display: inline-grid; place-items: center; font-size: 40px; font-weight: 800; color: var(--primary); }
.entity h1 { font-size: clamp(30px, 4vw, 40px); letter-spacing: -.02em; margin: 16px 0 4px; line-height: 1.1; }
.entity .kind, .entity .cat { color: var(--text-tertiary); font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 12px; }
.entity .desc { color: var(--text-secondary); font-size: 17px; line-height: 1.6; margin: 0 0 22px; text-align: left; }
.entity .about { text-align: left; margin-top: 36px; }
.entity .about h2 { font-size: 22px; margin: 0 0 8px; }
.entity .cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border-radius: 32px; font-weight: 600; text-decoration: none; margin: 4px 6px; }
.entity .cta-primary { background: var(--primary); color: var(--ink-on-primary); }
.entity .cta-secondary { border: 1px solid var(--border); color: var(--text); }
.entity .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer.site { border-top: 1px solid var(--border); padding: 40px 20px; text-align: center; color: var(--text-tertiary); font-size: 14px; }
footer.site .links { justify-content: center; gap: 4px 0; margin: 0; }
footer.site .links a { color: var(--text-secondary); margin: 0 10px; text-decoration: none; font-weight: 500; }
footer.site .links a:hover { color: var(--primary); }
footer.site .links a.support { color: var(--primary); font-weight: 600; }
footer.site .contact { margin-top: 12px; }
footer.site .contact a { color: var(--text-secondary); }
footer.site .copy { margin-top: 12px; font-size: 13px; }

/* ── Tooltip + toast (site.js creates them on demand) ───────────────── */
#tip { position: fixed; z-index: 200; max-width: 260px; background: var(--tip-bg); color: var(--tip-ink); padding: 10px 12px; border-radius: 12px; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,.25); opacity: 0; transform: translateY(4px); transition: opacity .18s, transform .18s; pointer-events: none; }
#tip.show { opacity: 1; transform: none; }
#tip b { display: block; font-size: 14px; margin-bottom: 2px; }
#tip small { opacity: .8; display: block; margin-top: 4px; }
#toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 12px); background: var(--tip-bg); color: var(--tip-ink); padding: 11px 16px; border-radius: 24px; font-size: 14px; font-weight: 600; opacity: 0; transition: opacity .25s, transform .25s; z-index: 200; pointer-events: none; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
[data-tip] { cursor: help; }

/* ── Keyframes (brand vocabulary) ───────────────────────────────────── */
@keyframes dealIn { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes winPop { 0% { transform: scale(1) translateY(0); } 26% { transform: scale(1.08) translateY(-7px); } 62% { transform: scale(1.05) translateY(-4px); } 100% { transform: scale(1.03) translateY(-2px); } }
@keyframes ringOut { 0% { transform: scale(.94); opacity: .95; } 100% { transform: scale(1.12); opacity: 0; } }
@keyframes triGrow { to { stroke-dashoffset: 0; } }
@keyframes triHead { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: .85; transform: scale(1); } }
@keyframes triRake { 0% { opacity: 0; transform: translateX(0) rotate(18deg); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(320px) rotate(18deg); } }
@keyframes leafPulse { from { transform: scale(.85); opacity: .6; } to { transform: scale(1); opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes bloomIn { 0% { opacity: 0; transform: scale(0); } 45% { opacity: 1; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(.2); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes indet { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes gateOut { to { opacity: 0; transform: scale(.96); } }
@keyframes fadeOut { to { opacity: 0; } }
@keyframes drift1 { 0%, 100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(calc(2.6vmax * var(--amp, 1)), calc(2vmax * var(--amp, 1)), 0) scale(calc(1 + .1 * var(--amp, 1))); } }
@keyframes drift2 { 0%, 100% { transform: translate3d(0,0,0) scale(1.04); } 50% { transform: translate3d(calc(-3vmax * var(--amp, 1)), calc(2.3vmax * var(--amp, 1)), 0) scale(calc(1 - .06 * var(--amp, 1))); } }
@keyframes drift3 { 0%, 100% { transform: translate3d(0,0,0) scale(.97); } 50% { transform: translate3d(calc(2.3vmax * var(--amp, 1)), calc(-2.6vmax * var(--amp, 1)), 0) scale(calc(1 + .1 * var(--amp, 1))); } }
@keyframes drift4 { 0%, 100% { transform: translate3d(0,0,0) scale(1.05); } 50% { transform: translate3d(calc(-2vmax * var(--amp, 1)), calc(-2vmax * var(--amp, 1)), 0) scale(calc(1 - .05 * var(--amp, 1))); } }
/* The trichome frost (typing 420 on the home lab card, holding the Learn trichome). */
.frost { position: absolute; inset: 0; border-radius: 18px; background: rgba(255,255,255,.14); animation: fadeOut .9s .3s ease forwards; pointer-events: none; z-index: 9; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .sec { padding: 72px 0; }
  header.site nav a { margin-left: 12px; font-size: 13px; }
  .themebtn { margin-left: 10px; }
}
@media (max-width: 520px) {
  /* Only two links fit beside the brand and the toggle at this width, so keep
     the two product surfaces. Targeted by href, not position, so they stay in
     the DOM for the CI contract and the nav can be reordered without silently
     hiding the wrong entries. */
  header.site nav a[href="/learn/"], header.site nav a[href="/privacy"], header.site nav a[href="/terms"], header.site nav a[href="/dmca"], header.site nav a[href="/contact"] { display: none; }
}
@media (max-width: 400px) {
  /* Measured: brand 157 + nav 193 + 40 padding needs 390px, so two links are
     flush on a 390pt phone and overrun a 375/360 one, pushing the theme toggle
     off-screen. Dropping to one link needs 303px. */
  header.site nav a[href="/budbracket/"] { display: none; }
}

/* ── Reduced motion: every beat static ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .22s !important; }
  .rv { opacity: 1; transform: none; }
  .tbar .tr i { transform: none; }
}