/* Thema casaschool — vormgeving van casaschool.nl (alleen het ontwerp).
   Bron: Elementor-kit van de publieke site (kleuren, Bitter/Mulish, menubalk met
   vier kleurvlakken, voet met drie kleurbalken). Placeholder-inhoud, geen teksten
   of beelden van de bron. Afwijking bewust: lopende tekst #54595F i.p.v. #7A7A7A
   (4,3:1 op wit haalt WCAG AA niet), tekst op limoen donker i.p.v. wit. */

@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/bitter-var.woff2') format('woff2'); }
@font-face { font-family: 'Mulish'; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url('/assets/fonts/mulish-var.woff2') format('woff2'); }

html[data-theme] {
  --cs-magenta: #A92466;
  --cs-blauw:   #0095CD;
  --cs-roze:    #E57195;
  --cs-limoen:  #CACB42;
  --cs-lichtblauw: #7FC1E6;
  --cs-grijs:   #54595F;
  --cs-licht:   #E9E9E9;
  --brand-font: 'Mulish', system-ui, sans-serif;
  --brand-primary: var(--cs-magenta);
  --brand-secondary: var(--cs-blauw);
  --cs-kop: 'Bitter', Georgia, serif;
}
html[data-theme="light"] {
  --brand-bg: #FFFFFF; --brand-bg-elevated: #FFFFFF; --brand-surface: #FFFFFF;
  --brand-surface-2: #F4F4F4; --brand-surface-alt: var(--cs-licht);
  --brand-border: var(--cs-licht); --brand-border-strong: #C9CBCD;
  --brand-text: var(--cs-grijs); --brand-text-strong: #2B2E32; --brand-text-muted: #6A6F75;
  --brand-primary-soft: rgba(169,36,102,.12); --brand-secondary-soft: rgba(0,149,205,.14);
}
html[data-theme="dark"] {
  --brand-bg: #1E1A1D; --brand-bg-elevated: #2A2428; --brand-surface: #2A2428;
  --brand-surface-2: #342D32; --brand-surface-alt: #3E363B;
  --brand-border: #4A4046; --brand-border-strong: #62565D;
  --brand-text: #E9E9E9; --brand-text-strong: #FFFFFF; --brand-text-muted: #BDB6BA;
  --brand-primary: var(--cs-roze);
  --brand-primary-soft: rgba(229,113,149,.2); --brand-secondary-soft: rgba(0,149,205,.2);
}

body { font-family: 'Mulish', system-ui, sans-serif; font-weight: 400; line-height: 1.5; }
p { margin-bottom: 30px; }
h1, h2, h3, h4 { font-family: var(--cs-kop); font-weight: 600; }
h1, .pagina h1 { color: var(--cs-magenta); font-size: 45px; line-height: 1.2; }
h2 { color: var(--cs-magenta); font-size: 24px; line-height: 30px; }
h3 { color: var(--cs-blauw); font-size: 20px; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] .pagina h1 { color: var(--cs-roze); }
a { color: var(--cs-magenta); text-decoration: none; }
a:hover, a:focus-visible { color: var(--cs-blauw); }
html[data-theme="dark"] a { color: var(--cs-roze); }
.blok-kop, .blok-kaarten__kop, .kaart__titel, .blok-kaarten .kaart__titel { color: var(--cs-magenta); font-family: var(--cs-kop); }
.paneel a, .kaart a { color: var(--cs-magenta); }

