/*
Theme Name: Vive Onepage
Theme URI: https://vive.local
Author: Hans Van den Broeck
Description: Herbruikbaar one-page WordPress-template met golvende sectie-overgangen, scroll-reveal animaties en een decoratieve, meegroeiende boom-illustratie. Kleuren, logo, teksten en foto's zijn volledig aan te passen via de Customizer.
Version: 2.2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vive-onepage
*/

:root{
  --brand: #895d39;
  --sage: #f4c9ab;
  --sage-deep: #5c3a22;
  --clay: #f2ddc9;
  --sand: #fffdf4;
  --cacao: #4a3320;
  --rust: #dd7a5c;
  --rust-soft: #c87c25;
  --cream-ink: #f8f1e2;
  --linen: #ede2cc;
  --flip-tile-back: var(--sage-deep);
  --flip-tile-back-text: var(--cream-ink);
  --radius-lg: 42px;
  --radius-md: 28px;
  --radius-organic: 62% 38% 55% 45% / 45% 58% 42% 55%;
  --radius-organic-alt: 42% 58% 38% 62% / 55% 42% 58% 45%;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Open Sauce Sans', sans-serif;
  color:var(--cacao);
  background:var(--sand);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3{
  font-family:'Brown Sugar', serif;
  font-weight:400;
  color:var(--brand);
  line-height:1.15;
  letter-spacing:-0.01em;
}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:1100px; margin:0 auto; padding:0 28px;}

/* ---------- reveal on scroll ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 1s ease, transform 1s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* Subtiele variant specifiek voor foto's: schuift lichtjes in i.p.v. te faden. */
.reveal-photo{opacity:0; transform:translateX(-24px); transition:opacity .9s ease, transform .9s ease;}
.reveal-photo.in{opacity:1; transform:translateX(0);}

@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-photo, .media-text__media.photo.reveal-photo{opacity:1; transform:none; transition:none;}
}

/* ---------- logo ---------- */
.logo-mark{width:40px; height:40px; flex:none; display:block;}
footer .brand-row{display:flex; align-items:center; justify-content:center; margin-bottom:0;}
.logo-mark-full{width:min(100%, 120px); height:auto;}
footer .custom-logo-link img{height:34px; width:auto;}

/* ---------- groeiende boom: stam met verspreide bladpluimen ---------- */
.tree-decor{
  display:none;
  position:fixed;
  right:1vw;
  bottom:0;
  width:min(20vw, 320px);
  aspect-ratio:300/620;
  z-index:4;
  pointer-events:none;
}
.tree-line{
  fill:none;
  stroke-width:3.2;
  stroke-linecap:round;
}
.leaf-blob{
  transform-box:fill-box;
  transform-origin:50% 50%;
  transform:scale(0);
}
@media (min-width:1400px){
  .tree-decor{display:block;}
}
/* Opaque content-kaarten die boven .tree-decor (position:fixed, z-index:4)
   moeten blijven staan zodra ze er op grote schermen mee overlappen — de
   boom mag wél gewoon vóór de omliggende sectie (achtergrond/lege ruimte)
   getekend worden, dus dat blijft ongemoeid; enkel deze afzonderlijke
   content-elementen krijgen hier een net hogere z-index. Nieuw element dat
   hetzelfde probleem heeft? Gewoon toevoegen aan deze selectorlijst. */
.service-card,
.map-wrap,
.testimonial-card{
  position:relative;
  z-index:5;
}
@media (prefers-reduced-motion: reduce){
  .leaf-blob{transform:scale(1) !important;}
}

/* ---------- hero ---------- */
.hero{
  position:relative;
  height:100svh;
  min-height:560px;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cacao);
}
.hero img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  animation:heroIn 2.4s ease-out both;
}
@keyframes heroIn{
  from{opacity:0; transform:scale(1.06);}
  to{opacity:1; transform:scale(1);}
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(59,42,34,.28) 0%, rgba(59,42,34,.38) 55%, rgba(59,42,34,.82) 100%);
}
.hero-content{
  position:relative; z-index:2;
  color:var(--cream-ink);
  width:100%;
  padding:0 28px;
  max-width:760px;
  margin:0 auto;
  text-align:center;
  animation:heroTextIn 1.4s ease-out .3s both;
}
@keyframes heroTextIn{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:translateY(0);}
}
.hero-logo{
  width:50%;
  aspect-ratio:1;
  margin:0 auto 40px;
  border-radius:50%;
  background:var(--cream-ink);
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(0 2px 10px rgba(59,42,34,.35));
}
.hero-logo .logo-mark{
  display:block;
  width:100%;
  height:100%;
  margin:0;
}
.hero-content .eyebrow{
  font-size:.95rem; letter-spacing:.04em; opacity:.9; margin-bottom:14px;
}
.hero-content h1{
  font-size:clamp(2.4rem, 6vw, 4.3rem);
  color:var(--cream-ink);
  max-width:14ch;
  margin-inline:auto;
}
.hero-scroll{
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  z-index:2; color:var(--cream-ink); opacity:.85;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  font-size:.8rem; letter-spacing:.06em;
}
.hero-scroll span{
  width:1px; height:26px; background:currentColor;
  animation:scrollLine 1.8s ease-in-out infinite;
}
@keyframes scrollLine{
  0%,100%{transform:scaleY(.5); opacity:.4;}
  50%{transform:scaleY(1); opacity:1;}
}

/* ---------- wavy dividers ---------- */
/* Kleine overlap boven/onder zodat een eventuele sub-pixel afrondingsnaad
   tussen de golf-SVG en de aangrenzende secties (zelfde kleur op die rand)
   niet als dun lijntje zichtbaar wordt. */
