/*
Theme Name: Regina Pacis 2
Theme URI: https://rp2.be
Author: School Regina Pacis 2
Description: Het thema van Regina Pacis 2, kleuter- en lagere school in Hove. Warm, speels en helder, met nieuwsberichten die de secretaris zelf kan plaatsen via de gewone WordPress-editor. Alle kleuren, teksten en contactgegevens zijn aanpasbaar zonder code.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: regina-pacis-2
Tags: blog, news, education, custom-menu, custom-logo, featured-images, translation-ready, block-styles, wide-blocks
*/

/* ==========================================================================
   Inhoudsopgave
   01. Kleuren en vorm          10. Afdelingskaarten
   02. Tekst                    11. Dagverloop
   03. Indeling                 12. Fotogalerij
   04. Knoppen en kaarten       13. Nieuws
   05. Koptekst                 14. Team en contact
   06. Hero                     15. Veelgestelde vragen
   07. Slingertext              16. Afsluitende oproep
   08. Drie pijlers             17. Pagina-kop
   09. Uitgelicht nieuws        18. Voettekst
                                19. WordPress- en redacteurstijlen
                                20. Responsive
   ========================================================================== */

/* =========================================================
   Regina Pacis 2 — design system
   Palet afgeleid van het officiële logo (paars/oranje)
   en de "drie pijlers"-grafiek (groen).
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  /* kleuren uit het logo */
  --purple: #4b0069;
  --purple-700: #3c0054;
  --purple-600: #6a1a8f;
  --purple-300: #b98fd6;
  --purple-100: #ece0f4;
  --purple-050: #f7f1fb;

  --orange: #f19816;
  --orange-600: #d17c07;
  --orange-200: #ffd79a;
  --orange-050: #fff5e4;

  --green: #87bf58;
  --green-600: #5f9633;
  --green-100: #e4f2d6;
  --green-050: #f2f9ec;

  --peach: #fdece4;
  --cream: #fffbf5;
  --ink: #2f2b2c;
  --ink-70: #5a5356;
  --ink-50: #857c80;
  --line: #ece4e9;
  --white: #fff;

  /* typografie */
  --font-display: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* vorm */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(75, 0, 105, 0.06);
  --shadow-md: 0 10px 30px -12px rgba(75, 0, 105, 0.22);
  --shadow-lg: 0 26px 60px -24px rgba(75, 0, 105, 0.34);

  --container: 1180px;
  --gutter: 24px;
  --header-h: 84px;
}

/* ---------- 2. Reset & basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  overflow-x: hidden;
}

img { max-width: 100%; display: block; height: auto; }
svg { display: block; }
a { color: var(--purple-600); }
a[href^="tel:"] { white-space: nowrap; }
a[href^="mailto:"] { overflow-wrap: anywhere; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--purple);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--orange-200); color: var(--purple); }

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 999;
  background: var(--purple);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 700;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus { top: 14px; }

/* ---------- 3. Layout ---------- */
.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--cream { background: var(--cream); }
.section--green { background: var(--green-050); }
.section--purple { background: var(--purple-050); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 52px); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head h2 { font-size: clamp(1.85rem, 3.6vw, 2.7rem); }
.section-head p { font-size: 1.1rem; color: var(--ink-70); }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- 4. Kleine onderdelen ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--purple-600);
  background: var(--purple-050);
  border: 1px solid var(--purple-100);
  padding: 7px 16px;
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.eyebrow--orange { color: var(--orange-600); background: var(--orange-050); border-color: var(--orange-200); }
.eyebrow--green  { color: var(--green-600); background: var(--green-050); border-color: var(--green-100); }

.text-accent { color: var(--orange-600); }
.text-purple { color: var(--purple); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 500;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--purple); color: #fff; box-shadow: var(--shadow-md); }
.btn--primary:hover { background: var(--purple-600); box-shadow: var(--shadow-lg); }

