/* ============================================================
   MZANSI FARMING HUB — style.css
   ============================================================ */

/* ===== RESET & ROOT ===== */
:root {
  --green:      #2d5a1b;
  --green-dark: #1e3d10;
  --green-mid:  #3d7a25;
  --green-light:#4a8c2a;
  --green-darkest:#0f1f08; /* footer/deepest surface — one step past --green-dark */
  --gold:       #c8960c;
  /* --gold-light (#e8b020 on the cream #faf6ee article background) is
     only 1.83:1 contrast — well under WCAG AA's 4.5:1 floor for text.
     It is NOT a general-purpose text colour. Every current use has been
     audited and is on a dark surface (page-hero/breadcrumb, footer,
     cookie banner, mobile nav, ticker) where it reads fine against
     --green-dark/near-black backgrounds — keep it that way. For gold
     text on light/cream backgrounds use --gold-text or --gold-button
     below instead, both of which meet AA contrast on --cream. */
  --gold-light: #e8b020;
  --gold-text:  #765800;
  --gold-button:#8a6500;
  --cream:      #faf6ee;
  --soft:       #f0ead8;
  --brown:      #5c3a1e;
  --border:     #d4c5a0;
  --text:       #1a1a1a;
  --text-muted: #555;
  --white:      #ffffff;
  --red:        #c0392b;
  --shadow:     0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 40px rgba(0,0,0,0.15);
  /* ---- Card family (unifies ~8 near-duplicate shadow/radius pairs that
     had grown across marketplace/farmer/product/article cards) ---- */
  --shadow-sm:  0 3px 15px rgba(0,0,0,.06);
  --radius:     10px;
  --radius-lg:  12px;
  --radius-pill: 999px;

  /* ---- Secondary gold accent (was hardcoded as #a97908 in ~10 places:
     header CTA buttons, homepage quick-links, gc-apply hovers) ---- */
  --gold-dark:  #a97908;

  /* ---- Status colours (buyer/farmer dashboard alerts + badges reused
     the same 4 concepts everywhere but with a different hex each time:
     #fdecea/#e8f5e9/#fdf6e3/#eef5fc appeared dozens of times across
     join/*.php with slightly different pairings). One definition each,
     reused by .mfh-alert-*, .badge-*, .field-error, table status cells. ---- */
  --success:        #2e7d32;
  --success-bg:     #e8f5e9;
  --success-border: #b7d5aa;
  --danger:         var(--red);
  --danger-bg:      #fdecea;
  --danger-border:  #e2a39a;
  --warning:        var(--gold-button);
  --warning-bg:     #fdf6e3;
  --warning-border: #eee0b0;
  --info:           #2b6ec0;
  --info-bg:        #eef5fc;
  --info-border:    #bcd8f2;

  /* ---- Category accent colours: several guide pages colour-code tags
     (crops/livestock/vegetables/etc.) with one-off hex values. Naming
     them keeps the colour-coding while making it a deliberate palette
     instead of scattered magic numbers. ---- */
  --accent-purple: #7a3ea1;
  --accent-blue:   var(--info);
  --accent-clay:   #8a5a30;
  --accent-umber:  var(--brown);
  --accent-rust:   #c04a1a;

  /* ---- Internal/dev-only indicators: the ad "Test Mode" placeholder
     and badge are deliberately styled off-brand (they mirror the admin
     dark palette: #7fb069/#0f1a13) so they read as "developer mode",
     never as real public content. Named here so that intent is
     explicit and they don't get mistaken for stray hex to "fix" later —
     they are NOT part of the public green/cream/gold palette on
     purpose and should stay visually distinct from it. ---- */
  --dev-indicator-accent:   #7fb069;
  --dev-indicator-contrast: #0f1a13;
}

/* ============================================================
   BACKGROUND THEMES (reading-background picker — see .theme-picker
   below and includes/footer.php for the widget, includes/header.php
   for the synchronous head-script that applies the saved choice
   before paint so there's no flash of the wrong theme).

   All 5 are neutral white/light-grey/off-white "paper" tones, not
   colour themes — brand colours (--green, --gold, header/footer,
   buttons, badges) are untouched by every one of them, so nothing
   that already depends on those for contrast is affected. Each
   still gets its own --border shade so cards/dividers read as a
   deliberate, distinct style rather than the same page with the
   background swapped.
   ============================================================ */
:root[data-theme="white"] {
  --cream: #ffffff; --soft: #f6f6f6; --text: #1a1a1a; --text-muted: #5b5b5b; --border: #e2e2e2;
}
:root[data-theme="grey"] {
  --cream: #f4f4f5; --soft: #e8e8e9; --text: #202022; --text-muted: #5c5c5f; --border: #d6d6d8;
}
:root[data-theme="ivory"] {
  --cream: #faf9f6; --soft: #f0eee8; --text: #22201c; --text-muted: #5e5a52; --border: #ded9cd;
}
:root[data-theme="mist"] {
  --cream: #f5f7f8; --soft: #eaedef; --text: #1c2226; --text-muted: #565f65; --border: #dae0e3;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; }
body  { font-family:'Source Serif 4',Georgia,serif; background:var(--cream); color:var(--text); font-size:17px; line-height:1.85; overflow-x:hidden; }
a     { text-decoration:none; color:inherit; }
img   { max-width:100%; display:block; }
button{ cursor:pointer; }

/* ============================================================
   HEADER  (slimmer — padding reduced vs original)
   ============================================================ */
header {
  background: linear-gradient(150deg, var(--green-dark), var(--green));
  color: #fff;
  border-bottom: 3px solid var(--gold);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}
.header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 20px;            /* ← tightened further for a shorter header */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;            /* ← never wrap to a 2nd row on desktop */
  gap: 10px;
}