/* ── Kop: wit vlak met logo, daaronder de menubalk met kleurvlakken ── */
.cs-header { background: #fff; border-top: 5px solid var(--cs-limoen); }
html[data-theme="dark"] .cs-header { background: var(--brand-bg-elevated); }
.cs-header__top { display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .75rem 1.5rem; max-width: 80rem; margin: 0 auto; }
.cs-logo img { height: 64px; width: auto; display: block; }
.cs-logo--tekst { font-family: var(--cs-kop); font-weight: 700; font-size: 1.6rem; color: var(--cs-magenta); }
.cs-nav { display: flex; flex-wrap: wrap; gap: 0; }
.cs-nav__item {
  flex: 1 1 8rem; text-align: center; padding: 1rem 1.25rem;
  font-family: var(--cs-kop); font-size: 17px; font-weight: 600;
  color: #fff; transition: color .3s, background-color .3s;
}
.cs-kleur-0 { background: var(--cs-magenta); }
.cs-kleur-1 { background: var(--cs-blauw); }
.cs-kleur-2 { background: var(--cs-roze); }
.cs-kleur-3 { background: var(--cs-limoen); color: #2B2E32; }
.cs-nav__item:hover, .cs-nav__item:focus-visible, .cs-nav__item.is-actief { color: var(--cs-limoen); }
.cs-kleur-3:hover, .cs-kleur-3:focus-visible, .cs-kleur-3.is-actief { color: var(--cs-magenta); }
html[data-theme] .cs-nav__item { color: #fff; }
html[data-theme] .cs-kleur-3 { color: #2B2E32; }
html[data-theme] .cs-nav__item:hover, html[data-theme] .cs-nav__item.is-actief { color: var(--cs-limoen); }
html[data-theme] .cs-kleur-3:hover, html[data-theme] .cs-kleur-3.is-actief { color: var(--cs-magenta); }
.cs-toggle { display: none; width: 100%; padding: .9rem 1.25rem; border: 0; cursor: pointer;
  background: var(--cs-magenta); color: #fff; font: 600 17px var(--cs-kop); text-align: left; }

@media (max-width: 767px) {
  .cs-toggle { display: block; }
  .cs-nav { display: none; flex-direction: column; }
  .cs-nav.is-open { display: flex; }
  .cs-nav__item { text-align: left; flex: none; }
  .cs-header__top { padding: .5rem 1rem; }
  h1, .pagina h1 { font-size: 34px; }
}

/* ── Inhoud ── */
.site-main { max-width: 75rem; padding-top: 2.5rem; }

/* ── Knoppen: onderstreepte tekstknop (inhoud) en limoenen pil (afsluitend) ── */
.knop { background: transparent; color: var(--cs-magenta); border: 0; border-bottom: 2px solid currentColor;
  border-radius: 0; padding: 0 5px 10px 0; font: 700 1rem 'Mulish', sans-serif; transition: color .3s; }
.knop:hover { filter: none; color: var(--cs-blauw); }
.blok-kaarten .kaart__knop .knop { color: var(--cs-magenta); }
.knop--stil { background: transparent; color: var(--cs-blauw); }
.knop--pil, button.knop--pil { background: var(--cs-limoen); color: #2B2E32; border: 0; border-radius: 50px;
  padding: .7rem 1.6rem; font-size: 20px; }
.knop--pil:hover { color: var(--cs-magenta); }
.knop--klein { padding-bottom: 4px; }

/* ── Kaarten en panelen: vlak wit, dunne lichte rand, geen schaduw ── */
.paneel, .kaart, .blok-kaarten .kaart { background: var(--brand-surface); border: 1px solid var(--cs-licht);
  border-radius: 0; box-shadow: none; }
.paneel h3 { color: var(--cs-blauw); font-family: var(--cs-kop); }
.blok-tekst img, .blok-afbeelding img, .blok-galerij img, .kaart__afbeelding { border-radius: 0; }

/* ── Voet: magenta met drie kleurbalken (blauw, roze, limoen) erboven ── */
.cs-footer { margin-top: auto; background: var(--cs-magenta); color: #fff; padding: 0 0 1rem; }
.cs-footer__balken { display: flex; height: 15px; margin-bottom: 40px; }
.cs-footer__balken span { flex: 1; }
.cs-footer__balken span:nth-child(1) { background: var(--cs-blauw); }
.cs-footer__balken span:nth-child(2) { background: var(--cs-roze); }
.cs-footer__balken span:nth-child(3) { background: var(--cs-limoen); }
.cs-footer__inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: .5rem 2rem; padding: 0 1.5rem; max-width: 75rem; margin: 0 auto; font: 600 14px 'Mulish', sans-serif; }
.cs-footer__naam { font: 700 24px var(--cs-kop); flex-basis: 100%; text-align: center; }
.cs-footer a { color: #fff; transition: color .3s; }
.cs-footer a:hover, .cs-footer a:focus-visible { color: var(--cs-limoen); }
.cs-footer .versieregel { opacity: .8; }
html[data-theme="dark"] .cs-footer { background: #6E1842; }
html[data-theme="dark"] .cs-footer a { color: #fff; }

/* Toegankelijkheidsknoppen in de kop */
.cs-a11y .uniek-a11y-btn { color: var(--cs-grijs); }
html[data-theme="dark"] .cs-a11y .uniek-a11y-btn { color: var(--brand-text); }

/* Alinea-afstand van de bron (30px) ook binnen tekstblokken */
.site-main p { margin: 0 0 30px; }

/* ═════════ Paginatemplates (themes/casaschool/paginas/) ═════════ */
.site-main:has(.cs-pagina) { max-width: none; padding: 0; }
.cs-binnen { max-width: 71rem; margin: 0 auto; padding: 0 1.25rem; }
.cs-sectie { padding: 3.75rem 0; }
.cs-sectie--donker { background: #2B2E32; }
.cs-band { padding: 2.5rem 0 2rem; color: #fff; }
.cs-groot { font-size: 18px; } .cs-groter { font-size: 21px; } .cs-meta { font-size: 14px; color: var(--brand-text-muted); }
.cs-midden { text-align: center; }
.cs-achtergrond--magenta { background: var(--cs-magenta); color: #fff; }
.cs-achtergrond--blauw { background: var(--cs-blauw); color: #fff; }
.cs-achtergrond--roze { background: var(--cs-roze); color: #2B2E32; }
.cs-achtergrond--limoen { background: var(--cs-limoen); color: #2B2E32; }
.cs-achtergrond--magenta h1, .cs-achtergrond--magenta h2, .cs-achtergrond--magenta h3,
.cs-achtergrond--blauw h1, .cs-achtergrond--blauw h2, .cs-achtergrond--blauw h3 { color: #fff; }
.cs-achtergrond--magenta a, .cs-achtergrond--blauw a { color: #fff; }

/* Placeholder voor foto's: kleurverloop, geen beeldmateriaal van de bron */
.cs-beeld { width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--cs-blauw), var(--cs-roze)); }
.cs-beeld--b { background: linear-gradient(135deg, var(--cs-magenta), var(--cs-lichtblauw)); }
.cs-beeld--c { background: linear-gradient(135deg, var(--cs-limoen), var(--cs-blauw)); }
.cs-beeld--d { background: linear-gradient(135deg, var(--cs-roze), var(--cs-limoen)); }
.cs-beeld--vol { position: absolute; inset: 0; aspect-ratio: auto; height: 100%; }
.cs-beeld--kaart { aspect-ratio: 16 / 10; margin-bottom: 1rem; }
.cs-beeld--uitgelicht { aspect-ratio: 16 / 8; margin: 1.5rem 0; }

/* Animated headline: markeerwoord met getekende onderstreping (herhaalt elke 8 s) */
.cs-kop-anim { font: 600 55px/1.15 var(--cs-kop); color: inherit; margin: 0 0 1rem; }
.cs-markeer { position: relative; display: inline-block; }
.cs-markeer svg { position: absolute; left: 0; bottom: -.15em; width: 100%; height: .3em; overflow: visible; }
.cs-markeer path { fill: none; stroke: var(--cs-limoen); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 220; stroke-dashoffset: 220; animation: cs-teken 8s ease-in-out infinite; }
@keyframes cs-teken { 0% { stroke-dashoffset: 220; } 15%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 220; } }
@media (prefers-reduced-motion: reduce) { .cs-markeer path { animation: none; stroke-dashoffset: 0; } }

/* Hero: minimaal 600 px, overlay .78 over een neutraal kleurverloop */
.cs-hero { position: relative; min-height: 600px; display: flex; align-items: center; overflow: hidden; color: #fff;
  background: linear-gradient(120deg, var(--cs-magenta), var(--cs-blauw)); }
.cs-hero::before { content: ""; position: absolute; inset: 0; background: #54595F; opacity: .78; z-index: 1; }
.cs-hero--een .cs-beeld--vol { display: none; }
.cs-hero--twee { background: linear-gradient(120deg, var(--cs-limoen), var(--cs-blauw)); min-height: 600px; }
.cs-hero--twee::before { opacity: .78; }
.cs-hero__rij { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 2rem; width: 100%; }
.cs-hero__tekst { padding-left: 120px; }
.cs-hero .cs-kop-anim { color: #fff; }
.cs-hero__beeld .cs-beeld { aspect-ratio: 1; max-width: 28rem; margin-left: auto; border-radius: 0; }
.cs-beeldbanner { position: relative; min-height: 400px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cs-beeldbanner::after { content: ""; position: absolute; inset: 0; background: #54595F; opacity: .5; }
.cs-beeldbanner__kop { position: relative; z-index: 2; color: #fff; font: 600 45px/1.2 var(--cs-kop); text-align: center; padding: 0 1rem; }
html[data-theme] .cs-beeldbanner__kop { color: #fff; }

/* Banner bovenaan binnenpagina's */
.cs-banner { padding: 40px 0; min-height: 250px; display: flex; align-items: center; }
.cs-banner--laag { min-height: 150px; }
.cs-banner > .cs-binnen { width: 100%; }
.cs-banner__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: center; }
.cs-banner .cs-kop-anim { color: #fff; }
.cs-banner__beeld .cs-beeld { aspect-ratio: 16 / 10; }
.cs-lijst { padding-left: 1.2rem; }

/* Rijen en kaarten */
.cs-rij { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.cs-rij--drie { grid-template-columns: repeat(3, 1fr); }
.cs-rij--twee { grid-template-columns: repeat(2, 1fr); }
.cs-rij--midden { align-items: center; }
.cs-rij--uitgelicht { grid-template-columns: 63.661fr 36.339fr; gap: 30px; }
.cs-kaart-groot { border-radius: 30px; padding: 80px 60px 40px; display: flex; flex-direction: column; justify-content: center; }
.cs-kaart-groot h2 { color: #fff; font-size: 45px; line-height: 1.2; margin: 0 0 1rem; }
.cs-streep { border: 0; border-top: 2px solid var(--cs-limoen); width: 100%; margin: 0 0 1.25rem; }
.cs-kaart { background: #fff; padding: 30px; border: 0; }
html[data-theme="dark"] .cs-kaart { background: var(--brand-surface); }
.cs-kaart--kaal { padding: 0; }
.cs-kaart__kop { font: 600 24px var(--cs-kop); margin: 0 0 .5rem; color: var(--cs-magenta); }
.cs-kaart__kop a { color: inherit; }
.cs-kaart p { font-size: 16px; }
.cs-kaart-gekleurd { padding: 30px 40px; color: inherit; }
.cs-kaart-gekleurd h3 { font: 600 24px var(--cs-kop); margin: 0 0 .5rem; }
.cs-kaart-gekleurd.cs-achtergrond--limoen h3 { color: var(--cs-magenta); }
.cs-kaart-roze { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 30px; background: rgba(229,113,149,.07); }
.cs-kaart-roze h3 { font: 600 22px var(--cs-kop); color: var(--cs-magenta); }
.cs-sectiekop { font: 600 24px/30px var(--cs-kop); color: var(--cs-magenta); }
.cs-sectiekop--groot { font-size: 40px; line-height: 1.2; }
.cs-tekstvlak > * { max-width: 48rem; }

/* Knoppen */
.cs-tekstknop { display: inline-block; font: 700 1rem 'Mulish', sans-serif; padding: 0 5px 10px 0; border-bottom: 2px solid currentColor; transition: color .3s; }
.cs-tekstknop--magenta { color: var(--cs-magenta); } .cs-tekstknop--blauw { color: var(--cs-blauw); }
.cs-tekstknop--roze { color: #C8466F; } .cs-tekstknop--limoen { color: #7B7C12; }
.cs-tekstknop:hover { color: var(--cs-limoen); }
.cs-vulknop { display: inline-block; padding: .6rem 1.4rem; font: 700 1rem 'Mulish', sans-serif; border-radius: 0; color: #fff; transition: background-color .3s, color .3s; }
.cs-vulknop--magenta { background: var(--cs-magenta); } .cs-vulknop--blauw { background: var(--cs-blauw); }
.cs-vulknop--roze { background: #C8466F; } .cs-vulknop--limoen { background: var(--cs-limoen); color: #2B2E32; }
.cs-vulknop:hover, .cs-vulknop:focus-visible { background: var(--cs-limoen); color: var(--cs-magenta); }
.cs-knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }

/* Galerij en video */
.cs-galerij { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.cs-galerij--groot { grid-template-columns: repeat(6, 1fr); }
.cs-galerij__tegel { aspect-ratio: 1; transition: transform .3s, opacity .3s; }
.cs-galerij__tegel:hover { opacity: .85; transform: scale(1.03); }
.cs-video { position: relative; aspect-ratio: 16 / 9; max-width: 56rem; margin: 0 auto; background: linear-gradient(135deg, #3b3f44, var(--cs-magenta)); display: grid; place-items: center; }
.cs-video__speel { width: 5rem; height: 5rem; border-radius: 50%; background: var(--cs-limoen); color: #2B2E32; display: grid; place-items: center; font-size: 2rem; }

/* Documentblokken */
.cs-doc { display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.5rem; color: #fff; transition: background-color .3s, color .3s; }
.cs-doc--blauw { background: var(--cs-blauw); } .cs-doc--roze { background: #C8466F; } .cs-doc--limoen { background: var(--cs-limoen); color: #2B2E32; }
.cs-doc:hover, .cs-doc:focus-visible { background: var(--cs-magenta); color: #fff; }
.cs-doc__icoon { font-size: 30px; line-height: 1; }
.cs-doc__tekst { display: flex; flex-direction: column; font-size: 15px; }
.cs-doc__tekst strong { font: 600 22px var(--cs-kop); }
html[data-theme] .cs-doc { color: #fff; } html[data-theme] .cs-doc--limoen { color: #2B2E32; }

/* Accordion (details/summary: werkt zonder JS) */
.cs-acc { border: 1px solid var(--cs-licht); margin-bottom: .75rem; background: #fff; }
html[data-theme="dark"] .cs-acc { background: var(--brand-surface); border-color: var(--brand-border); }
.cs-acc summary { cursor: pointer; list-style: none; padding: 1rem 1.5rem; font: 600 20px var(--cs-kop); color: var(--cs-magenta); display: flex; justify-content: space-between; }
.cs-acc summary::-webkit-details-marker { display: none; }
.cs-acc summary::after { content: "+"; font-size: 1.5rem; line-height: 1; }
.cs-acc[open] summary { background: var(--cs-magenta); color: #fff; }
.cs-acc[open] summary::after { content: "−"; }
.cs-acc__inhoud { padding: 30px; font-size: 16px; }
.cs-acc summary:focus-visible { outline: 3px solid var(--cs-limoen); outline-offset: -3px; }

/* Tabbladen */
.cs-tabs__lijst { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 3px solid var(--cs-magenta); }
.cs-tabs__lijst button { border: 0; background: var(--cs-licht); color: var(--cs-grijs); font: 600 20px var(--cs-kop); padding: .8rem 1.6rem; cursor: pointer; transition: background-color .3s, color .3s; }
.cs-tabs__lijst button[aria-selected="true"] { background: var(--cs-magenta); color: #fff; }
.cs-tabs__lijst button:hover { background: var(--cs-roze); color: #fff; }
.cs-tabs__paneel { padding: 1.5rem 0; }
.cs-tabs__paneel h3 { font-size: 30px; font-family: var(--cs-kop); }
html[data-theme="dark"] .cs-tabs__lijst button { background: var(--brand-surface-2); color: var(--brand-text); }

/* Prijslijst */
.cs-prijslijst { list-style: none; padding: 0; }
.cs-prijslijst li { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.25rem; }
.cs-prijslijst__naam { display: flex; flex-direction: column; }
.cs-prijslijst__naam strong { font: 700 18px 'Mulish', sans-serif; color: var(--cs-magenta); }
.cs-prijslijst__naam small { font-size: 14px; color: var(--brand-text-muted); }
.cs-prijslijst__lijn { flex: 1; border-bottom: 2px dotted var(--cs-licht); min-width: 1.5rem; }
.cs-prijslijst__prijs { font: 700 18px var(--cs-kop); color: var(--cs-blauw); }

/* Contact */
.cs-contactkop { font: 600 28px var(--cs-kop); color: var(--cs-magenta); margin: 1.5rem 0 .5rem; }
.cs-contactkop:first-child { margin-top: 0; }
.cs-icoonlijst { list-style: none; padding: 0; margin: 0 0 1rem; }
.cs-icoonlijst li { font-size: 16px; padding: .25rem 0; }
.cs-icoonlijst li span { display: inline-block; width: 1.5rem; color: var(--cs-blauw); }

/* Blogbericht */
.cs-bericht { max-width: 50rem; }
.cs-bericht h1 { font-size: 45px; }
.cs-bericht blockquote { border-left: 5px solid var(--cs-limoen); margin: 1.5rem 0; padding: .25rem 1.25rem; font: italic 600 20px var(--cs-kop); color: var(--cs-magenta); }

/* Logo-plek */
.cs-logo--tekst { display: inline-flex; align-items: center; gap: .6rem; }
.cs-logo__merk .m1 { fill: var(--cs-magenta); } .cs-logo__merk .m2 { fill: var(--cs-blauw); }
.cs-logo__merk .m3 { fill: var(--cs-roze); } .cs-logo__merk .m4 { fill: var(--cs-limoen); }

/* Tablet (≤1024) en mobiel (≤767), breakpoints van de bron */
@media (max-width: 1024px) {
  .cs-hero__tekst { padding-left: 1.25rem; }
  .cs-galerij--groot { grid-template-columns: repeat(4, 1fr); }
  .cs-kaart-groot { padding: 50px 40px 30px; }
}
@media (max-width: 767px) {
  .cs-kop-anim { font-size: 35px; }
  .cs-hero__rij, .cs-banner__rij, .cs-rij--drie, .cs-rij--twee, .cs-rij--uitgelicht, .cs-kaart-roze { grid-template-columns: 1fr; }
  .cs-hero { min-height: 450px; } .cs-hero__beeld { display: none; }
  .cs-hero__tekst { padding-left: 0; }
  .cs-beeldbanner__kop, .cs-kaart-groot h2, .cs-bericht h1 { font-size: 34px; }
  .cs-kaart-groot { padding: 30px 20px; }
  .cs-sectiekop--groot { font-size: 30px; }
  .cs-galerij, .cs-galerij--groot { grid-template-columns: repeat(2, 1fr); }
  .cs-sectie { padding: 2rem 0; }
}