/* ==========================================================================
   Leaf Line — site.css
   Built to sit on top of Bootstrap 5. Safe overrides only.
   ========================================================================== */

/* ---------- CSS Custom Properties (Design Tokens) ---------- */
:root{
  --ll-green-600:#3d7549;
  --ll-green-500:#58a95a;
  --ll-green-400:#8dd3a0;
  --ll-teal-500:#1b9c85;
  --ll-teal-300:#5ac8aa;
  --ll-ink-900:#1b1f23;
  --ll-ink-700:#3a3f44;
  --ll-ink-500:#5d646b;
  --ll-ink-300:#9aa3ab;
  --ll-ink-200:#c9d0d6;
  --ll-paper:#f5f7f4;
  --ll-paper-2:#eef3ee;
  --ll-outline:#e6ece6;
  --ll-success:#3d7549;
  --ll-accent:#1b9c85;
  --ll-radius-lg:1rem;
  --ll-radius:0.75rem;
  --ll-radius-sm:0.5rem;
  --ll-shadow-sm:0 6px 18px rgba(0,0,0,.06);
  --ll-shadow-lg:0 14px 48px rgba(0,0,0,.12);
}

/* ---------- Base / Typography ---------- */
/* Slight global bump; keep good readability */
html{ font-size:17px; }
body{
  color:var(--ll-ink-900);
  background:var(--ll-paper);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
p{ line-height:1.7; margin-bottom:1rem; }
.lead{ font-size:1.25rem; line-height:1.6; color:var(--ll-ink-700); }

h1,.display-6{ font-size:clamp(2rem,1.7rem + 1vw,2.5rem); line-height:1.2; }
h2{ font-size:clamp(1.5rem,1.3rem + .7vw,2rem); line-height:1.25; }
h3{ font-size:clamp(1.25rem,1.15rem + .4vw,1.5rem); line-height:1.3; }
h4,h5,h6{ line-height:1.35; }

/* Links */
a{ color:var(--ll-success); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- Buttons (Bootstrap-friendly) ---------- */
.btn-success{
  --bs-btn-bg:var(--ll-success);
  --bs-btn-border-color:var(--ll-success);
  --bs-btn-hover-bg:#356843;
  --bs-btn-hover-border-color:#356843;
  --bs-btn-active-bg:#2e5b3a;
  --bs-btn-active-border-color:#2e5b3a;
  --bs-btn-focus-shadow-rgb:61,117,73;
  border-radius:var(--ll-radius);
  box-shadow:var(--ll-shadow-sm);
}
.btn-outline-success{
  --bs-btn-color:var(--ll-success);
  --bs-btn-border-color:var(--ll-success);
  --bs-btn-hover-bg:var(--ll-success);
  --bs-btn-hover-border-color:var(--ll-success);
  border-radius:var(--ll-radius);
}
.btn{ padding:.6rem 1rem; font-weight:600; }

/* ---------- Cards ---------- */
.card{
  border:1px solid var(--ll-outline);
  border-radius:var(--ll-radius-lg);
  box-shadow:var(--ll-shadow-sm);
  overflow:hidden;
  background:#fff;
}
.card-img-top{ object-fit:cover; height:220px; }
.card .badge{ font-weight:600; }

/* ---------- Navbar ---------- */
.navbar{
  background:#fff;
  border-bottom:1px solid var(--ll-outline);
}
.navbar .navbar-brand img{ height:34px; }
.navbar .nav-link{ color:var(--ll-ink-700); font-weight:600; }
.navbar .nav-link:hover{ color:var(--ll-success); }

/* ---------- Hero & Parallax ---------- */
.hero-parallax{
  background: url("../img/leafline_about_hero_wide.webp") center/cover no-repeat fixed;
  min-height:60vh;
  border-radius:var(--ll-radius-lg);
  box-shadow:var(--ll-shadow-lg);
}
@media (max-width:1199.98px){
  .hero-parallax{
    background-attachment:scroll;
    min-height:40vh;
  }
}

/* ---------- Icons ---------- */
.ll-icon{ width:26px; height:26px; color:var(--ll-green-600); }
.ll-icon-muted{ color:var(--ll-ink-300); }

/* ---------- Sections ---------- */
section{ scroll-margin-top:80px; }
.bg-paper{ background:var(--ll-paper); }
.bg-paper-2{ background:var(--ll-paper-2); }

/* About section tune */
#about-leafline .small{ font-size:.95rem; }
#about-leafline .border{ border-color:var(--ll-outline)!important; }
#about-leafline .text-success{ color:var(--ll-green-600)!important; }

/* Sustainability cards */
.sust-card{
  border:1px solid var(--ll-outline);
  border-radius:var(--ll-radius);
  background:#fff;
  padding:1rem;
}
.sust-card h6{ margin-bottom:.25rem; }
.sust-card p{ color:var(--ll-ink-700); }

/* ---------- Products / Catalog ---------- */
.catalog-sidebar .list-group-item{
  border:none;
  border-left:3px solid transparent;
  padding:.6rem .75rem;
}
.catalog-sidebar .list-group-item.active{
  background:#eaf3ec;
  color:var(--ll-green-600);
  border-left-color:var(--ll-green-600);
  font-weight:700;
}
.product-card .card-body p{ color:var(--ll-ink-700); }
.filter-chip{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--ll-outline);
  border-radius:999px; padding:.4rem .75rem; font-size:.9rem;
}
.filter-chip a{ color:#d33; text-decoration:none; }
.filter-bar{ position:sticky; top:64px; z-index:1030; background:#fff; border-bottom:1px solid var(--ll-outline); }

/* ---------- Tables / Docs ---------- */
.table-sm td,.table-sm th{ padding:.5rem .6rem; }
.table thead th{ color:var(--ll-ink-700); border-bottom:2px solid var(--ll-outline); }

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius:var(--ll-radius);
  border-color:var(--ll-outline);
}
.input-group .btn{ border-radius:var(--ll-radius); }
.form-check-input:checked{ background-color:var(--ll-success); border-color:var(--ll-success); }

/* ---------- Badges ---------- */
.badge.bg-success-subtle{
  background:#eaf3ec;
  color:var(--ll-green-600);
}

/* ---------- Footer ---------- */
.site-footer{
  background:#fff;
  border-top:1px solid var(--ll-outline);
  color:var(--ll-ink-700);
}
.site-footer a{ color:var(--ll-green-600); text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

/* ---------- Utilities ---------- */
.rounded-xl{ border-radius:1.25rem!important; }
.shadow-ll-sm{ box-shadow:var(--ll-shadow-sm)!important; }
.shadow-ll-lg{ box-shadow:var(--ll-shadow-lg)!important; }
.text-ink-700{ color:var(--ll-ink-700)!important; }
.text-ink-500{ color:var(--ll-ink-500)!important; }
.text-ink-300{ color:var(--ll-ink-300)!important; }
.bg-white-80{ background:rgba(255,255,255,.8); }
.max-w-720{ max-width:720px; }
.max-w-960{ max-width:960px; }

/* ---------- Animations ---------- */
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
.a-fadeUp{ animation:fadeUp .6s ease both; }

@keyframes floatSlow{
  from{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
  to{ transform:translateY(0); }
}
.a-floatSlow{ animation:floatSlow 6s ease-in-out infinite; }

/* ---------- Responsive tweaks ---------- */
@media (max-width:991.98px){
  .card-img-top{ height:200px; }
  .filter-bar{ top:56px; }
  html{ font-size:16.5px; } /* soften bump slightly on small screens */
}
@media (max-width:575.98px){
  .lead{ font-size:1.2rem; }
  .ll-icon{ width:24px; height:24px; }
}

/* ---------- Print ---------- */
@media print{
  .navbar, .site-footer, .btn, .filter-bar{ display:none!important; }
  a[href]:after{ content:""; }
}