/* ============ Aloe Vera Farming Knowledgebase ============ */
:root{
  --bg:#f4f7f2; --surface:#ffffff; --surface2:#eef3ea;
  --text:#1d2a1c; --muted:#5b6b57;
  --brand:#2e7d32; --brand-dark:#1b5e20; --accent:#f4a83d;
  --border:#d8e2d3;
  --code-bg:#0f1a12; --code-text:#d7f0d7;
  --shadow:0 1px 3px rgba(20,40,20,.08),0 8px 24px rgba(20,40,20,.06);
  --radius:12px;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Code",Consolas,Menlo,monospace;
}
[data-theme="dark"]{
  --bg:#101a12; --surface:#18241a; --surface2:#1f2f22;
  --text:#e2eee0; --muted:#9db29a;
  --brand:#66bb6a; --brand-dark:#43a047; --accent:#f4b350;
  --border:#2c3f2e;
  --code-bg:#0b130d; --code-text:#c8e6c9;
  --shadow:0 1px 3px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--sans); background:var(--bg); color:var(--text);
  line-height:1.65; font-size:16.5px;
}
h1,h2,h3,h4{line-height:1.25; color:var(--text)}
h1{font-size:2.1rem; margin:.2em 0 .4em}
h2{font-size:1.55rem; margin-top:2em; padding-top:.4em; border-top:2px solid var(--border)}
h2:first-of-type{margin-top:1em}
h3{font-size:1.22rem; margin-top:1.6em}
h4{font-size:1.05rem; margin-top:1.3em}
p{margin:.7em 0}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{padding-left:1.4em}
li{margin:.3em 0}
img{max-width:100%}

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--surface); border-bottom:1px solid var(--border);
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:.55rem 1.2rem;
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
}
.brand{
  font-weight:800; font-size:1.15rem; color:var(--text); letter-spacing:.2px;
  display:flex; align-items:center; gap:.5rem;
}
.brand:hover{text-decoration:none}
.brand .leaf{color:var(--brand)}
/* --- Grouped mega-nav --- */
nav.main-nav{display:flex; gap:0; flex-wrap:nowrap}
.nav-group{position:relative}
.nav-group-label{
  padding:.42rem .72rem; border-radius:8px; font-size:.92rem; color:var(--muted);
  font-weight:700; cursor:pointer; display:flex; align-items:center; gap:.3rem;
  white-space:nowrap; user-select:none; transition:background .12s, color .12s;
}
.nav-group-label:hover{background:var(--surface2); color:var(--text); text-decoration:none}
.nav-group-label .caret{font-size:.65rem; transition:transform .2s}
.nav-group.open .nav-group-label .caret{transform:rotate(180deg)}
.nav-group.open>.nav-group-label{background:var(--surface2); color:var(--text)}
.nav-dropdown{
  display:none; position:absolute; top:100%; left:0; z-index:100;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 30px rgba(20,40,20,.12); min-width:220px; padding:.5rem 0;
  margin-top:.35rem;
}
.nav-group.open>.nav-dropdown{display:block}
.nav-dropdown a{
  display:flex; align-items:center; gap:.5rem; padding:.5rem .9rem; font-size:.88rem;
  color:var(--text); font-weight:500; white-space:nowrap;
}
.nav-dropdown a:hover{background:var(--surface2); text-decoration:none}
.nav-dropdown a.active{background:var(--brand); color:#fff; border-radius:6px; margin:0 .4rem}
.nav-dropdown .nav-emoji{font-size:1.1rem; width:22px; text-align:center}
.nav-dropdown .nav-desc{font-size:.78rem; color:var(--muted); margin-left:auto; padding-left:.8rem}
.nav-dropdown a.active .nav-desc{color:rgba(255,255,255,.8)}
.nav-dropdown .nav-divider{height:1px; background:var(--border); margin:.35rem .6rem}
.nav-quick{padding:.4rem .72rem; border-radius:8px; font-size:.92rem; color:var(--muted);
  font-weight:700; white-space:nowrap; display:flex; align-items:center; gap:.3rem;
  transition:background .12s, color .12s; text-decoration:none; cursor:pointer;
}
.nav-quick:hover{background:var(--surface2); color:var(--text); text-decoration:none}
.nav-quick.active{background:var(--brand); color:#fff}
.header-actions{margin-left:auto; display:flex; align-items:center; gap:.6rem}
.icon-btn{
  background:var(--surface2); border:1px solid var(--border); border-radius:8px;
  padding:.4rem .6rem; cursor:pointer; font-size:1rem; line-height:1; color:var(--text);
}
.icon-btn:hover{border-color:var(--brand)}

/* ---------- Search ---------- */
.search-box{position:relative; flex:1 1 220px; max-width:340px}
.search-box input{
  width:100%; padding:.5rem .8rem; border-radius:8px; border:1px solid var(--border);
  background:var(--surface2); color:var(--text); font-size:.95rem; font-family:var(--sans);
}
.search-box input:focus{outline:2px solid var(--brand); outline-offset:1px}
.search-results{
  position:absolute; top:110%; left:0; right:0; background:var(--surface);
  border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow);
  max-height:380px; overflow:auto; display:none; z-index:60;
}
.search-results.open{display:block}
.search-results a{
  display:block; padding:.6rem .9rem; border-bottom:1px solid var(--border);
  color:var(--text);
}
.search-results a:last-child{border-bottom:none}
.search-results a:hover{background:var(--surface2); text-decoration:none}
.search-results .hit-title{font-weight:700; font-size:.93rem}
.search-results .hit-snip{font-size:.82rem; color:var(--muted)}
.search-results .none{padding:.7rem .9rem; color:var(--muted); font-size:.9rem}


/* ---------- Progress bar ---------- */
.progress-bar{position:fixed; top:0; left:0; height:3px; background:var(--brand); z-index:10000; transition:width .15s ease; width:0}

/* ---------- Helpful widget ---------- */
.helpful-widget{text-align:center; padding:1.2rem; margin:1.5rem 0; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius)}
.helpful-widget p{margin:0 0 .6rem; font-weight:600}
.helpful-btns{display:flex; gap:.6rem; justify-content:center}
.helpful-btns button{padding:.4rem 1rem; border:1px solid var(--border); border-radius:8px; background:var(--surface); cursor:pointer; font-size:.9rem; transition:all .15s}
.helpful-btns button:hover{border-color:var(--brand); background:var(--surface2)}
.helpful-thanks{color:var(--muted); font-style:italic; font-weight:400!important}

