/* ================================
   BDG Afval — Clean CSS (v2)
   - Dark topbar + full-width header
   - Light content theme
   - Full-width hero image + overlay + cards
   - Cards restored everywhere
   - Diensten CTA links aligned
================================ */

/* ---------- Theme tokens ---------- */
:root{
  /* Brand */
  --accent:#2FE3AE;
  --accent2:#21cfa0;

  /* Light content */
  --page:#f6f7f8;
  --page2:#ffffff;
  --textDark:#0f172a;
  --textSoft:#475569;
  --lineLight: rgba(15, 23, 42, .10);
  --shadowLight: 0 12px 40px rgba(15, 23, 42, .08);

  /* Dark header */
  --headerBg: #000; /* exact zwart */
  --headerLine: rgba(255,255,255,.12);
  --headerText: rgba(255,255,255,.92);

  /* Layout */
  --container: 1120px;
  --radius: 18px;
  --radius2: 26px;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, var(--page), #ffffff 55%, #ffffff);
  color: var(--textDark);
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}
img{max-width:100%; display:block}

.container{
  width: min(var(--container), calc(100% - 32px));
  margin: 0 auto;
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

.muted{color: var(--textSoft)}
.small{font-size:.92rem; line-height:1.4}

p{margin:0 0 12px; color: var(--textSoft); line-height:1.65}
h1,h2,h3{color: var(--textDark)}
h2{
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin: 0 0 8px;
  line-height:1.1;
}
h3{margin:0 0 8px; line-height:1.2}

/* ---------- Topbar (dark) ---------- */
.topbar{
  background: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}
.topbar__inner{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  padding: 10px 0;
  font-size:.9rem;
  color: var(--headerText);
}
.topbar__left,.topbar__right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.topbar__sep{color:rgba(255,255,255,.25)}
.toplink{color:rgba(255,255,255,.9)}
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border:1px solid rgba(47,227,174,.30);
  background: rgba(47,227,174,.10);
  border-radius: 999px;
  font-weight:700;
  color: rgba(255,255,255,.95);
}

/* ---------- Header / Nav (dark sticky) ---------- */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--headerBg);
  border-bottom: none;
  width: 100%;
  backdrop-filter: blur(14px);
}

/* standaard: header content in container */
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 0;
  gap:16px;
}

/* Full-width header layout */
.header--full .header__inner{
  max-width: none;
  padding-left: 24px;
  padding-right: 24px;
}

.brand{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
}

/* logo groter */
.brand__logo{
  height:114px;
  width:auto;
}

/* Logo helemaal links in full header */
.header--full .brand{ margin-right:auto; }
.header--full .nav{ margin-left:auto; }

.nav{display:flex; align-items:center; position:relative}
.nav__menu{display:flex; align-items:center; gap:18px}
.nav__link{
  color: var(--headerText);
  font-weight:700;
  font-size:.95rem;
  padding:10px 10px;
  border-radius: 12px;
}
.nav__link:hover{background: rgba(255,255,255,.08)}
.nav__link--cta{
  border:1px solid rgba(47,227,174,.35);
  background: rgba(47,227,174,.10);
}

.nav__toggle{
  display:none;
  background: transparent;
  border:1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  padding:10px 12px;
  color:var(--headerText);
}
.nav__toggleLines{
  display:inline-block;
  width:22px;
  height:14px;
  position:relative;
}
.nav__toggleLines::before,
.nav__toggleLines::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
}
.nav__toggleLines::before{top:2px}
.nav__toggleLines::after{bottom:2px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 14px;
  border: 1px solid var(--lineLight);
  font-weight:800;
  letter-spacing:.01em;
  background:#fff;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn:active{transform: translateY(1px)}
.btn--primary{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  color:#06110d;
  border-color: rgba(47,227,174,.55);
  box-shadow: 0 12px 26px rgba(47,227,174,.18);
}
.btn--ghost{
  background:#fff;
  color: var(--textDark);
}

/* Light ghost variant (for hero on dark image) */
.btn--light{
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  box-shadow: none;
}
.btn--light:hover{background: rgba(255,255,255,.12)}

/* ================================
   HERO IMAGE (full width)
================================ */

/* Full width trick: edge-to-edge even inside containers */
.hero--image,
.heroMedia{
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

.hero--image{
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.heroMedia{
  position: relative;
  min-height: 560px;
}

/* Actual image */
.heroMedia__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* Overlay for readability */
.heroMedia__overlay{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.20) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.40) 100%);
}