.wave{display:block; width:100%; line-height:0; margin:-1px 0;}
.wave svg{width:100%; height:auto; display:block;}

/* ---------- sections ---------- */
section{padding:110px 0;}
.band-sand{background:var(--sand);}
.band-clay{background:var(--clay);}
.band-linen{background:var(--linen);}
.band-sage{background:var(--sage);}
.band-deep{background:var(--sage-deep); color:var(--cream-ink);}
.band-deep h2, .band-deep h3{color:var(--cream-ink);}
.band-deep h4, .band-deep h5, .band-deep h6{color:var(--cream-ink);}

/* ---------- generieke titel + foto/tekst-sectie ---------- */
/* Basisopmaak: enkel titel + tekst, geen mediakolom — smaller dan de
   standaard .wrap-breedte (1100px) voor comfortabele leesregels. Deze
   max-width geldt niet voor de mediakolom-variant hieronder: die moet de
   volle .wrap-breedte kunnen gebruiken (of de eigen $args['max_width']). */
.media-text:not(.media-text--with-media){max-width:640px;}
.media-text h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:22px;}
.media-text__text{font-size:1.08rem; max-width:56ch;}
.media-text__text a{color:var(--rust); text-decoration:underline; text-underline-offset:2px;}

/* Met mediakolom (foto of logo): mediakolom links, tekst rechts, verticaal
   mooi uitgelijnd op elkaar. Breedte blijft die van .wrap (1100px), tenzij
   een custom max-width via inline style is meegegeven (zie $args['max_width']
   in section-media-text.php). */
.media-text--with-media{
  display:grid;
  gap:56px;
  align-items:center;
}
.media-text--with-media .media-text__body{max-width:640px;}
/* Optionele omwisseling: media en tekst van plaats laten wisselen, met
   behoud van dezelfde kolombreedtes (enkel gespiegeld). */
.media-text--flip .media-text__media{order:2;}
.media-text--flip .media-text__body{order:1;}

/* logo-variant (bv. "Wat is Vive?"): klein, gecentreerd beeldmerk naast de tekst. */
.media-text--logo{grid-template-columns:minmax(180px, 280px) 1fr;}
.media-text--logo.media-text--flip{grid-template-columns:1fr minmax(180px, 280px);}
.media-text__media.logo{display:flex; justify-content:center;}
.media-text__media.logo img{width:100%; max-width:220px; height:auto;}

/* foto-variant (bv. "Wie ben ik?"): organisch gevormde portretfoto. */
.media-text--photo{grid-template-columns:.85fr 1.15fr;}
.media-text--photo.media-text--flip{grid-template-columns:1.15fr .85fr;}
.media-text__media.photo{
  border-radius:var(--radius-organic);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--clay);
}
.media-text__media.photo img{width:100%; height:100%; object-fit:cover;}
.media-text__media.photo.reveal-photo{opacity:0; transform:scale(.92); transition:opacity 1.1s ease, transform 1.1s ease;}
.media-text__media.photo.reveal-photo.in{opacity:1; transform:scale(1);}

@media (max-width:760px){
  /* .media-text--logo.media-text--flip en .media-text--photo.media-text--flip
     (twee klassen, hierboven onvoorwaardelijk) hebben een hogere specificiteit
     dan de .media-text--with-media 1-koloms-override op de volgende regel —
     zonder deze expliciete override op de flip-varianten zelf zou de flip
     dus op mobiel blijven "winnen" en de sectie in twee (te smalle) kolommen
     blijven tonen in plaats van één. */
  .media-text--logo.media-text--flip,
  .media-text--photo.media-text--flip,
  .media-text--with-media{grid-template-columns:1fr;}
  .media-text--logo{gap:28px; justify-items:center; text-align:center;}
  .media-text__media.logo img{max-width:160px;}
  .media-text--logo .media-text__text{max-width:none;}
  /* De --flip-variant wisselt media/tekst enkel voor de tweekoloms
     desktop-indeling; op mobiel (één kolom) moet de afbeelding altijd
     bovenaan staan, ongeacht flip — zelfde principe als .about-layout. */
  .media-text--with-media .media-text__media{order:1;}
  .media-text--with-media .media-text__body{order:2;}
}

/* ---------- "Wie ben ik?": foto+opleidingen naast tekst+quote ---------- */
/* Eigen indeling (zie template-parts/sections/about.php), los van de
   generieke .media-text hierboven: twee kolommen — links de foto met
   daaronder de opleidingenlijst, rechts de bio-tekst met de quote erna. */
.about-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  align-items:start;
}
.about-layout--with-media{
  grid-template-columns:minmax(220px, 320px) 1.4fr;
}
.about-layout__media-col{
  order:1;
  display:flex;
  flex-direction:column;
  gap:28px;
}
.about-layout__media{
  border-radius:var(--radius-organic-alt);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--clay);
}
.about-layout__media img{width:100%; height:100%; object-fit:cover;}
.about-layout__content-col{order:2; max-width:640px;}
.about-layout__content-col h2{font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:22px;}
.about-layout__content-col p{font-size:1.08rem; margin-top:16px;}
.about-layout__content-col p:first-of-type{margin-top:0;}
.about-layout__content-col a{color:var(--rust); text-decoration:underline; text-underline-offset:2px;}
.about-layout--flip .about-layout__media-col{order:2;}
.about-layout--flip .about-layout__content-col{order:1;}

.about-trainings{
  background:var(--cream-ink);
  border-radius:var(--radius-md);
  padding:28px 26px;
}
.about-trainings h3{
  font-size:1.3rem;
  letter-spacing:.02em;
  color:var(--brand);
  margin-bottom:14px;
}
.about-trainings ul{list-style:none; display:flex; flex-direction:column; gap:10px;}
.about-trainings li{padding-left:18px; position:relative; font-size:.98rem;}
.about-trainings li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--rust);
}