/* ---------- Reading time ---------- */
.reading-time{font-size:.82rem; color:var(--muted); font-style:italic; margin:-.4rem 0 .8rem}

/* ---------- Back to top ---------- */
.back-to-top{position:fixed; bottom:5rem; right:1.5rem; width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; border:none; cursor:pointer; font-size:1.2rem; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .25s; z-index:999; box-shadow:0 2px 8px rgba(0,0,0,.2)}
.back-to-top.visible{opacity:1; visibility:visible}
.back-to-top:hover{background:var(--brand-dark); transform:translateY(-2px)}

/* ---------- Skip to content ---------- */
.skip-link{position:absolute; top:-100%; left:0; background:var(--brand); color:#fff; padding:.6rem 1.2rem; z-index:9999; font-weight:700; border-radius:0 0 8px 0; transition:top .2s}
.skip-link:focus{top:0}
/* ---------- Layout ---------- */
.layout{
  max-width:1200px; margin:1.4rem auto 3rem; padding:0 1.2rem;
  display:grid; grid-template-columns:250px minmax(0,1fr); gap:2.2rem;
}
.layout.no-toc{grid-template-columns:minmax(0,1fr)}
.sidebar{position:sticky; top:76px; align-self:start; font-size:.92rem}
.sidebar .toc-title{font-weight:800; text-transform:uppercase; letter-spacing:.08em; font-size:.75rem; color:var(--muted); margin-bottom:.5rem}
.sidebar a{display:block; padding:.22rem 0; color:var(--muted); border-left:2px solid transparent; padding-left:.6rem}
.sidebar a:hover{color:var(--text); text-decoration:none}
.sidebar a.current{color:var(--brand); border-left-color:var(--brand); font-weight:600}
main{min-width:0}
.page-header{margin-bottom:1.2rem}
.page-header .crumb{font-size:.85rem; color:var(--muted); margin-bottom:.4rem}
.page-header .crumb a{color:var(--muted)}
.hero{
  background:linear-gradient(135deg,var(--brand-dark),var(--brand));
  color:#fff; border-radius:16px; padding:2.6rem 2.2rem; margin-bottom:2rem;
  box-shadow:var(--shadow);
}
.hero h1{color:#fff; margin:0 0 .4em; font-size:2.4rem}
.hero p{max-width:62ch; opacity:.94; margin:.4em 0}
.hero .chips{margin-top:1.1rem; display:flex; flex-wrap:wrap; gap:.5rem}
.hero .chip{
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3);
  padding:.28rem .75rem; border-radius:999px; font-size:.85rem; font-weight:600;
}
.card-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; margin:1.2rem 0}
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  padding:1.1rem 1.2rem; box-shadow:var(--shadow); display:block; color:var(--text);
  transition:transform .12s ease, border-color .12s ease;
}
.card:hover{transform:translateY(-2px); border-color:var(--brand); text-decoration:none}
.card .emoji{font-size:1.5rem}
.card h3{margin:.35rem 0 .3rem; font-size:1.05rem}
.card p{margin:0; font-size:.9rem; color:var(--muted)}
.callout{
  border-left:4px solid var(--brand); background:var(--surface2);
  padding:.8rem 1rem; border-radius:0 10px 10px 0; margin:1.1rem 0; font-size:.95rem;
}
.callout.warn{border-left-color:#d84315}
.callout.tip{border-left-color:var(--accent)}
.callout .callout-label{font-weight:800; font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; display:block; margin-bottom:.2rem; color:var(--brand)}
.callout.warn .callout-label{color:#d84315}
.callout.tip .callout-label{color:#b26a00}
[data-theme="dark"] .callout.tip .callout-label{color:var(--accent)}
table.data{
  width:100%; border-collapse:collapse; margin:1.1rem 0; font-size:.93rem;
  background:var(--surface); border-radius:10px; overflow:hidden; box-shadow:var(--shadow);
}
table.data th,table.data td{padding:.6rem .8rem; border-bottom:1px solid var(--border); text-align:left; vertical-align:top}
table.data th{background:var(--surface2); font-size:.85rem; text-transform:uppercase; letter-spacing:.04em}
table.data tr:last-child td{border-bottom:none}
figure{margin:1.2rem 0}
figcaption{font-size:.85rem; color:var(--muted); margin-top:.4rem}
.diagram{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; overflow-x:auto}
.pill{display:inline-block; background:var(--surface2); border:1px solid var(--border); border-radius:999px; padding:.1rem .6rem; font-size:.8rem; font-weight:600; color:var(--muted); margin:.1rem .15rem .1rem 0}
.pill.green{background:#e3f2e4; border-color:#bcd9bd; color:#1b5e20}
.pill.amber{background:#fff3e0; border-color:#f0d9b5; color:#8a5a00}
.pill.red{background:#fdece7; border-color:#f3c8ba; color:#a63317}
[data-theme="dark"] .pill.green{background:#1d3320; color:#9cdc9e}
[data-theme="dark"] .pill.amber{background:#3a2d14; color:#f0c274}
[data-theme="dark"] .pill.red{background:#3a2018; color:#f0a58c}
footer.site-footer{
  border-top:1px solid var(--border); background:var(--surface);
  padding:1.6rem 1.2rem; text-align:center; color:var(--muted); font-size:.88rem;
}
details.faq{background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:.9rem 1.1rem; margin:.7rem 0}
details.faq summary{font-weight:700; cursor:pointer; font-size:1.02rem}
details.faq[open]{box-shadow:var(--shadow)}
.prev-next{display:flex; justify-content:space-between; gap:1rem; margin-top:2.6rem; flex-wrap:wrap}
.prev-next a{
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:.7rem 1rem; font-weight:600; font-size:.92rem; box-shadow:var(--shadow);
}
.prev-next a:hover{border-color:var(--brand); text-decoration:none}
.prev-next .next{margin-left:auto; text-align:right}
.btn{display:inline-block; padding:.65rem 1.25rem; border-radius:10px; font-weight:700; text-decoration:none; transition:transform .12s ease}
.btn:hover{text-decoration:none; transform:translateY(-1px)}
.btn-light{background:#fff; color:var(--brand-dark); box-shadow:0 2px 8px rgba(0,0,0,.18)}
.btn-outline{border:2px solid rgba(255,255,255,.75); color:#fff}

/* ---------- Calculators ---------- */
.calc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem}
.calc-field{display:flex; flex-direction:column; gap:.3rem}
.calc-field label{font-size:.85rem; font-weight:600; color:var(--muted)}
.calc-field input,.calc-field select{
  padding:.5rem .7rem; border:1px solid var(--border); border-radius:8px;
  background:var(--surface); color:var(--text); font-size:.95rem; font-family:var(--sans);
}
.calc-field input:focus,.calc-field select:focus{outline:2px solid var(--brand); outline-offset:1px}
.calc-results{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:.8rem}
.calc-result-item{background:var(--surface2); border:1px solid var(--border); border-radius:10px; padding:.8rem; text-align:center}
.calc-result-item .calc-big{display:block; font-size:1.3rem; font-weight:800; color:var(--text)}
.calc-result-item span:last-child{font-size:.8rem; color:var(--muted)}
.calc-revenue{background:#e3f2e4; border-color:#a5d6a7}
.calc-net{background:#e8f5e9; border-color:#66bb6a}
[data-theme="dark"] .calc-revenue{background:#1d3320; border-color:#2e7d32}
[data-theme="dark"] .calc-net{background:#1b3a1e; border-color:#388e3c}

/* ---------- Print ---------- */
.print-btn{
  position:fixed; bottom:1.5rem; right:1.5rem; z-index:40;
  background:var(--brand); color:#fff; border:none; border-radius:50%;
  width:48px; height:48px; font-size:1.4rem; cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.3); display:flex; align-items:center; justify-content:center;
}
.print-btn:hover{background:var(--brand-dark)}
@media print {
  .site-header,.site-footer,.sidebar,.prev-next,.print-btn,.icon-btn,.nav-toggle,.search-box{display:none!important}
  body{background:#fff; color:#000; font-size:12pt}
  .layout{grid-template-columns:1fr!important; margin:0; padding:0}
  .hero{background:#2e7d32!important; color:#fff!important; -webkit-print-color-adjust:exact; print-color-adjust:exact}
  .hero h1{color:#fff!important}
  .card{break-inside:avoid; box-shadow:none; border:1px solid #ccc}
  table.data{break-inside:avoid}
  a{color:#000}
  a[href]::after{content:" (" attr(href) ")"; font-size:.7em; color:#666}
  h1{font-size:18pt}
  h2{font-size:14pt; border-top-color:#999}
  .callout{border-left-color:#999; background:#f5f5f5!important}
  pre{white-space:pre-wrap; word-wrap:break-word; border:1px solid #ccc}
  /* Recipe pages: larger text */
  .recipe-card{break-inside:avoid; border:1px solid #ccc; padding:.8rem; margin:.5rem 0}
  /* Tables: ensure borders print */
  table.data{border:1px solid #999}
  table.data th,table.data td{border:1px solid #999; padding:.4rem .6rem}
  /* Charts: hide animations */
  .bar-fill{transition:none}
  .flow-step{break-inside:avoid}
  /* Videos: show URL instead of embed */
  .video-embed{display:none}
  .video-embed::after{content:attr(data-src); display:block; font-size:.8rem; color:#666}
  /* Progress bar, back-to-top: hide */
  .progress-bar,.back-to-top{display:none!important}
  /* Decision trees: expand all results */
  .dt-result{display:block!important; margin:.3rem 0; border:1px solid #ccc; padding:.5rem}
  .dt-btn{border:1px solid #999}
  /* Reading time: hide */
  .reading-time{display:none}
}

/* ---------- Mobile ---------- */
.nav-toggle{display:none}
@media (max-width:900px){
  .layout{grid-template-columns:1fr; gap:1.2rem}
  .sidebar{display:none}
  .nav-toggle{display:block; margin-left:auto}
  nav.main-nav{
    display:none; flex-basis:100%; flex-direction:column; padding:.4rem 0;
    border-top:1px solid var(--border); margin-top:.4rem;
  }
  nav.main-nav.open{display:flex}
  .nav-group{width:100%}
  .nav-group-label{width:100%; justify-content:space-between; padding:.6rem .72rem}
  .nav-dropdown{
    position:static; box-shadow:none; border:none; border-radius:0;
    margin:0; padding:0 0 0 .8rem; min-width:0;
  }
  .nav-group.open>.nav-dropdown{display:block}
  .nav-dropdown a{padding:.45rem .9rem; font-size:.88rem}
  .nav-quick{padding:.6rem .72rem; width:100%}
  .hero{padding:1.8rem 1.4rem}
  .hero h1{font-size:1.8rem}
  .header-actions{margin-left:0; flex-basis:100%}
  .search-box{flex:1; max-width:none}
}