/* Text inside hero (keep centered with container) */
.heroMedia .container{
  position: relative;
  z-index: 2;
}

.heroMedia__content{
  position: relative;
  padding: 64px 0 160px;
  color: #fff;
  max-width: 78ch;
}

.heroKicker{
  margin: 0 0 10px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
}

.heroTitle{
  margin: 0 0 12px;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  line-height: 1.02;
  color: #fff;
}

.heroSub{
  margin: 0 0 18px;
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(255,255,255,.86);
}

.heroCtas{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* Cards overlapping hero */
.heroCardsWrap{
  position: relative;
  margin-top: -110px;
  padding-bottom: 30px;
}

.heroCards{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.heroCard{
  display:flex;
  flex-direction: column;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--lineLight);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 14px 36px rgba(15,23,42,.14);
  color: var(--textDark);
  min-height: 210px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.heroCard:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(15,23,42,.18);
}

.heroCard__title{
  font-weight: 900;
  font-size: 1.05rem;
  margin-bottom: 6px;
}

.heroCard__text{
  color: var(--textSoft);
  line-height: 1.5;
  font-size: .98rem;
  margin-bottom: 10px;
}

.heroCard__link{
  margin-top: auto;
  font-weight: 900;
  color: var(--textDark);
}

.heroCard--accent{
  border-color: rgba(47,227,174,.35);
  box-shadow: 0 14px 36px rgba(47,227,174,.16);
}

/* ---------- Sections ---------- */
.section{padding: 56px 0}
.section--alt{
  background: linear-gradient(180deg, #ffffff, var(--page));
  border-top: 1px solid var(--lineLight);
  border-bottom: 1px solid var(--lineLight);
}
.section__head{
  margin-bottom: 18px;
  max-width: 72ch;
}

/* ---------- Grids ---------- */
.grid{display:grid; gap:14px}
.grid--cards{grid-template-columns: repeat(4, minmax(0,1fr))}
.grid--2{grid-template-columns: repeat(2, minmax(0,1fr))}
.grid--3{grid-template-columns: repeat(3, minmax(0,1fr))}

/* ---------- Cards (GLOBAL) ---------- */
.card{
  border-radius: var(--radius2);
  padding: 18px;
  background: var(--page2);
  border: 1px solid var(--lineLight);
  box-shadow: var(--shadowLight);
}

.card--flat{background:#fff}

.card__link{
  display:inline-block;
  margin-top: 4px;
  font-weight:900;
  color: var(--textDark);
}

/* ---------- Diensten: CTA links op gelijke hoogte ---------- */
#diensten .grid--cards .card{
  display:flex;
  flex-direction: column;
  min-height: 220px;
}
#diensten .grid--cards .card__link{
  margin-top:auto; /* sleutel */
  padding-top:12px;
}

/* ---------- Note ---------- */
.note{
  margin-top: 16px;
  padding: 14px 16px;
  border-radius: var(--radius2);
  border:1px dashed rgba(47,227,174,.35);
  background: rgba(47,227,174,.10);
  color: var(--textDark);
}
.note__link{
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.note__link:hover{opacity:.85}

/* ---------- Checklist ---------- */
.checklist{margin: 10px 0 0; padding:0; list-style:none}
.checklist li{
  padding-left: 26px;
  position:relative;
  margin: 10px 0;
  color: var(--textSoft);
  line-height:1.5;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:.5em;
  width: 14px; height: 14px;
  border-radius: 6px;
  background: rgba(47,227,174,.14);
  border:1px solid rgba(47,227,174,.22);
  box-shadow: 0 0 0 4px rgba(47,227,174,.06);
}

/* ---------- Steps ---------- */
.steps{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
  margin-top: 10px;
}
.step{
  padding: 18px;
  border-radius: var(--radius2);
  background: var(--page2);
  border:1px solid var(--lineLight);
  box-shadow: var(--shadowLight);
}
.step__num{
  width: 38px; height: 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: rgba(47,227,174,.12);
  border:1px solid rgba(47,227,174,.25);
  font-weight: 900;
  margin-bottom: 10px;
}

/* ---------- Mini ---------- */
.mini{
  padding: 18px;
  border-radius: var(--radius2);
  border:1px solid var(--lineLight);
  background: var(--page2);
  box-shadow: var(--shadowLight);
}

/* ---------- Contact ---------- */
.contact__card a{font-weight:900}
.contact__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lineLight);
}
.contact__row:last-of-type{border-bottom:none}
.contact__cta{
  margin-top: 14px;
  display:flex; gap: 10px; flex-wrap:wrap;
}

