@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700;800&display=swap');

:root{
  /* ===== Design tokens, NL Design System ===== */
  --color-neutral-100:#ffffff;
  --color-neutral-200:#f4f6f8;
  --color-neutral-300:#e3e8ec;
  --color-neutral-600:#5b6770;
  --color-neutral-800:#2b3338;
  --color-neutral-900:#1b2126;

  --color-brand-1:#14453a;
  --color-brand-2:#0b8c72;
  --color-brand-2-hover:#076b57;

  --color-support-green:#227a4c;
  --color-support-green-bg:#eaf6ef;

  --font-body:'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --radius-s:4px;
  --radius-m:8px;
  --space-1:8px;
  --space-2:16px;
  --space-3:24px;
  --space-4:40px;
  --space-5:64px;

  --focus-ring:3px solid #14453a;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--color-neutral-900);
  line-height:1.55; font-size:16px;
  background:linear-gradient(180deg,
    #e40303 0 16.6%, #ff8c00 16.6% 33.2%, #ffed00 33.2% 49.8%,
    #008026 49.8% 66.4%, #004dff 66.4% 83%, #750787 83% 100%);
  background-attachment:fixed;
}

/* ===== Witte container voor de leesbare inhoud ===== */
.content-container{
  max-width:840px; margin:0 auto; background:var(--color-neutral-100);
  box-shadow:0 4px 24px rgba(27,33,38,.15);
}
a{color:var(--color-brand-2); text-decoration:underline;}
a:hover{color:var(--color-brand-2-hover);}
a:focus-visible, button:focus-visible, input:focus-visible{outline:var(--focus-ring); outline-offset:2px;}

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--color-brand-1); color:#fff;
  padding:10px 16px; z-index:100; border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{left:0;}