.btn--orange { background: var(--orange); color: var(--purple-700); box-shadow: 0 10px 26px -12px rgba(241, 152, 22, 0.9); }
.btn--orange:hover { background: var(--orange-600); color: #fff; }

.btn--ghost { background: transparent; color: var(--purple); border-color: var(--purple-300); }
.btn--ghost:hover { background: var(--purple); color: #fff; border-color: var(--purple); }

.btn--white { background: #fff; color: var(--purple); box-shadow: var(--shadow-md); }
.btn--white:hover { box-shadow: var(--shadow-lg); }

.btn--sm { padding: 10px 20px; font-size: 0.92rem; }

.card {
  background: var(--white);
  border-radius: var(--r-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--line);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card-hover:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

.card h3 { font-size: 1.32rem; }
.card p { color: var(--ink-70); }

/* ---------- 5. Header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.header.is-stuck {
  box-shadow: 0 6px 24px -18px rgba(75, 0, 105, 0.55);
  border-bottom-color: var(--line);
}

.header__bar {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: var(--header-h);
}

.logo {
  display: block;
  flex-shrink: 0;
  width: 146px;
  line-height: 0;
}
.logo img { width: 100%; height: auto; }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__link {
  display: block;
  padding: 10px 14px;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease;
}
.nav__link:hover { background: var(--purple-050); color: var(--purple); }
.nav__link[aria-current="page"] { color: var(--purple); background: var(--purple-050); }
.nav__cta .btn[aria-current="page"] {
  background: var(--purple-600);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 2px var(--purple);
}

.header__cta { margin-left: 6px; }

/* de knop in het mobiel-menu is alleen nodig onder 960px */
.nav__cta { display: none; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 48px;
  height: 48px;
  border: 2px solid var(--purple-100);
  background: #fff;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  display: block;
  width: 20px;
  height: 2.4px;
  border-radius: 2px;
  background: var(--purple);
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before,
.nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---------- 6. Hero ---------- */
.hero {
  position: relative;
  padding: clamp(40px, 6vw, 76px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(1100px 460px at 88% -6%, var(--orange-050) 0%, transparent 62%),
    radial-gradient(820px 460px at 4% 8%, var(--purple-050) 0%, transparent 60%),
    var(--white);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}

.hero h1 {
  font-size: clamp(2.5rem, 6.2vw, 4.15rem);
  font-weight: 600;
  margin-bottom: 20px;
}
.hero__lead {
  font-size: clamp(1.06rem, 1.5vw, 1.2rem);
  color: var(--ink-70);
  max-width: 34ch;
  margin-bottom: 30px;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }

.hero__stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  justify-content: start;
  gap: 12px 30px;
  padding-top: 26px;
  border-top: 1px dashed var(--purple-300);
}
.stat__value {
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--purple);
  line-height: 1.1;
}
.stat__label { font-size: 0.9rem; color: var(--ink-50); font-weight: 600; }

/* fotocollage */
.hero__media { position: relative; }
/* uitgelicht nieuwsbericht in de hero */
.featured {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 8px solid #fff;
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform: rotate(1.2deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.28s ease;
}
.featured:hover { transform: rotate(0deg) translateY(-5px); }
.featured__media { position: relative; background: var(--green-050); }
.featured__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.featured__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.featured__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 24px 26px 26px;
}
.featured__body .eyebrow { align-self: flex-start; margin-bottom: 12px; }
.featured__title { font-size: 1.42rem; margin: 0 0 10px; }
.featured__title a { color: inherit; text-decoration: none; }
.featured__title a:hover { color: var(--purple-600); }
.featured__body p { color: var(--ink-70); font-size: 0.98rem; margin-bottom: 20px; }
.featured__link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--purple-600);
  text-decoration: none;
}
.featured__link svg { transition: transform 0.2s ease; }
.featured__link:hover { text-decoration: underline; }
.featured__link:hover svg { transform: translateX(4px); }

.hero__spark {
  position: absolute;
  z-index: 3;
  color: var(--orange);
  pointer-events: none;
}
.hero__spark--1 { top: -30px; right: -18px; width: 56px; animation: float 6s ease-in-out infinite; }
.hero__spark--2 { bottom: 26%; left: -30px; width: 34px; color: var(--green); animation: float 7.5s ease-in-out 1s infinite; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(8deg); }
}

/* ---------- 7. Gebogen tekstlint ---------- */
.ribbon {
  background: var(--purple);
  padding-top: 8px;
  overflow: hidden;
}
.ribbon svg { width: 100%; height: auto; display: block; }
.ribbon__text {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.1vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.04em;
  fill: var(--orange-200);
  text-transform: uppercase;
}
/* op kleine schermen is svg-tekst onleesbaar: gewone regel eronder */
.ribbon__line { display: none; }
.ribbon__line span {
  display: block;
  padding: 4px var(--gutter) 22px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-200);
}