/* ---------- Form ---------- */
.form label{
  display:block;
  font-weight: 800;
  color: var(--textDark);
  margin-bottom: 10px;
}
.form input, .form textarea{
  width:100%;
  margin-top: 8px;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--lineLight);
  background: #fff;
  color: var(--textDark);
  outline:none;
  box-shadow: 0 10px 22px rgba(15,23,42,.05);
}
.form input:focus, .form textarea:focus{
  border-color: rgba(47,227,174,.55);
  box-shadow: 0 0 0 4px rgba(47,227,174,.12);
}
.form__row{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}
.form__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

/* ---------- FAQ ---------- */
.faq details{
  border:1px solid var(--lineLight);
  background: #fff;
  border-radius: 16px;
  padding: 12px 14px;
  margin-top: 10px;
  box-shadow: var(--shadowLight);
}
.faq summary{
  cursor:pointer;
  font-weight:900;
  color: var(--textDark);
}
.faq p{margin-top: 10px}

/* ---------- Footer ---------- */
.footer{padding-top: 10px}
.footer__inner{
  border-top:1px solid var(--lineLight);
  padding: 16px 0 22px;
  display:flex; align-items:center; justify-content:center;
  gap: 10px; flex-wrap:wrap;
  color: var(--textSoft);
}
.footer__sep{color: rgba(15,23,42,.35)}

/* ---------- Green CTA section (Contact) ---------- */
.section--green{
  background: var(--accent);
}

/* In groene sectie: tekst donker, maar cards blijven wit (goed leesbaar) */
.section--green h2,
.section--green h3,
.section--green p,
.section--green .muted{
  color: var(--textDark);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .grid--cards{grid-template-columns: repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns: 1fr}
  .grid--3{grid-template-columns: 1fr}

  .heroMedia{ min-height: 520px; }
  .heroMedia__content{ padding: 54px 0 140px; }
  .heroCards{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .heroCardsWrap{ margin-top: -90px; }

  #diensten .grid--cards .card{ min-height: 0; }
}

@media (max-width: 720px){
  .topbar__right{display:none}

  .nav__toggle{display:inline-flex}
  .nav__menu{
    position:absolute;
    right: 16px;
    top: 58px;
    width: min(360px, calc(100vw - 32px));
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap: 6px;
    padding: 10px;
    background: rgba(15,15,16,.95);
    border:1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0,0,0,.35);
  }
  .nav__menu.is-open{display:flex}
  .nav__link{padding: 12px 12px}
  .grid--2{grid-template-columns: 1fr}
  .grid--cards{grid-template-columns: 1fr}
  .form__row{grid-template-columns: 1fr}
}

@media (max-width: 640px){
  .heroMedia{ min-height: 520px; }
  .heroCards{ grid-template-columns: 1fr; }
  .heroCardsWrap{ margin-top: -80px; }
  .heroMedia__content{ padding: 46px 0 130px; }
}