/* =========================
   SociaalNetwerkPlan vzw
   THEME: Document (warm licht)
   ========================= */

/* ---- Basis variabelen ---- */
:root{
  --bg: #F4D126;              /* geel */
  --bg-alt: #FFFFFF;          /* wit */
  --card: #FFFFFF;            /* “papier” */
  --text: #2F2F1F;
  --muted: #6A6A45;
  --border: rgba(0,0,0,.10);
  --accent: #BDBC2F;
  --accent-soft: rgba(189,188,47,.18);

  --header-offset: 88px; /* voor anchor scroll */
}

/* ---- Reset ---- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img,svg{max-width:100%;height:auto}

/* ---- Body ---- */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
}

/* ---- Links ---- */
a{color: var(--accent); text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Layout ---- */
.container{width:min(1100px, 92%); margin:0 auto}

/* Smooth scroll + offset sticky header */
html{scroll-behavior:smooth}
section[id]{scroll-margin-top: var(--header-offset);}

/* =========================
   Header / Nav
   ========================= */
.header{
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(243,243,216,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  gap:16px;
  position:relative; /* nodig voor dropdown nav */
}

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

.logo-link{
  display:flex;
  align-items:center;
}

.logo-img{
  height:44px;   /* vaste hoogte desktop */
  width:auto;
  display:block;
}
.brand__text{display:flex; flex-direction:column}
.brand__name{font-weight:800}
.brand__tagline{font-size:.92rem; color: var(--muted)}

.nav{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.nav a{color: var(--muted); font-weight:600}
.nav a:hover{color: var(--text)}

/* =========================
   Buttons
   ========================= */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:14px;
  border:1px solid rgba(189,188,47,.55);
  background: rgba(189,188,47,.18);
  color: var(--text);
  font-weight:700;
}
.btn:hover{background: rgba(189,188,47,.28); text-decoration:none}
.btn--ghost{
  background: transparent;
  border: 1px solid rgba(0,0,0,.12);
  color: var(--text);
}
.btn--ghost:hover{background: rgba(0,0,0,.03)}
.btn--small{padding:10px 14px; border-radius:12px}

/* =========================
   Hero
   ========================= */
.hero{
  position: relative;
  overflow: hidden;
  padding: 0 0 0; /* geen extra ruimte onder header */
}

.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.06) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:.08;
  pointer-events:none;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:start;
  position:relative;
  z-index:1;
  padding-top: 18px; /* klein beetje ademruimte */
}

/* Linkerkolom: reorder zonder HTML te wijzigen */
.hero__grid > div:first-child{
  display:flex;
  flex-direction:column;
}

/* H1 */
.hero h1{
  font-size: clamp(2.2rem, 3.2vw, 3.4rem);
  margin:0 0 10px;
  color:#3A3A20;
  order:1;
}

/* Quote / lead */
.lead{
  font-size:1.05rem;
  color: var(--muted);
  margin:0 0 16px;
  max-width: none;        /* 🔥 vult de ruimte (geen vroeg afkappen) */
  order:2;
}

/* Sub-tekst */
.muted{
  color:var(--muted);
}
.hero .muted{
  margin:0 0 14px;
  max-width: none;        /* 🔥 vult de ruimte */
  order:3;
}

/* Pills eerst, dan knoppen */
.hero__meta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin: 6px 0 12px;
  order:4;
}
.hero__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin: 0 0 10px;
  order:5;
}

/* Buttons: Lees meer links, Neem contact op rechts (zonder HTML edit) */
.hero__cta .btn--ghost{order:1}
.hero__cta .btn:not(.btn--ghost){order:2}

/* Pills */
.pill{
  padding:8px 12px;
  border-radius:999px;
  background: rgba(189,188,47,.10);
  border:1px solid rgba(189,188,47,.22);
  color: var(--muted);
  font-weight:600;
  font-size:.92rem;
}

/* =========================
   Sections / Typography
   ========================= */
.section{
  padding:18px 0;
  background: transparent; /* geel van body */
}
.section--alt{
  background: var(--bg-alt); /* wit */
  border:0;
}

/* 1 consistente H2 */
h2{
  font-size: 2rem;
  font-weight: 800;
  margin:0 0 14px;
  color:#3A3A20;
  position: relative;
  padding-bottom: 12px;
}
h2:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:80px;
  height:3px;
  border-radius:999px;
  background: var(--accent);
}

