:root{
  --bg1:#f4f7f5;
  --bg2:#eef3f1;
  --card:#ffffffcc;
  --text:#1f2937;
  --muted:#6b7280;
  --brand:#2f6f5e;
  --brand2:#5aa891;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --radius: 18px;
  --max: 1120px;
}

/* Typography (logo-like serif for the hero) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600&family=Playfair+Display:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(90,168,145,.20), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(47,111,94,.14), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

a{color:inherit}
.container{max-width:var(--max); margin:0 auto; padding: 0 18px;}
.header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(10px);
  background: rgba(244,247,245,.75);
  border-bottom: 1px solid rgba(47,111,94,.10);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0;}
.brand{
  display:flex; gap:10px; align-items:center; text-decoration:none;
}
.brand-logo{
  height:34px;
  width:auto;
  display:block;
  border-radius:10px;
  box-shadow: var(--shadow);
}
.brand-text{font-weight:750; letter-spacing:.2px;}
.nav a{font-size:14px; color:var(--muted); text-decoration:none; margin-left:14px;}
.nav a:hover{color:var(--text); text-decoration:underline;}

.hero{padding: 54px 0 26px;}
.hero-grid{display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:stretch;}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr} }
.hero-card{
  background: var(--card);
  border: 1px solid rgba(47,111,94,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 26px;
}
.kicker{color:var(--brand); font-weight:700; letter-spacing:.14em; font-size:12px; text-transform:uppercase;}
h1{margin:10px 0 8px; font-size:42px; line-height:1.1;}
@media (max-width: 520px){ h1{font-size:34px} }
.lead{margin:0; color:var(--muted); font-size:16px; line-height:1.6;}
.searchbar{display:flex; gap:10px; margin-top:18px;}
.searchbar input{
  flex:1; padding:12px 14px; border-radius: 14px;
  border: 1px solid rgba(31,41,55,.12);
  outline:none; background:white;
}
.btn{
  border:0; cursor:pointer; padding:12px 14px;
  border-radius: 14px; font-weight:650;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:white; box-shadow: var(--shadow);
}
.btn:active{transform: translateY(1px);}
.small{font-size:13px; color:var(--muted); margin-top:10px;}
.pills{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.pill{
  font-size:12px; color:rgba(31,41,55,.8);
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(47,111,94,.12);
  padding:6px 10px; border-radius: 999px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
}
.pill:hover{border-color: rgba(47,111,94,.22); transform: translateY(-1px);}
.pill:active{transform: translateY(0px);}

.section{padding: 8px 0 56px;}
.grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 980px){ .grid{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 620px){ .grid{grid-template-columns: 1fr;} }

.card{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(47,111,94,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  min-height: 150px;
}
.card .card-body{padding:16px 16px 14px;}
.card h3{margin:0 0 6px; font-size:16px;}
.meta{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.count{font-size:12px; color:var(--muted);}
.card a{ text-decoration:none; }
.card:hover{border-color: rgba(47,111,94,.22); transform: translateY(-1px);}
.card:active{transform: translateY(0px);}
.card .cta{margin-top:10px; font-size:13px; color:var(--brand); font-weight:650;}

.breadcrumbs{padding:18px 0 0;}
.breadcrumbs a{color:var(--muted); text-decoration:none; font-size:13px;}
.breadcrumbs a:hover{text-decoration:underline;}
.page-title{margin:10px 0 18px; font-size:30px;}
.block-sub{color:var(--muted); margin:0 0 16px; line-height:1.6;}

.list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.item{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(47,111,94,.10);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
@media (max-width: 820px){ .item{grid-template-columns: 1fr;} }
.thumb{
  width:100%;
  height:100%;
  min-height: 130px;
  background: #e9efec;
}
.thumb img{
  width:100%; height:100%;
  object-fit: cover;
  display:block;
  filter: saturate(1.05) contrast(1.02);
}
.item-body{padding:16px 16px 14px;}
.item-title{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.item-title h3{margin:0; font-size:18px;}
.item-host{font-size:12px; color:var(--muted);}
.item p{margin:10px 0 0; color:var(--muted); line-height:1.6;}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px;}
.linkbtn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 12px; border-radius: 12px;
  text-decoration:none; font-weight:650; font-size:14px;
  border: 1px solid rgba(47,111,94,.18);
  background: rgba(255,255,255,.9);
}
.linkbtn.primary{
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color:white; border:0;
}
.footer{padding:26px 0 40px; color:var(--muted); font-size:13px;}
.footer a{color:var(--muted);}
.searchbar--compact{margin-top:12px;}
.searchbar--compact input{padding:10px 12px; font-size:14px;}

/* --- Updated header + hero (like design reference) --- */
.nav-toggle,
.menu-btn{
  width:48px; height:44px;
  border:0;
  background:transparent;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  gap:7px;
  padding:8px;
  border-radius:12px;
  position:relative;
  z-index:5;
}
.nav-toggle:hover,
.menu-btn:hover{background: rgba(0,0,0,.04);}

