/* style.css - GreenBite (geen frameworks) */
:root{
  --bg:#f3eedf;
  --card:#ffffff;
  --text:#1f2a1f;
  --muted:#4e5b4e;
  --brand:#2f5d3b;
  --brand2:#6f8f74;
  --border:rgba(47,93,59,.25);
  --shadow:0 10px 25px rgba(0,0,0,.08);
  --radius:18px;
  --max:1100px;
}

body{
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.container{
  width:min(var(--max), 100% - 2rem);
  margin-inline:auto;
}

.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  background:var(--card);
  border:1px solid var(--border);
  padding:.6rem .9rem;
  border-radius:999px;
  box-shadow:var(--shadow);
}
.skip-link:focus{ left:1rem; top:1rem; }

.site-header{
  position:sticky;
  top:0;
  z-index:10;
  background:rgba(243,238,223,.92);
  backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.9rem 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
}
.brand-mark{
  width:42px; height:42px;
  border-radius:14px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
}
.brand span{ font-weight:850; letter-spacing:.2px; }

.nav ul{
  list-style:none;
  display:flex;
  gap:.6rem;
  padding:0;
  margin:0;
}

.nav a{
  display:inline-block;
  padding:.45rem .7rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:650;
}
.nav a:hover, .nav a:focus-visible{ text-decoration:underline; }
.nav a[aria-current="page"]{
  background:rgba(47,93,59,.14);
  text-decoration:none;
}

.nav details{ display:none; }
.nav summary{
  cursor:pointer;
  list-style:none;
  padding:.45rem .7rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--card);
  font-weight:700;
}
.nav details[open] ul{
  position:absolute;
  right:0;
  top:calc(100% + .6rem);
  display:grid;
  gap:.2rem;
  padding:.55rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
  min-width:220px;
}
.nav details[open] a{
  padding:.6rem .75rem;
  border-radius:12px;
}

main{ padding:1.6rem 0 2.2rem; }

.hero{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:1.1rem;
  align-items:stretch;
  margin-top:.6rem;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

.card-pad{ padding:1.1rem; }

.hero figure img{ aspect-ratio: 16/10; object-fit:cover; }

h1{
  font-size:clamp(1.8rem, 3vw, 2.5rem);
  line-height:1.15;
  margin-bottom:.5rem;
}
.lede{ color:var(--muted); margin-bottom:1rem; }

.kpis{
  display:grid;
  gap:.8rem;
}
.kpis p{ color:var(--muted); }
.kpis strong{ color:var(--brand); }

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:1rem;
  margin:2rem 0 1rem;
}
.section-head h2{ font-size:1.4rem; }
.section-head p{ color:var(--muted); }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:1rem;
}

.item figure img{ aspect-ratio: 4/3; object-fit:cover; }
.item h3{ font-size:1.05rem; margin:.8rem 0 .2rem; }
.item p{ color:var(--muted); }
.price{
  margin-top:.6rem;
  font-weight:800;
  color:var(--brand);
}

.btn{
  display:inline-block;
  border:1px solid var(--border);
  background:var(--brand);
  color:white;
  padding:.6rem .95rem;
  border-radius:999px;
  text-decoration:none;
  font-weight:750;
}
.btn:hover, .btn:focus-visible{ filter:brightness(.95); text-decoration:none; }

.btn-ghost{
  background:transparent;
  color:var(--brand);
}

.video{
  aspect-ratio: 16/9;
  width:100%;
  border:0;
}

article.post header p{
  color:var(--muted);
  font-size:.95rem;
}

.meta{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.95rem;
  margin:.4rem 0 .9rem;
}

hr.sep{
  border:0;
  border-top:1px solid var(--border);
  margin:1.2rem 0;
}

.form{
  display:grid;
  gap:.9rem;
}
.form .row{
  display:grid;
  gap:.35rem;
}
label{ font-weight:650; }
input, textarea, select{
  border:1px solid var(--border);
  border-radius:12px;
  padding:.6rem .7rem;
  background:white;
}
textarea{ min-height:120px; resize:vertical; }

fieldset{
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
}
legend{
  font-weight:800;
  padding:0 .4rem;
  color:var(--brand);
}

.help{ color:var(--muted); font-size:.95rem; }

.table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  border:1px solid var(--border);
}
.table th, .table td{
  padding:.7rem .8rem;
  text-align:left;
  border-top:1px solid var(--border);
}
.table thead th{
  background:rgba(47,93,59,.08);
  border-top:0;
}

.site-footer{
  border-top:1px solid var(--border);
  padding:1.6rem 0 2rem;
  color:var(--muted);
}
.site-footer a{ color:var(--brand); }
.small{ font-size:.95rem; }

.two-col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:1rem;
}

/* Responsive */
@media (max-width: 860px){
  .hero{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
  .two-col{ grid-template-columns: 1fr; }
  .nav ul{ display:none; }
  .nav details{ display:block; position:relative; }
}