/* Munsters Dakbedekkingen – style.css (responsive optimized v3) */
:root{
  --brand-red:#e53935;
  --brand-dark:#1b1b1b;
  --brand-gray:#f5f5f7;
  --text:#222;
  --muted:#666;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color:var(--text);
  background:#fff;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Consistente zijmarges op alle devices */
.container{
  max-width: 1120px;
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;   /* i.p.v. 92vw */
  padding-right: 16px;  /* i.p.v. 92vw */
}

/* voorkom micro-overflow die “te breed” oogt */
html, body{ overflow-x: hidden; }

/* images/cards nooit buiten de container laten schieten */
img{ max-width:100%; height:auto; display:block; }
.card{ max-width:100%; }

a{color:var(--brand-red); text-decoration:none}
a:hover{text-decoration:underline}

.menu{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
.menu a{color:#333;font-weight:600}
.menu a.active{color:var(--brand-red)}

.btn{
  display:inline-block;
  background:var(--brand-red);
  color:#fff;
  padding:0.95rem 1.2rem;
  border-radius:999px;
  font-weight:700;
  letter-spacing:.2px;
  box-shadow:var(--shadow);
  border:2px solid var(--brand-red);
  transition:.2s ease;
  line-height:1;
}
.btn:hover{
  transform:translateY(-1px);
  text-decoration:none;
}
.btn.outline {
  background: #ffffff;
  color: #e53935;
  border: 2px solid #e53935;
}

.btn.outline:hover {
  background: #e53935;
  color: #fff;
}
.btn.block{display:block; width:100%; text-align:center}
.btn.lg{padding:1.05rem 1.35rem; font-size:1.05rem}

.tag{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .8rem;
  background:#fff;
  border:1px solid #e8e8e8;
  border-radius:999px;
  font-size:.92rem;
  color:#333;
}

/* Header / Nav */
header{
  position:sticky; top:0; z-index:1000;
  background:#fff; border-bottom:1px solid #eee;
  backdrop-filter:saturate(180%) blur(6px);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem 0;
}
.nav img{height:44px}
.nav .actions{display:flex; align-items:center; gap:.6rem}
.nav ul{display:flex; gap:1rem; list-style:none; margin:0; padding:0}
.nav a{color:#333; font-weight:600}
.nav .cta-phone{white-space:nowrap}
.mobile-toggle{display:none; font-size:1.7rem; cursor:pointer; background:none; border:0}

/* Hero */
.hero{
  position:relative;
  background:linear-gradient(180deg, rgba(0,0,0,.32), rgba(0,0,0,.32)), url('assets/hero.jpg') center/cover no-repeat;
  color:#fff; padding:96px 0 80px;
}
.hero h1{font-size:clamp(30px, 4.5vw, 54px); line-height:1.1; margin:0 0 12px; text-shadow:0 2px 12px rgba(0,0,0,.28)}
.hero p{font-size:clamp(16px, 2.3vw, 20px); color:#f6f6f6; max-width:780px; text-shadow:0 1px 8px rgba(0,0,0,.25)}
.hero .cta{margin-top:22px; display:flex; gap:12px; flex-wrap:wrap}
.hero .badges{margin-top:18px; display:flex; gap:10px; flex-wrap:wrap}
/* READABLE badges */
.badge{
  display:inline-block; padding:.4rem .7rem; border-radius:999px; font-size:.9rem;
  background:#e53935; color:#fff; font-weight:700;
  text-shadow:0 1px 3px rgba(0,0,0,.25);
  box-shadow:0 4px 14px rgba(0,0,0,.15);
}

/* Sections */
.section{padding:64px 0}
.section.gray{background:var(--brand-gray)}
h2{font-size:clamp(24px, 3.2vw, 36px); margin:0 0 12px}
.sub{color:var(--muted); margin-top:0}

.grid{display:grid; gap:20px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-4{grid-template-columns:repeat(4, 1fr)}

.card{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); box-shadow:var(--shadow);
  padding:18px;
}
.card h3{margin:.2rem 0 .6rem; font-size:1.2rem}
.card p{color:#555; margin:0}

.projects .item{
  border-radius:var(--radius); overflow:hidden; border:1px solid #eee; box-shadow:var(--shadow);
}
.projects .item img{width:100%; height:220px; object-fit:cover; display:block}
.projects .item .caption{padding:10px; font-weight:600}

.testimonials .quote{
  background:#fff; border-left:4px solid var(--brand-red); padding:18px; border-radius:10px;
  box-shadow:var(--shadow);
}

.cta-strip{
  background:linear-gradient(90deg, var(--brand-dark), #333);
  color:#fff; padding:28px 0;
}
.cta-strip .inner{display:flex; gap:20px; align-items:center; justify-content:space-between; flex-wrap:wrap}

/* Contact */
.contact{
  display:grid; grid-template-columns: 1.2fr .8fr; gap:22px;
}
.form{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}
label{font-weight:600; font-size:.95rem}
input, textarea, select{
  width:100%; padding:1rem 1rem; margin-top:.35rem; margin-bottom:.9rem;
  border:1px solid #ddd; border-radius:12px; font-size:1rem;
}
textarea{min-height:140px; resize:vertical}
small.help{color:#777}

aside .info{
  background:#fff; border:1px solid #eee; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow);
}

/* Footer */
footer{
  background:#0f0f10; color:#cfcfd2; padding:40px 0 60px;
}
footer .columns{display:grid; gap:24px; grid-template-columns: 1.5fr 1fr 1fr}
footer h4{margin-top:0; color:#fff}
footer a{color:#e8e8ea}

.floating-call{
  position:fixed; right:16px; bottom:16px; z-index:999;
  background:var(--brand-red); color:#fff; padding:12px 16px; border-radius:999px;
  box-shadow:var(--shadow); font-weight:800;
}

.floating-whatsapp {
  position: fixed;
  right: 16px;
  bottom: 70px; /* boven de bel-knop */
  z-index: 999;
  background: #25D366; /* WhatsApp groen */
  color: #fff;
  padding: 12px 16px;
  border-radius: 999px;
  box-shadow: var(--shadow);
  font-weight: 800;
  font-size: 15px;
}
.floating-whatsapp:hover {
  filter: brightness(0.9);
}


/* Responsive */
@media (max-width: 1024px){
  .grid.cols-3{grid-template-columns:1fr 1fr}
  .grid.cols-4{grid-template-columns:1fr 1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width: 780px){
  .nav ul{display:none}
  .mobile-toggle{display:block}
  .hero{padding:72px 0 64px}
  .hero .cta .btn{width:100%}
  .projects .item img{height:200px}
  footer .columns{grid-template-columns: 1fr}
}

/* --- Mobile polish (<=720px) --- */
@media (max-width: 720px){
  /* Header compacter + 1 CTA */
  .nav { padding:.5rem 0; }
  .nav img{ height:36px; }
  .actions .btn{ padding:.6rem .9rem; font-size:.9rem; }
  .actions .btn:nth-child(2){ display:none; } /* verberg 'Gratis dakinspectie' in de header op mobiel */

  /* Hero beter leesbaar en minder hoog */
  .hero{
    padding:64px 0 48px;
    min-height:56vh;
    background-position:center;
  }
  .hero h1{ font-size: clamp(26px, 8vw, 34px); }
  .hero p{ font-size:16px; max-width: 100%; }
  .hero .cta .btn{ width:100%; } /* knoppen full-width */
  .hero .badges{ gap:8px; }

  /* Badges kleiner maar leesbaar */
  .badge{
    font-size:.8rem;
    padding:.35rem .6rem;
  }

  /* Cards netjes enkelkoloms (heb je al, dit borgt spacing) */
  .grid{ gap:16px; }

  /* Footer 1 kolom */
  footer .columns{ grid-template-columns:1fr; }
}

/* --- Floating knoppen goed positioneren (iOS safe areas etc.) --- */
.floating-call{
  right:12px; bottom:12px; padding:14px 16px; z-index:1000;
}
.floating-whatsapp{
  right:12px; bottom:60px; padding:14px 16px; z-index:1000;
}
@supports (padding: max(0px)) {
  .floating-call{ bottom: max(12px, env(safe-area-inset-bottom)); }
  .floating-whatsapp{ bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px)); }
}

/* Fix diensten cards breedte op mobiel */
@media (max-width: 720px){
  .diensten-section {
    padding: 0 16px; /* zelfde marge als de rest */
  }
  .diensten-section .grid {
    display: grid;
    grid-template-columns: 1fr; /* één kolom */
    gap: 16px;
  }
  .diensten-section .card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}