/*
Theme Name: Wasmijnbak
Theme URI: https://wasmijnbak.nl
Author: Wasmijnbak
Description: Thema voor wasmijnbak.nl — kliko- en afvalbakreiniging aan huis in Landsmeer, Purmerland, Oostzaan en Amsterdam-Noord.
Version: 1.0
Requires at least: 5.9
Requires PHP: 7.4
Text Domain: wasmijnbak
*/

:root{
  --green:#2E9E4F;
  --green-dark:#1F7A3B;
  --blue:#2E8FC2;
  --blue-dark:#226C96;
  --cream:#FBF8F1;
  --ink:#1B2E35;
  --yellow:#F5C242;
  --line: var(--ink);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Nunito', sans-serif;
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  font-size:1.02rem;
}
h1,h2,h3,.brand-text{
  font-family:'Baloo 2', sans-serif;
  font-weight:600;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

/* HEADER */
.site-header{
  background:var(--cream);
  border-bottom:3px solid var(--ink);
  position:sticky; top:0; z-index:50;
}
.headbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 28px;
}
.brand-text{font-size:1.5rem; color:var(--ink);}
.brand-text .accent{color:var(--green);}
.primary-nav .nav-list{display:flex; align-items:center; gap:28px;}
.primary-nav a{font-weight:700; font-size:0.98rem; color:var(--ink);}
.nav-cta{
  background:var(--yellow);
  padding:9px 18px;
  border-radius:999px;
  border:2.5px solid var(--ink);
}

/* HERO */
.hero{
  padding:64px 0 0;
  position:relative;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:40px;
  align-items:center;
  padding-bottom:56px;
}
.hero h1{
  font-size:3rem;
  line-height:1.12;
  color:var(--ink);
  max-width:12ch;
}
.hero h1 .accent{color:var(--green);}
.hero p.lede{
  margin-top:20px;
  font-size:1.12rem;
  max-width:44ch;
  color:#33454C;
}
.hero-actions{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap;}
.btn{
  display:inline-block;
  padding:13px 26px;
  font-weight:700;
  font-family:'Baloo 2', sans-serif;
  border-radius:999px;
  border:2.5px solid var(--ink);
}
.btn-primary{background:var(--green); color:#fff;}
.btn-primary:hover{background:var(--green-dark);}
.btn-secondary{background:#fff; color:var(--ink);}
.btn-secondary:hover{background:var(--yellow);}

.hero-art{
  background:var(--blue);
  border:3px solid var(--ink);
  border-radius:28px;
  padding:36px;
  text-align:center;
}
.hero-art svg{width:100%; height:auto;}

.wave{
  display:block; width:100%; height:60px;
}

/* STRIP */
.strip{background:var(--ink); color:var(--cream);}
.strip .wrap{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px;
  padding:18px 28px;
  font-family:'Baloo 2', sans-serif; font-size:0.95rem;
}
.strip-item{display:flex; align-items:center; gap:8px;}
.strip-item::before{content:"💧"; }

/* SECTIONS */
section{padding:80px 0;}
.section-head{max-width:56ch; margin-bottom:44px;}
.section-head h2{font-size:2.1rem; color:var(--ink);}
.section-head p{margin-top:12px; color:#3F5158; font-size:1.03rem;}

/* HOE HET WERKT */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:24px;
}
.step{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:20px;
  padding:28px 24px;
}
.step .step-num{
  width:38px; height:38px;
  background:var(--yellow);
  border:2.5px solid var(--ink);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2', sans-serif; font-weight:700;
  margin-bottom:16px;
}
.step h3{font-size:1.2rem; margin-bottom:8px;}
.step p{color:#3F5158; font-size:0.96rem;}

/* WERKGEBIED */
.werkgebied{background:#fff; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);}
.area-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:20px;
}
.area-card{
  background:var(--cream);
  border:2.5px solid var(--ink);
  border-radius:18px;
  padding:22px;
}
.area-card h3{font-size:1.1rem; color:var(--green-dark); margin-bottom:6px;}
.area-card p{font-size:0.9rem; color:#3F5158;}

/* PRIJZEN */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
.price-card{
  background:#fff;
  border:2.5px solid var(--ink);
  border-radius:22px;
  padding:32px;
}
.price-card.featured{background:var(--green); color:#fff;}
.price-card .price-tag{
  font-family:'Baloo 2', sans-serif; font-weight:700; font-size:0.95rem;
  color:var(--blue);
}
.price-card.featured .price-tag{color:var(--yellow);}
.price-card .price-num{
  font-family:'Baloo 2', sans-serif;
  font-size:2.6rem; font-weight:700;
  margin:8px 0 14px;
}
.price-card .price-num span{font-size:1rem; font-weight:400;}
.price-card ul{margin-top:14px;}
.price-card li{
  padding:6px 0;
  font-size:0.95rem;
  display:flex; gap:8px;
}
.price-card li::before{content:"✓"; font-weight:700;}
.price-card .btn{margin-top:20px;}

/* AANMELDEN */
.signup{background:var(--blue); color:#fff;}
.signup .section-head h2{color:#fff;}
.signup .section-head p{color:#E4F2FA;}
.signup-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}
.signup-info .info-row{padding:10px 0; border-top:1px solid rgba(255,255,255,0.25);}
.signup-info .info-row:first-child{border-top:none;}
.signup-info strong{display:block; font-family:'Baloo 2', sans-serif;}

.form-card{
  background:#fff; color:var(--ink);
  border:3px solid var(--ink);
  border-radius:22px;
  padding:30px;
}
.form-msg{
  padding:12px 14px; border-radius:12px; margin-bottom:16px;
  font-weight:700; font-size:0.92rem;
}
.form-msg.ok{background:#DCF3E2; border:2px solid var(--green);}
.form-msg.fout{background:#FBE3E3; border:2px solid #C0392B;}
.field{margin-bottom:14px;}
.field label{display:block; font-weight:700; font-size:0.88rem; margin-bottom:5px;}
.field input, .field textarea{
  width:100%; padding:11px 13px;
  border:2px solid var(--ink);
  border-radius:10px;
  font-family:'Nunito', sans-serif; font-size:0.95rem;
  background:var(--cream);
  color:var(--ink);
}
.field textarea{min-height:80px; resize:vertical;}
.honeypot{position:absolute; left:-9999px; opacity:0;}
.form-card .btn{width:100%; text-align:center; border:none; cursor:pointer;}

/* FOOTER */
.site-footer{background:var(--ink); color:var(--cream); padding:30px 0;}
.footbar{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:0.9rem;}

@media (max-width: 860px){
  .primary-nav .nav-list{display:none;}
  .hero .wrap{grid-template-columns:1fr; padding-bottom:36px;}
  .hero h1{font-size:2.2rem; max-width:none;}
  .steps{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .signup-inner{grid-template-columns:1fr;}
  section{padding:56px 0;}
}