.nav-toggle .bar,
.menu-btn span{
  display:block;
  width:34px;
  height:4px;
  background:#111;
  border-radius:999px;
}
.nav-toggle .bar:nth-child(2),
.menu-btn span:nth-child(2){ width:28px; }
.nav-toggle .bar:nth-child(3),
.menu-btn span:nth-child(3){ width:34px; }

/* Off-canvas menu */
.menu-overlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.28);
  opacity:0;
  pointer-events:none;
  transition: opacity .18s ease;
  z-index:40;
}
.menu-panel{
  position:fixed;
  top:0; right:0;
  height:100vh;
  width:min(360px, 88vw);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-left: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  transform: translate3d(102%,0,0);
  transition: transform .22s ease;
  z-index:45;
  padding: 18px;
  overflow-y:auto;
  will-change: transform;
}

.menu-panel h3{margin:6px 0 14px; font-size:14px; letter-spacing:.08em; text-transform:uppercase; color: rgba(17,17,17,.65)}
.menu-panel a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 14px 12px;
  border-radius: 14px;
  text-decoration:none;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.80);
  margin-bottom: 10px;
  color:#111;
  font-weight:650;
}
.menu-panel a:hover{transform: translateY(-1px); border-color: rgba(0,0,0,.14)}
.menu-panel .close-row{display:flex; justify-content:flex-end; margin-bottom: 8px;}
.menu-panel .menu-close{
  border:0;
  background: rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 10px 12px;
  cursor:pointer;
}
body.menu-open{overflow:hidden;}
body.menu-open .menu-overlay{opacity:1; pointer-events:auto;}
body.menu-open .menu-panel{transform: translate3d(0,0,0);}

.hero.hero--split{padding: 48px 0 34px;}
.hero-split{
  display:grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 36px;
  align-items:center;
}
@media (max-width: 920px){
  .hero-split{grid-template-columns:1fr;}
}

.hero-left h1{
  margin:0;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.hero-underline{
  width: 86px;
  height: 4px;
  background: #111;
  margin: 18px 0 22px;
}
.hero-actions{display:flex; flex-direction:column; gap:14px; max-width: 360px;}

.btn.btn--soft{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  padding: 14px 18px;
  border-radius: 999px;
  background: rgba(223, 212, 165, .9);
  color: #111;
  border: 1px solid rgba(31,41,55,.10);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.btn.btn--soft:hover{transform: translateY(-1px);}
.btn.btn--soft:active{transform: translateY(0px);}

.hero-right{
  min-height: 460px;
  border-radius: 34px;
  overflow:hidden;
  position:relative;
  box-shadow: var(--shadow);
  border: 1px solid rgba(31,41,55,.06);
  background: #fff;
}
.hero-right img{
  width:100%;
  height:100%;
  min-height: 460px;
  object-fit: cover;
  object-position: center;
  display:block;
  filter: saturate(.95) contrast(.95);
}
/* soft fade like the reference: a white wash + subtle gradient */
.hero-right::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.58);
  pointer-events:none;
}
.hero-right::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(90deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.70) 38%,
    rgba(255,255,255,.30) 78%,
    rgba(255,255,255,.18) 100%
  );
  pointer-events:none;
}
@media (max-width: 920px){
  .hero-right{min-height: 320px;}
  .hero-right img{min-height:320px;}
  .hero-actions{max-width:none;}
}