/* ---------- 8. Drie pijlers ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.pillar {
  position: relative;
  background: var(--green);
  color: #123006;
  border-radius: var(--r-lg);
  padding: 34px 30px 30px;
  text-align: center;
  overflow: hidden;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.pillar:hover { transform: translateY(-6px); box-shadow: 0 26px 44px -26px rgba(95, 150, 51, 0.85); }
.pillar::after {
  content: "";
  position: absolute;
  inset: auto -30px -60px auto;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
}
.pillar__icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.4);
}
.pillar__icon svg { width: 38px; height: 38px; stroke: var(--green-600); }
.pillar h3 { color: #0f2a05; font-size: 1.3rem; margin-bottom: 10px; }
.pillar p { color: #24460f; font-size: 0.99rem; }
.pillar__num {
  position: absolute;
  top: 16px;
  left: 22px;
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.32);
  line-height: 1;
}

/* ---------- 9. Afdelingskaarten ---------- */
.dept { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }

.dept-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 0.24s ease, box-shadow 0.24s ease;
}
.dept-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.dept-card__media { position: relative; overflow: hidden; }
.dept-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.5s ease; }
.dept-card:hover .dept-card__media img { transform: scale(1.05); }
.dept-card__tag {
  position: absolute;
  left: 18px;
  bottom: 18px;
  background: #fff;
  color: var(--purple);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.86rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 15px;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
}
.dept-card__body { padding: 30px 32px 34px; display: flex; flex-direction: column; flex: 1; }
.dept-card__body h3 { font-size: 1.7rem; }
.dept-card__body > p { color: var(--ink-70); }

.tick-list { list-style: none; margin: 4px 0 26px; padding: 0; display: grid; gap: 11px; }
.tick-list li { position: relative; padding-left: 32px; color: var(--ink-70); }
.tick-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.22em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f9633' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 12px no-repeat;
}
.dept-card .btn { margin-top: auto; align-self: flex-start; }

/* ---------- 10. Dagverloop / tijdlijn ---------- */
.schedule { display: grid; gap: 14px; max-width: 760px; margin-inline: auto; }
.schedule__row {
  display: grid;
  grid-template-columns: 158px 1fr auto;
  align-items: center;
  gap: 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.schedule__row:hover { transform: translateX(5px); box-shadow: var(--shadow-md); border-color: var(--purple-100); }
.schedule__time {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--purple);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.schedule__label { font-weight: 700; color: var(--ink); }
.schedule__row small { display: block; font-weight: 600; color: var(--ink-50); }
.schedule__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.schedule__row--break .schedule__dot { background: var(--green); }
.schedule__row--break { background: var(--green-050); border-color: var(--green-100); }
.schedule__row--end .schedule__dot { background: var(--purple-300); }

.note {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--orange-050);
  border: 1px solid var(--orange-200);
  border-left: 5px solid var(--orange);
  border-radius: var(--r-md);
  padding: 18px 22px;
  color: #6b4508;
}
.note svg { flex-shrink: 0; width: 22px; height: 22px; stroke: var(--orange-600); margin-top: 2px; }
.note p { margin: 0; }
.note strong { color: #5a3a06; }

/* ---------- 11. Fotogalerij ---------- */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--purple-050);
  cursor: zoom-in;
  aspect-ratio: 4 / 3;
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.gallery__item:hover img { transform: scale(1.07); }
.gallery__item span {
  position: absolute;
  inset: auto 0 0 0;
  padding: 30px 16px 12px;
  background: linear-gradient(transparent, rgba(60, 0, 84, 0.78));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.95rem;
  text-align: left;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery__item:hover span,
.gallery__item:focus-visible span { opacity: 1; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: 5vw;
  background: rgba(45, 0, 63, 0.92);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: min(1000px, 92vw); max-height: 82vh; border-radius: var(--r-md); box-shadow: var(--shadow-lg); }
.lightbox figcaption { color: #fff; text-align: center; margin-top: 16px; font-weight: 700; }
.lightbox__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.3); }