/* Opsommingen in de rich-text-velden (Customizer): zelfde rustkleurige
   bolletjes als .about-trainings hierboven, anders vallen de bullets van
   een <ul> hier weg door de globale *{margin:0;padding:0}-reset. */
.media-text__text ul,
.about-layout__content-col ul,
.service-card__text ul,
.contact-text ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:.6em 0;
}
.media-text__text li,
.about-layout__content-col li,
.service-card__text li,
.contact-text li{padding-left:18px; position:relative;}
.media-text__text li::before,
.about-layout__content-col li::before,
.service-card__text li::before,
.contact-text li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--rust);
}

/* Koppen binnen de rich-text-velden (bv. een tussenkopje bij een dienst-
   detailtekst). Geen expliciete kleur: die moet de omringende tekstkleur
   overnemen (o.a. lichte tekst op de donkere flip-tile-achterkant en
   contactsectie), anders wordt hij daar onleesbaar. */
.media-text__text h4,
.about-layout__content-col h4,
.service-card__text h4,
.contact-text h4{
  font-family:'Brown Sugar', serif;
  font-weight:400;
  font-size:1.2rem;
  line-height:1.2;
  margin:.8em 0 .3em;
}
.media-text__text h4:first-child,
.about-layout__content-col h4:first-child,
.service-card__text h4:first-child,
.contact-text h4:first-child{margin-top:0;}

.about-quote{
  margin-top:28px;
  padding:20px 26px;
  border-left:4px solid var(--rust);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--clay);
}
.about-quote p{font-size:1.15rem; font-style:italic; color:var(--sage-deep); line-height:1.5;}
.about-quote cite{display:block; margin-top:14px; font-style:normal; font-size:.95rem; color:var(--brand); text-align:right;}

@media (max-width:760px){
  .about-layout, .about-layout--with-media{grid-template-columns:1fr;}
  .about-layout__content-col{max-width:none;}
}

.services-title{
  font-size:clamp(1.9rem,4vw,2.6rem);
  text-align:center;
}

/* ---------- kadertjes (services) ---------- */
/* Aantal kaarten is dynamisch (1-5, via het "Diensten" post-type); het
   data-count attribuut op .services stuurt hoeveel kolommen er komen zodat
   elk aantal een volledig gevuld grid oplevert (geen lege vakken). */
.services{
  display:grid;
  gap:40px;
  margin-top:56px;
}
.services[data-count="1"]{
  grid-template-columns:1fr;
  max-width:480px;
  margin-inline:auto;
}
.services[data-count="2"]{
  grid-template-columns:repeat(2,1fr);
}
.services[data-count="3"]{
  grid-template-columns:repeat(3,1fr);
}
.services[data-count="4"]{
  grid-template-columns:repeat(2,1fr);
}
.services[data-count="5"]{
  grid-template-columns:repeat(6,1fr);
}
.services[data-count="5"] .service-card:nth-child(-n+3){
  grid-column:span 2; /* eerste 3 kaarten: 3 per rij */
}
.services[data-count="5"] .service-card:nth-child(n+4){
  grid-column:span 3; /* laatste 2 kaarten: 2 per rij, volledige breedte */
}
.service-card .flip-tile__face{
  border-radius:var(--radius-lg);
  padding:36px;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.service-card .flip-tile__face--front{background:var(--cream-ink);}
.service-card .photo{
  border-radius:var(--radius-organic-alt);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--clay);
}
.service-card .photo img{width:100%; height:100%; object-fit:cover;}
.service-card h3{font-size:1.5rem;}
.service-card__text{font-size:.98rem; opacity:.9;}
.service-card__text p{margin:0 0 .6em;}
.service-card__text p:last-child{margin-bottom:0;}
.service-card .tag{
  display:inline-block;
  align-self:flex-start;
  background:var(--rust);
  color:var(--cream-ink);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:6px 16px;
  border-radius:999px;
}
@media (max-width:760px){
  .services{grid-template-columns:1fr !important; max-width:none;}
  .services[data-count="5"] .service-card{grid-column:auto !important;}
}

