/* =========================================================================
   AgriStack Info — shared styles
   Agricultural green palette, Poppins, calm and readable.
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --soil:#1f3d2b;
  --leaf:#2f7d4f;
  --sprout:#52a675;
  --husk:#f2efe6;
  --grain:#fbfaf6;
  --ink:#22291f;
  --muted:#5d6657;
  --line:#dfe4d6;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Poppins',system-ui,sans-serif;
  color:var(--ink);
  line-height:1.7;
  background:var(--grain);
}
a{color:var(--leaf);text-decoration:none;font-weight:500;}
a:hover{text-decoration:underline;}

/* ---------- header ---------- */
.site-header{
  background:var(--soil);
  position:sticky;top:0;z-index:50;
}
.nav-wrap{
  max-width:980px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 20px;flex-wrap:wrap;gap:10px;
}
.brand{
  display:inline-flex;align-items:center;
  background:#fff;border-radius:10px;padding:6px 12px;
  line-height:0;
}
.brand:hover{text-decoration:none;}
.brand img{height:30px;width:auto;display:block;}
.nav-links{display:flex;gap:18px;flex-wrap:wrap;}
.nav-links a{color:#d8e4d2;font-size:.92rem;font-weight:500;}
.nav-links a:hover{color:#fff;text-decoration:none;}

/* ---------- layout ---------- */
main{max-width:760px;margin:0 auto;padding:34px 20px 60px;}
.page-eyebrow{
  display:inline-block;font-size:.72rem;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--sprout);
}
h1{font-size:clamp(1.7rem,4.5vw,2.4rem);font-weight:700;line-height:1.25;color:var(--soil);margin:.3em 0 .35em;}
h2{font-size:clamp(1.25rem,3vw,1.55rem);font-weight:600;color:var(--soil);margin:2.2em 0 .5em;padding-bottom:.35em;border-bottom:2px solid var(--line);}
h3{font-size:1.08rem;font-weight:600;color:var(--leaf);margin:1.5em 0 .3em;}
p{margin:.7em 0;}
ul,ol{margin:.7em 0 .7em 1.3em;}
li{margin:.35em 0;}
.lede{font-size:1.08rem;color:var(--muted);}

/* ---------- hero (home) ---------- */
.hero{
  background:linear-gradient(135deg,var(--soil),var(--leaf));
  color:#fff;padding:46px 20px;text-align:center;
}
.hero h1{color:#fff;max-width:680px;margin:0 auto .4em;}
.hero p{color:#e3efe0;max-width:600px;margin:0 auto 1.4em;font-size:1.05rem;}
.btn{
  display:inline-block;background:#fff;color:var(--soil);
  font-weight:600;padding:12px 26px;border-radius:30px;
}
.btn:hover{text-decoration:none;background:var(--husk);}

.card-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;}
.card{
  background:var(--grain);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;
}
.card h3{margin-top:0;}
.card p{font-size:.93rem;color:var(--muted);margin:.4em 0 .6em;}

/* ---------- guide elements ---------- */
.author-strip{
  display:flex;gap:14px;align-items:center;
  background:var(--husk);border:1px solid var(--line);border-radius:14px;
  padding:14px 18px;margin:22px 0;font-size:.9rem;color:var(--muted);
}
.author-strip strong{color:var(--soil);}
.toc{background:var(--husk);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:26px 0;}
.toc strong{color:var(--soil);display:block;margin-bottom:8px;}
.step{
  background:var(--grain);border:1px solid var(--line);border-left:5px solid var(--leaf);
  border-radius:0 14px 14px 0;padding:18px 20px;margin:18px 0;transition:border-color .2s;
}
.step:hover{border-left-color:var(--sprout);}
.step h3{display:flex;align-items:center;margin-top:0;color:var(--soil);}
.step .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;background:var(--leaf);color:#fff;
  font-weight:600;font-size:.9rem;margin-right:10px;flex:none;
}
figure{margin:16px 0;}
figure img{width:100%;height:auto;border-radius:10px;border:1px solid var(--line);display:block;}
figcaption{font-size:.82rem;color:var(--muted);margin-top:6px;font-style:italic;text-align:center;}
.note{background:#eef6ef;border:1px solid #cfe4d4;border-radius:12px;padding:14px 18px;margin:18px 0;font-size:.95rem;}
.note.warn{background:#fbf3e8;border-color:#ecd9b8;}
.note b{color:var(--soil);}

/* ---------- faq ---------- */
.faq details{border:1px solid var(--line);border-radius:12px;padding:4px 18px;margin:10px 0;background:var(--grain);}
.faq summary{font-weight:600;color:var(--soil);cursor:pointer;padding:12px 0;list-style:none;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';float:right;color:var(--sprout);font-size:1.3rem;line-height:1;}
.faq details[open] summary::after{content:'\2013';}
.faq p{margin:0 0 14px;color:var(--muted);font-size:.95rem;}

/* ---------- footer ---------- */
.site-footer{background:var(--soil);color:#cfe0c8;padding:30px 20px;font-size:.85rem;}
.footer-wrap{max-width:980px;margin:0 auto;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.footer-wrap a{color:#cfe0c8;}
.footer-wrap a:hover{color:#fff;}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-note{width:100%;border-top:1px solid #335741;margin-top:18px;padding-top:14px;color:#9cb293;font-size:.8rem;}

@media (max-width:600px){
  .card-grid{grid-template-columns:1fr;}
  .nav-links{gap:12px;}
  .footer-wrap{flex-direction:column;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .step{transition:none;}
}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:.82rem;color:var(--muted);margin-bottom:6px;}
.crumbs a{color:var(--leaf);}
.crumbs .sep{color:var(--line);margin:0 2px;}
.crumbs span[aria-current]{color:var(--ink);}

/* ---------- byline / E-E-A-T ---------- */
.byline{font-size:.88rem;color:var(--muted);margin:0 0 6px;}
.byline a{color:var(--leaf);font-weight:600;}
.byline time{white-space:nowrap;}

.author-card{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--husk);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin:34px 0 0;
}
.author-card img{width:56px;height:56px;border-radius:50%;object-fit:contain;background:#fff;padding:6px;border:1px solid var(--line);flex:none;}
.author-card strong{color:var(--soil);display:block;margin-bottom:4px;}
.author-card p{margin:0;font-size:.92rem;color:var(--muted);}

.hero h1{color:#fff;}