/* ---------- 12. Nieuws ---------- */
.news-card { display: flex; flex-direction: column; gap: 14px; }
.news-card__meta { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; font-weight: 800; color: var(--purple-600); }
.news-card__meta time {
  background: var(--purple);
  color: #fff;
  border-radius: var(--r-sm);
  padding: 5px 11px;
  letter-spacing: 0.04em;
}
.news-card h3 { margin: 0; font-size: 1.3rem; }
.news-card h3 a { color: inherit; text-decoration: none; }
.news-card h3 a:hover { color: var(--purple-600); }
.news-card p { color: var(--ink-70); font-size: 0.99rem; }
.news-card__link {
  margin-top: auto;
  font-weight: 800;
  color: var(--purple-600);
  text-decoration: none;
  font-size: 0.95rem;
}
.news-card__link::after { content: " →"; }
.news-card__link:hover { text-decoration: underline; }

.news-item {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 28px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.22s ease, transform 0.22s ease;
}
.news-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.news-item img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); }
.news-item__body { padding: 6px 10px 10px 0; }
.news-item__body h3 { font-size: 1.35rem; margin: 10px 0 8px; }
.news-item__body h3 a { color: inherit; text-decoration: none; }
.news-item__body h3 a:hover { color: var(--purple-600); }
.news-item__body p { color: var(--ink-70); }

/* ---------- 13. Team ---------- */
.team-card { text-align: center; padding: 30px 24px; }
.team-card__photo {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  margin: 0 auto 18px;
  overflow: hidden;
  background: var(--purple-050);
  border: 4px solid var(--purple-050);
}
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card h3 { font-size: 1.15rem; margin-bottom: 2px; }
.team-card__role { font-weight: 700; color: var(--orange-600); font-size: 0.9rem; }
.team-card__mail { display: inline-block; margin-top: 10px; font-size: 0.9rem; }

/* ---------- 14. Contact ---------- */
.contact-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px;
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.contact-card__icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  background: var(--purple-050);
  color: var(--purple);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.contact-card p, .contact-card a { color: var(--ink-70); text-decoration: none; }
.contact-card a:hover { color: var(--purple); text-decoration: underline; }
.contact-card strong { color: var(--ink); }

