/*
Theme Name: De Grondstoffenregisseur
Theme URI: https://www.grondstoffenregisseur.nl/
Author: De Grondstoffenregisseur
Description: Een stijlvol, responsief WordPress-thema voor De Grondstoffenregisseur.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: grondstoffenregisseur
*/
:root{--forest:#123a30;--dark:#092d25;--gold:#bd9860;--cream:#f7f5ef;--ink:#172f29;--muted:#64736d}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.65;background:#fff}a{color:inherit;text-decoration:none}img{max-width:100%;height:auto}h1,h2,h3{font-family:Georgia,'Times New Roman',serif;line-height:1.13;letter-spacing:-.025em}h1{font-size:clamp(2.6rem,5vw,5rem);margin:0 0 22px}h2{font-size:clamp(2rem,3.2vw,3.4rem);margin:0 0 20px}h3{font-size:1.55rem}.container{width:min(1180px,calc(100% - 44px));margin:auto}.site-header{background:#fff;position:relative;z-index:10;border-bottom:1px solid #eee}.header-inner{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:88px}.brand{font-family:Georgia,serif;font-size:clamp(1.1rem,2vw,1.6rem);font-weight:700;color:var(--dark);line-height:1.15}.brand small{display:block;font:700 .59rem Arial,sans-serif;letter-spacing:.18em;color:#7c785e;margin-top:5px}.site-nav ul{display:flex;list-style:none;gap:24px;margin:0;padding:0}.site-nav a{font-size:.93rem}.site-nav a:hover,.site-nav .current-menu-item a{color:#9b783f}.btn{display:inline-block;padding:13px 24px;border-radius:40px;background:var(--gold);color:#fff;font-weight:700;font-size:.92rem;transition:transform .2s,background .2s}.btn:hover{transform:translateY(-2px);background:#a9834a}.btn-outline{border:1px solid #fff;background:transparent}.btn-outline:hover{background:#ffffff20}.hero{min-height:590px;background:linear-gradient(90deg,rgba(6,40,32,.95),rgba(6,40,32,.67) 51%,rgba(6,40,32,.17)),url('assets/milieustraat-hero.webp') center/cover;display:flex;align-items:center;color:white}.hero-inner{padding:100px 0;max-width:750px}.eyebrow{font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--gold);margin-bottom:20px}.hero .eyebrow{color:#dfc59d}.hero p{max-width:610px;font-size:1.1rem;margin-bottom:28px}.hero h1 em{color:#e2c092;font-style:normal}.button-row{display:flex;flex-wrap:wrap;gap:14px}.features{background:var(--cream);padding:30px 0}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.feature{border-right:1px solid #e1ded6;padding:7px 20px 7px 0}.feature:last-child{border:0}.feature strong{display:block;font-size:1rem}.feature span{font-size:.84rem;color:var(--muted)}.section{padding:95px 0}.section-intro{max-width:640px;margin-bottom:34px}.section-intro p{color:var(--muted)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.service-card{background:#fff;border:1px solid #eeeae1;border-radius:12px;overflow:hidden;box-shadow:0 10px 25px #102d2010}.service-photo{height:195px;background:linear-gradient(135deg,#8d998a,#304a3d);background-size:cover;background-position:center}.service-card:nth-child(1) .service-photo{background-image:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=800&q=80')}.service-card:nth-child(2) .service-photo{background-image:url('https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=800&q=80')}.service-card:nth-child(3) .service-photo{background-image:url('https://images.unsplash.com/photo-1416879595882-3373a0480b5b?auto=format&fit=crop&w=800&q=80')}.service-content{padding:25px}.service-content h3{margin:0 0 12px}.service-content p{color:var(--muted);font-size:.95rem}.text-link{font-weight:700;color:#8a6b36}.about{background:var(--cream)}.about-grid{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:65px}.about-image{min-height:440px;border-radius:12px;background:url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?auto=format&fit=crop&w=1000&q=85') center/cover}.about p{color:var(--muted)}.benefits{padding:0;list-style:none}.benefits li{margin:12px 0;padding-left:25px;position:relative}.benefits li:before{content:'✓';position:absolute;left:0;color:#a78550;font-weight:bold}.cta{background:var(--dark);color:white;padding:85px 0}.cta p{color:#d9e2db;max-width:650px}.footer{background:#09231e;color:#e6e9e4;padding:45px 0}.footer-inner{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}.footer a{text-decoration:underline}.page-hero{background:var(--forest);color:white;padding:85px 0}.page-content{padding:75px 0;min-height:300px}.page-content article{max-width:850px}.page-content a{text-decoration:underline}.page-content .wp-block-button__link{text-decoration:none}.post-list article{padding:20px 0;border-bottom:1px solid #ddd}.menu-toggle{display:none}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);overflow:hidden;width:1px;height:1px}@media(max-width:900px){.header-inner{flex-wrap:wrap;padding:16px 0}.menu-toggle{display:block;border:1px solid #ddd;background:white;border-radius:6px;padding:9px 13px}.site-nav{display:none;width:100%}.site-nav.open{display:block}.site-nav ul{flex-direction:column;gap:12px;padding:15px 0}.header-cta{display:none}.feature-grid{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:1fr 1fr}.about-grid{grid-template-columns:1fr}.about-image{min-height:320px}}@media(max-width:600px){.hero{min-height:510px}.hero-inner{padding:65px 0}.feature-grid,.service-grid{grid-template-columns:1fr}.feature{border-right:0;border-bottom:1px solid #e1ded6}.section{padding:60px 0}.about-grid{gap:25px}.button-row .btn{width:100%;text-align:center}}

/* Versie 1.1: eigen milieustraatvisualisatie en compacte hero */
.hero{min-height:560px;background-position:center 47%;background-image:linear-gradient(90deg,rgba(6,40,32,.94) 0%,rgba(6,40,32,.81) 36%,rgba(6,40,32,.25) 75%,rgba(6,40,32,.06) 100%),url('assets/milieustraat-hero.webp')}
.hero-inner{max-width:680px;padding:80px 0}.hero h1{font-size:clamp(2.4rem,4.1vw,4.25rem);line-height:1.14}
.brand-logo{display:block;width:clamp(220px,24vw,350px);height:auto}.brand .custom-logo{display:block;max-width:350px;max-height:72px;width:auto;height:auto}
@media(max-width:600px){.hero{background-position:57% center;background-image:linear-gradient(90deg,rgba(6,40,32,.91),rgba(6,40,32,.67)),url('assets/milieustraat-hero.webp')}.hero-inner{padding:64px 0}.hero h1{font-size:clamp(2.3rem,8.3vw,3.2rem)}.brand-logo{width:230px}}

/* Versie 1.2: eigen projectfoto’s en geactualiseerde teksten */
.service-card:nth-child(1) .service-photo{background-image:url('assets/dienst-grondstoffen.webp')}
.service-card:nth-child(2) .service-photo{background-image:url('assets/dienst-milieustraten.webp')}
.service-card:nth-child(3) .service-photo{background-image:url('assets/dienst-beleid.webp')}
.about-image{background-image:url('assets/dienst-grondstoffen.webp');background-position:center 55%}
.hero{background-image:linear-gradient(90deg,rgba(6,40,32,.90) 0%,rgba(6,40,32,.74) 33%,rgba(6,40,32,.18) 75%,rgba(6,40,32,.04) 100%),url('assets/milieustraat-hero.webp')}
.hero h1{font-size:clamp(2.35rem,3.85vw,4rem)}
@media(max-width:600px){.hero{background-image:linear-gradient(90deg,rgba(6,40,32,.9),rgba(6,40,32,.66)),url('assets/milieustraat-hero.webp')}.hero h1{font-size:clamp(2.25rem,8vw,3.05rem)}}

/* Versie 1.3 — mobiel: compactere hero, zichtbare visualisatie en nette navigatie */
@media (max-width: 600px) {
  .container { width: calc(100% - 32px); }
  .header-inner { display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; min-height:0; padding:12px 0; }
  .brand { display:block; min-width:0; flex:1 1 145px; }
  .brand-logo { width:100%; max-width:205px; height:auto; }
  .brand .custom-logo { max-width:205px; max-height:55px; }
  .menu-toggle { flex:0 0 auto; font-size:.86rem; padding:8px 10px; }
  .site-nav { flex:0 0 100%; }
  .site-nav ul { margin:0; padding:12px 0; }
  .site-nav a { display:block; padding:6px 0; }
  .hero { min-height:0; background-position:60% center; background-image:linear-gradient(90deg,rgba(6,40,32,.88) 0%,rgba(6,40,32,.70) 56%,rgba(6,40,32,.48) 100%),url('assets/milieustraat-hero.webp'); }
  .hero-inner { max-width:100%; padding:45px 0 55px; }
  .hero .eyebrow { font-size:.62rem; letter-spacing:.12em; line-height:1.5; margin-bottom:14px; }
  .hero h1 { font-size:clamp(1.75rem,7.4vw,2.35rem); line-height:1.13; letter-spacing:-.035em; margin-bottom:16px; overflow-wrap:normal; }
  .hero p { font-size:.95rem; line-height:1.55; margin:0 0 20px; }
  .button-row { flex-direction:column; align-items:stretch; gap:10px; }
  .button-row .btn { display:block; width:100%; text-align:center; padding:12px 16px; }
  .features { padding:18px 0; }
  .feature-grid { gap:8px; }
  .feature { padding:8px 0; }
  .service-grid { grid-template-columns: minmax(0,1fr); }
  .service-photo { height:180px; }
  .section { padding:55px 0; }
  .about-image { min-height:235px; }
  .cta { padding:55px 0; }
}
@media (max-width: 360px) {
  .brand-logo, .brand .custom-logo { max-width:178px; }
  .hero h1 { font-size:1.72rem; }
}