/* ---------- testimonials: horizontale carousel, 3 kaarten zichtbaar ---------- */
.testimonials-title{
  font-size:clamp(1.9rem,4vw,2.6rem);
  text-align:center;
  margin-bottom:56px;
}
.testimonials-carousel{
  display:flex;
  align-items:center;
  gap:16px;
}
.testimonials-viewport{
  flex:1;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.testimonials-viewport::-webkit-scrollbar{display:none;}
.testimonials-track{
  display:flex;
  gap:28px;
}
.testimonial-card{
  scroll-snap-align:start;
  /* Eigen breedte per kaart (1-3 "kolommen"), door PHP gezet op basis van
     de lengte van haar eigen tekst (zie vive_onepage_testimonial_card_columns()):
     korte testimonials blijven zo naast elkaar staan, ook als er ergens
     een lange tussen zit. --card-columns hieronder is enkel de fallback. */
  --card-columns: 3;
  flex:0 0 calc((100% - (var(--card-columns) - 1) * 28px) / var(--card-columns));
  background:var(--cream-ink);
  border-radius:var(--radius-lg);
  padding:32px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.testimonial-card__photo{
  width:72px;
  height:72px;
  border-radius:var(--radius-organic);
  overflow:hidden;
  background:var(--clay);
  flex:none;
}
.testimonial-card__photo img{width:100%; height:100%; object-fit:cover;}
.testimonial-card__quote{flex:1;}
.testimonial-card__quote p{font-size:.98rem; line-height:1.55;}
.testimonial-card__name{
  display:block;
  font-style:normal;
  font-weight:700;
  font-size:.9rem;
  color:var(--brand);
}
.testimonials-nav{
  flex:none;
  width:48px;
  height:48px;
  border-radius:50%;
  border:0;
  background:var(--cream-ink);
  color:var(--brand);
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .2s ease, transform .2s ease;
}
.testimonials-nav:hover:not(:disabled){background:var(--rust-soft); color:var(--cream-ink); transform:translateY(-2px);}
.testimonials-nav:disabled{opacity:.35; cursor:default;}
.testimonials-nav[hidden]{display:none;}
@media (max-width:900px){
  /* Op een smaller scherm past hoogstens 2 naast elkaar, ongeacht hoeveel
     de tekstlengte er op desktop toeliet. */
  .testimonial-card{--card-columns: min(2, var(--card-columns));}
}
@media (max-width:760px){
  .testimonial-card{--card-columns: 1;}
  .testimonials-nav{width:40px; height:40px; font-size:1.3rem;}
}

/* ---------- agenda ---------- */
.agenda-intro{padding-top:170px; text-align:center;}
.agenda-intro h1{font-size:clamp(2.1rem,4.5vw,3rem);}
.agenda-list{
  display:flex;
  flex-direction:column;
  gap:24px;
  max-width:820px;
  margin:0 auto;
}
/* Losse tekst (bv. een introparagraaf) vóór de agenda-kaarten, rechtstreeks
   in de pagina-inhoud getypt: leesbaar smal en gecentreerd i.p.v. even
   breed als de kaarten. */
.agenda-list > p{max-width:62ch; margin:0 auto 8px; text-align:center; opacity:.9; font-size:1.05rem;}
/* .agenda-card is de statische buitenkant (zelfde opzet als .service-card):
   de flip-tile erbinnen (zie vive_onepage_flip_tile_open() in
   inc/template-tags.php) krijgt hier haar opmaak, zodat zowel de klikbare
   variant (met achterkant) als de gewone .flip-tile__face--front (zonder
   achterkant) er identiek uitzien. */
.agenda-card .flip-tile{height:auto;}
.agenda-card .flip-tile__inner{height:auto;}
.agenda-card .flip-tile__face{
  border-radius:var(--radius-lg);
  padding:32px;
}
.agenda-card .flip-tile__face--front{
  position:static;
  height:auto;
  background:var(--cream-ink);
  display:flex;
  gap:28px;
  align-items:flex-start;
}
.agenda-card .flip-tile__face--back{
  display:flex;
  flex-direction:column;
  gap:14px;
}
.agenda-card__date{
  flex:none;
  width:84px;
  height:84px;
  border-radius:var(--radius-organic-alt);
  background:var(--rust);
  color:var(--cream-ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.agenda-card__day{font-family:'Brown Sugar', serif; font-size:1.9rem;}
.agenda-card__month{font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
.agenda-card__body{flex:1; min-width:0;}
.agenda-card__tag{margin-bottom:12px;}
.agenda-card__title{font-size:1.35rem; margin-bottom:8px;}
.agenda-card__text{font-size:.98rem; opacity:.9; margin-bottom:16px;}
.agenda-card__meta{list-style:none; display:flex; flex-wrap:wrap; gap:18px;}
.agenda-card__meta li{display:flex; align-items:center; gap:8px; font-size:.9rem; color:var(--brand); font-weight:600;}
.agenda-card__meta svg{flex:none; width:18px; height:18px; color:var(--rust-soft);}
@media (max-width:600px){
  .agenda-card .flip-tile__face--front{flex-direction:column; align-items:flex-start; gap:18px;}
  .agenda-card__date{flex-direction:row; width:auto; height:auto; padding:8px 18px; border-radius:999px; gap:8px;}
  .agenda-card__month{margin-top:0;}
}

/* ---------- flip-tile: klikbare kaart met detail op de achterkant ---------- */
.flip-tile{
  display:block;
  height:100%;
  perspective:1400px;
  cursor:pointer;
}
.flip-tile:focus-visible{
  outline:3px solid var(--rust-soft);
  outline-offset:4px;
  border-radius:var(--radius-lg);
}
.flip-tile__inner{
  position:relative;
  height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
}
.flip-tile.is-flipped .flip-tile__inner{
  transform:rotateY(180deg);
}
.flip-tile__face{
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flip-tile__face--front{
  position:relative;
  height:100%;
}
.flip-tile__face--back{
  position:absolute;
  inset:0;
  transform:rotateY(180deg);
  background:var(--flip-tile-back);
  color:var(--flip-tile-back-text);
  display:flex;
  flex-direction:column;
  gap:12px;
}
.flip-tile__face--back h3{
  color:var(--flip-tile-back-text);
}
/* Enkel dít binnenste stukje (de detailtekst) scrollt, ruim binnen de
   padding van de kaart — zo blijft het dunne lijntje weg van de afgeronde
   hoeken en loopt het nooit over de volledige kaarthoogte. */
.flip-tile__scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--rust-soft) transparent;
}
.flip-tile__scroll::-webkit-scrollbar{
  width:3px;
}
.flip-tile__scroll::-webkit-scrollbar-track{
  background:transparent;
  margin-block:4px;
}
.flip-tile__scroll::-webkit-scrollbar-thumb{
  background:var(--rust-soft);
  border-radius:999px;
}
.flip-tile__hint{
  display:inline-block;
  font-size:.78rem;
  font-weight:700;
  opacity:.55;
  letter-spacing:.02em;
}
@media (prefers-reduced-motion: reduce){
  .flip-tile__inner{transition:none;}
}

/* ---------- contact ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  margin-top:50px;
  align-items:stretch;
}
.contact-info{
  display:flex;
  flex-wrap:wrap;
  gap:14px 32px;
  margin-top:28px;
  list-style:none;
}
.contact-info li{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.95rem;
  opacity:.9;
}
.contact-info__name{
  font-weight:700;
  font-size:1.05rem;
  opacity:1;
}
.contact-info svg{
  flex:none;
  width:20px;
  height:20px;
  color:var(--rust-soft);
}
form{
  background:var(--cream-ink);
  color:var(--cacao);
  border-radius:var(--radius-lg);
  padding:38px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
form label{font-size:.85rem; font-weight:700; opacity:.8;}
form input, form textarea{
  font-family:inherit;
  font-size:1rem;
  padding:13px 16px;
  border:none;
  border-radius:16px;
  background:var(--sand);
  color:var(--cacao);
  resize:vertical;
}
form input:focus, form textarea:focus{
  outline:3px solid var(--rust-soft);
  outline-offset:1px;
}
form button{
  margin-top:6px;
  align-self:flex-start;
  background:var(--rust);
  color:var(--cream-ink);
  border:none;
  padding:14px 30px;
  border-radius:999px;
  font-weight:700;
  font-size:1rem;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease;
}
form button:hover{background:var(--rust-soft); transform:translateY(-2px);}
.form-note{font-size:.85rem; opacity:.75; margin-top:2px;}
.form-note--success,
.form-note--error{
  display:inline-block;
  opacity:1;
  margin-top:14px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.03em;
  padding:6px 16px;
  border-radius:999px;
  color:var(--cream-ink);
}
.form-note--success{background:var(--rust);}
.form-note--error{background:#a13d2c;}

.map-wrap{
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:340px;
}
.map-wrap iframe{width:100%; height:100%; min-height:340px; border:0; display:block;}
@media (max-width:760px){
  .contact-grid{grid-template-columns:1fr;}
}

footer{
  background:var(--sand);
  color:var(--cacao);
  padding:10px 0 28px;
  text-align:center;
}
footer .wrap{display:flex; flex-direction:column; gap:14px; align-items:center;}
footer small{opacity:.7;}
footer .footer-credit{margin-top:-6px; font-size:.8rem;}
footer .footer-credit a{color:inherit; text-decoration:underline;}

.social-links{display:flex; gap:14px;}
.social-links__item{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%;
  background:var(--rust);
  color:var(--cream-ink);
  transition:background .25s ease, transform .25s ease;
}
.social-links__item:hover{background:var(--rust-soft); transform:translateY(-2px);}
.social-links__item svg{width:20px; height:20px;}

/* ---------- site nav ---------- */
section[id]{scroll-margin-top:100px;}
.site-nav{
  position:fixed;
  top:0; left:0; right:0;
  z-index:20;
  padding:18px 0;
  background:transparent;
  transition:background-color .4s ease, box-shadow .4s ease;
}
.site-nav.is-solid,
.site-nav--subpage{
  background:var(--sand);
  box-shadow:0 2px 18px rgba(74,51,32,.08);
}
.site-nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.site-nav__logo{
  display:flex; align-items:center; flex:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .4s ease;
}
.site-nav.is-solid .site-nav__logo,
.site-nav--subpage .site-nav__logo{
  opacity:1;
  pointer-events:auto;
}
.site-nav__logo-mark{width:38px; height:38px;}
.site-nav__toggle{
  display:none;
  position:relative;
  z-index:2;
  flex:none;
  width:42px; height:42px;
  margin-left:auto;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.site-nav__toggle-bar{
  display:block;
  width:24px; height:2px;
  border-radius:2px;
  background:var(--cream-ink);
  transition:background-color .4s ease, transform .25s ease, opacity .25s ease;
}
.site-nav.is-solid .site-nav__toggle-bar,
.site-nav--subpage .site-nav__toggle-bar{background:var(--cacao);}
.site-nav.is-nav-open .site-nav__toggle-bar{background:var(--cacao);}
.site-nav.is-nav-open .site-nav__toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.site-nav.is-nav-open .site-nav__toggle-bar:nth-child(2){opacity:0;}
.site-nav.is-nav-open .site-nav__toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
/* Op brede schermen mag de paneel-wrapper de flex-layout van .site-nav__inner
   niet verstoren: met display:contents doen menu/socials/footer gewoon mee
   als losse flex-items, precies zoals vóór de hamburgermenu-wrapper. */
.site-nav__panel{display:contents;}
.site-nav__panel-footer{display:none;}
.site-nav__menu{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
}
.site-nav__menu > ul{
  display:flex;
  gap:34px;
  list-style:none;
  white-space:nowrap;
}
.site-nav__menu a{
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  color:var(--cream-ink);
  text-decoration:none;
  opacity:.9;
  transition:color .4s ease, opacity .25s ease;
}
.site-nav__menu a:hover{opacity:1;}
.site-nav.is-solid .site-nav__menu a,
.site-nav--subpage .site-nav__menu a{color:var(--cacao);}

/* Submenu's (dropdowns) */
.site-nav__menu > ul > li{position:relative;}
.site-nav__menu li.menu-item-has-children > a{
  display:flex;
  align-items:center;
  gap:5px;
}
.site-nav__menu li.menu-item-has-children > a::after{
  content:'';
  width:6px; height:6px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  opacity:.7;
}
.site-nav__menu .sub-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:14px;
  padding:10px;
  min-width:200px;
  list-style:none;
  white-space:nowrap;
  background:var(--sand);
  border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(74,51,32,.16);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  z-index:30;
}
.site-nav__menu li.menu-item-has-children:hover > .sub-menu,
.site-nav__menu li.menu-item-has-children:focus-within > .sub-menu,
.site-nav__menu li.menu-item-has-children.is-open > .sub-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.site-nav__menu .sub-menu a{
  display:block;
  padding:8px 14px;
  border-radius:14px;
  color:var(--cacao);
  opacity:1;
}
.site-nav__menu .sub-menu a:hover{background:var(--clay);}
.site-nav__menu .sub-menu li + li{margin-top:2px;}
.site-nav__socials{flex:none;}
.site-nav__socials .social-links{gap:10px;}
.site-nav__socials .social-links__item{width:34px; height:34px;}
.site-nav__socials .social-links__item svg{width:16px; height:16px;}
@media (max-width:760px){
  .site-nav__toggle{display:flex;}
  .site-nav.is-nav-open{
    background:var(--sand);
    box-shadow:0 2px 18px rgba(74,51,32,.08);
  }
  .site-nav.is-nav-open .site-nav__logo{opacity:1; pointer-events:auto;}

  .site-nav__panel{
    display:flex;
    flex-direction:column;
    gap:24px;
    position:fixed;
    z-index:1;
    top:0; left:0; right:0;
    max-height:100vh;
    overflow-y:auto;
    background:var(--sand);
    box-shadow:0 18px 40px rgba(74,51,32,.18);
    padding:92px 28px 32px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-12px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .site-nav.is-nav-open .site-nav__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .site-nav__menu{position:static; transform:none;}
  .site-nav__menu > ul{
    flex-direction:column;
    align-items:flex-start;
    gap:2px;
    white-space:normal;
  }
  .site-nav__menu a{
    display:block;
    padding:12px 2px;
    font-size:1.05rem;
    color:var(--cacao);
    opacity:1;
  }
  .site-nav__menu .sub-menu{
    position:static;
    margin:0 0 6px 16px;
    padding:0;
    display:none;
    opacity:1;
    visibility:visible;
    transform:none;
    background:transparent;
    box-shadow:none;
  }
  .site-nav__menu li.menu-item-has-children.is-open > .sub-menu{display:block;}
  .site-nav__menu .sub-menu a{padding:10px 14px;}

  .site-nav__socials{display:flex;}
  .site-nav__socials .social-links{justify-content:flex-start;}

  .site-nav__panel-footer{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding-top:20px;
    border-top:1px solid var(--clay);
  }
  .site-nav__panel-logo{display:inline-flex;}
  .site-nav__panel-contact{
    list-style:none;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .site-nav__panel-contact li{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:.9rem;
    color:var(--cacao);
    opacity:.85;
  }
  .site-nav__panel-contact svg{flex:none; width:18px; height:18px; color:var(--rust-soft);}
  .site-nav__panel-contact a{color:inherit; text-decoration:none;}
}
body.has-nav-open{overflow:hidden;}
@media (prefers-reduced-motion: reduce){
  .site-nav, .site-nav__logo, .site-nav__panel, .site-nav__toggle-bar{transition:none;}
}

/* ---------- kernblokken (Gutenberg) ---------- */
/* Merkstijl voor standaard WordPress-blokken die redacteurs vrij kunnen
   toevoegen op elke pagina (naast/tussen de vive-onepage/media-text-
   secties). Hergebruikt zoveel mogelijk bestaande patronen hierboven
   (quote-kader, pil-knop, ronde foto's, ...) i.p.v. een nieuwe visuele
   taal te verzinnen. */

/* Basisritmiek: *{margin:0} hierboven laat een losse paragraaf/lijst/kop
   zonder deze regel zonder enige verticale ruimte. */
:where(.entry-content, .editor-styles-wrapper) > * + *{margin-top:28px;}
:where(.entry-content, .editor-styles-wrapper) a{color:var(--rust); text-decoration:underline; text-underline-offset:2px;}

/* Leeskolom op de "Secties (volledige breedte)"-template: elk los blok
   wordt begrensd tot een leesbare breedte, behalve de <section>-tags van
   vive-onepage/media-text en vive-onepage/section (die renderen geen
   wrapper-div, zie inc/blocks.php), de golf-divs die diezelfde blokken er
   als losse sibling na renderen (vive_onepage_wave_divider(), .wave-klasse),
   en blokken met expliciete brede/volledige uitlijning. */
.entry-content--sections > *{max-width:760px; margin-left:auto; margin-right:auto;}
.entry-content--sections > section,
.entry-content--sections > .wave,
.entry-content--sections > .alignwide,
.entry-content--sections > .alignfull{max-width:none;}

/* De algemene 28px-ritmiek hierboven (:where(.entry-content, ...) > * + *)
   geldt ook hier (.entry-content--sections heeft ook de .entry-content-klasse),
   en zou anders een storend randje zandkleur tussen elke sectie en zijn
   golfovergang laten zien. Secties/golven moeten net naadloos tegen elkaar
   aansluiten, dus die marge wordt hier expliciet op 0 gezet. */
.entry-content--sections > section,
.entry-content--sections > .wave{margin-top:0;}

/* Koppen h4-h6: h1-h3 zijn hierboven al gestyled. h4 trekt Brown Sugar door
   op kleinere schaal; h5/h6 gebruiken dikgedrukt Open Sauce i.p.v. Brown
   Sugar — dat sierlijke lettertype is minder leesbaar op kleine formaten. */
:where(.entry-content, .editor-styles-wrapper) h1, :where(.entry-content, .editor-styles-wrapper) h2, :where(.entry-content, .editor-styles-wrapper) h3,
:where(.entry-content, .editor-styles-wrapper) h4, :where(.entry-content, .editor-styles-wrapper) h5, :where(.entry-content, .editor-styles-wrapper) h6{margin-top:0;}
:where(.entry-content, .editor-styles-wrapper) h4{
  font-family:'Brown Sugar', serif;
  font-weight:400;
  color:var(--brand);
  font-size:1.5rem;
  line-height:1.2;
}
:where(.entry-content, .editor-styles-wrapper) h5, :where(.entry-content, .editor-styles-wrapper) h6{
  font-family:'Open Sauce Sans', sans-serif;
  font-weight:700;
  color:var(--brand);
}
:where(.entry-content, .editor-styles-wrapper) h5{font-size:1.15rem;}
:where(.entry-content, .editor-styles-wrapper) h6{font-size:1rem;}

/* Lijsten: zelfde rustkleurige bolletjes als .about-trainings hierboven.
   Social Icons is ook een <ul> maar krijgt zijn eigen behandeling verderop. */
:where(.entry-content, .editor-styles-wrapper) ul:not(.wp-block-social-links){
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
:where(.entry-content, .editor-styles-wrapper) ul:not(.wp-block-social-links) li{padding-left:18px; position:relative;}
:where(.entry-content, .editor-styles-wrapper) ul:not(.wp-block-social-links) li::before{
  content:"";
  position:absolute; left:0; top:.55em;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--rust);
}
:where(.entry-content, .editor-styles-wrapper) ol{padding-left:22px; display:flex; flex-direction:column; gap:10px;}
:where(.entry-content, .editor-styles-wrapper) ol li::marker{color:var(--rust); font-weight:700;}
:where(.entry-content, .editor-styles-wrapper) li > ul, :where(.entry-content, .editor-styles-wrapper) li > ol{margin-top:8px;}

/* Quote/Pullquote: zelfde uiterlijk als .about-quote hierboven. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote{
  margin:0;
  padding:20px 26px;
  border-left:4px solid var(--rust);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:var(--clay);
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote p{font-size:1.15rem; font-style:italic; color:var(--sage-deep); line-height:1.5;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote cite{display:block; margin-top:14px; font-style:normal; font-size:.95rem; color:var(--brand); text-align:right;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-quote.is-style-large p{font-size:1.5rem;}

:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote{
  margin:0;
  padding:32px;
  border-radius:var(--radius-md);
  background:var(--clay);
  text-align:center;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote p{font-size:1.3rem; font-style:italic; color:var(--sage-deep); line-height:1.5;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote cite{color:var(--brand);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote.is-style-solid-color{background:var(--sage-deep);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote.is-style-solid-color p{color:var(--cream-ink);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-pullquote.is-style-solid-color cite{color:var(--cream-ink);}

/* Knoppen: zelfde pilvorm als form button hierboven. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-button__link{
  background:var(--rust);
  color:var(--cream-ink);
  border:none;
  border-radius:999px;
  padding:14px 30px;
  font-weight:700;
  transition:transform .25s ease, background .25s ease;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-button__link:hover{background:var(--rust-soft); transform:translateY(-2px); color:var(--cream-ink);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link{
  background:transparent;
  color:var(--rust);
  border:2px solid var(--rust);
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-button.is-style-outline .wp-block-button__link:hover{
  background:var(--rust);
  color:var(--cream-ink);
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-buttons{gap:16px;}

/* Afbeelding: standaard afgeronde hoeken (niet de organische blobvorm —
   die is afgestemd op vaste 3:4-portretten en zou bij willekeurige
   redacteur-foto's vervormd ogen). */
:where(.entry-content, .editor-styles-wrapper) .wp-block-image img{border-radius:var(--radius-md);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-image.is-style-rounded img{border-radius:50%;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-image figcaption,
:where(.entry-content, .editor-styles-wrapper) .wp-element-caption{
  font-size:.85rem;
  color:var(--brand);
  text-align:center;
  opacity:.85;
  margin-top:10px;
}

/* Galerij: afgeronde thumbnails, tussenruimte in lijn met de rest van de site. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-gallery{gap:24px;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-gallery figure.wp-block-image img{border-radius:var(--radius-md);}

/* Tabel: zachte linnen lijnen i.p.v. harde randen (vive.md: "vermijd harde
   contrasten"), koprij in klei-tint. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-table table{width:100%; border-collapse:collapse;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-table th, :where(.entry-content, .editor-styles-wrapper) .wp-block-table td{
  padding:12px 16px;
  border-bottom:1px solid var(--linen);
  text-align:left;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-table th{font-weight:700; color:var(--brand); background:var(--clay);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-table.is-style-stripes tbody tr:nth-child(odd){background:var(--cream-ink);}

/* Scheidingslijn: korte, gecentreerde staaf i.p.v. een harde volle lijn —
   leest als een zachte adempauze in plaats van een rechte streep. */
:where(.entry-content, .editor-styles-wrapper) hr,
:where(.entry-content, .editor-styles-wrapper) .wp-block-separator{
  border:none;
  height:3px;
  width:120px;
  margin:40px auto;
  border-radius:999px;
  background:var(--rust);
  opacity:.55;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-separator.is-style-wide{width:100%; opacity:.35;}
:where(.entry-content, .editor-styles-wrapper) .wp-block-separator.is-style-dots{
  width:auto;
  height:auto;
  background:none;
  opacity:1;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-separator.is-style-dots::before{color:var(--rust);}

/* Kolommen: kernmechaniek blijft van WordPress, enkel tussenruimte
   afgestemd op de rest van de site (bv. .services{gap:40px}). */
:where(.entry-content, .editor-styles-wrapper) .wp-block-columns{gap:40px;}

/* Cover: afgeronde hoeken, zelfde conventie als foto-containers elders. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-cover{border-radius:var(--radius-lg); overflow:hidden;}

/* Embed: zelfde uiterlijk als .map-wrap hierboven. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-embed{border-radius:var(--radius-lg); overflow:hidden; background:var(--clay);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-embed iframe{border:0;}

/* Code/Preformatted: minimale stijl, lage prioriteit. */
:where(.entry-content, .editor-styles-wrapper) code,
:where(.entry-content, .editor-styles-wrapper) .wp-block-preformatted{
  background:var(--linen);
  border-radius:12px;
  padding:2px 8px;
  font-size:.92em;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-code{
  background:var(--linen);
  border-radius:var(--radius-md);
  padding:18px 22px;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-code code{background:none; padding:0;}

/* Social Icons-blok: altijd hetzelfde egale terracotta cirkeltje als
   .social-links__item hierboven, ongeacht welke stijl gekozen is —
   overschrijft WordPress' eigen per-netwerk-merkkleuren. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-social-links .wp-social-link{
  background:var(--rust) !important;
  transition:background .25s ease, transform .25s ease;
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-social-links .wp-social-link a{color:var(--cream-ink);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-social-links .wp-social-link:hover{background:var(--rust-soft) !important; transform:translateY(-2px);}
:where(.entry-content, .editor-styles-wrapper) .wp-block-social-links .wp-social-link svg{width:20px; height:20px;}

/* Kleur- en lettergrootte-hulpklassen: WordPress vult via
   editor-color-palette/editor-font-sizes (inc/setup.php) enkel de
   keuzelijsten in de editor; een classic theme zonder theme.json moet de
   bijhorende .has-*-classes zelf definiëren. Ongescoped (niet onder
   .entry-content) zodat ze ook binnen media-text-rich-text-velden werken. */
.has-brand-color{color:var(--brand);}
.has-brand-background-color{background-color:var(--brand);}
.has-brand-border-color{border-color:var(--brand);}
.has-sage-color{color:var(--sage);}
.has-sage-background-color{background-color:var(--sage);}
.has-sage-border-color{border-color:var(--sage);}
.has-sage-deep-color{color:var(--sage-deep);}
.has-sage-deep-background-color{background-color:var(--sage-deep);}
.has-sage-deep-border-color{border-color:var(--sage-deep);}
.has-clay-color{color:var(--clay);}
.has-clay-background-color{background-color:var(--clay);}
.has-clay-border-color{border-color:var(--clay);}
.has-sand-color{color:var(--sand);}
.has-sand-background-color{background-color:var(--sand);}
.has-sand-border-color{border-color:var(--sand);}
.has-cacao-color{color:var(--cacao);}
.has-cacao-background-color{background-color:var(--cacao);}
.has-cacao-border-color{border-color:var(--cacao);}
.has-rust-color{color:var(--rust);}
.has-rust-background-color{background-color:var(--rust);}
.has-rust-border-color{border-color:var(--rust);}
.has-rust-soft-color{color:var(--rust-soft);}
.has-rust-soft-background-color{background-color:var(--rust-soft);}
.has-rust-soft-border-color{border-color:var(--rust-soft);}
.has-cream-ink-color{color:var(--cream-ink);}
.has-cream-ink-background-color{background-color:var(--cream-ink);}
.has-cream-ink-border-color{border-color:var(--cream-ink);}
.has-linen-color{color:var(--linen);}
.has-linen-background-color{background-color:var(--linen);}
.has-linen-border-color{border-color:var(--linen);}

.has-small-font-size{font-size:.98rem;}
.has-medium-font-size{font-size:1.08rem;}
.has-large-font-size{font-size:1.3rem;}
.has-x-large-font-size{font-size:2.4rem;}

/* Kalenderblok (wp:calendar, bv. de "Agenda"-pagina): zachte kaart i.p.v.
   een kale tabel met harde randen, dezelfde kaart-conventie als
   .about-trainings/form hierboven. */
:where(.entry-content, .editor-styles-wrapper) .wp-block-calendar{
  background:var(--cream-ink);
  border-radius:var(--radius-lg);
  padding:28px;
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table{width:100%; border-collapse:collapse;}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table caption{
  font-family:'Brown Sugar', serif;
  font-weight:400;
  color:var(--brand);
  font-size:1.5rem;
  margin-bottom:16px;
  text-align:center;
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table th{
  font-size:.78rem;
  font-weight:700;
  color:var(--brand);
  opacity:.8;
  padding:8px 4px;
  text-align:center;
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table td{
  padding:8px 4px;
  font-size:.92rem;
  text-align:center;
  border-top:1px solid var(--linen);
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table td.pad{border:none;}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table #today{
  background:var(--rust);
  color:var(--cream-ink);
  border-radius:10px;
  font-weight:700;
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table a{color:var(--rust); font-weight:700; text-decoration:underline; text-underline-offset:2px;}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-table a:hover{color:var(--rust-soft);}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-nav{
  display:flex;
  justify-content:space-between;
  margin-top:14px;
  font-size:.85rem;
}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-nav a{color:var(--rust); text-decoration:none; font-weight:700;}
:where(.entry-content, .editor-styles-wrapper) .wp-calendar-nav a:hover{color:var(--rust-soft);}

@media (max-width:760px){
  .entry-content--sections > *{max-width:none;}
}

/* ---------- onderhoudsmodus: eigen, op zichzelf staande pagina ---------- */
body.maintenance-mode{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--sand);
  text-align:center;
}
.maintenance-mode__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  padding:60px 28px;
}
.maintenance-mode__logo{width:min(100%, 160px); margin-bottom:8px;}
.maintenance-mode__inner h1{font-size:clamp(1.7rem, 4vw, 2.5rem);}
.maintenance-mode__text{max-width:520px; font-size:1.05rem; line-height:1.6;}
.maintenance-mode__contact a{color:var(--rust); font-weight:700; text-decoration:underline; text-underline-offset:3px;}
.maintenance-mode__contact a:hover{color:var(--rust-soft);}