.form { display: grid; gap: 18px; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field label {
  display: block;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--ink);
  margin-bottom: 7px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  padding: 13px 16px;
  border: 2px solid var(--line);
  border-radius: var(--r-sm);
  background: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple-300);
  box-shadow: 0 0 0 4px var(--purple-050);
}
.field input:user-invalid,
.field textarea:user-invalid { border-color: #d9534f; }

.form__hint { font-size: 0.86rem; color: var(--ink-50); }
.form__status {
  display: none;
  gap: 10px;
  align-items: center;
  background: var(--green-050);
  border: 1px solid var(--green-100);
  color: #2f5416;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-weight: 700;
}
.form__status.is-visible { display: flex; }

/* ---------- 15. Afsluitende CTA ---------- */
.cta-band {
  position: relative;
  background: var(--purple);
  color: #fff;
  border-radius: var(--r-xl);
  padding: clamp(40px, 6vw, 68px);
  overflow: hidden;
  text-align: center;
}
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.cta-band::before { width: 300px; height: 300px; background: var(--orange); opacity: 0.22; top: -120px; right: -70px; }
.cta-band::after  { width: 220px; height: 220px; background: var(--green);  opacity: 0.2;  bottom: -110px; left: -50px; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); }
.cta-band p { color: var(--purple-100); max-width: 56ch; margin-inline: auto; font-size: 1.1rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* ---------- 16. Pagina-header ---------- */
.page-hero {
  position: relative;
  background:
    radial-gradient(760px 320px at 88% 0%, rgba(241, 152, 22, 0.16) 0%, transparent 62%),
    radial-gradient(700px 340px at 0% 10%, rgba(135, 191, 88, 0.16) 0%, transparent 60%),
    var(--purple-050);
  padding: clamp(44px, 6vw, 80px) 0 clamp(48px, 6vw, 76px);
  overflow: hidden;
  text-align: center;
}
.page-hero h1 { font-size: clamp(2.1rem, 4.8vw, 3.3rem); margin-bottom: 16px; }
.page-hero p { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink-70); max-width: 62ch; margin-inline: auto; }
.page-hero__lead { font-size: clamp(1.05rem, 1.7vw, 1.28rem) !important; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero__spark { position: absolute; color: var(--orange); opacity: 0.55; }
.page-hero__spark--l { left: 6%; bottom: 18%; width: 38px; }
.page-hero__spark--r { right: 8%; top: 22%; width: 26px; color: var(--green); }

/* breadcrumbs */
.crumbs { display: flex; gap: 8px; justify-content: center; font-size: 0.9rem; font-weight: 700; color: var(--ink-50); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a { color: var(--purple-600); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span::before { content: "/"; margin-right: 8px; color: var(--purple-300); }

/* ---------- 17. Inhoudsblokken ---------- */
/* Tekstblokken blijven leesbaar breed, maar een pagina mag ook
   volledige secties bevatten (kolommen, kaarten, foto's naast tekst). */
.prose { max-width: none; }
.prose > p,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > table,
.prose > .prose-lead {
  /* Een vaste maat, geen 'ch': dat schaalt mee met de lettergrootte van het
     element zelf, waardoor een grote kop 1224px zou worden in plaats van 688px. */
  max-width: 43rem;
  margin-inline: auto;   /* gecentreerd, niet links uitgelijnd */
}

.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 44px; }
.prose > h2:first-child { margin-top: 0; }

/* Secties met een eigen achtergrondkleur binnen een pagina.
   Ze breken uit de container en vullen de volle paginabreedte, precies zoals
   de gekleurde vlakken in het oorspronkelijke ontwerp. */
/* Elke sectie binnen een pagina brekt uit naar de volle paginabreedte en
   centreert zichzelf. Zonder dit zouden de gekleurde vlakken 1180px breed zijn
   terwijl de witte secties 48px smaller blijven. */
.prose > .band,
.prose > .band-plain {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.prose > .band { padding-block: clamp(48px, 6.5vw, 92px); }
.prose > .band-plain { padding-block: clamp(40px, 5vw, 64px); }

.prose > .band > .band__inner,
.prose > .band > .container,
.prose > .band-plain > .container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

/* De band__inner is al de container; een extra .container erin zou de marge
   nog eens aftrekken en het vlak 48px smaller maken dan de witte secties. */
.prose > .band > .band__inner > .container { width: 100%; }

.band--cream  { background: var(--cream); }
.band--green  { background: var(--green-050); }
.band--purple { background: var(--purple-050); }

.prose > .band:first-child { margin-top: calc(-1 * clamp(56px, 8vw, 104px)); }
.prose > .band:last-child  { margin-bottom: calc(-1 * clamp(56px, 8vw, 104px)); }

/* Secties die de redacteur zelf samenstelt, binnen een pagina. */
.prose .split { margin-block: 40px; }
.prose .grid { margin-block: 34px; }
.prose .pillars { margin-block: 40px; }
.prose .section-head { margin-bottom: 34px; }
.prose > .band .split,
.prose > .band .grid,
.prose > .band .schedule,
.prose > .band .faq { margin-inline: auto; }
.prose h3 { font-size: 1.22rem; margin-top: 30px; }
.prose p, .prose li { color: var(--ink-70); }
.prose ul { padding-left: 22px; display: grid; gap: 8px; }
.prose ol { padding-left: 22px; display: grid; gap: 8px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.split--top { align-items: start; }
.split__media { border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-md); border: 8px solid #fff; }
.split__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.checklist { list-style: none; padding: 0; margin: 0 0 26px; display: grid; gap: 12px; }
.checklist li { position: relative; padding-left: 34px; color: var(--ink-70); }
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.checklist strong { color: var(--ink); }

.faq { display: grid; gap: 12px; max-width: 800px; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 4px 22px;
  box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.08rem;
  color: var(--purple);
  padding: 16px 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.5rem;
  color: var(--orange);
  line-height: 1;
  transition: transform 0.25s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--ink-70); margin: 0; }

.banner-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--green);
  color: #123006;
  border-radius: var(--r-lg);
  padding: 22px 30px;
  font-weight: 800;
  font-family: var(--font-display);
  font-size: 1.08rem;
  text-align: center;
}
.banner-strip svg { width: 26px; height: 26px; stroke: #123006; flex-shrink: 0; }

/* ---------- 18. Footer ---------- */
.footer {
  background: var(--purple);
  color: var(--purple-100);
  padding: clamp(48px, 6vw, 72px) 0 0;
  margin-top: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 44px;
}
.footer__logo-card {
  background: #fff;
  border-radius: var(--r-md);
  padding: 16px 20px;
  display: inline-block;
  margin-bottom: 20px;
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}
.footer__logo-card img { width: 150px; }
.footer p { color: var(--purple-100); font-size: 0.97rem; }
.footer h4 {
  color: #fff;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer a { color: var(--purple-100); text-decoration: none; font-size: 0.97rem; }
.footer a:hover { color: var(--orange-200); text-decoration: underline; }

.footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding: 22px 0 30px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.88rem;
  color: var(--purple-300);
}
.footer__bottom p { color: var(--purple-300); font-size: 0.88rem; margin: 0; }

.social { display: flex; gap: 10px; margin-top: 18px; }
.social a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  transition: background 0.2s ease, transform 0.2s ease;
}
.social a:hover { background: var(--orange); transform: translateY(-2px); }
.social svg { width: 19px; height: 19px; fill: #fff; }

/* ---------- 19. Reveal-animatie ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 20. Responsive ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .hero__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; }
  .stat__value { font-size: 1.4rem; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 560px; margin-inline: auto; }
  .featured { transform: none; }
  .hero__spark--1 { right: 4px; }
  .hero__spark--2 { left: 2px; bottom: auto; top: 18%; }
  .hero__lead { max-width: 100%; }
}

@media (max-width: 960px) {
  :root { --header-h: 72px; }
  .nav-toggle { display: grid; }
  .header__cta { display: none; }
  .nav__cta { display: block; }
  .ribbon__text { display: none; }
  .ribbon__line { display: block; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 14px var(--gutter) 26px;
    display: none;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .nav.is-open { display: block; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav__link { padding: 13px 14px; font-size: 1.05rem; border-radius: var(--r-sm); }
  .nav__list .btn { margin-top: 12px; justify-content: center; }

  .pillars, .dept, .grid-3 { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .news-item { grid-template-columns: 1fr; }
  .news-item__body { padding: 0 6px 8px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; }
  .logo { width: 122px; }
  .hero__stats { grid-template-columns: 1fr; gap: 14px; }
  .grid-2, .grid-4, .form__row { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .schedule__row { grid-template-columns: 1fr auto; gap: 4px 14px; padding: 15px 20px; }
  .schedule__row .schedule__dot { grid-row: 1 / span 2; }
  .schedule__label { grid-column: 1; }
  .card { padding: 24px; }
  .dept-card__body { padding: 24px 22px 28px; }
  .cta-band { border-radius: var(--r-lg); }
  .btn { padding: 13px 22px; }
}


/* ---------- 19. WordPress- en redacteurstijlen ---------- */

/* Uitgelichte afbeelding en de standaardafbeeldingen van WordPress. */
.wp-caption,
.alignleft,
.alignright,
.aligncenter,
.alignwide,
.alignfull { max-width: 100%; }

.alignwide { width: min(100% + 80px, 100vw - 40px); margin-inline: calc(50% - min(100% + 80px, 100vw - 40px) / 2); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); }

img.alignleft { float: left; margin: 0 26px 18px 0; border-radius: var(--r-md); }
img.alignright { float: right; margin: 0 0 18px 26px; border-radius: var(--r-md); }
img.aligncenter { margin-inline: auto; border-radius: var(--r-md); }

.wp-caption-text,
.wp-block-image figcaption {
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--ink-50);
  text-align: center;
}

