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

@view-transition {
  navigation: auto;
}

::view-transition-old(root){
  animation: iqc-slide-out .45s ease both;
}
::view-transition-new(root){
  animation: iqc-slide-in .45s ease both;
}
@keyframes iqc-slide-out{
  from{ transform:translateX(0); opacity:1; }
  to{ transform:translateX(-50px); opacity:0; }
}
@keyframes iqc-slide-in{
  from{ transform:translateX(50px); opacity:0; }
  to{ transform:translateX(0); opacity:1; }
}

:root{
  --color-pink:#ff4e74;
  --color-bg:#fff2f4;
  --color-text:#374151;
  --color-onderwijs:#95E8A3;
  --color-ouders:#89C5FD;
  --color-zorg:#FDDC5C;
  --color-bestuur:#ff4e74;
  --font-main:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
}

html{ scroll-behavior:smooth; overflow-x:hidden; }

body{
  background:linear-gradient(180deg, #fff2f4 0%, #fffaf9 45%, #fff2f4 100%);
  font-family:var(--font-main);
  color:var(--color-text);
  margin:0;
  overflow-x:hidden;
}

.wrap-max{ max-width:1280px; margin:0 auto; padding:0 1.5rem; }

/* Section titles, shared */
.blocks-title{ text-align:center; max-width:640px; margin:0 auto 3rem; position:relative; }
.blocks-title h2{ font-size:2.2rem; font-weight:800; letter-spacing:-.01em; }
.blocks-title .underline{ width:70px; height:4px; background:linear-gradient(90deg, var(--color-pink), #ff90a8); margin:1.1rem auto 0; border-radius:999px; box-shadow:0 0 16px rgba(255,78,116,.5); }

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(255,242,244,.75);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,78,116,.2);
  padding:.6rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.site-header .logo img, .site-header .custom-logo{ height:64px; width:auto; transition:transform .25s; }
.site-header .logo:hover img, .site-header .custom-logo-link:hover .custom-logo{ transform:scale(1.04); }
.header-nav ul{ list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.header-nav li{ position:relative; }
.header-nav li ul{ display:none; position:absolute; top:100%; right:0; background:#fff; border-radius:12px; box-shadow:0 8px 24px rgba(0,0,0,.12); padding:.5rem; flex-direction:column; gap:.25rem; min-width:160px; }
.header-nav li:hover > ul{ display:flex; }
.header-nav a{ color:var(--color-text); text-decoration:none; font-size:.85rem; font-weight:600; white-space:nowrap; }
.header-nav a:hover{ color:var(--color-pink); }
.site-header form.search-form{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:100%; max-width:480px; margin:0;
}
.site-header form.search-form input{
  width:100%; padding:.7rem 2.5rem; border-radius:14px; border:1px solid rgba(255,78,116,.4);
  background:rgba(255,255,255,.9); font-family:var(--font-main); font-size:.9rem;
  transition:box-shadow .2s, border-color .2s;
}
.site-header form.search-form input:focus{ outline:none; border-color:var(--color-pink); background:#fff; box-shadow:0 0 0 4px rgba(255,78,116,.12); }

/* Hamburger + uitschuifmenu vanaf rechts */
.menu-toggle{
  display:flex; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px;
  background:none; border:none; cursor:pointer; padding:0; flex-shrink:0; position:relative; z-index:61;
}
.menu-toggle span{ display:block; width:24px; height:2px; background:var(--color-text); border-radius:2px; transition:transform .25s ease, opacity .25s ease; margin:0 auto; }
.menu-toggle.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2){ opacity:0; }
.menu-toggle.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.header-nav{
  position:fixed; top:0; right:0; height:100vh; width:320px; max-width:85vw;
  background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15);
  padding:6rem 2rem 2rem; transform:translateX(100%); transition:transform .35s ease;
  z-index:60; overflow-y:auto;
}
.header-nav.is-open{ transform:translateX(0); }
.header-nav ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.header-nav li{ width:100%; }
.header-nav li ul{ position:static; box-shadow:none; padding-left:1rem; margin-top:.25rem; }
.header-nav a{ display:block; padding:.7rem 0; color:var(--color-text); text-decoration:none; font-size:1.05rem; font-weight:600; border-bottom:1px solid rgba(255,78,116,.1); }
.header-nav a:hover{ color:var(--color-pink); }

.nav-overlay{
  position:fixed; inset:0; background:rgba(30,20,25,.4); opacity:0; pointer-events:none;
  transition:opacity .3s ease; z-index:39;
}
.nav-overlay.is-open{ opacity:1; pointer-events:auto; }

@media(max-width:600px){
  .site-header{ flex-wrap:wrap; }
  .site-header .logo{ order:1; }
  .menu-toggle{ order:2; margin-left:auto; }
  .site-header form.search-form{ position:static; transform:none; order:3; width:100%; max-width:none; margin-top:.7rem; }
}

/* Hero */
.hero{
  position:relative; min-height:560px; height:80vh; max-height:760px; display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:2rem 1.5rem; text-align:center;
}
.hero img.hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.03); }
.hero .overlay{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.4) 70%, rgba(0,0,0,.55) 100%); z-index:1; }
.hero-content{ position:relative; z-index:2; color:#fff2f4; max-width:640px; margin:0 auto; }
.hero-content h1{ font-size:2.5rem; font-weight:800; margin-bottom:1rem; text-shadow:0 4px 18px rgba(0,0,0,.4); }
.hero-content h1 span{ display:block; font-size:3rem; font-weight:900; font-style:normal; letter-spacing:.02em; margin-top:.2rem; background:linear-gradient(90deg, #ffffff, #ffd9e2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-content p{ font-size:1.1rem; margin:.3rem 0; text-shadow:0 2px 8px rgba(0,0,0,.3); }
.hero-actions{ display:flex; flex-direction:column; align-items:center; gap:.85rem; margin-top:1.75rem; }
.scroll-indicator{
  position:absolute; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.15em;
  color:#fff; text-decoration:none; animation:bounce 2s infinite; opacity:.9;
}
@keyframes bounce{
  0%, 100% { transform:translateX(-50%) translateY(0); }
  50% { transform:translateX(-50%) translateY(-8px); }
}
.btn-primary{
  display:inline-block; background:linear-gradient(135deg, #ff4e74, #ff7d99); color:#fff; font-weight:700; font-size:.85rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.85rem 1.75rem; border-radius:18px;
  text-decoration:none; border:none; cursor:pointer; box-shadow:0 10px 24px rgba(255,78,116,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(255,78,116,.45); color:#fff; }

/* Blocks */
.blocks-section{ padding:6rem 1.5rem; position:relative; overflow:hidden; }
.blocks-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; max-width:1024px; margin:0 auto; position:relative; z-index:1; }
@media(min-width:768px){ .blocks-grid{ grid-template-columns:repeat(3,1fr); } }
.block-card{
  border-radius:28px; padding:2.25rem; min-height:320px; display:flex; flex-direction:column;
  justify-content:flex-start; text-decoration:none; box-shadow:0 10px 26px rgba(0,0,0,.09);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; position:relative; overflow:hidden;
}
.block-card::after{
  content:''; position:absolute; top:-30%; right:-20%; width:60%; height:60%; border-radius:50%;
  background:rgba(255,255,255,.25); filter:blur(20px); pointer-events:none;
}
.block-card:hover{ transform:translateY(-8px) scale(1.015); box-shadow:0 20px 40px rgba(0,0,0,.18); }
.block-icon{
  width:68px; height:68px; border-radius:20px; background:rgba(255,255,255,.3); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center; margin:0 auto 1.1rem; position:relative; z-index:1;
  transition:transform .3s ease; flex-shrink:0;
}
.block-card:hover .block-icon{ transform:scale(1.1) rotate(-4deg); }
.block-card h3{ text-align:center; text-transform:uppercase; font-weight:800; font-size:1.25rem; letter-spacing:.02em; position:relative; z-index:1; margin:0 0 1.4rem; }
.block-card p{ text-align:center; font-size:.92rem; opacity:.9; position:relative; z-index:1; line-height:1.5; margin:0; }
.block-bar{
  max-width:1024px; margin:1.5rem auto 0; border-radius:28px; padding:1.6rem 2rem; position:relative;
  text-decoration:none; display:flex; align-items:center; justify-content:center; gap:1.5rem;
  background:linear-gradient(135deg, #ff4e74, #ff7591); min-height:130px; z-index:1;
  box-shadow:0 16px 34px rgba(255,78,116,.35); transition:transform .3s ease, box-shadow .3s ease;
}
.block-bar:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(255,78,116,.45); }
.bar-icon{
  width:60px; height:60px; border-radius:18px; background:rgba(255,255,255,.25);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.bar-arrow{
  width:44px; height:44px; border-radius:14px; background:rgba(0,0,0,.1);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease;
}
.block-bar:hover .bar-arrow{ transform:translate(3px,-3px); }
.block-bar span.bar-text{
  flex:1; text-align:center; color:#fff; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; font-size:clamp(1rem, 2vw, 1.4rem);
  display:flex; align-items:center; justify-content:center; gap:.9rem; flex-wrap:wrap;
}
.block-bar .dot{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.6); display:inline-block; }

/* Blog */
.blog-section{ padding:5rem 1.5rem; position:relative; }
.blog-filters{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin-bottom:2.5rem; }
.blog-filters a{
  padding:.5rem 1.15rem; border-radius:999px; font-size:.8rem; font-weight:600; text-decoration:none;
  border:1px solid rgba(255,78,116,.3); color:var(--color-text); transition:all .2s ease; background:#fff;
  display:inline-flex; align-items:center;
}
.pill-dot{ width:8px; height:8px; border-radius:50%; background:var(--pill-color, var(--color-pink)); display:inline-block; margin-right:.5rem; }
.blog-filters a.active, .blog-filters a:hover{
  background:var(--pill-color, var(--color-pink)); color:#fff; border-color:var(--pill-color, var(--color-pink));
  transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.15);
}
.blog-filters a.active .pill-dot, .blog-filters a:hover .pill-dot{ background:#fff; }
.blog-grid{ display:grid; grid-template-columns:1fr; gap:1.75rem; max-width:1200px; margin:0 auto; }
@media(min-width:768px){ .blog-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
.blog-card{
  background:#fff; border-radius:22px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,.07);
  text-decoration:none; color:var(--color-text); display:block; position:relative;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
}
.blog-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg, var(--card-color, var(--color-pink)), rgba(255,255,255,.6));
  z-index:2;
}
.blog-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px rgba(0,0,0,.14); }
.blog-card .blog-card-thumb{ aspect-ratio:16/9; width:100%; object-fit:cover; display:block; background:var(--card-color, var(--color-pink)); transition:transform .4s ease; }
.blog-card:hover .blog-card-thumb{ transform:scale(1.06); }
.blog-card .blog-card-thumb-placeholder{ aspect-ratio:16/9; width:100%; background:linear-gradient(135deg, var(--card-color, var(--color-pink)), rgba(255,255,255,.4)); transition:transform .4s ease; }
.blog-card:hover .blog-card-thumb-placeholder{ transform:scale(1.06); }
.blog-card .blog-card-body{ padding:1.4rem; }
.single-featured-image{ width:100%; border-radius:20px; object-fit:cover; max-height:420px; display:block; box-shadow:0 12px 30px rgba(0,0,0,.12); }
.blog-card .blog-meta{ font-size:.7rem; text-transform:uppercase; letter-spacing:.05em; color:var(--color-pink); font-weight:700; margin-bottom:.5rem; }
.blog-card h3{ font-size:1.1rem; font-weight:700; margin:.2rem 0 .5rem; line-height:1.3; }
.blog-card p{ font-size:.87rem; color:#555; line-height:1.5; }

/* Who we are */
.team-section{ padding:5rem 1.5rem; background:#fff; border-top:1px solid rgba(255,78,116,.1); position:relative; overflow:hidden; }
.team-section::before{
  content:''; position:absolute; top:20%; right:-120px; width:320px; height:320px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,78,116,.08), transparent 70%); z-index:0;
}
.team-header{ text-align:center; max-width:640px; margin:0 auto 3rem; position:relative; z-index:1; }
.team-header .eyebrow{ font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--color-pink); background:rgba(255,78,116,.1); padding:.4rem 1rem; border-radius:999px; }
.team-header h2{ font-size:2.2rem; font-weight:800; margin-top:1rem; }
.team-grid{ display:grid; grid-template-columns:1fr; gap:3rem; max-width:1200px; margin:0 auto; align-items:center; position:relative; z-index:1; }
@media(min-width:1024px){ .team-grid{ grid-template-columns:7fr 5fr; } }
.team-cards{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.team-card{ background:rgba(255,242,244,.5); border:1px solid rgba(255,78,116,.15); border-radius:20px; overflow:hidden; transition:transform .3s ease, box-shadow .3s ease; }
.team-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(0,0,0,.1); }
.team-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; transition:transform .4s ease; }
.team-card:hover img{ transform:scale(1.06); }
.team-card .team-card-body{ padding:1.2rem; }
.team-card h4{ margin:0; font-size:1.05rem; font-weight:700; }
.team-card .role{ font-size:.7rem; font-weight:700; text-transform:uppercase; color:var(--color-pink); margin-top:.25rem; }
.mission-box{ background:linear-gradient(160deg, var(--color-bg), #fff); border:1px solid rgba(255,78,116,.2); padding:2.25rem; border-radius:26px; box-shadow:0 10px 24px rgba(255,78,116,.08); }
.mission-box h4{ font-size:1.25rem; font-weight:800; margin-bottom:1rem; }

/* Footer / Colofon */
.site-footer{ padding:5rem 1.5rem; border-top:1px solid rgba(255,78,116,.2); background:linear-gradient(180deg, #fff, var(--color-bg)); }
.footer-grid{ display:grid; grid-template-columns:1fr; gap:2.5rem; max-width:1200px; margin:0 auto; }
@media(min-width:768px){ .footer-grid{ grid-template-columns:repeat(3,1fr); } }
.footer-col h4{ display:flex; align-items:center; gap:.5rem; text-transform:uppercase; font-weight:800; border-bottom:1px solid rgba(255,78,116,.3); padding-bottom:.6rem; margin-bottom:1.1rem; letter-spacing:.03em; }
.footer-col ul{ list-style:none; margin:0; padding:0; font-size:.85rem; }
.footer-col li{ margin-bottom:.9rem; }
.footer-col .label{ display:block; font-size:.65rem; font-weight:700; text-transform:uppercase; color:var(--color-pink); letter-spacing:.05em; }
.footer-col a{ color:var(--color-text); transition:color .2s ease; }
.footer-col a:hover{ color:var(--color-pink); }
.contact-form input, .contact-form textarea{
  width:100%; box-sizing:border-box; padding:.7rem .9rem; margin-bottom:.65rem; border-radius:14px;
  border:1px solid rgba(255,78,116,.25); font-family:var(--font-main); font-size:.8rem; background:rgba(255,255,255,.7);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{ outline:none; border-color:var(--color-pink); box-shadow:0 0 0 4px rgba(255,78,116,.1); background:#fff; }
.contact-form button{
  width:100%; padding:.8rem; background:linear-gradient(135deg, #ff4e74, #ff7d99); color:#fff; border:none; border-radius:14px;
  font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; cursor:pointer;
  box-shadow:0 8px 20px rgba(255,78,116,.3); transition:transform .2s ease, box-shadow .2s ease;
}
.contact-form button:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(255,78,116,.4); }
.form-notice{ padding:.6rem .8rem; border-radius:12px; font-size:.75rem; margin-bottom:.6rem; }
.form-notice.success{ background:rgba(16,185,129,.15); color:#065f46; }

/* Events / Agenda */
.events-section{ padding:4rem 1.5rem 1rem; }
.events-grid{ display:grid; grid-template-columns:1fr; gap:1.25rem; max-width:900px; margin:0 auto; }
.event-card{
  background:#fff; border-radius:18px; padding:1.1rem 1.4rem; display:flex; gap:1.2rem; align-items:flex-start;
  box-shadow:0 6px 16px rgba(0,0,0,.06); transition:transform .25s ease, box-shadow .25s ease; cursor:pointer;
}
.event-card:hover{ transform:translateY(-3px); box-shadow:0 12px 24px rgba(0,0,0,.1); }
.event-card:focus-visible{ outline:2px solid var(--color-pink); outline-offset:2px; }
.event-date-badge{
  flex-shrink:0; width:60px; height:60px; border-radius:14px; background:linear-gradient(135deg, var(--color-pink), #ff7d99);
  color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1;
}
.event-date-badge .day{ font-size:1.3rem; font-weight:800; }
.event-date-badge .month{ font-size:.65rem; text-transform:uppercase; letter-spacing:.05em; margin-top:.1rem; }
.event-body h3{ font-size:1.05rem; font-weight:700; margin:0 0 .3rem; }
.event-location{ display:flex; align-items:center; gap:.35rem; font-size:.8rem; color:var(--color-pink); font-weight:600; margin:0 0 .4rem; }
.event-body p{ font-size:.85rem; color:#555; margin:0; line-height:1.5; }

.event-modal-overlay{
  position:fixed; inset:0; z-index:100; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:1.5rem;
}
.event-modal-overlay.is-open{ display:flex; }
.event-modal{
  background:#fff; border-radius:18px; max-width:600px; width:100%; max-height:85vh; overflow-y:auto; padding:2rem;
  position:relative; box-shadow:0 20px 50px rgba(0,0,0,.3);
}
.event-modal-close{
  position:absolute; top:.9rem; right:.9rem; width:32px; height:32px; border-radius:50%; border:none; background:#f2f2f2;
  color:#333; font-size:1.4rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.event-modal-close:hover{ background:var(--color-pink); color:#fff; }
.event-full-title{ font-size:1.4rem; font-weight:800; margin:0 0 .5rem; padding-right:2rem; }
.event-full-meta{ display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem; color:var(--color-pink); font-weight:600; margin-bottom:1rem; }
.event-full-body{ font-size:.95rem; line-height:1.7; color:var(--color-text); }
.event-full-body p{ margin:0 0 1rem; }

/* Subject template */
.subject-hero{ position:relative; padding:5.5rem 1.5rem 3.5rem; text-align:center; overflow:hidden; }
.subject-hero-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.22; z-index:0; }
.subject-hero-inner{ position:relative; z-index:1; max-width:720px; margin:0 auto; }
.subject-hero h1{ font-size:2.5rem; font-weight:800; margin-bottom:1.1rem; }
.subject-hero p{ margin:.5rem 0; line-height:1.65; font-size:1.02rem; }
.subject-topics{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center; max-width:900px; margin:2.2rem auto 0; }
.subject-topics span{
  background:#fff; border-radius:999px; padding:.55rem 1.2rem; font-size:.85rem; font-weight:600;
  box-shadow:0 4px 12px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease;
}
.subject-topics span:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(0,0,0,.1); }