/* ===== Pride-accentstrip, signature-element ===== */
.accent-strip{
  height:6px;
  background:linear-gradient(90deg,
    #e40303 0 16.6%, #ff8c00 16.6% 33.2%, #ffed00 33.2% 49.8%,
    #008026 49.8% 66.4%, #004dff 66.4% 83%, #750787 83% 100%);
}

/* ===== Header ===== */
header.site-header{background:var(--color-brand-1); color:#fff;}
.header-inner{
  max-width:760px; margin:0 auto; padding:var(--space-2) var(--space-3);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-2);
}
.org-name{font-weight:700; font-size:1.02rem; letter-spacing:.01em; color:#fff; text-decoration:none;}
.org-name span{display:block; font-weight:400; font-size:.78rem; color:#c9d6e2; letter-spacing:.03em;}

/* ===== Page header ===== */
.page-header{max-width:760px; margin:0 auto; padding:var(--space-4) var(--space-3) var(--space-2);}
.eyebrow{
  display:inline-block; font-size:.78rem; font-weight:600; letter-spacing:.03em;
  color:var(--color-neutral-600); margin-bottom:var(--space-1);
}
h1{font-size:1.9rem; line-height:1.22; margin:0 0 var(--space-2); color:var(--color-neutral-900); font-weight:700; max-width:36ch;}
.intro{font-size:1.1rem; color:var(--color-neutral-800); max-width:56ch; margin:0 0 var(--space-3);}

/* ===== Hero-afbeelding ===== */
.hero-figure{margin:var(--space-4) 0 0;}
.hero-figure img{
  display:block; width:100%; height:auto; border-radius:var(--radius-m);
  box-shadow:0 4px 16px rgba(27,33,38,.12);
}

/* ===== Knoppen ===== */
.btn-row{display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-2);}
.btn{
  display:inline-block; font-family:var(--font-body); font-weight:700; font-size:.98rem;
  padding:12px 22px; border-radius:var(--radius-s); text-decoration:none; border:2px solid transparent;
}
.btn-primary{background:var(--color-brand-2); color:#fff;}
.btn-primary:hover{background:var(--color-brand-2-hover); color:#fff;}
.btn-secondary{color:var(--color-brand-2); border-color:var(--color-neutral-300); background:#fff;}
.btn-secondary:hover{border-color:var(--color-brand-2); color:var(--color-brand-2);}

/* ===== Main ===== */
main{max-width:760px; margin:0 auto; padding:0 var(--space-3) var(--space-5);}
section{margin-top:var(--space-4);}
section h2{
  font-size:1.3rem; font-weight:700; color:var(--color-brand-1);
  border-bottom:1px solid var(--color-neutral-300); padding-bottom:var(--space-1); margin:0 0 var(--space-2);
}
section h3{font-size:1.02rem; font-weight:700; color:var(--color-neutral-900); margin:var(--space-3) 0 var(--space-1);}
section p{margin:0 0 var(--space-2); max-width:70ch;}
section p.small{font-size:.9rem; color:var(--color-neutral-600);}

/* ===== Notification component ===== */
.notification{
  display:flex; gap:var(--space-2); align-items:flex-start;
  background:var(--color-neutral-200); border-left:4px solid var(--color-brand-2);
  border-radius:var(--radius-s); padding:var(--space-2) var(--space-3); margin:0 0 var(--space-3);
}
.notification .icon{
  flex:0 0 auto; width:28px; height:28px; border-radius:50%; background:var(--color-brand-2); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:.95rem;
}
.notification strong{display:block; margin-bottom:4px; color:var(--color-neutral-900);}
.notification p{margin:0; color:var(--color-neutral-800); max-width:none;}
.notification.support{background:var(--color-support-green-bg); border-left-color:var(--color-support-green);}
.notification.support .icon{background:var(--color-support-green);}

/* ===== Citaatblok ===== */
blockquote{
  margin:0 0 var(--space-2); padding:var(--space-1) 0 var(--space-1) var(--space-3);
  border-left:3px solid var(--color-neutral-600); font-weight:500; font-size:1.02rem; color:var(--color-neutral-900);
}
blockquote cite{display:block; margin-top:8px; font-weight:400; font-size:.85rem; color:var(--color-neutral-600);}

/* ===== Tijdlijn ===== */
.timeline{list-style:none; margin:0 0 var(--space-2); padding:0; position:relative;}
.timeline::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px; background:var(--color-neutral-300);
}
.timeline li{position:relative; padding:0 0 var(--space-3) var(--space-3);}
.timeline li::before{
  content:""; position:absolute; left:0; top:6px; width:12px; height:12px; border-radius:50%;
  background:var(--color-brand-2); border:2px solid #fff; box-shadow:0 0 0 1px var(--color-neutral-300);
  transform:translateX(-50%);
}
.timeline .when{display:block; font-weight:700; font-size:.85rem; color:var(--color-brand-2); letter-spacing:.02em;}
.timeline p{margin:4px 0 0;}

/* ===== Voetnoten ===== */
sup.footnote a{
  text-decoration:none; font-weight:700; font-size:.72em; color:var(--color-brand-2);
  padding:0 2px; cursor:help;
}
sup.footnote a:hover{text-decoration:underline;}
ol.bronnenlijst{
  font-size:.88rem; color:var(--color-neutral-800); padding-left:1.4em; margin:0;
}
ol.bronnenlijst li{margin-bottom:8px;}
ol.bronnenlijst li:target{background:var(--color-neutral-200);}
ol.bronnenlijst a{color:var(--color-brand-2);}
.back-ref{font-size:.8em; margin-left:4px; text-decoration:none;}

/* ===== Formulier (aanmelden) ===== */
.form-field{margin-bottom:var(--space-2);}
.form-field label{display:block; font-weight:700; font-size:.92rem; margin-bottom:6px; color:var(--color-neutral-900);}
.form-field .hint{display:block; font-size:.85rem; color:var(--color-neutral-600); margin-bottom:6px;}
.form-field input[type=email]{
  width:100%; max-width:360px; padding:12px 14px; border:2px solid var(--color-neutral-600);
  border-radius:var(--radius-s); font-family:var(--font-body); font-size:1rem; background:#fff;
}
.form-field input[type=email]:focus-visible{border-color:var(--color-brand-2);}
.form-honeypot{position:absolute; left:-9999px;}
.form-message{font-size:.92rem; margin-top:var(--space-2); display:none; color:var(--color-support-green);}
.form-message.show{display:block;}
.form-message.is-error{color:#c0392b;}

/* ===== Footer ===== */
footer.site-footer{background:var(--color-brand-1); color:#dfe7ee; padding:var(--space-3) var(--space-3);}
.footer-inner{max-width:760px; margin:0 auto; font-size:.85rem;}
.footer-inner p{margin:0 0 var(--space-1);}
footer a{color:#fff;}

@media (max-width:600px){
  h1{font-size:1.55rem;}
  .header-inner{flex-direction:column; align-items:flex-start;}
  body{background:var(--color-neutral-100); background-attachment:scroll;}
  .content-container{box-shadow:none;}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}