/* LOGO */
.logo {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem;            /* ← smaller so it takes less width/height */
  font-weight: 900;
  color: #fff;
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.logo span { color: var(--gold); }
.logo small {
  /* Kept for SEO/accessibility, but hidden visually so it doesn't add
     height to the header — screen readers still announce it. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* ===== DESKTOP NAV ===== */
nav { display:flex; align-items:center; gap:0; flex-wrap:nowrap; min-width:0; }
nav > a,
nav > .nav-item > .nav-top {
  color: rgba(255,255,255,.85);
  padding: 5px 7px;             /* ← tighter */
  font-size: 11px;              /* ← smaller */
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-radius: 3px;
  transition: all .2s;
  white-space: nowrap;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
}
nav > a:hover,
nav > .nav-item:hover > .nav-top { background:rgba(255,255,255,0.12); color:var(--gold); }
nav > a.active { background:var(--gold-button); color:#fff; }

.nav-item { position:relative; display:flex; align-items:center; }
.nav-top-arrow { font-size:9px; opacity:.7; transition:transform .2s; }
.nav-item:hover .nav-top-arrow { transform:rotate(180deg); }

.nav-drop {
  display:none;
  position:absolute;
  top:100%;
  left:0;
  background:var(--green-dark);
  border-top:3px solid var(--gold);
  border-radius:0 0 6px 6px;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
  min-width:200px;
  z-index:200;
  padding:8px 0;
}
.nav-item:hover .nav-drop { display:block; }

.nav-drop.mega {
  left:auto; right:0;
  display:none;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  min-width:680px;
  padding:20px;
}
.nav-item:hover .nav-drop.mega { display:grid; }

.drop-col h4 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  padding:4px 10px 8px;
  border-bottom:1px solid rgba(255,255,255,0.1);
  margin-bottom:4px;
}
.nav-drop a,
.drop-col a {
  display:block;
  color:rgba(255,255,255,0.8);
  padding:6px 14px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  letter-spacing:.5px;
  text-transform:uppercase;
  white-space:nowrap;
  transition:all .15s;
}
.nav-drop a:hover,
.drop-col a:hover { background:rgba(255,255,255,0.08); color:var(--gold); padding-left:18px; }

.nav-cta { background:var(--gold-button)!important; color:#fff!important; border-radius:4px; padding:7px 15px!important; margin-left:4px; }
.nav-cta:hover { background:var(--gold-text)!important; transform:translateY(-1px); }
.nav-donate { color:#7fb069!important; font-weight:700; }
.nav-donate:hover { color:#a6d18a!important; }

/* HAMBURGER */
.hamburger {
  display:none;
  background:none;
  border:2px solid rgba(255,255,255,0.5);
  color:#fff;
  padding:5px 9px;
  cursor:pointer;
  border-radius:3px;
  font-size:17px;
}

/* HEADER SEARCH — compact icon button; the panel itself is positioned in
   JS (see includes/header.php) from the button's real screen coordinates,
   so it always sits directly under the icon and can't drift over the
   nav, register/login buttons, or the ticker below. */
.header-search {
  display:flex;
  align-items:center;
  flex:0 0 auto;
}
.search-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:none;
  border:2px solid rgba(255,255,255,0.5);
  color:#fff;
  cursor:pointer;
  border-radius:4px;
}
.search-toggle:hover { border-color:var(--gold); color:var(--gold); }

.header-search-panel {
  position:fixed;
  display:none;
  gap:0;
  background:var(--green-dark);
  border:1px solid var(--gold);
  border-radius:6px;
  padding:.5rem;
  z-index:2000;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.header-search-panel.open { display:flex; }
.header-search-panel input {
  width:220px;
  max-width:60vw;
  padding:.55rem .7rem;
  border-radius:4px 0 0 4px;
  border:1px solid rgba(255,255,255,.25);
  border-right:none;
  background:#132118;
  color:#e7f0e9;
  font-size:14px;
}
.header-search-panel input:focus { outline:none; border-color:var(--gold); }
.header-search-panel button {
  background:var(--gold);
  color:var(--green-dark);
  border:1px solid var(--gold);
  border-radius:0 4px 4px 0;
  padding:0 14px;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.header-search-panel button:hover { background:var(--gold-light); }

/* MOBILE SEARCH (inside the mobile nav panel) */
.mobile-search-form {
  display:flex;
  gap:.5rem;
  padding:12px 24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.mobile-search-form input {
  flex:1;
  padding:.6rem .7rem;
  border-radius:4px;
  border:1px solid rgba(255,255,255,.25);
  background:#132118;
  color:#e7f0e9;
  font-size:14px;
}
.mobile-search-form button {
  background:var(--gold);
  color:var(--green-dark);
  border:0;
  border-radius:4px;
  padding:0 .9rem;
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.5px;
}
@media (max-width:1100px) {
  .header-search { display:none; }
  .header-search-panel { display:none !important; }
}

/* MOBILE NAV */
.mobile-nav {
  display:none;
  flex-direction:column;
  background:var(--green-dark);
  padding:10px 0;
  gap:0;
  border-top:2px solid var(--gold);
  max-height:80vh;
  overflow-y:auto;
}
.mobile-nav a {
  color:rgba(255,255,255,.85);
  padding:9px 24px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:14px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  border-bottom:1px solid rgba(255,255,255,0.05);
  display:block;
}
.mobile-nav a:hover { background:rgba(255,255,255,0.08); color:var(--gold); }
.mob-group-title {
  padding:12px 24px 4px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold);
  background:rgba(0,0,0,0.2);
}

/* ============================================================
   SHARE BAR
   ============================================================ */
.share-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px 20px;
  background: var(--soft);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  margin: 32px 0;
  font-family: 'Barlow Condensed', sans-serif;
}
.share-label {
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-right: 4px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 4px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  border: none;
  text-decoration: none;
  transition: all .2s;
  cursor: pointer;
}
.share-fb  { background:#1877f2; color:#fff; }
.share-fb:hover  { background:#1558b0; }
.share-tw  { background:#000; color:#fff; }
.share-tw:hover  { background:#333; }
.share-wa  { background:#25d366; color:#fff; }
.share-wa:hover  { background:#1aab52; }
.share-em  { background:#6b7280; color:#fff; }
.share-em:hover  { background:#4b5563; }
.share-li  { background:#0077b5; color:#fff; }
.share-li:hover  { background:#005885; }
.share-copy{ background:var(--white); color:var(--green); border:1.5px solid var(--border); }
.share-copy:hover{ background:var(--green); color:#fff; border-color:var(--green); }

/* ============================================================
   TICKER
   ============================================================ */
.ticker-wrap {
  background:var(--green-dark);
  border-bottom:2px solid var(--gold);
  overflow:hidden;
  padding:9px 0;
}
.ticker-track {
  display:flex;
  width:max-content;
  animation:tickerMove 60s linear infinite;
}
.ticker-item {
  white-space:nowrap;
  padding:0 36px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:13px;
  letter-spacing:.8px;
  text-transform:uppercase;
  color:rgba(255,255,255,.82);
}
.ticker-item::after { content:'•'; margin-left:36px; color:var(--gold); }
@keyframes tickerMove { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background: var(--green-darkest);
  color: rgba(255,255,255,.65);
  font-size:14.5px;
  line-height:1.75;
}
/* Footer newsletter form (was inline-styled) */
.footer-nl-lead { font-size:13px; line-height:1.6; color:rgba(255,255,255,.75); margin:0 0 10px; }
.footer-nl-row { display:flex; gap:8px; flex-wrap:wrap; }
.footer-nl-input { flex:1 1 170px; min-width:0; padding:9px 11px; border-radius:6px; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08); color:#fff; }
.footer-nl-submit { background:var(--gold-light); color:var(--green-dark); border:none; border-radius:6px; padding:9px 16px; font-weight:700; cursor:pointer; white-space:nowrap; font:inherit; }
.footer-nl-msg { margin:8px 0 0; font-size:12.5px; min-height:1em; color:rgba(255,255,255,.85); }
.footer-top {
  max-width:1200px;
  margin:0 auto;
  padding:56px 24px 44px;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
}
.footer-logo {
  font-family:'Playfair Display',serif;
  font-size:1.4rem;
  font-weight:900;
  color:#fff;
  text-decoration:none;
  display:inline-block;
  margin-bottom:14px;
}
.footer-logo span { color:var(--gold); }
.footer-brand p { margin-bottom:10px; }
.footer-tagline { font-size:13px; color:rgba(255,255,255,.45); }
.footer-socials { display:flex; gap:8px; margin-top:16px; }
.fsoc {
  width:34px; height:34px;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700; text-decoration:none;
  transition:opacity .2s;
}
.fsoc:hover { opacity:.8; }
.fsoc-fb { background:#1877f2; color:#fff; }
.fsoc-x  { background:#000;    color:#fff; }
.fsoc-wa { background:#25d366; color:#fff; }
.fsoc-yt { background:#ff0000; color:#fff; }

.footer-col h4 {
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:14px;
}
.footer-col ul { list-style:none; }
.footer-col ul li { margin-bottom:7px; }
.footer-col ul li a { color:rgba(255,255,255,.55); transition:color .2s; }
.footer-col ul li a:hover { color:var(--gold-light); }

.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  max-width:1200px;
  margin:0 auto;
  padding:18px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  font-size:12.5px;
}
.fl { display:flex; gap:20px; flex-wrap:wrap; }
.fl a { color:rgba(255,255,255,.4); transition:color .2s; }
.fl a:hover { color:var(--gold); }

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
.back-top {
  position:fixed;
  bottom:28px;
  right:24px;
  width:44px; height:44px;
  background:var(--gold-button);color:#fff;
  border:none;
  border-radius:50%;
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
  opacity:0;
  transform:translateY(20px);
  transition:all .3s;
  z-index:500;
  pointer-events:none;
}
.back-top.visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.back-top:hover { background:var(--gold-text); color:#fff; }

/* ============================================================
   THEME PICKER (background theme switcher)
   ============================================================ */
.theme-picker { position:fixed; bottom:28px; left:24px; z-index:500; }
.theme-picker-btn {
  width:44px; height:44px; border-radius:50%; border:none;
  background:var(--green-dark); color:var(--cream);
  font-size:19px; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 20px rgba(0,0,0,0.3); transition:transform .2s, background .2s;
}
.theme-picker-btn:hover { transform:scale(1.06); background:var(--green); }
.theme-picker-panel {
  position:absolute; bottom:56px; left:0; background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:.8rem; min-width:190px;
  display:none; flex-direction:column; gap:.5rem;
}
.theme-picker.open .theme-picker-panel { display:flex; }
.theme-picker-panel-label { font-size:.72rem; letter-spacing:1px; text-transform:uppercase; color:var(--text-muted); font-weight:700; padding:0 .1rem; }
.theme-picker-option {
  display:flex; align-items:center; gap:.6rem; background:none; border:1px solid transparent;
  border-radius:8px; padding:.4rem .5rem; text-align:left; font-size:.85rem; color:var(--text);
  font-family:inherit;
}
.theme-picker-option:hover { background:var(--soft); }
.theme-picker-option.active { border-color:var(--green); background:var(--soft); font-weight:700; }
.theme-picker-swatch { width:22px; height:22px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,.12); }
@media (max-width:480px) { .theme-picker { bottom:16px; left:14px; } .theme-picker-btn { width:38px; height:38px; font-size:16px; } }

/* ============================================================
   SCROLL REVEAL
   Content must stay visible if JS never runs (disabled, blocked,
   errors out, or IntersectionObserver isn't supported). The hidden/
   offset starting state is opt-in via the "js-reveal" class that
   header.php adds to <html> synchronously — so with no JS, .reveal
   elements simply keep their normal (visible) layout. See
   includes/footer.php for the observer + fallback that adds
   "visible" once JS is confirmed running.
   ============================================================ */
.reveal { transition:opacity .65s, transform .65s; }
html.js-reveal .reveal { opacity:0; transform:translateY(28px); }
html.js-reveal .reveal.visible { opacity:1; transform:translateY(0); }

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
.newsletter { background:linear-gradient(135deg,var(--green-dark),var(--green-mid)); padding:64px 24px; text-align:center; }
.nl-inner { max-width:600px; margin:0 auto; }
.nl-icon { font-size:3rem; margin-bottom:16px; }
.nl-title { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,3vw,2.2rem); color:#fff; margin-bottom:12px; }
.nl-sub { color:rgba(255,255,255,.75); font-size:15.5px; margin-bottom:28px; }
.nl-form { display:flex; gap:10px; max-width:420px; margin:0 auto; }
.nl-input { flex:1; padding:12px 18px; border-radius:4px; border:none; font-size:15px; font-family:inherit; }
.nl-btn { background:var(--gold-button); color:#fff; border:none; padding:12px 24px; border-radius:4px; font-family:'Barlow Condensed',sans-serif; font-size:14px; font-weight:700; letter-spacing:1px; text-transform:uppercase; cursor:pointer; white-space:nowrap; transition:background .2s; }
.nl-btn:hover { background:var(--gold-text); }
.nl-note { color:rgba(255,255,255,.5); font-size:13px; margin-top:14px; font-family:'Barlow Condensed',sans-serif; letter-spacing:1px; text-transform:uppercase; }

/* ============================================================
   COMMON PAGE ELEMENTS
   ============================================================ */
.sec-label { font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--gold-text); font-weight:700; margin-bottom:8px; }
.sec-title { font-family:'Playfair Display',serif; font-size:clamp(1.6rem,3vw,2.2rem); color:var(--green); line-height:1.2; margin-bottom:14px; }
.sec-sub { color:var(--text-muted); font-size:15.5px; line-height:1.8; margin-bottom:36px; }
.divider { border:none; border-top:2px solid var(--border); margin:52px 0; }

/* PAGE BODY GRID */
.page-body { max-width:1200px; margin:0 auto; padding:60px 24px 90px; display:grid; grid-template-columns:1fr 320px; gap:52px; }

/* PAGE HERO */
.intro-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:40px; align-items:start; margin:40px 0; }
.intro-image img { border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,0.15); }
@media(max-width:900px){ .intro-grid { grid-template-columns:1fr; } }
.page-hero { position:relative; min-height:380px; display:flex; align-items:center; overflow:hidden; background:var(--green-dark); }
.page-hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(0.35); transform:scale(1.03); }
.page-hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg,rgba(30,61,16,0.9) 0%,rgba(45,90,27,0.5) 60%,transparent 100%); }
.page-hero-content { position:relative; z-index:2; max-width:1200px; margin:0 auto; padding:60px 24px; }
.breadcrumb { display:flex; align-items:center; gap:8px; font-family:'Barlow Condensed',sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:rgba(255,255,255,0.55); margin-bottom:18px; }
.breadcrumb a { color:var(--gold-light); transition:color .2s; }
.breadcrumb a:hover { color:#fff; }
.breadcrumb span { color:rgba(255,255,255,0.3); }
.page-hero h1 { font-family:'Playfair Display',serif; font-size:clamp(2.2rem,5vw,3.4rem); color:#fff; line-height:1.1; margin-bottom:16px; }
.page-hero h1 em { color:var(--gold-light); font-style:normal; }
.page-hero-sub { font-size:1.05rem; color:rgba(255,255,255,.78); max-width:580px; line-height:1.75; }
.hero-pills { display:flex; gap:10px; flex-wrap:wrap; margin-top:24px; }
.hero-pill { background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.22); color:rgba(255,255,255,.85); padding:5px 14px; border-radius:20px; font-family:'Barlow Condensed',sans-serif; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .footer-top { grid-template-columns:1fr 1fr; }
  .page-body { grid-template-columns:1fr; }
  .nav-drop.mega { min-width:320px; grid-template-columns:1fr 1fr; }
}
@media (max-width: 1100px) {
  nav { display:none; }
  .hamburger { display:block; }
}
@media (max-width: 768px) {
  .footer-top { grid-template-columns:1fr; gap:28px; padding:40px 20px 28px; }
  .header-inner { padding:8px 16px; }
  .nl-form { flex-direction:column; }
  .share-bar { gap:6px; padding:12px 14px; }
  .share-btn { padding:5px 10px; font-size:12px; }
  .share-label { width:100%; }
  .page-hero { min-height:280px; }
  .page-hero-content { padding:40px 16px; }
}
@media (max-width: 480px) {
  .footer-bottom { flex-direction:column; text-align:center; }
  .fl { justify-content:center; }
  .back-top { bottom:16px; right:14px; width:38px; height:38px; font-size:17px; }
}

/* Fix: several pages (join/*, contact, farmers/*) put breadcrumb/h1/p as
   DIRECT children of .page-hero instead of wrapping them in
   .page-hero-content. Since .page-hero is display:flex with no
   flex-direction set, those children were laying out as a horizontal
   row instead of stacking — this targets only that unwrapped case.
   Two SEPARATE rule blocks on purpose (not comma-combined): if a
   selector list contains one part a browser can't parse (:has() on an
   older browser), most engines drop the ENTIRE rule, not just that
   part — combining them would silently kill the fallback on exactly
   the browsers that need it. Keeping them as two rules means an
   unsupported :has() only takes out its own rule.
     - :not(:has(.page-hero-content))  — native CSS, modern browsers
     - .page-hero--unwrapped           — added by the tiny inline script
       in includes/header.php for browsers without :has() support
       (this site's farmer visitors skew toward older/budget Android
       browsers, so :has() alone isn't a safe bet on its own). */
.page-hero:not(:has(.page-hero-content)) {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px 28px;
  min-height: auto;
  gap: 4px;
}
.page-hero.page-hero--unwrapped {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px 28px;
  min-height: auto;
  gap: 4px;
}
/* These pages have no background photo behind the hero (no .page-hero-bg
   element), so the marketing-page title size (clamp up to 3.4rem) and
   380px min-height above were just oversized empty green space — this
   is the "Submit a New Article" hero being disproportionately big. */
.page-hero:not(:has(.page-hero-content)) h1,
.page-hero.page-hero--unwrapped h1 {
  font-size: clamp(1.6rem, 3.2vw, 2.2rem);
  margin-bottom: 8px;
}
/* Bug fix: these pages pass a plain <p> (no .page-hero-sub class) as a
   direct child of the unwrapped .page-hero. .page-hero-sub itself sets
   color:rgba(255,255,255,.78), but a bare <p> matched none of the hero's
   color rules and fell back to body's near-black --text (#1a1a1a) sitting
   directly on the dark green hero background — contrast ~1.4:1 against
   --green-dark (needs 4.5:1), i.e. unreadable. Adding color here (matching
   .page-hero-sub) fixes every affected page at once: admin/market-prices,
   admin/verification, admin/disputes, guides/, market-prices/, buyer/*,
   store/*, join/*, marketplace/*, grower-affiliates/*, and more. */
.page-hero:not(:has(.page-hero-content)) > .page-hero-sub,
.page-hero:not(:has(.page-hero-content)) > p {
  max-width: 620px;
  margin-top: 6px;
  font-size: .95rem;
  color: rgba(255,255,255,.78);
}
.page-hero.page-hero--unwrapped > .page-hero-sub,
.page-hero.page-hero--unwrapped > p {
  max-width: 620px;
  margin-top: 6px;
  font-size: .95rem;
  color: rgba(255,255,255,.78);
}
@media (max-width: 720px) {
  .page-hero:not(:has(.page-hero-content)) { padding:24px 16px 20px; min-height:auto; }
  .page-hero.page-hero--unwrapped { padding:24px 16px 20px; min-height:auto; }
}

/* ============================================================
   CONTENT COMPONENTS
   Added to keep article/category templates consistently styled.
   ============================================================ */

/* Shared content width */
.main-col, .article-body, .article-section, .article-body > article {
  min-width: 0;
}
.main-col { width:100%; }
.page-body > .main-col { max-width:100%; }
.article-body {
  max-width:1200px;
  margin:0 auto;
  padding:clamp(28px, 5vw, 52px) clamp(16px, 4vw, 24px) clamp(48px, 8vw, 90px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:48px;
  align-items:start;
}
.article-body > article { min-width:0; }
/* In-body figures shouldn't read as flat text-on-cream — a soft shadow
   gives them enough visual weight to break up long stretches of copy,
   matching the shadow already used on legacy .article-img photos. */
.article-body figure img, .prose figure img, .main-col figure img {
  box-shadow:0 10px 26px -14px rgba(20,40,25,.35);
}
/* In-article images: width:100% alone lets a tall/portrait photo blow
   up the page height, so this still caps height — but Section 6 ("clean
   up the image CSS contract") replaced the old object-fit:cover !important
   here. That rule cropped every image, including portraits, and fought
   with the object-fit:contain the renderer set inline (includes/
   body-engine.php / article-contract.php's .mfh-media-img). object-fit
   is no longer set here at all — .mfh-media-img (below) is the ONE place
   that owns it, so the editor preview and the live page can never
   disagree about whether a photo is cropped or letterboxed. This rule
   now only caps height for images the renderer does NOT control (raw
   <img> pasted straight into the editor, or pre-Section-6 cached HTML
   that has no .mfh-media-img class), and even there uses contain so nothing
   is unexpectedly cropped. */
.article-body figure img:not(.mfh-media-img), .prose figure img:not(.mfh-media-img), .main-col figure img:not(.mfh-media-img),
.article-body img:not(.mfh-media-img), .prose img:not(.mfh-media-img), .main-col img:not(.mfh-media-img) {
  max-height:60vh !important;
  object-fit:contain !important;
}
@media (max-width:600px){
  .article-body figure img:not(.mfh-media-img), .prose figure img:not(.mfh-media-img), .main-col figure img:not(.mfh-media-img),
  .article-body img:not(.mfh-media-img), .prose img:not(.mfh-media-img), .main-col img:not(.mfh-media-img) {
    max-height:45vh !important;
  }
}

/* ============================================================
   Section 6 media contract: includes/article-contract.php's
   articleMediaClasses() is the only place these class names are built;
   this is the styling half of that contract (stage 4 of the 4-stage
   pipeline described in that file's docblock).
     .mfh-media                     figure wrapper, always present
     .mfh-media--{image|video}      what kind of media
     .mfh-media--{wrap|block|full|side}   layout
     .mfh-media--a-{left|center|right}    alignment (wrap/block only)
     .mfh-gap-{sm|md|lg}            vertical spacing around the figure
     .mfh-media--portrait           taller-than-wide photo — see below
     .mfh-media-img                 the <img>/<video> itself — object-fit
                                     lives HERE ONLY, never duplicated
   ============================================================ */
.mfh-media { margin:0; max-width:100%; }
.mfh-media-img, .mfh-media video.mfh-media-img {
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:8px;
  box-shadow:0 10px 26px -14px rgba(20,40,25,.35);
}
.mfh-media--image .mfh-media-img { object-fit:contain; max-height:60vh; }
.mfh-media--video .mfh-media-img { object-fit:contain; max-height:70vh; background:#000; }
/* Portrait photos are the reason the old cover-crop rule existed — a
   very tall image still needs *some* cap or it can dwarf the article,
   but capping it by HEIGHT (like a landscape photo) crops the top/
   bottom off exactly the shots this class is for. Cap by width instead
   and let height follow naturally, so the whole photo is always shown. */
.mfh-media--portrait .mfh-media-img { max-height:none; max-width:min(100%, 420px); margin-left:auto; margin-right:auto; }
.mfh-media--portrait.mfh-media--a-left .mfh-media-img { margin-left:0; }
.mfh-media--portrait.mfh-media--a-right .mfh-media-img { margin-right:0; }
figure.mfh-media figcaption { color:#8aa093; font-size:.8rem; margin-top:.4rem; text-align:center; }

.mfh-gap-sm { margin-top:.6rem; margin-bottom:.6rem; }
.mfh-gap-md { margin-top:1.5rem; margin-bottom:1.5rem; }
.mfh-gap-lg { margin-top:2.6rem; margin-bottom:2.6rem; }

/* block: a standalone figure, positioned (not wrapped) by alignment. */
.mfh-media--block { clear:both; }
.mfh-media--block.mfh-media--a-left { margin-right:auto; }
.mfh-media--block.mfh-media--a-right { margin-left:auto; }
.mfh-media--block.mfh-media--a-center { margin-left:auto; margin-right:auto; }
.mfh-media--block .mfh-media-img { margin-left:inherit; margin-right:inherit; }

/* wrap: text flows around the figure — needs an explicit width so there
   is room for text beside it (the width slider in the editor's media
   panel sets this; see .mfh-media[style] inline width:NN%). */
.mfh-media--wrap.mfh-media--a-left { float:left; margin-right:1.5rem; clear:left; }
.mfh-media--wrap.mfh-media--a-right { float:right; margin-left:1.5rem; clear:right; }

/* full: ignores the width slider entirely — always the full column. */
.mfh-media--full { width:100% !important; clear:both; }

/* side: two (or more) side-by-side figures share one row via the
   .mfh-media-row wrapper includes/body-engine.php builds around
   consecutive `l=side` tokens; stacks on phones like every other
   media-layout choice (audit: "On mobile, automatically stack
   side-by-side/float layouts so the article remains readable").
   Fallback for a LONE `l=side` figure with no adjacent partner to pair
   with (body-engine.php only wraps runs of 2+): behave like `block`
   rather than being left with no layout rule at all. .mfh-media-row
   .mfh-media below overrides this the moment it IS paired. */
.mfh-media--side { clear:both; }
.mfh-media-row {
  display:flex;
  flex-wrap:wrap;
  gap:1.2rem;
  margin:1.5rem 0;
  clear:both;
}
.mfh-media-row .mfh-media { flex:1 1 260px; margin:0 !important; max-width:none; width:auto !important; }
@media (max-width:600px) {
  .mfh-media-row { gap:.8rem; }
  .mfh-media--wrap.mfh-media--a-left, .mfh-media--wrap.mfh-media--a-right {
    float:none; margin-left:0; margin-right:0; width:100% !important;
  }
}

/* In-article videos: width:100% alone makes a portrait/vertical clip
   (very common from phone uploads) blow up to a huge height on a wide
   article column, forcing readers to scroll forever to get past it.
   Cap the height and letterbox instead of stretching. !important
   overrides the inline style="" set at render time in body-engine.php,
   so this catches every video regardless of how it was inserted
   (uploaded clip, raw <video> paste, cached/old article HTML, etc). */
.article-body video, .prose video, .main-col video {
  width:100% !important;
  max-height:70vh !important;
  height:auto !important;
  object-fit:contain !important;
  display:block;
  margin:1.5rem auto !important;
  border-radius:8px;
  background:#000;
}
@media (max-width:600px){
  .article-body video, .prose video, .main-col video {
    max-height:60vh !important;
  }
}

/* Dynamic (admin/farmer-authored) articles rendered through
   articles/view.php don't have a real <aside class="sidebar"> the way
   the 90+ hand-written legacy pages do — renderArticleBody() prints a
   flat run of paragraphs/headings/figures directly into .article-body.
   In a 2-column CSS grid, those become individual grid items and get
   auto-placed alternating between column 1 and column 2 instead of
   stacking, which visibly breaks the layout (this is what scattered
   the Sources & Further Reading box into the sidebar track). Applying
   .no-sidebar collapses the grid to a single, centred reading column
   so every child simply stacks — no grid-placement bug possible. */
.article-body.no-sidebar {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
  /* Bug fix: dynamic articles (articles/view.php, articles/preview.php)
     drop a flat run of <p>/<h2>/<figure>/etc. straight into this grid
     container as individual children — no wrapping <article>. The base
     .article-body rule above sets gap:48px for the two-column
     (article + sidebar) legacy layout, where it only ever acts as a
     column-gap between those two items. Here, with grid-template-columns
     collapsed to one column, every one of those flat children becomes
     its own grid row instead, so that same 48px is applied as a ROW gap
     between EVERY paragraph/heading/image — on top of each element's own
     margin, since grid item margins never collapse the way normal block
     flow margins do. That's what stacked into the huge dead space
     between lines (paragraph margin + 48px unwanted grid gap, repeated
     for every element). Zeroing the gap here lets --article-gap on
     .prose p/.article-body p do the only spacing, matching the tight
     rhythm already used in the admin editor. */
  gap: 0;
}

/* Article typography — tuned for a compact, magazine-style reading
   rhythm (tighter paragraph gaps than the old 20px/1.8 default, which
   read as sparse/floaty on long-form step-by-step content) and fully
   fluid across breakpoints via clamp() rather than a single fixed
   media-query jump. */
.prose, .article-body, .main-col {
  --article-fs: clamp(15.5px, 1.05vw + 12px, 17px);
  --article-lh: 1.72;
  --article-gap: clamp(18px, 2.1vw, 24px);
  font-size:var(--article-fs);
  line-height:var(--article-lh);
}
.prose p, .article-body p, .main-col > p {
  margin:0 0 var(--article-gap);
  /* Keeps a paragraph's last line from ending on a single stray word
     and stops a heading/figure from being followed by just one
     orphaned line at the top of the next column/page view. */
  orphans:3;
  widows:3;
}
/* Softens the rag on long-form serif copy without switching to full
   justification (which would reintroduce uneven word-gaps — the
   opposite of what we want here). Falls back to normal wrapping in
   browsers that don't support it yet. */
.prose p, .prose li, .article-body p, .article-body li, .main-col > p, .main-col li {
  text-wrap: pretty;
}
/* The Quill editor can still leave a stray empty <p></p> or
   <p>&nbsp;</p> behind (e.g. from a paste or an undone edit). Each one
   used to render as a full blank paragraph with its own margin, which
   is exactly the "extra dead space between paragraphs" look. Hiding
   them here fixes every article at once without having to hand-edit
   the database, and any that get pasted into future articles are
   covered automatically too. */
.prose p:empty, .article-body p:empty, .main-col > p:empty {
  display:none;
}
.prose ul, .prose ol,
.article-body ul, .article-body ol,
.main-col ul, .main-col ol {
  margin:0 0 var(--article-gap) 1.35rem;
}
.prose li, .article-body li, .main-col li { margin-bottom:8px; }
/* Safety net: if a <p> ever survives inside a list item (some paste
   sources nest one), don't let it stack its own paragraph margin on
   top of the list item's margin — that's what makes bullet lists
   look like each line is floating in its own block of empty space. */
.prose li > p, .article-body li > p, .main-col li > p { margin:0; display:inline; }
.prose strong, .article-body strong, .main-col strong { font-weight:700; color:#242424; }
/* Quill farmer/admin size classes are stored with the article HTML. Keep
   the same visual size after publication, not only inside the editor. */
.prose .ql-size-small, .article-body .ql-size-small, .main-col .ql-size-small { font-size:.85em; }
.prose .ql-size-large, .article-body .ql-size-large, .main-col .ql-size-large { font-size:1.45em; }
.prose .ql-size-huge, .article-body .ql-size-huge, .main-col .ql-size-huge { font-size:2em; }
/* Site audit item 58/80: align + indent were added as editor toolbar
   controls, so the public article CSS must implement the same classes
   Quill writes into the saved body, or they silently disappear on the
   live page even though they still show in the editor. */
.prose .ql-align-center, .article-body .ql-align-center, .main-col .ql-align-center { text-align:center; }
.prose .ql-align-right, .article-body .ql-align-right, .main-col .ql-align-right { text-align:right; }
.prose .ql-align-justify, .article-body .ql-align-justify, .main-col .ql-align-justify { text-align:justify; }
.prose [class*="ql-indent-"], .article-body [class*="ql-indent-"], .main-col [class*="ql-indent-"] { --ql-indent-step:3em; }
.prose .ql-indent-1, .article-body .ql-indent-1, .main-col .ql-indent-1 { padding-left:calc(var(--ql-indent-step, 3em) * 1); }
.prose .ql-indent-2, .article-body .ql-indent-2, .main-col .ql-indent-2 { padding-left:calc(var(--ql-indent-step, 3em) * 2); }
.prose .ql-indent-3, .article-body .ql-indent-3, .main-col .ql-indent-3 { padding-left:calc(var(--ql-indent-step, 3em) * 3); }
.prose .ql-indent-4, .article-body .ql-indent-4, .main-col .ql-indent-4 { padding-left:calc(var(--ql-indent-step, 3em) * 4); }
.prose .ql-indent-5, .article-body .ql-indent-5, .main-col .ql-indent-5 { padding-left:calc(var(--ql-indent-step, 3em) * 5); }
.prose .ql-indent-6, .article-body .ql-indent-6, .main-col .ql-indent-6 { padding-left:calc(var(--ql-indent-step, 3em) * 6); }
.prose .ql-indent-7, .article-body .ql-indent-7, .main-col .ql-indent-7 { padding-left:calc(var(--ql-indent-step, 3em) * 7); }
.prose .ql-indent-8, .article-body .ql-indent-8, .main-col .ql-indent-8 { padding-left:calc(var(--ql-indent-step, 3em) * 8); }

/* Section 5 content-structure blocks (admin-editor.js "Insert Block"
   menu). Built on <blockquote class="mfh-block mfh-block-*"> so they
   survive the farmer sanitizer's allow-list (includes/farmer.php) — see
   its mfh-block-* class allow-list comment for why blockquote specifically. */
.prose blockquote.mfh-block, .article-body blockquote.mfh-block, .main-col blockquote.mfh-block {
  margin:1.2rem 0; padding:1rem 1.2rem; border-left:4px solid var(--green); border-radius:6px;
  background:#f4f9f2; font-style:normal;
}
.prose blockquote.mfh-block p, .article-body blockquote.mfh-block p, .main-col blockquote.mfh-block p { margin:.3rem 0; }
.prose blockquote.mfh-block ul, .article-body blockquote.mfh-block ul, .main-col blockquote.mfh-block ul,
.prose blockquote.mfh-block ol, .article-body blockquote.mfh-block ol, .main-col blockquote.mfh-block ol { margin:.4rem 0 .2rem 1.2rem; }
.prose blockquote.mfh-block-tip, .article-body blockquote.mfh-block-tip, .main-col blockquote.mfh-block-tip { background:#eef7ff; border-left-color:#3b82f6; }
.prose blockquote.mfh-block-warning, .article-body blockquote.mfh-block-warning, .main-col blockquote.mfh-block-warning { background:#fff8e8; border-left-color:#e8a33d; }
.prose blockquote.mfh-block-important, .article-body blockquote.mfh-block-important, .main-col blockquote.mfh-block-important { background:#fdecec; border-left-color:#dc4c4c; }
.prose blockquote.mfh-block-faq p:nth-of-type(odd), .article-body blockquote.mfh-block-faq p:nth-of-type(odd), .main-col blockquote.mfh-block-faq p:nth-of-type(odd) { margin-top:.8rem; }
/* takeaways/steps existed in the "Insert Block" menu and in
   includes/article-contract.php's ARTICLE_BLOCK_KINDS, but only
   tip/warning/important/faq had public styles — a Key Takeaways or
   Step-by-step block rendered as a plain, uncoloured quote box (Section
   6: "add public styles for every new formatting class"). */
.prose blockquote.mfh-block-takeaways, .article-body blockquote.mfh-block-takeaways, .main-col blockquote.mfh-block-takeaways { background:#eefbf1; border-left-color:var(--green,#356b3b); }
.prose blockquote.mfh-block-steps, .article-body blockquote.mfh-block-steps, .main-col blockquote.mfh-block-steps { background:#fbf8ee; border-left-color:var(--gold,#c99a3d); }
.prose blockquote.mfh-block-steps ol, .article-body blockquote.mfh-block-steps ol, .main-col blockquote.mfh-block-steps ol { padding-left:1.1em; }

/* .mfh-callout — the DIV wrapper includes/article-contract.php's
   articleGroupCallouts() builds around a run of Quill-flat
   "mfh-block-<kind> title line + following list", as opposed to the
   single self-contained <blockquote class="mfh-block mfh-block-<kind>">
   the Insert Block menu writes (styled above). Same palette per kind so
   a callout looks identical regardless of which authoring path made it. */
.mfh-callout {
  border-left:3px solid var(--border, #d8e0da);
  background:#f6f8f5;
  border-radius:0 8px 8px 0;
  padding:.9rem 1.1rem;
  margin:1.4rem 0;
}
.mfh-callout > :first-child { margin-top:0; font-weight:700; }
.mfh-callout > :last-child { margin-bottom:0; }
.mfh-callout--takeaways { background:#eefbf1; border-left-color:var(--green,#356b3b); }
.mfh-callout--steps { background:#fbf8ee; border-left-color:var(--gold,#c99a3d); }
.mfh-callout--tip { background:#eef7ff; border-left-color:#3b82f6; }
.mfh-callout--warning { background:#fff8e8; border-left-color:#e8a33d; }
.mfh-callout--important { background:#fdecec; border-left-color:#dc4c4c; }
.mfh-callout--faq { background:#f6f8f5; border-left-color:var(--green-dark,#2a4d2f); }
.mfh-callout ul, .mfh-callout ol { margin:.5rem 0 .2rem 1.2em; }

/* ============================================================
   Section 6 ("improve long-article navigation") — includes/
   article-display.php's reading-time line, contents box, reading-
   progress bar and image lightbox (assets/js/article-display.js).
   ============================================================ */
.article-progress {
  position:sticky; top:0; z-index:40; height:3px; width:100%;
  background:transparent; pointer-events:none;
}
.article-progress span {
  display:block; height:100%; width:0%;
  background:var(--gold, #c99a3d);
  transition:width .1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .article-progress span { transition:none; }
}
.article-meta-line {
  display:flex; gap:.5rem; align-items:center;
  color:#8aa093; font-size:.85rem; font-weight:600;
  margin:0 0 1rem;
}
.article-readtime, .article-wordcount { white-space:nowrap; }

.article-toc {
  background:#f6f8f5;
  border:1px solid var(--border, #d8e0da);
  border-radius:10px;
  padding:.9rem 1.1rem;
  margin:0 0 1.6rem;
}
.article-toc summary {
  cursor:pointer; font-weight:700; color:var(--green-dark, #2a4d2f);
  font-family:'Barlow Condensed',sans-serif; letter-spacing:.3px;
  text-transform:uppercase; font-size:.95rem;
}
.article-toc ol { list-style:none; margin:.7rem 0 0; padding:0; counter-reset:toc; }
.article-toc > details > ol > li { counter-increment:toc; margin:.35rem 0; }
.article-toc > details > ol > li::before { content:counter(toc) ". "; color:var(--gold,#c99a3d); font-weight:700; }
.article-toc a { color:var(--green-dark, #2a4d2f); text-decoration:none; }
.article-toc a:hover { text-decoration:underline; }
.article-toc-sub { list-style:disc; margin:.35rem 0 .35rem 1.4em !important; padding:0; }
.article-toc-sub li { margin:.2rem 0 !important; }
.article-toc-sub li::before { content:none !important; }

/* Lightbox — a simple full-screen overlay for any .mfh-media-img the
   reader clicks, opened/closed by assets/js/article-display.js. */
.mfh-lightbox {
  position:fixed; inset:0; z-index:200;
  background:rgba(10,18,12,.92);
  display:none; align-items:center; justify-content:center;
  padding:5vw;
}
.mfh-lightbox.open { display:flex; }
.mfh-lightbox img { max-width:100%; max-height:90vh; border-radius:6px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
.mfh-lightbox-close {
  position:absolute; top:18px; right:22px;
  background:transparent; border:0; color:#fff; font-size:2rem;
  line-height:1; cursor:pointer; padding:.2rem .5rem;
}
.mfh-media--image .mfh-media-img { cursor:zoom-in; }

.prose a, .article-body a, .main-col a {
  color:var(--green);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:2px;
}
.prose a:hover, .article-body a:hover, .main-col a:hover { color:var(--gold-text); }

.prose table, .article-body table, .main-col table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:0 0 var(--article-gap, 24px);
  font-size:15px;
  border:1px solid #dfe6da;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 8px 20px -14px rgba(20,40,25,.3);
}
.prose table td, .prose table th,
.article-body table td, .article-body table th,
.main-col table td, .main-col table th {
  border-bottom:1px solid #e4e9df;
  padding:.7rem .9rem;
  text-align:left;
  vertical-align:top;
}
.prose table tr:last-child td, .article-body table tr:last-child td, .main-col table tr:last-child td {
  border-bottom:0;
}
/* Table-editor plugins (e.g. ql-table-better) wrap every cell's text in
   its own <p>, which still carries the article's paragraph bottom-margin
   *inside* the cell's own padding — that's what makes a normal-looking
   3-row table sprawl into a wall of oversized rows. Same fix as the
   list-item nesting above: neutralise the nested paragraph's margin. */
.prose table td > p, .prose table th > p,
.article-body table td > p, .article-body table th > p,
.main-col table td > p, .main-col table th > p {
  margin:0;
}
.prose table th, .article-body table th, .main-col table th {
  background:#eef3ea;
  font-weight:700;
  color:var(--green-dark, #242424);
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.3px;
  text-transform:uppercase;
  font-size:.82rem;
}
.prose table tr:nth-child(even) td,
.article-body table tr:nth-child(even) td,
.main-col table tr:nth-child(even) td {
  background:#fafbf9;
}
.prose table tbody tr:hover td,
.article-body table tbody tr:hover td,
.main-col table tbody tr:hover td {
  background:#f2f7ee;
}
@media (max-width:640px) {
  .prose table, .article-body table, .main-col table { display:block; overflow-x:auto; white-space:nowrap; }
}
/* Site design goal (Section 5): "On mobile, automatically stack side-by-
   side/float layouts so the article remains readable." Left/right image
   placement (renderArticleImage() in includes/body-engine.php) is done
   with an inline float:left/right + width:NN% style written straight
   into the saved HTML, so it has to be overridden with !important here
   rather than a plain CSS rule. */
@media (max-width:640px) {
  .prose figure, .article-body figure, .main-col figure {
    float:none !important; width:100% !important; margin-left:0 !important; margin-right:0 !important; clear:both !important;
  }
}

.section-label, .sec-label, .art-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  line-height:1.2;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-text);
  font-weight:700;
  margin-bottom:8px;
}
.page-hero-tag {
  font-family:'Barlow Condensed',sans-serif;
  font-size:12px;
  line-height:1.2;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--gold-light);
  font-weight:700;
  margin-bottom:8px;
}
.section-title, .sec-title {
  font-family:'Playfair Display',Georgia,serif;
  font-weight:700;
  color:var(--green);
  line-height:1.2;
}
.section-title { font-size:clamp(1.7rem,3vw,2.35rem); margin-bottom:12px; }
.section-sub, .sec-sub {
  color:var(--text-muted);
  max-width:850px;
  margin-bottom:28px;
}
.section { margin:0 0 46px; }
.intro-section { margin-bottom:42px; }
.intro-text { max-width:850px; font-size:18px; line-height:1.85; }
.article-section { margin:0 0 48px; }
/* Sources & Further Reading — admin-only, rendered by renderArticleReferences()
   in includes/body-engine.php after the main body. */
.article-references {
  margin:2.6rem 0 0;
  padding:1.4rem 1.6rem;
  background:#f5f7f2;
  border:1px solid #e1e8dd;
  border-left:4px solid var(--green, #4a7c3f);
  border-radius:8px;
}
.article-references h3 {
  margin:0 0 .8rem;
  font-size:1rem;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#3a5233;
}
.article-references ol {
  margin:0;
  padding-left:1.2rem;
}
.article-references li {
  margin-bottom:.5rem;
  font-size:.92rem;
  color:#4a4a4a;
}
.article-references a {
  color:var(--green, #4a7c3f);
  font-weight:600;
  word-break:break-word;
}
.article-references a:hover { color:var(--gold, #c8960c); }

/* Highlight (background colour) marks inserted from the admin editor's
   new Highlight toolbar button — Quill's `background` format renders
   inline style="background-color:..." by default, this just gives it
   readable padding/radius so it looks like a real highlighter stroke. */
.prose mark, .article-body mark, .main-col mark {
  padding:.05em .15em;
  border-radius:3px;
}

.article-section h2, .article-body article h2, .main-col h2,
.article-body h2, .main-col h2 {
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
  color:var(--green);
  line-height:1.25;
  margin:1.5rem 0 12px;
  padding-top:1rem;
  border-top:1px solid #e4e9df;
}
.article-body h2:first-child, .main-col h2:first-child { margin-top:0; padding-top:0; border-top:0; }
.article-section h3, .article-body article h3, .main-col h3,
.article-body h3, .main-col h3 {
  font-family:'Barlow Condensed',sans-serif;
  color:var(--green-dark);
  font-size:clamp(1.08rem, 1rem + .3vw, 1.28rem);
  letter-spacing:.4px;
  margin:22px 0 8px;
  padding-left:.7rem;
  border-left:3px solid var(--gold);
}
/* H4 (Section 6: "add public styles for every new formatting class") —
   editor toolbar and includes/article-contract.php's registry both allow
   h4 alongside h2/h3; it had no public style at all until now, so a
   saved h4 rendered as unstyled body text with no visual hierarchy. One
   step down from h3: no rule/indent, just a smaller, bolder label line. */
.article-section h4, .article-body article h4, .main-col h4,
.article-body h4, .main-col h4 {
  font-family:'Barlow Condensed',sans-serif;
  color:var(--text-dark, #242424);
  font-size:clamp(.98rem, .92rem + .2vw, 1.08rem);
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  margin:18px 0 6px;
}

/* Article card thumbnails (.art-img / .as-img) are now <a> wrappers
   around the image so the photo itself is clickable through to the
   article, not just the title text — anchors are inline by default,
   so this keeps the link filling the same block-level space the old
   <div> wrapper occupied. */
.art-img, .as-img { display:block; overflow:hidden; }

/* Images */
.article-img, .feature-img-wrap img, .mid-image-block img, .two-img-grid img, .img-item img {
  width:100%;
  height:auto;
  border-radius:10px;
}
.article-img { margin:26px 0 8px; box-shadow:var(--shadow); }
.img-caption, .feature-img-caption, .mid-image-caption {
  color:var(--text-muted);
  font-size:.88rem;
  line-height:1.55;
  margin:7px 0 28px;
  text-align:center;
}
.feature-img-wrap { margin:28px 0 36px; }
.feature-img-caption { margin-bottom:0; }
.mid-image-block { margin:32px 0; }
.two-img-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:28px 0;
}
.img-item { min-width:0; }

/* Cards / facts */
.quick-facts, .quick-fact, .sidebar-widget, .sidebar-card, .info-box,
.highlight-box, .warn-box, .tip-card, .related-card, .step-card,
.variety-card, .breed-card, .guide-card, .benefit-card, .system-card,
.use-card, .principle-card, .link-card, .cat-card, .prov-card {
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(255,255,255,.72);
  box-shadow:0 3px 15px rgba(0,0,0,.055);
}
.quick-facts, .sidebar-widget, .sidebar-card { padding:20px; margin-bottom:20px; }
.quick-facts h3, .sidebar-widget h3, .sidebar-card h3 {
  font-family:'Barlow Condensed',sans-serif;
  text-transform:uppercase;
  letter-spacing:1.4px;
  color:var(--green);
  font-size:1rem;
  margin:0 0 14px;
}
.fact-item, .quick-fact {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:11px 0;
  border-bottom:1px solid rgba(212,197,160,.65);
}
.fact-item:last-child { border-bottom:0; }
.fact-label, .qf-label, .cstat-label, .gc-detail-label, .sc-spec-label {
  color:var(--text-muted);
  font-size:.88rem;
}
.fact-val, .qf-val, .cstat-val, .gc-detail-val, .sc-spec-val {
  color:var(--green-dark);
  font-weight:700;
  text-align:right;
  font-size:.92rem;
}
.quick-fact { display:block; padding:16px; }
.qf-icon { font-size:1.35rem; margin-bottom:6px; }
.qf-text { color:var(--text-muted); font-size:.92rem; margin-top:4px; }
.info-box, .highlight-box, .warn-box {
  padding:20px 22px;
  margin:24px 0;
}
.info-box { border-left:4px solid var(--green); }
.highlight-box { border-left:4px solid var(--gold); background:#fffaf0; }
.warn-box { border-left:4px solid var(--red); background:#fff7f5; }
.hb-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--green-dark); margin-bottom:6px; }
.warn { color:var(--red); font-weight:700; }

/* Steps */
.steps-section { margin:42px 0; }
.steps-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.step-card {
  display:grid;
  grid-template-columns:48px 1fr;
  gap:14px;
  padding:20px;
}
.step-num, .num {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--green);
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:800;
  font-size:1.1rem;
}
.step-title { font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700; color:var(--green-dark); margin-bottom:5px; }
.step-desc, .step-body { color:var(--text-muted); font-size:.95rem; line-height:1.7; }
.step { margin-bottom:20px; }
.steps { padding-left:0!important; list-style:none; }
.steps > li { margin-bottom:14px; }

/* Tips */
.tips-strip { margin:38px 0; padding:24px; border-radius:12px; background:var(--soft); border:1px solid var(--border); }
.tips-inner { max-width:none; }
.tips-heading { font-family:'Playfair Display',serif; color:var(--green); font-size:1.5rem; margin-bottom:18px; }
.tips-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.tip-card { padding:18px; box-shadow:none; }
.tip-icon { font-size:1.5rem; margin-bottom:8px; }
.tip-title { font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--green-dark); font-size:1.05rem; margin-bottom:5px; }
.tip-body { color:var(--text-muted); font-size:.92rem; line-height:1.65; }

/* FAQ */
.faq-section { margin:42px 0; }
.faq-list { border-top:1px solid var(--border); }
.faq-item { border-bottom:1px solid var(--border); background:rgba(255,255,255,.35); }
.faq-q {
  position:relative;
  padding:17px 42px 17px 0;
  font-family:'Barlow Condensed',sans-serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--green-dark);
  cursor:pointer;
}
.faq-arrow { position:absolute; right:0; top:17px; color:var(--gold); transition:transform .2s ease; }
.faq-a { display:none; padding:0 30px 18px 0; color:var(--text-muted); font-size:.96rem; line-height:1.75; }
.faq-item.open .faq-a { display:block; }
.faq-item.open .faq-arrow { transform:rotate(180deg); }

/* Related content */
.related-section { margin:48px 0 0; }
.related-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.related-card { padding:18px; transition:transform .18s ease, box-shadow .18s ease; }
.related-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.related-icon { font-size:1.4rem; margin-bottom:7px; }
.related-title { font-family:'Barlow Condensed',sans-serif; color:var(--green-dark); font-weight:700; font-size:1.1rem; }
.related-desc { color:var(--text-muted); font-size:.9rem; line-height:1.6; margin-top:5px; }
.rel-link, .guide-link { display:inline-block; margin-top:10px; color:var(--green); font-weight:700; text-decoration:none!important; }

/* Rich related-article card (audit Section 6 UX: "clearer related-article
   cards") — built by includes/article-display.php's renderRelatedArticleCard()
   for the dynamic article template (articles/view.php). It carries the base
   .related-card class too, so it keeps the same border/background/shadow/
   hover lift as the plain icon-only cards above; only the internal layout
   (thumbnail + category tag + description) differs, scoped entirely under
   this modifier so none of the ~90 static guide pages' plain .related-card
   markup is affected. */
/* .related-card.related-card--rich (both classes in the selector, not just
   .related-card--rich) deliberately outranks the two older, duplicate
   .related-card{padding:18px;background:#fff} rules further down this file
   (same era as the "2,600 inline styles" / duplicated-CSS finding elsewhere
   in the audit) regardless of source-order, so this reset can't silently
   lose the cascade to either of them on a future edit. */
.related-card.related-card--rich { display:flex; flex-direction:column; padding:0; overflow:hidden; text-decoration:none; }
.related-card--rich .related-thumb {
  display:block; width:100%; aspect-ratio:16/9; overflow:hidden;
  background:var(--soft); flex-shrink:0;
}
.related-card--rich .related-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.related-card--rich .related-thumb--none {
  display:flex; align-items:center; justify-content:center; font-size:2rem;
}
.related-card--rich .related-card-body { display:block; padding:14px 16px 16px; }
.related-card--rich .related-cat {
  display:block; font-size:.7rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--green); margin-bottom:4px;
}
.related-card--rich .related-title { display:block; margin:0 0 4px; }
.related-card--rich .related-desc { display:block; margin:0; }


/* Sidebar */
.sidebar { min-width:0; position:sticky; top:105px; }
.sw-list, .sidebar-card ul { list-style:none; margin:0; padding:0; }
.sw-list li, .sidebar-card li { border-bottom:1px solid rgba(212,197,160,.65); }
.sw-list li:last-child, .sidebar-card li:last-child { border-bottom:0; }
.sw-list a, .sidebar-card a { display:block; padding:9px 0; color:var(--green); text-decoration:none; font-size:.93rem; }
.sw-title { font-family:'Barlow Condensed',sans-serif; color:var(--green); font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }

/* Guides / crop cards */
.crop-cards, .guide-cards {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:30px 0 42px;
}
.crop-card, .guide-card { overflow:hidden; border:1px solid var(--border); border-radius:10px; background:#fff; box-shadow:0 3px 16px rgba(0,0,0,.06); }
.crop-card-top { padding:20px 18px 14px; background:linear-gradient(145deg,#f5f0e2,#fff); }
.crop-icon, .guide-icon { font-size:2rem; margin-bottom:7px; }
.crop-name, .guide-title { font-family:'Barlow Condensed',sans-serif; font-size:1.2rem; font-weight:700; color:var(--green-dark); }
.crop-scientific { color:var(--text-muted); font-size:.84rem; font-style:italic; }
.crop-card-bottom { padding:13px 18px 16px; }
.crop-stat-row { display:flex; justify-content:space-between; gap:12px; padding:7px 0; border-bottom:1px solid #eee7d8; }
.crop-stat-row:last-child { border-bottom:0; }
.guide-card { padding:18px; }
.guide-tag, .variety-tag, .breed-tag { display:inline-block; padding:3px 8px; border-radius:20px; background:var(--soft); color:var(--green); font-family:'Barlow Condensed',sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.8px; }
.guide-desc, .var-desc, .breed-desc { color:var(--text-muted); font-size:.9rem; line-height:1.65; margin-top:8px; }

/* Variety / breed / specification cards */
.variety-card, .breed-card { padding:18px; }
.variety-name, .breed-name, .var-name { color:var(--green-dark); font-family:'Barlow Condensed',sans-serif; font-size:1.15rem; font-weight:700; }
.variety-desc, .breed-desc, .var-desc { margin-top:6px; }
.var-type { color:var(--gold-text); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.7px; }
.gc-detail-item, .sc-spec { display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #eee7d8; }
.price-tag { display:inline-block; margin-top:8px; padding:5px 9px; border-radius:4px; background:var(--green); color:#fff; font-family:'Barlow Condensed',sans-serif; font-weight:700; }

/* Category/market tiles */
.cat-card, .prov-card, .system-card, .use-card, .benefit-card, .principle-card, .link-card {
  padding:20px;
}
.cat-icon, .use-icon, .sys-icon, .ico { font-size:1.7rem; margin-bottom:8px; }
.cat-title, .use-title, .pc-title { color:var(--green-dark); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:1.15rem; }
.cat-desc, .use-desc, .pc-desc { color:var(--text-muted); font-size:.92rem; line-height:1.65; }
.cat-count { color:var(--gold-text); font-family:'Barlow Condensed',sans-serif; font-weight:700; margin-top:6px; }
.prov-crops { color:var(--text-muted); font-size:.9rem; margin-top:7px; }
.prov-badge, .depth-badge, .pest-badge { display:inline-block; font-size:.75rem; font-family:'Barlow Condensed',sans-serif; text-transform:uppercase; letter-spacing:.7px; color:#fff; background:var(--green); padding:4px 8px; border-radius:4px; }

/* Tables */
.data-table {
  width:100%;
  border-collapse:collapse;
  margin:26px 0 32px;
  background:#fff;
  border:1px solid var(--border);
  font-size:.93rem;
}
.data-table th {
  background:var(--green);
  color:#fff;
  text-align:left;
  padding:11px 13px;
  font-family:'Barlow Condensed',sans-serif;
  letter-spacing:.5px;
}
.data-table td { padding:10px 13px; border-top:1px solid #eee7d8; vertical-align:top; }
.data-table tr:nth-child(even) td { background:#fcfaf5; }

/* Source and editorial blocks */
.primary-sources {
  max-width:900px;
  margin:42px auto 50px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:10px;
  background:rgba(250,246,238,.8);
}
.primary-sources h2 {
  font-family:'Playfair Display',serif;
  color:var(--green);
  font-size:1.45rem;
  margin-bottom:10px;
}
.primary-sources ul { margin:14px 0 0 20px; }
.editorial-note { color:var(--text-muted); }
.editorial-cta { box-shadow:0 3px 15px rgba(0,0,0,.04); }

/* Small utility components */
.ticker-item { font-family:'Barlow Condensed',sans-serif; }
.ph-stat, .rev-card { padding:15px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.rev-card { text-align:center; }
.rev-icon { font-size:1.4rem; }
.rev-val { color:var(--green); font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.35rem; }
.label { color:var(--text-muted); font-size:.8rem; text-transform:uppercase; letter-spacing:.8px; }
.bstat { padding:10px 0; border-bottom:1px solid #eee7d8; }
.bval { color:var(--green-dark); font-weight:700; }
.blbl { color:var(--text-muted); font-size:.82rem; }
.pest-badge { background:var(--red); }
.yr { color:var(--gold-text); font-family:'Barlow Condensed',sans-serif; font-weight:700; }
.legume { color:var(--green); font-weight:700; }

/* Page hero corrections */
.page-hero h1 {
  color:#fff;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(2.25rem,5vw,3.8rem);
  line-height:1.05;
  margin:10px 0 12px;
  max-width:900px;
}
.page-hero h1 em { color:var(--gold-light); font-style:normal; }
.page-hero .page-hero-sub {
  color:rgba(255,255,255,.88);
  max-width:820px;
  font-size:1.05rem;
  line-height:1.65;
}
.hero-pills { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.hero-pill {
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid rgba(255,255,255,.3);
  border-radius:30px;
  background:rgba(0,0,0,.18);
  color:#fff;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.82rem;
  letter-spacing:.4px;
}
.page-breadcrumb, .breadcrumb {
  font-family:'Barlow Condensed',sans-serif;
  font-size:.8rem;
  letter-spacing:.8px;
}

/* Responsive content */
@media (max-width: 980px) {
  .page-body { grid-template-columns:1fr; gap:30px; }
  .article-body { grid-template-columns:1fr; }
  .sidebar { position:static; }
  .crop-cards, .guide-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tips-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 680px) {
  body { font-size:16px; }
  .page-body, .article-body { padding:38px 17px 65px; }
  .page-hero { min-height:320px; }
  .page-hero-content { padding:44px 17px; }
  .page-hero h1 { font-size:2.15rem; }
  .crop-cards, .guide-cards, .related-grid, .steps-grid, .tips-grid, .two-img-grid { grid-template-columns:1fr; }
  .intro-text { font-size:16.5px; }
  .data-table { display:block; overflow-x:auto; white-space:nowrap; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  .reveal, .related-card { transition:none!important; transform:none!important; }
}


/* ============================================================
   MZANSI FARMING HUB — COMPLETE PAGE LAYOUT PATCH
   The shared header is used by all PHP pages. These rules cover
   the homepage, article templates, category hubs and reusable
   cards so pages remain styled even when a template uses a
   component that does not have page-specific CSS.
   ============================================================ */

/* Language bar */
.lang-bar{background:#f4eedf;border-bottom:1px solid var(--border);color:var(--green-dark);}
.lang-bar-inner{max-width:1200px;margin:0 auto;padding:8px 24px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.lang-bar-left{display:flex;align-items:center;gap:10px;font-family:'Barlow Condensed',sans-serif;font-size:13px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;}
.lang-switcher{display:flex;flex-wrap:wrap;gap:6px;}
.lang-btn{border:1px solid var(--border);background:#fff;color:var(--green-dark);padding:5px 10px;border-radius:4px;font:600 12px 'Barlow Condensed',sans-serif;cursor:pointer;}
.lang-btn:hover,.lang-btn.active{background:var(--green);color:#fff;border-color:var(--green);}
.lang-content{display:none;}
.lang-content.active{display:block;}

/* Homepage ticker */
.ticker-wrap,.ticker-bar{width:100%;background:var(--green-dark);border-bottom:2px solid var(--gold);overflow:hidden;color:#fff;}
.ticker-track,.ticker-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;min-height:38px;overflow:hidden;}
.ticker-track{max-width:none;white-space:nowrap;animation:mfhTicker 42s linear infinite;width:max-content;}
.ticker-item,.ticker-scroll{font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;white-space:nowrap;}
.ticker-item{padding:10px 28px;border-right:1px solid rgba(255,255,255,.15);display:inline-block;text-decoration:none;color:#fff;}
.ticker-item:hover{color:var(--gold-light,#e0b84a);text-decoration:underline;}
.ticker-label{flex:0 0 auto;padding:9px 16px 9px 24px;color:var(--gold-light);font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:1.5px;text-transform:uppercase;}
.ticker-scroll{display:flex;gap:34px;overflow:hidden;flex:1;}
.ticker-scroll span{padding:10px 0;}
@keyframes mfhTicker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Section 14 audit fix (MEDIUM: "Reduced-motion support does not cover
 * the site's major continuous ticker animation") — the ticker's own
 * translateX loop is the one continuously-moving element on the site
 * with no prefers-reduced-motion opt-out (contrast the other three
 * reduced-motion rules in this file, which all cover finite/triggered
 * transitions, not an infinite loop). Freeze it at its rest position
 * instead of disabling only the transition timing, since `animation:
 * none` here fully stops the infinite loop rather than just skipping
 * the transition between two states.
 */
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
}

/* Homepage hero */
.hero{position:relative;min-height:590px;display:flex;align-items:center;overflow:hidden;background:var(--green-dark);}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.48);transform:scale(1.02);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,45,10,.94),rgba(30,61,16,.68) 52%,rgba(30,61,16,.25));}
.hero-content{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:78px 24px;display:flex;align-items:center;}
.hero-text{max-width:760px;color:#fff;}
.hero-badge{display:inline-flex;align-items:center;padding:7px 12px;border:1px solid rgba(232,176,32,.6);border-radius:4px;background:rgba(0,0,0,.2);color:var(--gold-light);font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:18px;}
.hero h1{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.8rem,6vw,5.5rem);line-height:1.02;color:#fff;margin:0 0 20px;max-width:850px;}
.hero-sub{max-width:720px;color:rgba(255,255,255,.86);font-size:1.1rem;line-height:1.75;margin-bottom:28px;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;}
.btn-primary,.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:12px 20px;border-radius:4px;font:700 13px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;transition:.2s ease;}
.btn-primary{background:var(--gold-button);color:#fff;border:1px solid var(--gold-button);}
.btn-primary:hover{background:var(--gold-text);transform:translateY(-1px);}
.btn-outline{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.45);}
.btn-outline:hover{background:rgba(255,255,255,.1);border-color:#fff;}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(110px,1fr));max-width:760px;border-top:1px solid rgba(255,255,255,.22);padding-top:20px;gap:18px;}
.hero-stat{padding-right:18px;border-right:1px solid rgba(255,255,255,.16);}
.hero-stat:last-child{border-right:0;}
.hero-stat .num{display:block;color:var(--gold-light);font:800 2rem 'Barlow Condensed',sans-serif;line-height:1;}
.hero-stat .label{display:block;color:rgba(255,255,255,.68);font:500 11px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;margin-top:6px;}

/* Homepage section primitives */
.section-inner{max-width:1200px;margin:0 auto;padding:68px 24px;}
.categories,.featured,.popular,.guides-section,.provinces-section,.system-section,.systems-section{background:var(--cream);}
.categories{padding-bottom:10px;}
.guides-section,.provinces-section{background:#f0ead8;}
.sec{text-align:center;max-width:760px;margin:0 auto 38px;}
.categories h2,.featured h2,.popular h2,.guides-section h2,.provinces-section h2{font-family:'Playfair Display',serif;color:var(--green-dark);font-size:clamp(1.9rem,3.5vw,2.7rem);line-height:1.2;margin-bottom:12px;}
.sec p,.sec-sub{color:var(--text-muted);line-height:1.7;}
.cat-grid,.categories-grid,.guide-cards,.guides-grid,.articles-grid,.pop-grid,.product-grid,.benefit-grid,.system-grid,.systems-grid,.province-grid,.prov-grid,.link-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.cat-card,.guide-card,.article-small,.pop-card,.product-card,.benefit-card,.system-card,.province-card,.prov-card,.link-card{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 3px 15px rgba(0,0,0,.055);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.cat-card:hover,.guide-card:hover,.article-small:hover,.pop-card:hover,.product-card:hover,.benefit-card:hover,.system-card:hover,.province-card:hover,.prov-card:hover,.link-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.1);border-color:#c5af72;}
.cat-card{padding:24px;}
.cat-card .icon,.cat-card .bc-icon,.product-icon,.benefit-icon,.system-card .icon{font-size:2rem;display:block;margin-bottom:12px;}
.cat-card h3,.guide-card h3,.article-small h3,.pop-title,.product-name,.benefit-card h3,.system-card h3,.province-card h3,.prov-name{font-family:'Playfair Display',serif;color:var(--green-dark);font-size:1.3rem;line-height:1.25;margin-bottom:8px;}
.cat-card p,.guide-card p,.article-small p,.pop-excerpt,.product-card p,.benefit-card p,.system-card p,.province-card p,.prov-rotation{color:var(--text-muted);font-size:.94rem;line-height:1.65;}
.bc-val{display:block;color:var(--green-dark);font:800 1.8rem 'Barlow Condensed',sans-serif;}
.bc-title{display:block;color:var(--text-muted);font:600 .75rem 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;}

/* Cards with images */
.guide-card img,.article-small img,.pop-img,.product-card img,.veg-img,.breed-img,.aq-feature-img,.art-img,.as-img{width:100%;height:190px;object-fit:cover;}
.guide-card .card-body,.article-small .as-body,.product-card .card-body{padding:18px;}
.article-small .art-body,.article-small .as-body{padding:17px;}
.art-meta,.as-meta,.art-read,.pop-time{font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);}
.art-title,.as-title{font:700 1.15rem 'Playfair Display',serif;color:var(--green-dark);line-height:1.3;margin:7px 0;}
.art-excerpt,.as-body p{color:var(--text-muted);font-size:.92rem;line-height:1.6;}
.art-read,.pop-link{color:var(--green);display:inline-block;margin-top:12px;text-decoration:underline;}

/* Homepage image/hero cards */
.hero-image-stack{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:470px;margin-left:auto;}
.hero-image-stack img{width:100%;height:210px;object-fit:cover;border-radius:10px;border:2px solid rgba(255,255,255,.2);}
.image-feature{border-radius:12px;box-shadow:var(--shadow);overflow:hidden;margin:24px 0;}
.image-feature figcaption{font-size:.85rem;color:var(--text-muted);font-style:italic;padding:10px 4px 0;line-height:1.5;}

/* Article and category heroes */
.article-hero{background:var(--green-dark);color:#fff;}
.article-hero .article-hero-inner,.article-hero-content{max-width:1200px;margin:0 auto;padding:56px 24px;}
.article-hero h1{font:700 clamp(2.3rem,5vw,4.2rem)/1.08 'Playfair Display',serif;color:#fff;max-width:900px;margin:10px 0 15px;}
.article-hero .art-meta{color:rgba(255,255,255,.7);}
/* BUGFIX: .art-title/.art-excerpt/.art-read below inherit colours meant
   for the light-background card variants (.article-small, .pop-card) —
   dark green text (.art-title) and dark grey text (.art-excerpt) on this
   card's dark green background, both essentially unreadable. Only
   .art-meta above had a light-background override; give the other three
   the same treatment. */
.article-hero .art-title{color:#fff;}
.article-hero .art-excerpt{color:rgba(255,255,255,.82);}
.article-hero .art-read{color:var(--gold-light);}
.page-hero-badge,.page-hero-meta,.page-hero-stats{position:relative;z-index:2;}
.page-hero-badge{display:inline-flex;padding:6px 11px;border:1px solid rgba(232,176,32,.6);border-radius:4px;color:var(--gold-light);font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:1.5px;text-transform:uppercase;}
.page-hero-meta{color:rgba(255,255,255,.7);font:500 12px 'Barlow Condensed',sans-serif;letter-spacing:.8px;}
.page-hero-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:24px;}

/* Share bar */
.share-wrap,.share-bar{max-width:1200px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:flex-start;gap:9px;border-bottom:1px solid var(--border);}
.share-wrap{background:var(--cream);}
.share-label{font:700 11px 'Barlow Condensed',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-muted);}
.share-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 11px;border-radius:4px;border:1px solid var(--border);background:#fff;color:var(--green-dark);font:600 12px 'Barlow Condensed',sans-serif;}
.share-btn:hover{border-color:var(--gold);color:var(--green);}

/* Content article / cards */
.content-article{max-width:900px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:12px;padding:36px 40px;box-shadow:0 4px 24px rgba(0,0,0,.05);}
.content-article h2{font:700 clamp(1.55rem,3vw,2.2rem)/1.2 'Playfair Display',serif;color:var(--green);margin:30px 0 12px;}
.content-article h2:first-child{margin-top:0;}
.content-article h3{font:700 1.15rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin:24px 0 9px;}
.content-article p{margin:0 0 18px;}
.content-article ul,.content-article ol{padding-left:1.3rem;margin-bottom:20px;}
.content-article li{margin-bottom:7px;}
.info-box,.tip-box,.danger-box,.warning,.success-note{padding:20px 22px;margin:24px 0;border-left:4px solid var(--green);border-radius:8px;background:#f5f8f1;}
.tip-box{border-left-color:var(--gold);background:#fffaf0;}
.danger-box,.warning{border-left-color:var(--red);background:#fff4f2;}

/* Data tables */
.data-table,.crop-table,.fert-table,.pest-table,.soil-table,.vacc-table,.price-table,.comp-table,.prov-table,.rotation-table,.cal-table,.depth-table,.ratio-table,.trouble-table{width:100%;border-collapse:collapse;margin:22px 0 30px;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;}
.data-table th,.crop-table th,.fert-table th,.pest-table th,.soil-table th,.vacc-table th,.price-table th,.comp-table th,.prov-table th,.rotation-table th,.cal-table th,.depth-table th,.ratio-table th,.trouble-table th{padding:11px 13px;background:var(--green);color:#fff;text-align:left;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase;}
.data-table td,.crop-table td,.fert-table td,.pest-table td,.soil-table td,.vacc-table td,.price-table td,.comp-table td,.prov-table td,.rotation-table td,.cal-table td,.depth-table td,.ratio-table td,.trouble-table td{padding:10px 13px;border-top:1px solid #eee7d8;vertical-align:top;}
.data-table tr:nth-child(even) td,.crop-table tr:nth-child(even) td,.price-table tr:nth-child(even) td{background:#fcfaf5;}

/* Steps / tips / FAQs */
.steps-section,.steps-dark{background:var(--green-dark);color:#fff;}
.steps-grid,.step-grid,.steps-list,.tips-grid,.faq-grid,.benefit-grid,.type-grid,.breed-grid,.variety-grid,.zone-grid,.zones-grid,.ipm-grid,.is-card-grid,.gc-grid,.sc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
:is(.steps-section, .steps-dark) .step-card{padding:22px;background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15);box-shadow:none;}
/* BUGFIX: these four rules used to be unscoped, so their translucent-white
   text colours (meant only for a dark .steps-section/.steps-dark wrapper)
   were leaking onto every .step-body/.ipm-desc/.type-desc/etc element
   site-wide, including plain cream-background pages like potato-farming —
   near-invisible pale text on a light background. Scoping to :is(.steps-section,
   .steps-dark) keeps the dark styling wherever it's actually used, while the
   light-theme defaults at line ~745 above now correctly apply everywhere else. */
:is(.steps-section, .steps-dark) :is(.step-num,.c-step-num,.ipm-num,.pc-num){font:800 1.5rem 'Barlow Condensed',sans-serif;color:var(--gold-light);margin-bottom:8px;}
:is(.steps-section, .steps-dark) :is(.step-title,.c-step-title,.ipm-title,.type-name,.breed-best,.sys-title){font:700 1.15rem 'Barlow Condensed',sans-serif;color:inherit;margin-bottom:7px;}
:is(.steps-section, .steps-dark) :is(.step-desc,.step-body,.c-step-body,.ipm-desc,.type-desc,.breed-body){color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.65;}
/* BUGFIX (follow-up): .c-step-body / .ipm-desc / .breed-body had no
   light-theme rule at all — only the dark-wrapper one above. Pages that
   use these classes OUTSIDE a .steps-section/.steps-dark wrapper (e.g.
   fertilizers/, pest-control/, animals/index.php's breed cards) fell
   back to the browser's default text colour, which happens to be
   readable but doesn't match the muted-grey description style every
   other card component on the site uses. Give them the same look. */
.c-step-body,.ipm-desc,.breed-body{color:var(--text-muted);font-size:.92rem;line-height:1.65;}
.faq-section{background:var(--cream);}
.faq-grid{grid-template-columns:1fr 1fr;}
.faq-item{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;}
.faq-q{font:700 1.05rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:9px;}
.faq-a{font-size:.94rem;line-height:1.7;color:var(--text-muted);}
.tips-strip{background:#f0ead8;padding:52px 24px;}
.tips-inner{max-width:1200px;margin:0 auto;}
.tips-heading{font:700 2rem 'Playfair Display',serif;color:var(--green-dark);margin-bottom:22px;}
.tip-card{padding:20px;background:#fff;}
.tip-icon{font-size:1.7rem;margin-bottom:8px;}
.tip-title{font:700 1.05rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:7px;}
.tip-body{color:var(--text-muted);font-size:.92rem;line-height:1.65;}
.related-section{background:#fff;}
.related-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.related-card{display:block;padding:18px;background:#fff;}
.related-icon{font-size:1.7rem;margin-bottom:8px;}
.related-title{font:700 1rem 'Barlow Condensed',sans-serif;color:var(--green-dark);}
.related-desc{font-size:.84rem;color:var(--text-muted);line-height:1.5;margin-top:5px;}

/* Common hub and specialist cards */
.veg-grid,.am-market-grid,.am-direct-grid,.am-coop-grid,.am-export-grid,.am-auction-list,.system-grid,.equip-grid,.container-grid,.product-grid,.species-grid,.stage-grid,.principles-grid,.region-grid,.zones-grid,.type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}
.veg-card,.am-market-card,.am-direct-card,.am-coop-card,.am-export-card,.am-auction-item,.system-card,.equip-card,.container-card,.species-card,.stage-card,.principle-card,.region-card,.zone-card,.type-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.veg-name,.am-market-icon,.am-coop-name,.am-stat-num,.gc-name,.sc-name,.species-name,.stage-card h3,.region-card h3,.zone-title{font:700 1.2rem 'Barlow Condensed',sans-serif;color:var(--green-dark);}
.veg-desc,.am-market-info,.am-coop-region,.am-direct-num,.am-export-flag,.am-auction-body,.system-card p,.equip-card p,.container-card p,.species-latin,.stage-card p,.region-box,.zone-desc,.zone-examples,.type-desc{color:var(--text-muted);font-size:.9rem;line-height:1.6;}
.am-stat-list,.am-sidebar-list{list-style:none;margin:0;padding:0;}
.am-stat-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #eee7d8;}
.am-stat-label{color:var(--text-muted);font-size:.82rem;}.am-stat-num{font-size:1.1rem;}

/* Specialist layouts */
.gallery-row,.gallery-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0;}
.gallery-item{border-radius:10px;overflow:hidden;background:#fff;border:1px solid var(--border);}
.gallery-item img{width:100%;height:190px;object-fit:cover;}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;max-width:1100px;margin:0 auto;padding:50px 24px;}
.form-wrap,.contact-grid>div{background:#fff;border:1px solid var(--border);border-radius:12px;padding:28px;box-shadow:var(--shadow);}
.form-group{margin-bottom:16px;}.form-group label{display:block;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.8px;text-transform:uppercase;color:var(--green);margin-bottom:6px;}.form-group input,.form-group textarea,.form-group select{width:100%;padding:11px 12px;border:1px solid #cfc3a7;border-radius:5px;background:#fff;font:inherit;color:var(--text);}.form-group textarea{min-height:150px;resize:vertical;}.btn-submit{background:var(--green);color:#fff;border:0;border-radius:5px;padding:12px 22px;font:700 13px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:1px;cursor:pointer;}.btn-submit:hover{background:var(--green-mid);}

/* Responsive patch */
@media(max-width:960px){
  .hero-content{padding:60px 20px}.hero{min-height:520px}.hero-stats{grid-template-columns:repeat(2,1fr)}
  .cat-grid,.guide-cards,.guides-grid,.articles-grid,.pop-grid,.product-grid,.benefit-grid,.system-grid,.systems-grid,.province-grid,.prov-grid,.link-card-grid,.veg-grid,.am-market-grid,.am-direct-grid,.am-coop-grid,.am-export-grid,.am-auction-list,.equip-grid,.container-grid,.species-grid,.stage-grid,.principles-grid,.region-grid,.zones-grid,.type-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps-grid,.step-grid,.steps-list,.tips-grid,.faq-grid{grid-template-columns:1fr 1fr;}
  .related-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-image-stack{display:none;}
}
@media(max-width:680px){
  .lang-bar-inner{padding:7px 12px;align-items:flex-start;flex-direction:column;gap:6px}.lang-bar-left{font-size:12px}.lang-switcher{gap:4px}.lang-btn{padding:5px 8px;}
  .ticker-label{padding-left:12px}.ticker-inner{min-height:34px}.ticker-scroll{gap:24px}.ticker-item{font-size:11px;padding:8px 18px;}
  .hero{min-height:540px}.hero-content{padding:52px 17px}.hero h1{font-size:clamp(2.4rem,12vw,3.5rem)}.hero-sub{font-size:1rem}.hero-stats{gap:12px}.hero-stat{padding-right:8px}.hero-stat .num{font-size:1.65rem}.hero-stat .label{font-size:10px;}
  .section-inner{padding:48px 17px}.cat-grid,.guide-cards,.guides-grid,.articles-grid,.pop-grid,.product-grid,.benefit-grid,.system-grid,.systems-grid,.province-grid,.prov-grid,.link-card-grid,.veg-grid,.am-market-grid,.am-direct-grid,.am-coop-grid,.am-export-grid,.am-auction-list,.equip-grid,.container-grid,.species-grid,.stage-grid,.principles-grid,.region-grid,.zones-grid,.type-grid,.steps-grid,.step-grid,.steps-list,.tips-grid,.faq-grid{grid-template-columns:1fr;}
  .content-article{padding:25px 19px}.page-hero-content{padding:42px 17px}.page-hero h1{font-size:2.25rem}.page-hero-sub{font-size:1rem}.share-wrap,.share-bar{padding:10px 14px;flex-wrap:wrap}.related-grid{grid-template-columns:1fr;}.contact-grid{grid-template-columns:1fr;padding:32px 17px;}.gallery-row,.gallery-strip{grid-template-columns:1fr;}.hero-ctas{flex-direction:column;align-items:stretch}.btn-primary,.btn-outline{width:100%;}
  .data-table,.crop-table,.fert-table,.pest-table,.soil-table,.vacc-table,.price-table,.comp-table,.prov-table,.rotation-table,.cal-table,.depth-table,.ratio-table,.trouble-table,.compare-table{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  /* UX review item #13 (Tables and farming guides): fallback for any table
     class not in the explicit list above — current or future — so a guide
     page never ships an un-scrollable table on mobile just because its
     class name was missed here. The explicit list stays (its rules also
     carry the desktop border/colour styling); this only adds the missing
     mobile behaviour for anything ending "-table" or plain <table> tags
     inside prose that aren't already covered by the .prose/.article-body/
     .main-col rule near the top of this file. */
  table[class$="-table"]{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;}
  /* Soft edge-fade "there's more to scroll" hint, toggled by the scroll-shadow
     script in includes/footer.php. Only ever applied to a table that is
     actually in horizontal-scroll mode (see JS above). */
  table.has-scroll-left{box-shadow:inset 14px 0 10px -10px rgba(0,0,0,.18);}
  table.has-scroll-right{box-shadow:inset -14px 0 10px -10px rgba(0,0,0,.18);}
  table.has-scroll-left.has-scroll-right{box-shadow:inset 14px 0 10px -10px rgba(0,0,0,.18), inset -14px 0 10px -10px rgba(0,0,0,.18);}
}

/* ============================================================
   MZANSI FARMING HUB — MISSING COMPONENT PATCH
   Styles for page-specific classes that were not covered by
   the shared patterns above. Grouped by feature/page.
   ============================================================ */

/* Breadcrumb inner wrapper, legal-page container, misc wrappers */
.breadcrumb-inner{max-width:1200px;margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);}
.breadcrumb-inner a{color:var(--gold-light);}
.breadcrumb-inner span{opacity:.6;}
.container{max-width:900px;margin:0 auto;padding:20px 24px 60px;}
.main-wrap{max-width:1200px;margin:0 auto;padding:40px 24px 70px;display:grid;grid-template-columns:1fr 320px;gap:44px;}
.main-wrap .article-body{grid-column:1/2;}
.main-wrap .sidebar{grid-column:2/3;}
@media(max-width:980px){.main-wrap{grid-template-columns:1fr;}}
.faq{max-width:900px;margin:40px auto;padding:0 24px;}
.faq h2{font-family:'Playfair Display',serif;color:var(--green-dark);margin-bottom:16px;}
[class$="-table-wrap"]{overflow-x:auto;margin:22px 0 30px;}
[class$="-table-wrap"] table{margin:0;}

/* Related links strip (used across ~26 article pages) */
.related-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0 10px;}
.rel-link{display:flex;flex-direction:column;gap:4px;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:0 3px 12px rgba(0,0,0,.04);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;font-size:.94rem;color:var(--text);}
.rel-link span{font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--gold-text);}
.rel-link:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.08);border-color:#c5af72;}
@media(max-width:680px){.related-links{grid-template-columns:1fr;}}

/* Revenue grid (rev-card itself already styled) */
.revenue-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:22px 0 30px;}
.revenue-grid .rev-card h4{font:700 .98rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin:6px 0 4px;}
.revenue-grid .rev-card p{color:var(--text-muted);font-size:.85rem;line-height:1.5;margin-bottom:6px;}
@media(max-width:680px){.revenue-grid{grid-template-columns:1fr;}}

/* Highlight-box colour modifiers */
.highlight-box.amber{border-left-color:#c8960c;background:#fff8e8;}
.highlight-box.blue{border-left-color:#2b6ec0;background:#eef5fc;}
.highlight-box.green{border-left-color:var(--green);background:#f0f7ec;}
.highlight-box.purple{border-left-color:#7a3ea1;background:#f6eefb;}
.highlight-box.tip{border-left-color:var(--gold);background:#fffaf0;}
.highlight-box.danger{border-left-color:var(--red);background:#fff4f2;}
.highlight-box .hb-title{font:700 1.05rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:8px;}

/* Two-column soil/compost boxes */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:20px 0;}
.col-box{padding:18px 20px;border-radius:10px;border:1px solid var(--border);background:#fff;}
.col-box h4{font:700 1.05rem 'Barlow Condensed',sans-serif;margin-bottom:10px;}
.col-box.green{border-left:4px solid var(--green);background:#f3f8ee;}
.col-box.brown{border-left:4px solid var(--brown);background:#f8f2ea;}
@media(max-width:680px){.two-col{grid-template-columns:1fr;}}

/* Generic table-cell status colours (good/bad/best/check/cross etc.) */
td.good,span.good{color:var(--green);font-weight:700;}
td.bad,span.bad{color:var(--red);font-weight:700;}
td.warn{color:var(--gold-text);font-weight:700;}
td.check,span.check{color:var(--green);font-weight:700;}
td.cross,span.cross{color:var(--red);font-weight:700;}
td.best,.tillage-card.best,.system-card.best{border:2px solid var(--gold);position:relative;}
td.grain{color:var(--brown);font-weight:600;}
td.cover{color:var(--green-mid);font-weight:600;}
.pname,.cname,.ratio-name{font-weight:700;color:var(--green-dark);}
.tick{margin-right:4px;}

/* ===== agri-markets specific ===== */
.am-price-table-wrap,.am-channel-table-wrap{overflow-x:auto;}
.am-price-table,.am-channel-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:.92rem;}
.am-price-table th,.am-channel-table th{padding:11px 13px;background:var(--green);color:#fff;text-align:left;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase;}
.am-price-table td,.am-channel-table td{padding:10px 13px;border-top:1px solid #eee7d8;}
.am-price-table tr:nth-child(even) td,.am-channel-table tr:nth-child(even) td{background:#fcfaf5;}
.am-price-high,.am-complex-high{color:var(--red);font-weight:700;}
.am-price-med,.am-complex-med{color:var(--gold-text);font-weight:700;}
.am-complex-low{color:var(--green);font-weight:700;}
.am-table-note{font-size:.85rem;color:var(--text-muted);margin-top:10px;font-style:italic;}
.am-subheading{font:700 1.25rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin:26px 0 10px;}
.am-tip-box{display:flex;gap:12px;background:#fffaf0;border-left:4px solid var(--gold);border-radius:8px;padding:16px 18px;margin:20px 0;}
.am-tip-icon{font-size:1.4rem;flex:0 0 auto;}
.am-season-tips{list-style:none;margin:14px 0;padding:0;}
.am-season-tips li{padding:10px 0;border-bottom:1px solid #eee7d8;font-size:.92rem;}
.am-season-badge{display:inline-block;padding:3px 9px;border-radius:20px;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#fff;margin-right:8px;}
.am-season-badge.summer,.season-badge.badge-summer{background:#c8960c;}
.am-season-badge.autumn,.season-badge.badge-winter{background:#a05a2c;}
.am-season-badge.winter{background:#2b6ec0;}
.am-season-badge.spring{background:var(--green-mid);}
.am-sidebar-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px;margin-bottom:18px;}
.am-sidebar-title{font:700 1rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:10px;}
.am-sidebar-seasonal{background:#f8f4e8;}
.am-body-list{display:flex;flex-direction:column;gap:10px;}
.am-body-item{padding:10px 0;border-bottom:1px solid #eee7d8;font-size:.9rem;}
.am-auction-tag{display:inline-block;background:var(--green);color:#fff;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;padding:3px 8px;border-radius:4px;margin-bottom:6px;}

/* ===== Badge modifiers (pest risk, species, season) ===== */
.season-badge{display:inline-block;padding:3px 9px;border-radius:20px;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--green);}
.season-badge.badge-year{background:var(--green-mid);}
.pest-badge.badge-high{background:var(--red);}
.pest-badge.badge-med{background:var(--gold-button);}
.species-badge{display:inline-block;padding:4px 10px;border-radius:20px;font:700 .74rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--green);margin-bottom:8px;}
.species-badge.badge-commercial{background:var(--green);}
.species-badge.badge-export{background:var(--gold-button);}
.species-badge.badge-cosmetic{background:#7a3ea1;}
.species-badge.badge-wild{background:var(--brown);}
.product-price{font:700 .95rem 'Barlow Condensed',sans-serif;color:var(--gold-text);}

/* ===== Pest control: biological control grid & IPM ===== */
.bio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;}
.bio-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.bio-icon{font-size:1.7rem;margin-bottom:8px;}
.bio-title{font:700 1.05rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:6px;}
.bio-desc{color:var(--text-muted);font-size:.88rem;line-height:1.6;margin-bottom:8px;}
.bio-target{font-size:.8rem;color:var(--green);font-weight:700;}
.ipm-steps{padding:56px 24px;background:#f0ead8;}
.ipm-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
@media(max-width:680px){.bio-grid{grid-template-columns:1fr;}}

/* ===== Planting calendar tables (garlic/green-beans/groundnut/crops) ===== */
.cal-wrap{overflow-x:auto;margin:20px 0 28px;}
.cal-plant,.cal-grow,.cal-harvest,.cal-yes{display:inline-block;padding:4px 8px;border-radius:4px;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;color:#fff;}
.cal-plant{background:var(--gold-button);}
.cal-grow,.cal-yes{background:var(--green-mid);}
.cal-harvest{background:var(--red);}

/* ===== Export-farming certifications ===== */
.cert-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;}
.cert-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:20px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.cert-badge{display:inline-block;background:var(--green);color:#fff;font:700 .7rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;padding:4px 9px;border-radius:20px;margin-bottom:10px;}
@media(max-width:680px){.cert-grid{grid-template-columns:1fr;}}

/* ===== Seed comparison (hybrid vs OP) & general compare table ===== */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:22px 0;}
.compare-card{background:#fff;border:2px solid var(--border);border-radius:12px;padding:22px;}
.compare-card.hybrid{border-color:var(--green);}
.compare-card.op{border-color:var(--gold);}
.compare-title{font:700 1.15rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:12px;}
.compare-pro{list-style:none;margin:0;padding:0;}
.compare-pro li{padding:7px 0;border-bottom:1px solid #eee7d8;font-size:.92rem;}
.compare-table{width:100%;border-collapse:collapse;margin:22px 0 30px;background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;font-size:.93rem;}
.compare-table th{padding:11px 13px;background:var(--green);color:#fff;text-align:left;font:700 12px 'Barlow Condensed',sans-serif;}
.compare-table td{padding:10px 13px;border-top:1px solid #eee7d8;}
@media(max-width:680px){.compare-grid{grid-template-columns:1fr;}}

/* ===== Fertilizers: composting steps & NPK cards ===== */
.compost-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;}
.c-step{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px;text-align:center;}
.npk-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0;}
.npk-card{border-radius:10px;padding:22px;color:#fff;box-shadow:0 3px 15px rgba(0,0,0,.08);}
.npk-card.nitrogen{background:linear-gradient(150deg,var(--green-dark),var(--green-mid));}
.npk-card.phosphorus{background:linear-gradient(150deg,#5c3a1e,#8a5a30);}
.npk-card.potassium{background:linear-gradient(150deg,#8a6a10,var(--gold));}
.npk-letter{font:800 2.4rem 'Barlow Condensed',sans-serif;line-height:1;opacity:.85;}
.npk-element{font:700 1.15rem 'Barlow Condensed',sans-serif;margin:4px 0 10px;}
.npk-role{font-size:.88rem;line-height:1.6;opacity:.92;margin-bottom:10px;}
.npk-deficiency{font-size:.82rem;background:rgba(0,0,0,.18);border-radius:6px;padding:8px 10px;}
@media(max-width:680px){.compost-steps,.npk-row{grid-template-columns:1fr;}}

/* ===== Homepage art-tag colour modifiers =====
   Bug fix: the base .art-tag rule (see .section-label, .sec-label, .art-tag
   above) sets color:var(--gold-text), a dark brownish-gold (#765800) chosen
   for the plain-text label usage on cream/white card backgrounds. These five
   modifiers additionally paint a dark clay/umber/green CHIP behind the tag,
   which put that same dark-gold text on a dark background — contrast ratios
   as low as ~1.1:1 (needs 4.5:1), i.e. the text was essentially invisible.
   Once a background chip is added the text needs to switch to white. */
.art-tag.crops{background:var(--accent-clay);color:#fff;}
.art-tag.fertilizer{background:var(--accent-clay);color:#fff;}
.art-tag.livestock{background:var(--accent-umber);color:#fff;}
.art-tag.seeds{background:var(--green-mid);color:#fff;}
.art-tag.vegetables{background:var(--green);color:#fff;}

/* ===== Homepage hero image stack labels ===== */
.hi-tag{position:relative;border-radius:10px;overflow:hidden;}
.hi-main{grid-row:1/3;}
.g-overlay,.hi-tag{position:relative;}
.hi-label{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);color:#fff;font:600 12px 'Barlow Condensed',sans-serif;letter-spacing:.6px;padding:20px 12px 10px;}
.g-overlay{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 60%);display:flex;align-items:flex-end;padding:12px;}
.gallery-item{position:relative;}
.g-label{color:#fff;font:700 12px 'Barlow Condensed',sans-serif;letter-spacing:.6px;text-transform:uppercase;}

/* ===== Homepage popular-articles cards & seasonal tabs ===== */
.pop-body{padding:18px;}
.pop-footer{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:12px;border-top:1px solid #eee7d8;}
.seasonal{background:#fff;}
.season-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0;}
.s-tab{padding:10px 18px;border-radius:30px;border:1px solid var(--border);background:#fff;font:600 13px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);cursor:pointer;transition:.2s;}
.s-tab.active,.s-tab:hover{background:var(--green);color:#fff;border-color:var(--green);}
.season-content{display:none;background:#fff;border:1px solid var(--border);border-radius:12px;padding:26px;}
.season-content.active{display:block;}
.sc-text h3{font-family:'Playfair Display',serif;color:var(--green-dark);margin-bottom:10px;}
.sc-list{list-style:none;margin:14px 0 0;padding:0;}
.sc-list li{padding:8px 0;border-bottom:1px solid #eee7d8;font-size:.92rem;display:flex;gap:8px;align-items:center;}

/* ===== Farming grants ===== */
.grants-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:24px 0;}
.grant-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.grant-card.gold-top{border-top:4px solid var(--gold);}
.gc-header{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:6px;}
.gc-badge{display:inline-block;padding:3px 9px;border-radius:20px;font:700 .7rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;color:#fff;background:var(--green);}
.gc-badge.gold{background:var(--gold-button);}
.gc-sub{color:var(--text-muted);font-size:.86rem;margin-bottom:10px;}
.gc-desc{font-size:.92rem;line-height:1.6;margin-bottom:14px;}
.gc-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.gc-detail-item{background:#f8f4e8;border-radius:6px;padding:8px 10px;}
.gc-detail-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);}
.gc-detail-val{font-size:.86rem;font-weight:700;color:var(--green-dark);}
.gc-apply{display:inline-block;background:var(--green);color:#fff;padding:9px 16px;border-radius:5px;font:700 12px 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;text-decoration:none;}
.gc-apply:hover{background:var(--green-mid);}
.prov-table-wrap{overflow-x:auto;margin:20px 0 28px;}
@media(max-width:680px){.grants-grid,.gc-details{grid-template-columns:1fr;}}

/* ===== Contact page ===== */
.info-sidebar{display:flex;flex-direction:column;gap:16px;}
.info-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:20px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.ic-icon{font-size:1.6rem;margin-bottom:8px;}

/* ===== Soybean inoculation steps ===== */
.inocu-box{background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px;margin:20px 0;}
.inocu-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px;}
.is-card{background:#f5f8f1;border-radius:8px;padding:14px;}
.is-num{font:800 1.4rem 'Barlow Condensed',sans-serif;color:var(--gold-text);}
.is-title{font:700 .95rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin:4px 0;}
.is-desc{font-size:.82rem;color:var(--text-muted);line-height:1.5;}
@media(max-width:680px){.inocu-steps{grid-template-columns:1fr 1fr;}}

/* ===== Land preparation: soil table & tillage cards ===== */
.soil-table-wrap,.rotation-table-wrap{overflow-x:auto;margin:20px 0 28px;}
.tillage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;}
.tillage-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:18px;box-shadow:0 3px 15px rgba(0,0,0,.05);}
.tc-icon{font-size:1.6rem;margin-bottom:8px;}
.tc-name{font:700 1rem 'Barlow Condensed',sans-serif;color:var(--green-dark);margin-bottom:6px;}
.tc-desc{color:var(--text-muted);font-size:.87rem;line-height:1.55;margin-bottom:8px;}
.tc-when{font-size:.8rem;color:var(--green);font-weight:600;}
@media(max-width:680px){.tillage-grid{grid-template-columns:1fr;}}

/* ===== Maize regional cards ===== */
.rc-name{font:700 1.1rem 'Barlow Condensed',sans-serif;color:var(--green-dark);}
.rc-plant{font-size:.82rem;color:var(--gold-text);font-weight:700;margin:4px 0;}
.rc-desc{color:var(--text-muted);font-size:.88rem;line-height:1.55;}

/* ===== Irrigation systems ===== */
.system-cards{display:flex;flex-direction:column;gap:18px;margin:22px 0;}
.system-card.best{border:2px solid var(--gold);}
.sc-header{display:flex;align-items:center;gap:12px;margin-bottom:8px;}
.sc-icon{font-size:1.8rem;}
.sc-tag{margin-left:auto;background:var(--gold-button);color:#fff;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;padding:4px 9px;border-radius:20px;}
.sc-desc{color:var(--text-muted);font-size:.9rem;line-height:1.6;margin-bottom:12px;}
.sc-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.sc-spec-label{font-size:.72rem;text-transform:uppercase;color:var(--text-muted);}
.sc-spec-val{font-weight:700;color:var(--green-dark);}
.comp-table-wrap{overflow-x:auto;margin:20px 0 28px;}
@media(max-width:680px){.sc-specs{grid-template-columns:1fr 1fr;}}

/* ===== Hydroponics / rooftop system badges ===== */
.sys-badge{display:inline-block;background:var(--gold-button);color:#fff;font:700 .7rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:4px 9px;border-radius:20px;margin-bottom:8px;}
.sys-desc{color:var(--text-muted);font-size:.88rem;line-height:1.55;margin:6px 0;}
.sys-load{font-size:.8rem;color:var(--green);font-weight:600;}
.depth-badge.depth-deep{background:var(--brown);}
.depth-badge.depth-medium{background:var(--gold-button);}
.depth-badge.depth-shallow{background:var(--green-mid);}

/* ===== Animal breed tags & stats ===== */
.breed-tag.tag-cattle{background:var(--brown);}
.breed-tag.tag-goat{background:var(--gold-button);}
.breed-tag.tag-sheep{background:var(--green-mid);}
.breed-icon{font-size:1.8rem;margin-bottom:6px;}
.breed-stats{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px;}
.breed-weight{font-size:.85rem;color:var(--green-dark);font-weight:700;margin:4px 0;}

/* ===== Macadamia establishment timeline ===== */
.timeline{display:flex;flex-direction:column;gap:0;margin:22px 0;border-left:3px solid var(--gold);padding-left:22px;}
.timeline-item{position:relative;padding-bottom:24px;}
.timeline-item::before{content:"";position:absolute;left:-28px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--gold);border:2px solid #fff;box-shadow:0 0 0 2px var(--gold);}
.tl-year{font:800 1rem 'Barlow Condensed',sans-serif;color:var(--gold-text);margin-bottom:4px;}
.tl-body h4{font-family:'Playfair Display',serif;color:var(--green-dark);margin-bottom:6px;}

/* ===== Tobacco leaf type tag ===== */
.type-tag{display:inline-block;background:var(--green);color:#fff;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:20px;margin-bottom:6px;}

/* ===== Use-case grids (ostrich/hemp/sorghum/oyster) ===== */
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:20px 0;}
.use-price,.use-val{font-weight:700;color:var(--gold-text);font-size:.92rem;margin-top:6px;display:block;}
@media(max-width:680px){.use-grid{grid-template-columns:1fr;}}

/* ===== Vegetables overview grid card body ===== */
.veg-body{padding:16px;}
.veg-icon{font-size:1.7rem;margin-bottom:6px;}
.veg-season{font-size:.8rem;color:var(--gold-text);font-weight:700;margin-bottom:6px;}

/* ===== Aquaponics cycling warning ===== */
.info-box.warn-box-aq{border-left-color:var(--red);background:#fff4f2;}

/* ===== Permaculture zones ===== */
.zones-section{padding:56px 24px;background:#f0ead8;}
.zone-badge{display:inline-block;background:var(--green);color:#fff;font:700 .72rem 'Barlow Condensed',sans-serif;text-transform:uppercase;letter-spacing:.6px;padding:4px 10px;border-radius:20px;margin-bottom:8px;}
.zone-card.zone-0{border-left:4px solid #7a3ea1;}
.zone-card.zone-1{border-left:4px solid var(--green);}
.zone-card.zone-2{border-left:4px solid var(--green-mid);}
.zone-card.zone-3{border-left:4px solid var(--gold);}
.zone-card.zone-4{border-left:4px solid var(--brown);}
.zone-card.zone-5{border-left:4px solid #555;}

/* Final small fixes */
.bc-desc{color:var(--text-muted);font-size:.9rem;line-height:1.6;}
.equip-icon{font-size:1.8rem;margin-bottom:8px;}
.hi-small{height:100%;}
.hi-small img{height:100%;object-fit:cover;}

/* Footer company credit */
.footer-admin-mark{color:inherit;opacity:.3;text-decoration:none;margin-left:3px;font-size:inherit}
.footer-admin-mark:hover{opacity:.9}
.company-link{margin:10px 0 0;text-align:center;font-size:12px;line-height:1.5;color:rgba(255,255,255,.45)}
.company-link a{color:inherit;text-decoration:none}
.company-link a:hover{text-decoration:underline;color:var(--gold-light)}

/* ============================================================
   UNIFIED DESIGN SYSTEM — brand-consistency cleanup pass.
   Single source of truth for buttons, cards, badges, alerts,
   forms, tables, tabs, pagination, avatars and empty states so
   the public site, the farmer dashboard (join/*.php) and the
   marketplace/store all read as one platform instead of several
   independently-styled sections. Existing page-specific classes
   (.fm-card, .grp-badge, .cat-card, etc.) are kept working via
   alias selectors below rather than renamed everywhere, so this
   is a visual unification, not a markup rewrite.
   ============================================================ */

/* ---- Buttons --------------------------------------------------
   .btn-primary / .btn-outline already existed (hero CTAs). Adding
   the missing .btn-secondary (was redefined from scratch inside
   join/dashboard.php and join/edit-submission.php) and .btn-danger,
   plus a shared .btn base so every button uses one font/weight/
   radius recipe instead of each page choosing its own. */
.btn,
.btn-primary, .btn-outline, .btn-secondary, .btn-danger, .btn-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:11px 20px;
  border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:13px;
  letter-spacing:.6px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  min-height:44px;
}
.btn-primary, .btn-submit { background:var(--gold-button); color:#fff; border-color:var(--gold-button); }
.btn-primary:hover, .btn-submit:hover { background:var(--gold-text); box-shadow:0 4px 12px rgba(30,61,16,.16); }
.btn-secondary {
  background:var(--white); color:var(--green-dark); border-color:var(--border);
}
.btn-secondary:hover { background:var(--soft); }
.btn-outline { background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:#fff; }
/* Solid-surface pages (dashboard/marketplace, not the dark hero) need an
   outline button that reads on a light background — .btn-outline above
   assumes white text on a dark hero and is illegible elsewhere. */
:not(.hero):not(.page-hero):not(.article-hero) > .btn-outline,
.panel .btn-outline, .card .btn-outline, .form-wrap .btn-outline {
  color:var(--green-dark); border-color:var(--border);
}
:not(.hero):not(.page-hero):not(.article-hero) > .btn-outline:hover,
.panel .btn-outline:hover, .card .btn-outline:hover, .form-wrap .btn-outline:hover {
  background:var(--soft); border-color:var(--green-mid);
}
.btn-danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger-border); }
.btn-danger:hover { background:var(--danger); color:#fff; border-color:var(--danger); }
.btn:active, .btn-primary:active, .btn-secondary:active, .btn-outline:active, .btn-submit:active { transform:translateY(1px); }
.btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-submit:disabled { opacity:.6; cursor:not-allowed; transform:none; }
.btn-sm { padding:7px 13px; font-size:11px; min-height:34px; }
.btn-lg { padding:14px 26px; font-size:14px; }
.btn-block { display:flex; width:100%; }

/* Tab-style pill buttons — the same visual idea was rebuilt three times
   (join/register.php .role-tab, homepage .s-tab, marketplace .fm-tabs a)
   with slightly different padding/active colours each time. */
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.tab {
  padding:9px 16px;
  border:1.5px solid var(--border);
  border-radius:var(--radius-pill);
  background:var(--white);
  color:var(--text-muted);
  font-family:'Barlow Condensed',sans-serif;
  font-weight:700;
  font-size:.82rem;
  letter-spacing:.4px;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:.15s ease;
  display:inline-block;
}
.tab:hover { border-color:var(--green-mid); color:var(--green-dark); }
.tab.active, .tab[aria-selected="true"] { background:var(--green); border-color:var(--green); color:#fff; }
/* Aliases: existing markup keeps working, just inherits the shared look. */
.role-tabs, .fm-tabs, .season-tabs { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.role-tab, .fm-tabs a, .s-tab { padding:9px 16px; border:1.5px solid var(--border); border-radius:var(--radius-pill); background:var(--white); color:var(--text-muted); font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:.82rem; letter-spacing:.4px; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:.15s ease; }
.role-tab:hover, .fm-tabs a:hover, .s-tab:hover { border-color:var(--green-mid); color:var(--green-dark); }
.role-tab.active, .fm-tabs a.active, .s-tab.active { background:var(--green); border-color:var(--green); color:#fff; }
/* Sidebar-style vertical tabs (dashboard editor: Photo/Info/Social/...) */
.tab-btn {
  display:block; width:100%; text-align:left; background:none; border:none;
  padding:.7rem 1rem; border-radius:6px; font:inherit; font-weight:600;
  color:var(--text); cursor:pointer; min-height:44px;
}
.tab-btn:hover { background:var(--soft); }
.tab-btn.active { background:var(--green-dark); color:#fff; }

/* ---- Cards ------------------------------------------------------
   Canonical card used for marketplace listings, farmer profiles,
   product tiles and article cards alike, so all four "look like
   members of the same platform" per the brand brief. Existing card
   classes (.fm-card, .hp-card, .cat-card, .product…) are aliased to
   the same recipe rather than replaced, to avoid a markup rewrite
   across 90+ guide pages that already use them. */
.card, .fm-card, .hp-card, .ghome-card, .hp-farmer-card, .home-sponsor-card,
.sponsor-card, .product, .grp-card, .ft-card, .ms-card, .dash-stat-card,
.stat-card, .info-card {
  background:var(--white);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
}
a.card, a.fm-card, a.hp-card, a.ghome-card, a.hp-farmer-card, a.home-sponsor-card,
a.sponsor-card, a.product {
  display:block; color:inherit; text-decoration:none;
}
.card-hover, .hp-card, .ghome-card, .hp-farmer-card, .home-sponsor-card, .sponsor-card {
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-hover:hover, .hp-card:hover, .ghome-card:hover, .hp-farmer-card:hover,
.home-sponsor-card:hover, .sponsor-card:hover {
  transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.1); border-color:#c5af72;
}
.card-body, .fm-card-body { padding:16px 18px; }
.card-title { font-family:'Playfair Display',serif; color:var(--green-dark); font-size:1.15rem; margin-bottom:6px; line-height:1.3; }
.card-meta { color:var(--text-muted); font-size:.82rem; }
.card-desc { color:var(--text-muted); font-size:.92rem; line-height:1.6; }
.card-footer { padding-top:12px; margin-top:12px; border-top:1px solid #eee7d8; }

/* ---- Image ratio utilities ---------------------------------------
   Marketplace/product/farmer/article thumbnails each hardcoded their
   own crop height (130px, 150px, 190px, 210px...) instead of a shared
   ratio, so the same photo crops differently depending which template
   rendered it. Use one of these on the <img> or a wrapping <div>. */
.ratio-1x1  { aspect-ratio:1/1;  width:100%; object-fit:cover; display:block; }
.ratio-4x3  { aspect-ratio:4/3;  width:100%; object-fit:cover; display:block; }
.ratio-16x9 { aspect-ratio:16/9; width:100%; object-fit:cover; display:block; }
.ratio-3x2  { aspect-ratio:3/2;  width:100%; object-fit:cover; display:block; }
.thumb-sm { width:44px; height:44px; border-radius:50%; object-fit:cover; }
.thumb-md { width:64px; height:64px; border-radius:50%; object-fit:cover; }
.thumb-lg { width:110px; height:110px; border-radius:50%; object-fit:cover; }

/* ---- Avatars ------------------------------------------------------
   Farmer initials/photo circles were built inline with a different
   size/border every time (index.php byline, farmers/index.php grid,
   join/dashboard.php hero). One component, three sizes. */
.avatar, .avatar-fallback, .dash-avatar-lockup .avatar-fallback {
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--soft); color:var(--green-dark); font-weight:800;
  border:2px solid var(--border);
}
.avatar-sm { width:22px; height:22px; font-size:.6rem; border-width:1px; }
.avatar-md { width:44px; height:44px; font-size:.95rem; }
.avatar-lg { width:80px; height:80px; font-size:1.6rem; border-width:3px; }
.avatar-xl { width:110px; height:110px; font-size:2rem; border-width:3px; }

/* ---- Badges (status pills, verification, category tags) ----------
   The "verified farmer" checkmark alone had 4 independent copies
   (.fm-verified, .verified-badge, and two inline-styled versions) each
   with a slightly different green. One canonical badge system now
   covers all status/category pill usage site-wide. */
.badge {
  display:inline-flex; align-items:center; gap:3px;
  padding:.14rem .55rem;
  border-radius:var(--radius-pill);
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  line-height:1.6;
  vertical-align:middle;
  white-space:nowrap;
}
.badge-neutral { background:var(--soft); color:var(--green-dark); }
.badge-green   { background:var(--success-bg); color:var(--success); }
.badge-gold    { background:var(--warning-bg); color:var(--gold-text); }
.badge-red     { background:var(--danger-bg); color:var(--danger); }
.badge-blue    { background:var(--info-bg); color:var(--info); }
.badge-purple  { background:#f6eefb; color:var(--accent-purple); }
.badge-brown   { background:#f8f2ea; color:var(--accent-umber); }
/* Canonical verified badge — replaces .fm-verified / .verified-badge /
   the various inline-styled green pills used across marketplace,
   farmers, search and store pages. */
.badge-verified, .fm-verified, .verified-badge {
  display:inline-flex; align-items:center; gap:3px;
  background:var(--success-bg); color:var(--success);
  border-radius:var(--radius-pill);
  padding:.14rem .55rem;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem; font-weight:700; letter-spacing:.3px;
  vertical-align:middle; white-space:nowrap;
}
.badge-verified::before, .fm-verified::before, .verified-badge::before { content:"✓ "; }
/* Category/tag colour-coding (art-tag, season-badge, species-badge etc.)
   already exist per-section; point the ad-hoc hex modifiers at the new
   named accent tokens instead of one-off values (base .art-tag.* colour
   assignments now live with the rest of that block, further down). */
.species-badge.badge-cosmetic { background:var(--accent-purple); }
.am-season-badge.winter { background:var(--accent-blue); }

/* Seller verification summary card (includes/badges.php
   sellerVerificationSummaryHtml()) — a plain-language roll-up of the
   badges above, used on the farm profile and store product pages. */
.vsum-card { background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:1rem 1.2rem; margin:.8rem 0; }
.vsum-title { margin:0 0 .55rem; font-size:1rem; color:var(--green-dark); }
.vsum-list { list-style:none; margin:0 0 .7rem; padding:0; display:flex; flex-direction:column; gap:.35rem; font-size:.88rem; }
.vsum-facts { font-size:.85rem; color:var(--text-muted); display:flex; flex-direction:column; gap:.25rem; margin-bottom:.8rem; }
.vsum-facts strong { color:var(--text); }
.vsum-btn { display:inline-block; background:var(--green); color:#fff; padding:.45rem .9rem; border-radius:7px; font-weight:700; text-decoration:none; font-size:.85rem; }
.vsum-product-name { font-weight:700; font-size:1.02rem; margin-bottom:.5rem; }
.vsum-explain { font-size:.8rem; color:var(--text-muted); margin:.6rem 0 0; padding-top:.6rem; border-top:1px dashed var(--border); }

/* ---- Alerts ---------------------------------------------------
   .mfh-alert-error/success/warning already existed but were only used
   on a handful of pages — most of join/*.php hand-rolled an inline
   style="background:#fdecea;border:1.5px solid var(--red)..." box
   instead (30+ occurrences). Standardising on the existing, already
   accessible colour set and adding the missing "info" variant. */
.mfh-alert-info { background:var(--info-bg); border:1px solid var(--info-border); color:#1c4066; }
.mfh-alert a { font-weight:700; text-decoration:underline; }
.alert { border-radius:8px; padding:12px 14px; margin:0 0 18px; font-size:.92rem; line-height:1.55; }
.alert-danger  { background:var(--danger-bg); border:1px solid var(--danger-border); color:var(--danger); }
.alert-success { background:var(--success-bg); border:1px solid var(--success-border); color:#28551b; }
.alert-warning { background:var(--warning-bg); border:1px solid var(--warning-border); color:#6d5206; }
.alert-info    { background:var(--info-bg); border:1px solid var(--info-border); color:#1c4066; }

/* ---- Panels (soft content boxes) -------------------------------
   The "intro/context box" pattern (background:var(--soft);border:
   1.5px solid var(--border);border-radius:8-10px;padding:1-1.4rem)
   was retyped inline on nearly every dashboard page. */
.panel {
  background:var(--soft);
  border:1.5px solid var(--border);
  border-radius:10px;
  padding:1.2rem 1.4rem;
  margin-bottom:1.5rem;
  font-size:.92rem;
  line-height:1.65;
}
.panel strong { color:var(--green-dark); }
.panel-white { background:var(--white); }

/* ---- Stat tiles ---------------------------------------------------
   Dashboard/product/farm-tools/milestones pages each rebuilt the same
   "big number + small label" tile grid under a different class name. */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:1rem; margin-bottom:1.2rem; }
.stat-tile { background:var(--white); border:1.5px solid var(--border); border-radius:10px; padding:1rem 1.1rem; box-shadow:var(--shadow-sm); }
.stat-tile .stat-num { font-size:1.5rem; font-weight:800; color:var(--green-dark); line-height:1; font-family:'Barlow Condensed',sans-serif; }
.stat-tile .stat-lbl { color:var(--text-muted); font-size:.78rem; margin-top:.3rem; }

/* ---- Forms ------------------------------------------------------
   .form-group already exists; add a labelled error state and a hint
   line so validation messaging looks the same on register/login/
   product forms instead of each one inventing its own red text. */
.field-error { display:block; color:var(--danger); font-size:.82rem; margin-top:5px; }
.field-hint { display:block; color:var(--text-muted); font-size:.82rem; margin-top:5px; }
.form-group input[aria-invalid="true"] + .field-error { display:block; }

/* ---- Tables -------------------------------------------------------
   .data-table already covers most guide tables; make sure any table
   dropped into a dashboard page without a matching class still gets
   the same look and the same mobile horizontal-scroll treatment. */
.table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:18px 0; }
table.table {
  width:100%; border-collapse:collapse; background:#fff;
  border:1px solid var(--border); border-radius:8px; overflow:hidden; font-size:.92rem;
}
table.table th { padding:11px 13px; background:var(--green); color:#fff; text-align:left; font:700 12px 'Barlow Condensed',sans-serif; letter-spacing:.5px; text-transform:uppercase; }
table.table td { padding:10px 13px; border-top:1px solid #eee7d8; vertical-align:top; }
table.table tr:nth-child(even) td { background:#fcfaf5; }

/* ---- Pagination -----------------------------------------------
   /articles/ built its own inline-styled page-number row; giving it a
   class means every future paginated list (search, marketplace,
   admin-facing lists) looks the same without copy-pasting styles. */
.pagination { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.page-link {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:38px; height:38px; padding:0 12px;
  border-radius:6px; border:1px solid var(--border);
  color:var(--text); font-size:.85rem; font-weight:600; text-decoration:none;
}
.page-link:hover { border-color:var(--green-mid); color:var(--green-dark); }
.page-link.active { background:var(--green); color:#fff; border-color:var(--green); }
.page-link.disabled { opacity:.45; pointer-events:none; }

/* ---- Empty states ---------------------------------------------
   .fm-empty already existed for the marketplace; promoted to a
   general-purpose class so every list (messages, products, groups,
   search results) can show the same "nothing here yet" pattern. */
.empty-state, .fm-empty {
  text-align:center; padding:2.4rem 1.5rem; grid-column:1/-1;
  color:var(--text-muted);
}
.empty-state-icon, .fm-empty-icon { font-size:1.9rem; margin-bottom:.5rem; }
.empty-state-title { display:block; color:var(--green-dark); font-size:1.05rem; font-weight:700; margin-bottom:.4rem; }
.empty-state-body, .fm-empty .fm-meta { max-width:420px; margin:0 auto; font-size:.9rem; line-height:1.6; }
.empty-state .btn-primary, .empty-state .btn-secondary { margin-top:1rem; }

/* ---- Price / quantity / availability -----------------------------
   Marketplace, store and homepage each formatted price/stock text
   differently (plain <strong>, .hp-card-price, .product-price...).
   One look for "how much" and one for "how much is left". */
.price { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:1.15rem; color:var(--green-dark); }
.price-unit { font-size:.75rem; font-weight:600; color:var(--text-muted); text-transform:none; letter-spacing:0; margin-left:3px; }
.price-on-enquiry { font-family:'Barlow Condensed',sans-serif; font-weight:700; color:var(--text-muted); font-size:.92rem; }
.qty-pill { display:inline-block; padding:.1rem .5rem; border-radius:var(--radius-pill); background:var(--soft); color:var(--green-dark); font-size:.78rem; font-weight:700; }
.availability { display:inline-flex; align-items:center; gap:4px; font-size:.82rem; font-weight:700; }
.availability::before { content:"●"; font-size:.6rem; }
.availability-in   { color:var(--success); }
.availability-low  { color:var(--gold-text); }
.availability-out  { color:var(--danger); }

/* ---- Search bar (hero + list-page variants) ------------------------
   The homepage hero, /articles/ hero and /marketplace/ search form
   each hand-built their own input/select/button row with different
   radii and gaps. One recipe, two colour contexts. */
.site-search-bar { display:flex; gap:.6rem; flex-wrap:wrap; max-width:640px; }
.site-search-bar input, .site-search-bar select {
  padding:.75rem 1rem; border-radius:8px; font-size:.92rem; font-family:inherit;
}
.site-search-bar input { flex:1; min-width:200px; }
/* Default (light-surface) variant */
.site-search-bar input, .site-search-bar select { border:1px solid var(--border); background:#fff; color:var(--text); }
/* Dark-hero variant: add .on-dark when the bar sits on the green hero image */
.site-search-bar.on-dark input, .site-search-bar.on-dark select {
  border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.12); color:#fff;
}
.site-search-bar.on-dark input::placeholder { color:rgba(255,255,255,.75); }
.site-search-bar.on-dark option { color:#111; }

/* ---- Small spacing utilities ---------------------------------------
   Covers the dozens of one-off style="margin-top:1rem" (and similar)
   attributes scattered through join/*.php so common gaps come from a
   shared scale instead of arbitrary rem values per page. */
.mt-0  { margin-top:0 !important; }
.mt-xs { margin-top:.4rem !important; }
.mt-sm { margin-top:.8rem !important; }
.mt-md { margin-top:1.2rem !important; }
.mt-lg { margin-top:1.6rem !important; }
.mt-xl { margin-top:2.4rem !important; }
.mb-0  { margin-bottom:0 !important; }
.mb-xs { margin-bottom:.4rem !important; }
.mb-sm { margin-bottom:.8rem !important; }
.mb-md { margin-bottom:1.2rem !important; }
.mb-lg { margin-bottom:1.6rem !important; }
.text-muted { color:var(--text-muted); }
.text-center { text-align:center; }
/* Honeypot spam-trap fields: repeated inline across contact/newsletter/
   register forms with the same off-screen positioning. */
.visually-hidden-offscreen { position:absolute; left:-9999px; top:-9999px; }

/* ---- Standardised section rhythm ---------------------------------
   Documents the spacing scale already mostly in use (.section-inner
   padding, .section margin) so new sections stay on the same rhythm:
   68px top/bottom desktop, 48px tablet, 38-48px mobile (see the
   existing responsive rules above/below this block). */
.section + .section, .section + .tips-strip, .section + .seasonal,
.section + .provinces-section, .tips-strip + .section { border-top:0; }

@media (max-width:680px) {
  .site-search-bar { max-width:none; }
  .stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pagination { gap:6px; }
}

/* ---- Homepage quick-links bar -------------------------------------
   Was defined inline inside index.php with its own ad-hoc gradients
   (#c0392b/#e05a3f, #1e3d10/#3d7a25, #c8960c/#a97908 — none of them
   named tokens). Moved here and re-pointed at the shared palette. */
.quick-links-bar { background:var(--cream); border-bottom:1px solid rgba(0,0,0,.08); }
.quick-links-inner { max-width:1280px; margin:0 auto; padding:12px 20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.quick-link { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:13.5px; letter-spacing:.4px; text-transform:uppercase; padding:9px 20px; border-radius:var(--radius-pill); text-decoration:none; white-space:nowrap; transition:transform .15s ease,box-shadow .15s ease; box-shadow:0 2px 6px rgba(0,0,0,.08); }
.quick-link:hover { transform:translateY(-1px); box-shadow:0 4px 10px rgba(0,0,0,.14); }
.ql-hot { background:linear-gradient(135deg,var(--red),#e05a3f); color:#fff; }
.ql-articles { background:linear-gradient(135deg,var(--green-dark),var(--green-mid)); color:#fff; }
.ql-donate, .ql-account, .ql-register { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#fff; }
.ql-login { background:transparent; color:var(--green-dark); border:1px solid rgba(0,0,0,.25); }
@media(max-width:640px) { .quick-link { font-size:12px; padding:8px 15px; } }

/* ---- Homepage "products from farmers" / "farmers near you" strips --
   Reused the .card/.card-hover/.badge-verified/.avatar system above
   instead of the bespoke .hp-card / .hp-farmer-card recipe that used
   to hardcode #fff, its own radius and its own verified-badge colours. */
.hp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1.1rem; margin-top:1.2rem; }
.hp-card-placeholder { display:flex; align-items:center; justify-content:center; background:var(--soft); font-size:2rem; }
.hp-card-body { padding:.75rem .9rem; }
.hp-card-price { color:var(--green); font-weight:700; font-size:.86rem; margin-top:.15rem; }
.hp-card-meta { color:var(--text-muted); font-size:.78rem; margin-top:.25rem; }
.hp-province-row { display:flex; gap:.5rem; flex-wrap:wrap; margin:1.1rem 0 1.6rem; }
.hp-province-row a { padding:.4rem .85rem; border:1.5px solid var(--border); border-radius:var(--radius-pill); text-decoration:none; color:var(--green-dark); font-size:.82rem; font-weight:700; background:#fff; }
.hp-province-row a:hover { background:var(--soft); }
.hp-farmer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:1.1rem; }
.hp-farmer-card { text-align:center; padding:1.1rem .8rem; }
.hp-farmer-card img { margin:0 auto .6rem; }
.hp-farmer-card strong { display:block; font-size:.88rem; color:var(--green-dark); }
.hp-farmer-loc { color:var(--text-muted); font-size:.76rem; margin-top:.25rem; }

/* ---- Homepage "browse every guide" strip -------------------------- */
.ghome-cat { margin:1.8rem 0; }
.ghome-cat-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:.5rem; border-bottom:2px solid var(--soft); padding-bottom:.5rem; margin-bottom:1rem; }
.ghome-cat-title { font-size:1.15rem; font-weight:800; color:var(--green-dark); }
.ghome-cat-all { font-size:.82rem; font-weight:700; color:var(--green); text-decoration:none; }
.ghome-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:.85rem; }
.ghome-card-img { width:100%; aspect-ratio:4/3; background:var(--soft) center/cover no-repeat; display:flex; align-items:center; justify-content:center; font-size:1.6rem; }
.ghome-card-label { padding:.5rem .6rem; font-size:.82rem; font-weight:700; color:#2a2a2a; line-height:1.2; }

/* ---- Sponsor placement cards (homepage + store) -------------------- */
.home-sponsored { background:var(--soft); }
.home-sponsor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; margin-top:1rem; }
.home-sponsor-card img { width:100%; height:100%; object-fit:contain; display:block; }
.home-sponsor-card strong, .home-sponsor-card small { display:block; padding:.5rem .7rem 0; }
.home-sponsor-card small { padding-bottom:.7rem; color:var(--text-muted); font-size:.75rem; }

/* Sponsor ad block (renderSponsorAdBlock() web context, includes/sponsor-ads.php)
   — reuses the shared .card shell + .badge-neutral colours instead of its
   own hardcoded hex, so a self-serve sponsor ad reads as "a card on this
   platform" rather than a separately-designed unit. The 'email' render
   context is intentionally NOT covered here (see includes/newsletter.php
   note above .card): email clients don't support CSS custom properties,
   so that branch stays literal hex on purpose. */
.sponsor-ad-block { overflow:hidden; }
.sponsor-ad-block .sponsor-tag {
  background:var(--soft); color:var(--green-dark);
  padding:.3rem .8rem; font-size:.68rem; letter-spacing:.04em;
  font-weight:700; text-transform:uppercase;
}
/* Fix (Sep 2026): a sponsor's uploaded image had no height limit — just
   width:100% — so a large/tall photo rendered at its full natural height
   and could fill most of the screen, especially in the header-banner slot
   that sits above the nav on every page. Every sponsor image is now a
   fixed, efficient banner height and cropped to fit (object-fit:cover)
   regardless of what size image the sponsor uploaded, with the header
   placement kept extra compact since it appears on every single page. */
/* (image sizing now handled by the fixed-ratio .sponsor-media slot, see NO-CROP block at end of file) */
/* Fix (Sep 2026) — sponsor video creative (see renderSponsorAdBlock()):
   same fixed, efficient sizing as the image rule above, so a video
   creative never behaves differently from an image one size-wise. Muted
   by design (see the <video> tag's own attributes) — this is meant to
   read like a small looping clip, not something that plays sound
   unprompted. */

/* Fix (Sep 2026, round 2) — a header banner is meant to be a thin strip
   above the nav, not a tall card: the image alone wasn't the whole
   problem, the stacked headline/description/CTA/byline text underneath
   it added just as much height back. This trims that text block down to
   match — smaller type, tighter padding, and the optional description
   dropped entirely for this one placement (it still shows normally on
   every other placement, which have more room). */
.sponsor-ad-block.sponsor-ad-block--header .sponsor-body { padding:.4rem .7rem; }
.sponsor-ad-block.sponsor-ad-block--header .sponsor-desc { display:none; }
.sponsor-ad-block.sponsor-ad-block--header .sponsor-headline { font-size:.82rem; margin-bottom:0; }
.sponsor-ad-block.sponsor-ad-block--header .sponsor-cta { font-size:.76rem; }
.sponsor-ad-block.sponsor-ad-block--header .sponsor-by { font-size:.65rem; margin-top:.15rem; }
@media (max-width:640px) {
    .sponsor-ad-block.sponsor-ad-block--header .sponsor-body { padding:.3rem .55rem; }
}
/* Fix (Sep 2026) — a sponsored card inside the article listing grid
   (renderSponsorAdCard()) reuses .article-small's own image/body rules
   as-is (same 190px image height as a real article card, so it lines up
   in the grid), just adding its own video-creative sizing and a
   distinct "SPONSORED" tag colour so it's still clearly marked without
   looking broken next to real category tags. */

.sponsor-ad-card-tag { background:var(--soft); color:var(--green-dark); }
.sponsor-ad-block .sponsor-body { padding:.8rem; }
.sponsor-ad-block .sponsor-body .sponsor-headline { font-weight:700; }
.sponsor-ad-block .sponsor-body .sponsor-desc { color:var(--text-muted); font-size:.85rem; margin:.3rem 0; }
.sponsor-ad-block .sponsor-body .sponsor-cta { color:var(--green); font-weight:700; font-size:.85rem; }
.sponsor-ad-block .sponsor-body .sponsor-by { color:var(--text-muted); font-size:.72rem; margin-top:.4rem; }

/* ============================================================
   UX POLISH PATCH — mobile navigation, forms, accessibility,
   feedback states and comfortable touch targets.
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
}

button, input, select, textarea { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.form-wrap { overflow:hidden; }
.form-group { margin-bottom:18px; }
.form-group label { line-height:1.3; }
.form-group input,
.form-group textarea,
.form-group select {
  min-height:46px;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-group textarea { min-height:170px; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color:var(--green-mid);
  box-shadow:0 0 0 3px rgba(61,122,37,.13);
  outline:none;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color:#7a7468; opacity:1; }
.form-group input[aria-invalid="true"],
.form-group textarea[aria-invalid="true"],
.form-group select[aria-invalid="true"] {
  border-color:var(--red);
  box-shadow:0 0 0 3px rgba(192,57,43,.10);
}
.btn-submit,
.btn-primary,
.btn-outline,
.join-btn,
.mobile-join-btn,
.quick-action,
.tab-btn { min-height:44px; }
.btn-submit { transition:transform .15s ease, background-color .15s ease, box-shadow .15s ease; }
.btn-submit:hover { box-shadow:0 4px 12px rgba(30,61,16,.16); }
.btn-submit:active { transform:translateY(1px); }
.btn-submit:disabled { opacity:.65; cursor:wait; transform:none; box-shadow:none; }

/* Header/mobile navigation is usable by keyboard and touch, not just hover. */
.hamburger {
  min-width:44px;
  min-height:44px;
  display:none;
  align-items:center;
  justify-content:center;
  padding:7px 10px;
  font-size:19px;
  line-height:1;
}
.mobile-nav[aria-hidden="true"] { display:none !important; }
.mobile-nav[aria-hidden="false"] { display:flex; }
.mobile-nav a { min-height:44px; display:flex; align-items:center; }
.mobile-nav a.active { background:rgba(255,255,255,.12); color:var(--gold-light); }

/* Prevent long site labels/inputs from forcing a horizontal scroll. */
input, select, textarea { max-width:100%; }
.form-wrap form { width:100%; }

/* Clear visual success/error messaging. */
.mfh-alert {
  border-radius:8px;
  padding:12px 14px;
  margin:0 0 18px;
  font-size:.92rem;
  line-height:1.55;
}
.mfh-alert-error { background:var(--danger-bg); border:1px solid var(--danger-border); color:#84281e; }
.mfh-alert-success { background:var(--success-bg); border:1px solid var(--success-border); color:#28551b; }
.mfh-alert-warning { background:var(--warning-bg); border:1px solid var(--warning-border); color:#6d5206; }

/* Cookie notice: keep it visible but less intrusive on small screens. */
.mfh-cookie-banner { padding-bottom:max(0px, env(safe-area-inset-bottom)); }
.mfh-cookie-banner-inner { gap:12px; }
.mfh-cookie-banner-actions button { min-height:44px; font-weight:700; }
@media (max-width:768px) {
  .hamburger { display:inline-flex; }
  .header-inner { flex-wrap:nowrap; }
  .header-inner nav { display:none; }
  .header-inner .join-btn { margin-left:auto; }
  .mobile-nav { max-height:calc(100vh - 72px); -webkit-overflow-scrolling:touch; }
}
@media (max-width:680px) {
  .form-wrap { padding:20px 17px; }
  .container { padding-left:16px; padding-right:16px; }
  .contact-grid { padding-left:16px; padding-right:16px; }
  .mfh-cookie-banner-inner { padding:12px 14px calc(12px + env(safe-area-inset-bottom)); }
  .mfh-cookie-banner-inner p { font-size:.8rem; }
  .mfh-cookie-banner-actions { width:100%; display:grid; grid-template-columns:1fr 1fr; }
  .mfh-cookie-banner-actions button { width:100%; }
}
@media (max-width:480px) {
  .header-inner .join-btn { padding:7px 10px; }
  .form-group input,
  .form-group textarea,
  .form-group select { font-size:16px; } /* avoids iOS auto-zoom */
}
@media (prefers-reduced-motion: reduce) {
  .btn-submit, .form-group input, .form-group textarea, .form-group select, .join-btn { transition:none !important; }
}


/* Keyboard-open desktop dropdowns. */
.nav-item:focus-within .nav-drop { display:block; }
.nav-item:focus-within .nav-drop.mega { display:grid; }
.nav-item.mfh-nav-open .nav-drop { display:block; }
.nav-item.mfh-nav-open .nav-drop.mega { display:grid; }
.nav-top:focus { outline:none; }

/* Farmer products inserted into published articles. */
.mfh-article-product{
  display:flex;gap:1rem;align-items:flex-start;
  clear:both;margin:1.4rem 0;padding:1rem;
  border:1px solid var(--border);border-radius:10px;
  background:var(--soft);box-sizing:border-box;
}
.mfh-article-product-media{display:block;width:150px;flex:0 0 150px;text-decoration:none}
.mfh-article-product-media img{display:block;width:100%;height:120px;object-fit:cover;border-radius:8px}
.mfh-article-product-body{min-width:0;flex:1}
.mfh-article-product-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:700;margin-bottom:.2rem}
.mfh-article-product h3{margin:.1rem 0 .35rem;font-size:1.08rem}
.mfh-article-product h3 a,.mfh-article-product-link{color:var(--green-dark);text-decoration:none}
.mfh-article-product p{margin:.35rem 0;color:var(--text-muted);font-size:.9rem;line-height:1.5}
.mfh-article-product-meta{margin-top:.45rem;font-size:.88rem}
.mfh-article-product-link,.mfh-article-product-farmer{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.88rem}.mfh-article-product-farmer{margin-left:.8rem;color:var(--text-muted);text-decoration:none}
@media(max-width:768px){
  .mfh-flow-media,.prose figure[style*="float:left"],.prose figure[style*="float:right"]{float:none !important;width:100% !important;max-width:100% !important;margin:1.2rem 0 !important;clear:both !important}
}
@media(max-width:620px){
  .mfh-article-product{display:block}
  .mfh-article-product-media{width:100%;display:block;margin-bottom:.7rem}
  .mfh-article-product-media img{height:180px}
}

/* ============================================================
   Task 34 — image SEO / accessibility / layout stability
   ============================================================ */
/* Images now carry real width/height attributes so the browser can reserve
   the correct box before the file downloads (no layout shift). Those
   attributes double as presentational CSS hints, though, and a hinted
   height would stretch an image whenever its width is squeezed by
   max-width:100%. :where() keeps this rule at zero specificity, so it only
   restores "height:auto" for images that have NO other height rule — every
   class/inline height (cards, avatars, hero stack, crop boxes) still wins. */
:where(img[width][height]) { height:auto; }

/* Visible caption under a product / listing's primary photo. */
.img-figure { margin:0; }
.img-figure-cap { margin:.45rem .1rem 0; font-size:.8rem; line-height:1.45; color:var(--text-muted); }

/* ---- Card images: consistent shape, and avatars keep their own size ----
   Homepage farmer cards showed whatever shape the uploaded photo had (a tall
   portrait next to wide landscapes). Fix them to one 3:2 frame. */
.hp-farmer-card img { width:100%; aspect-ratio:3/2; height:auto; object-fit:cover; border-radius:8px; background:var(--soft); }

/* `.article-small img { width:100%; height:190px }` (and the same rule for
   .guide-card/.product-card/.pop-card) is meant for the card's photo, but it
   also matched the tiny byline avatar inside the card, stretching a 22px
   circle into a full-width 190px oval (or a giant beige oval when the file
   is missing). These are more specific, so avatars keep their component size. */
.article-small img.avatar-sm, .guide-card img.avatar-sm, .product-card img.avatar-sm, .pop-card img.avatar-sm { width:22px; height:22px; }
.article-small img.avatar-md, .guide-card img.avatar-md, .product-card img.avatar-md, .pop-card img.avatar-md { width:44px; height:44px; }
.article-small img.avatar-lg, .guide-card img.avatar-lg, .product-card img.avatar-lg, .pop-card img.avatar-lg { width:80px; height:80px; }
.article-small img.avatar-xl, .guide-card img.avatar-xl, .product-card img.avatar-xl, .pop-card img.avatar-xl { width:110px; height:110px; }

/* An image whose file is missing is swapped by /assets/js/img-fallback.js for a
   quiet placeholder instead of a broken-image icon with alt text. */
img.img-missing { object-fit:cover; background:var(--soft,#eef4ea); color:transparent; }


/* ============================================================
   NO-CROP MEDIA SLOTS (Oct 2026)
   Sponsor creatives and product photos now live in predefined,
   fixed-ratio boxes. The WHOLE image is always shown
   (object-fit:contain) — nothing is cut off, whatever shape the
   sponsor/farmer uploaded. Spare space is filled by a blurred copy
   of the same image (sponsors) or the soft background (products).
   ============================================================ */
.sponsor-media{position:relative;display:block;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--soft,#eef3ea)}
.sponsor-media-bg{position:absolute;inset:-14px;background-size:cover;background-position:center;filter:blur(14px) brightness(.9);transform:scale(1.1)}
.sponsor-media img,.sponsor-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}
.sponsor-media--video{background:#000}
/* wide in-page banner: 16:9 slot; slightly shorter on phones so it never dominates the screen */
.sponsor-ad-block .sponsor-media{aspect-ratio:16/9;max-height:420px}
.sponsor-ad-block.sponsor-ad-block--header .sponsor-media{aspect-ratio:3/1}
/* article-listing sponsored card: same 190px image area as real article cards, so the grid lines up */
.article-small.sponsor-ad-card .as-img.sponsor-media{aspect-ratio:auto;height:190px}
/* homepage / store "Sponsored farms & products" cards: one 4:3 slot each */
.home-sponsor-card .sponsor-media{aspect-ratio:4/3}
.home-sponsor-card .sponsor-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}

/* Product photos: show the whole photo inside the existing fixed box */
.product-card img,.pop-img,.mfh-article-product-media img,.hp-farmer-card img.product-img{object-fit:contain;background:var(--soft,#eef3ea)}
.mfh-article-product-media img{height:auto;aspect-ratio:1/1}
img.ratio-1x1,img.ratio-4x3,img.ratio-16x9,img.ratio-3x2{object-fit:contain;background:var(--soft,#eef3ea)}
.fm-card img:not(.avatar),.fm-grid img{object-fit:contain;background:var(--soft,#eef3ea)}