/* h3 / .h3 consistent */
.h3{
  font-size:1.15rem;
  margin:0 0 10px;
  font-weight:800;
  color:#3A3A20;
}

/* 🔥 “Lijn rechtsboven weg”:
   jouw "In het kort" is <h2 class="h3"> => dus underline killen */
h2.h3{ padding-bottom: 0; }
h2.h3:after{ content:none; }

/* dividers */
.divider{height:1px; background: rgba(0,0,0,.10); margin:14px 0}
.small{font-size:.92rem}

/* =========================
   Cards (papierlook)
   ========================= */
.card{
  background: var(--card);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 22px;
  padding: 20px;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Icon lines */
.iconline{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 0;
}
.icon{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background: rgba(189,188,47,.16);
  border: 1px solid rgba(189,188,47,.35);
  color: var(--text);
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.icon svg{width:18px; height:18px}

/* 🔥 Puntje 3: tekst in hero-card onderaan weg
   Dit target de laatste paragraaf in de hero card (jouw “SociaalNetwerkPlan is opgericht...” stukje) */
.hero__card p:last-of-type{
  display:none;
}

/* =========================
   Grids
   ========================= */
.grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

/* =========================
   Lists
   ========================= */
.bullets{margin:0; padding-left:18px; color: var(--muted)}
.bullets li{margin:8px 0}
.steps{margin:0; padding-left:18px; color: var(--muted)}
.steps li{margin:8px 0}
.timeline{margin:0; padding-left:18px; color: var(--muted)}
.timeline li{margin:10px 0}

/* =========================
   Blockquotes
   ========================= */
blockquote{
  margin:14px 0 18px;
  padding:14px 16px;
  border-left: 4px solid var(--accent);
  background: var(--accent-soft);
  border-radius: 16px;
  color: #3F3F25;
  font-weight:650;
}

/* =========================
   Forms
   ========================= */
.form{display:grid; gap:12px}
label{display:grid; gap:6px; font-weight:650; color: var(--text)}
input,textarea{
  width:100%;
  padding:12px 12px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.14);
  background: #fff;
  color: var(--text);
  outline:none;
}
input:focus,textarea:focus{
  border-color: rgba(189,188,47,.65);
  box-shadow: 0 0 0 4px rgba(189,188,47,.12);
}
.hp{display:none!important}

.notice{
  transition: all .25s ease;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(189,188,47,.35);
  background: rgba(189,188,47,.14);
  color: var(--text);
  font-weight:650;
}

/* =========================
   Footer
   ========================= */
.footer{
  padding:26px 0 34px;
  border-top:1px solid rgba(0,0,0,.10);
  background: var(--bg-alt);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  color: var(--muted);
}
.footer__right a{color: var(--muted)}
.footer__privacy{margin-top:16px; color: var(--muted)}
.footer__privacy h4{margin:0 0 8px; color: var(--text)}

/* =========================
   Mobile nav (hamburger)
   ========================= */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.55);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px;
}
.nav-toggle span{
  display:block;
  width:20px;
  height:2px;
  background: var(--text);
  border-radius:999px;
}

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px){
  :root{ --header-offset: 110px; }

  .hero__grid, .grid-2{grid-template-columns:1fr}

  /* Logo groter op mobiel */
  .brand__logo{ width:60px; height:60px; border-radius:18px; }
  .brand__name{ font-size:1.05rem; }
  .brand__tagline{ font-size:.85rem; }
  .header__inner{ padding:10px 0; }

  /* Hamburger aan */
  .nav-toggle{display:flex}

  /* Dropdown nav */
  .nav{
    display:none;
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 72px;
    width: min(520px, 92%);
    background: #fff;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 18px;
    padding: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,.18);
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    z-index: 999;
  }
  .nav.nav--open{display:flex}

  .nav a{
    padding: 10px 12px;
    border-radius: 14px;
    color: var(--text);
  }
  .nav a:hover{
    background: rgba(0,0,0,.04);
    text-decoration:none;
  }
  .nav .btn{ width:100%; justify-content:center; }
}
/* Lightbox */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
  cursor:pointer;
}

.lightbox-content{
  max-width:90%;
  max-height:90%;
}

.lightbox-content img{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:90vh;
  border-radius:12px;
  box-shadow:0 25px 60px rgba(0,0,0,.5);
}