/* Door de redacteur zelf ingevoegde figuren krijgen dezelfde sfeer. */
.wp-block-image img { border-radius: var(--r-md); }
.wp-block-quote {
  margin: 32px 0;
  padding: 22px 28px;
  border-left: 5px solid var(--orange);
  background: var(--orange-050);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display);
  font-size: 1.14rem;
  color: var(--purple-700);
}
.wp-block-quote p { color: inherit; margin: 0; }
.wp-block-quote cite { display: block; margin-top: 8px; font-size: 0.9rem; color: var(--ink-50); font-style: normal; }

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  padding: 13px 26px;
  border-radius: var(--r-pill);
  background: var(--purple);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.18s ease, background 0.18s ease;
}
.wp-block-button__link:hover { background: var(--purple-600); color: #fff; transform: translateY(-2px); }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--purple); border: 2px solid var(--purple-300); }
.is-style-outline .wp-block-button__link:hover { background: var(--purple); color: #fff; }

/* Tabellen, die de secretaris zelf kan invoegen.
   Op een smalle telefoon laat de tabel zich opzij scrollen in plaats van
   de hele pagina op te blazen. */
.prose table,
.wp-block-table table { width: 100%; border-collapse: collapse; font-size: 0.97rem; }

.prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table td:nth-child(2) { min-width: 8rem; }
.wp-block-table th,
.wp-block-table td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.wp-block-table thead th { background: var(--purple-050); color: var(--purple); font-family: var(--font-display); }

/* Scheiding, code en horizonte lijn. */
.wp-block-separator { border: 0; border-top: 1px dashed var(--purple-300); margin-block: 38px; }
.wp-block-code, code, pre { font-size: 0.92rem; background: var(--purple-050); }
pre { padding: 16px; border-radius: var(--r-sm); overflow-x: auto; }

/* Oudere berichten en reacties. */
.sticky .news-item__body h3::before { content: "★ "; color: var(--orange); }
.bypostauthor > article { background: var(--purple-050); border-radius: var(--r-md); padding: 20px; }

/* Paginering op de nieuwsoverzichten. */
.pagination, .nav-links { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; }
.page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--purple);
  font-weight: 800;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.page-numbers:hover { background: var(--purple-050); border-color: var(--purple-300); }
.page-numbers.current { background: var(--purple); border-color: var(--purple); color: #fff; }

/* Opsommingen binnen een bericht. */
.prose ul li::marker { color: var(--orange); }
.prose ol li::marker { color: var(--purple-300); font-weight: 700; }

/* Commentaren, als de school die toch aanzet. */
.comment-list { list-style: none; padding: 0; display: grid; gap: 20px; }
.comment-body {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 22px 26px;
}
.comment-author .avatar { border-radius: 50%; margin-right: 10px; vertical-align: middle; }
.comment-metadata { font-size: 0.86rem; color: var(--ink-50); margin-bottom: 10px; }

/* Melding bovenaan het berichtscherm in het dashboard. */
.rp2-hint { margin: 12px 0 0 0; }
.rp2-hint p { margin: 6px 0; }