/* --- Fullscreen hero (like attached example) --- */
.hero.hero--full{
  padding: 0;
  min-height: calc(100vh - 64px);
  display:flex;
  align-items:center;
  position:relative;
  /*
    Safe fallback so the hero background always loads.
    site.css lives in /css, so the fallback path uses ../assets.
  */
  /*
    Layered background (overlay + image) is more reliable than
    pseudo-elements across different hosting setups.
  */
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,.08) 35%,
      rgba(255,255,255,.20) 70%,
      rgba(255,255,255,.45) 100%),
    url('../assets/hero-bg.png');
  /* Modern formats (WebP) with PNG fallback */
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,.08) 35%,
      rgba(255,255,255,.20) 70%,
      rgba(255,255,255,.45) 100%),
    -webkit-image-set(url('../assets/hero-bg.webp') 1x, url('../assets/hero-bg.png') 1x);
  background-image:
    linear-gradient(180deg,
      rgba(255,255,255,.02) 0%,
      rgba(255,255,255,.08) 35%,
      rgba(255,255,255,.20) 70%,
      rgba(255,255,255,.45) 100%),
    image-set(url('../assets/hero-bg.webp') type('image/webp'), url('../assets/hero-bg.png') type('image/png'));
  /* NOTE: We intentionally do not use a CSS variable for the image URL,
     because relative URLs inside custom properties can resolve unexpectedly
     and break the background on some setups. */
  background-size: cover;
  background-position: center;
}
.hero.hero--full::before,
.hero.hero--full::after{ content:none; }
.hero-full{position:relative; z-index:1; width:100%;}
.hero-content{
  text-align:center;
  padding: 64px 0 46px;
  color:#111;
}
.hero-title{
  margin:0;
  font-family: 'Playfair Display', ui-serif, Georgia, serif;
  font-weight: 600;
  letter-spacing: .01em;
  font-size: clamp(34px, 5.8vw, 72px);
  line-height: 1.06;
  text-shadow: 0 10px 30px rgba(255,255,255,.75);
}
.hero-lead{
  margin: 18px auto 0;
  max-width: 720px;
  font-family: 'Cormorant Garamond', ui-serif, Georgia, serif;
  font-size: 22px;
  line-height: 1.6;
  color: rgba(17,17,17,.74);
}
.hero-actions--center{
  justify-content:center;
  align-items:center;
  flex-direction:row;
  gap: 14px;
  max-width:none;
  margin-top: 22px;
}
@media (max-width: 560px){
  .hero-actions--center{flex-direction:column; width:100%;}
}

/* Button variants used on the fullscreen hero */
.btn{ text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.btn.btn--primary{
  background: #4aa6d9;
  color:#fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 6px;
  padding: 12px 18px;
  min-width: 210px;
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
.btn.btn--ghost{
  background: rgba(255,255,255,.50);
  color:#111;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 6px;
  padding: 12px 18px;
  min-width: 210px;
  box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.btn.btn--primary:hover,
.btn.btn--ghost:hover{transform: translateY(-1px);}
.btn.btn--primary:active,
.btn.btn--ghost:active{transform: translateY(0px);}

/* News / articles */
.hero--news .hero-content{padding: 52px 0 30px;}
.news-layout{display:grid; gap:16px; align-items:start;}
@media (min-width: 920px){
  .news-layout{grid-template-columns: 340px 1fr; gap:18px;}
  .news-aside{position: sticky; top: 86px;}
}
.news-aside{padding:18px;}
.toc{margin:10px 0 0; padding-left: 18px;}
.toc li{margin:10px 0;}
.toc a{color: var(--text); text-decoration:none;}
.toc a:hover{text-decoration:underline;}
.toc-note{margin: 12px 0 0; color: var(--muted); font-size: 14px;}

.news-grid{display:grid; gap:14px; margin-bottom: 16px;}
@media (min-width: 720px){
  .news-grid{grid-template-columns: repeat(2, minmax(0,1fr));}
}
.news-teaser{display:block; padding:18px; text-decoration:none;}
.news-teaser:hover{transform: translateY(-1px); box-shadow: 0 14px 34px rgba(0,0,0,.10);}
.news-meta{display:flex; gap:10px; align-items:center; color: var(--muted); font-size: 13px;}
.news-title{margin:10px 0 8px; font-size: 18px; line-height: 1.25;}
.news-excerpt{margin:0; color: var(--muted); line-height: 1.6;}
.news-cta{display:inline-flex; gap:8px; margin-top:12px; font-weight:600; color: var(--brand);}

.posts{display:grid; gap:14px;}
.post{padding:22px;}
@media (min-width: 720px){ .post{padding:28px;} }
.post-header{padding-bottom: 10px; border-bottom: 1px solid rgba(47,111,94,.10); margin-bottom: 14px;}
.post-meta{display:flex; gap:10px; align-items:center; color: var(--muted); font-size: 13px;}
.dot{opacity:.55}
.post-title{margin:10px 0 6px; font-size: clamp(22px, 2.4vw, 30px); line-height:1.2;}
.post-body{max-width: 72ch;}
.post-body p{margin: 0 0 14px; color: var(--text); line-height: 1.8; font-size: 16px;}
.post-body p:last-child{margin-bottom: 0;}
.post-footer{margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(47,111,94,.10);}
.backtop{color: var(--muted); text-decoration:none; font-size: 14px;}
.backtop:hover{color: var(--text); text-decoration:underline;}


/* Favicons naast retraitelocatie-titels */
.locatie-titel{display:inline-flex;align-items:center;gap:8px;}
.locatie-favicon{width:16px;height:16px;}


/* SEO intro teksten */
.seo-tekst{max-width:800px;margin:0 auto 2rem;line-height:1.6;}