/* ============================================================
   VALE MIOTO - site-specifieke CSS
   Kleuren, typografie en componenten overgenomen van de bestaande
   live site: teal accent, creme achtergrond.

   Site-specifiek (net als functions-additions-valemioto.php) - hoort
   niet in het herbruikbare alligator-base-thema, enkel in deze
   afgeleide site. Wordt geladen via een aparte wp_enqueue_style() in
   functions.php (na style.css), i.p.v. via het "Additional CSS"-veld
   in Site Editor - zo staat alle CSS in versiebeheerbare bestanden en
   hoef je nooit meer iets te kopiëren/plakken bij een wijziging.

   LETTERTYPES - max. 2 op deze site, gedefinieerd als variabelen
   hieronder. Wil je het lettertype van de hele site wijzigen? Pas ENKEL
   --vm-font-body en/of --vm-font-heading hieronder aan (en de
   @import-regel als het nieuwe lettertype ook van Google Fonts komt) -
   de rest van dit bestand verwijst overal naar deze twee variabelen, dus
   je hoeft nergens anders iets te veranderen.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap');

:root {
  --vm-teal: #0c7d88;
  --vm-bg: #ebe8e6;
  --vm-text: #1d1f25;

  /* Contrasterende accentkleur (terracotta/roest-oranje) naast het
     donkere teal - warme, aardse tint die aansluit bij de houten balken
     en het licht op de site-foto's. Voorlopig enkel gebruikt voor de
     header-tekstschaduw hieronder; kan later ook elders toegepast worden
     (bv. knoppen, citaten, hover-states) als accent. */
  --vm-accent: #c14a5b;

  /* De 2 lettertypes van deze site. */
  --vm-font-body: "Readex Pro", sans-serif;
  --vm-font-heading: "Cormorant Garamond", serif;

  /* Breedte van het Upcoming/Past-blok op de Retreats-pagina (zie
     .alligator-retreats-columns) - hier op :root gedefinieerd (i.p.v.
     enkel op dat element zelf) zodat de scheidingslijnen ELDERS op de
     pagina (geen afstammeling van dat blok) dezelfde CSS-variabele
     kunnen uitlezen en dus altijd exact dezelfde breedte krijgen. */
  --vm-retreats-width: min(70vw, 1500px);

  /* LINK-KLEURSCHEMA - twee aparte "zones" met elk hun eigen
     standaard-/hoverkleur, als semantische variabelen i.p.v. overal
     --vm-teal/--vm-accent rechtstreeks te gebruiken. Wil je de kleuren
     ooit weer omdraaien (of een derde kleur invoeren)? Pas dan ENKEL
     de 4 regels hieronder aan - de rest van dit bestand (en alle
     link-regels die ernaar verwijzen) volgt automatisch mee.

     - "body"-zone: gewone tekstlinks middenin de paginatekst (zie
       "GEWONE TEKSTLINKS (algemeen)" verderop) - terracotta-accent
       als standaard (duidelijk "klikbaar" tussen de lopende tekst),
       teal bij hover.
     - "nav"-zone: header (site-titel, knoppen, login-link) en footer -
       bewust het omgekeerde en NIET gekoppeld aan de body-zone, want
       hier is teal juist de herkenbare merkkleur en accent het
       "actieve" hover-signaal. */
  --vm-link-color: var(--vm-accent);
  /* Lichtjes opgehelderde teal i.p.v. de pure --vm-teal (die elders al
     voor koppen/knoppen dient) - oogt als een zachte "highlight" bij
     hover op een link middenin de tekst, i.p.v. een harde, volledige
     kleurwissel. */
  --vm-link-hover-color: color-mix(in srgb, var(--vm-teal) 70%, white);
  --vm-nav-link-color: var(--vm-teal);
  --vm-nav-link-hover-color: var(--vm-accent);
}

/* Gewone "body"/"h1..h6"-selectors (bewust GEEN class als
   "body.wp-theme-alligator" ervoor - dat leek de specificiteit netjes op
   te lossen, maar brak deze regels net in het Pagina/Bericht-bewerk-
   canvas, waar WordPress "body"-selectors op een eigen manier verwerkt).
   "!important" op enkel de eigenlijke waarde (niet de hele regel) wint
   in plaats daarvan altijd van WordPress' eigen gegenereerde kleur-
   regels, ongeacht laadvolgorde. */
body {
  background-color: var(--vm-bg) !important;
  color: var(--vm-text) !important;
  font-family: var(--vm-font-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vm-font-heading);
  font-weight: 400;
  color: var(--vm-teal) !important;
}

/* Grote, elegante welkomsttitel op de homepage - gelijkaardige
   uitstraling (grootte, letter-spacing) als de Retreats-paginatitel,
   maar bewust GEEN ALLCAPS: cursieve, lichte serif leest véél
   vrouwelijker/elegant in gewone hoofdletter/kleine-letter-mix dan in
   uppercase. */
/* Grote, elegante titel - gebruikt op zowel de homepage ("Welcome to
   Vale Mioto") als de Retreats-pagina ("Retreats at Vale Mioto"). Op
   BEIDE pagina's is dit een gewoon "wp:heading"-blok, rechtstreeks in de
   pagina-content getypt (niet via een post-title-blok in het template) -
   dat maakt de titel op beide pagina's op dezelfde manier bewerkbaar in
   de block-editor, en voorkomt de eigenaardigheden van het
   "core/post-title"-blok (o.a. "align":"center" centreert de TEKST niet
   automatisch, enkel de eigen breedte - vandaar text-align hieronder
   expliciet). Bewust GEEN ALLCAPS: cursieve, lichte serif leest véél
   vrouwelijker/elegant in gewone hoofdletter/kleine-letter-mix dan in
   uppercase. */
.alligator-vm-welcome-title {
  text-align: center;
  font-style: italic;
  font-weight: 400;
  font-size: 3rem;
  letter-spacing: 0.02em;
  /* Zelfde afstand tot de header/content als voorheen via WordPress'
     eigen spacing-presets (in plaats van een vaste rem-waarde), zodat
     de titel op beide pagina's - ongeacht of ze als "wp:heading" of
     "wp:html" is ingevoegd - exact dezelfde positie krijgt. */
  margin-top: var(--wp--preset--spacing--60);
  margin-bottom: var(--wp--preset--spacing--40);
}

@media (max-width: 600px) {
  .alligator-vm-welcome-title {
    font-size: 2.1rem;
  }
}

.alligator-vm-title {
  font-size: 1.75rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 1rem;
  /* Compenseert een gekend CSS-effect: bij grote letter-spacing op
     gecentreerde tekst komt er ook spatiëring NA de laatste letter,
     waardoor de tekst optisch naar links lijkt te verschuiven. */
  padding-left: 0.35em;
}

/* Introtekst - EEN gedeelde regel voor zowel de homepage als de
   Retreats-pagina, zodat ze gegarandeerd pixel-identiek zijn. Beide
   paragrafen dragen rechtstreeks de class "alligator-vm-intro" in de
   pagina-content (Advanced > Additional CSS class(es) in de editor) -
   bewust GEEN "body.home"-scoping meer: die class bestaat enkel op het
   front-end, niet in het bewerk-canvas van de editor (dat is een eigen
   iframe met andere body-classes), dus de introtekst bleef daar
   ongestyled. Een gewone class werkt overal identiek.
   De "body.home"-variant blijft hieronder als vangnet staan voor het
   front-end, voor het geval de class ooit nog ontbreekt op een
   paragraaf. */
.alligator-vm-intro,
body.home .wp-block-post-content p:not(.alligator-vm-subtitle),
body.home .alligator-vm-hero p:not(.alligator-vm-subtitle) {
  max-width: 48rem;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
  text-align: center;
  font-family: var(--vm-font-heading);
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.8;
  color: var(--vm-teal);
}

@media (max-width: 600px) {
  .alligator-vm-intro,
  body.home .wp-block-post-content p,
  body.home .alligator-vm-hero p {
    max-width: 100%;
    font-size: 1.1rem;
  }
}

/* Scheidingslijnen (wp:separator) krijgen altijd dezelfde breedte als
   het Upcoming/Past-blok (--vm-retreats-width, zie
   .alligator-retreats-columns hieronder) - ongeacht in welke ouder-
   container ze toevallig staan. Zonder deze regel kan hun lengte
   verschillen naargelang de omringende structuur (bv. binnen een aparte
   wp:group t.o.v. rechtstreeks in wp:post-content). */
.wp-block-post-content .wp-block-separator {
  max-width: var(--vm-retreats-width, 48rem);
  margin-left: auto;
  margin-right: auto;
  /* Teal i.p.v. de neutrale browserstandaard-kleur. */
  border-bottom-color: rgba(12, 125, 136, 0.35);
  /* Iets dikker dan de browserstandaard (meestal 1px). */
  border-bottom-width: 2px;
}

/* --vm-retreats-width is vw-gebaseerd (min(70vw, 1500px)) - op smalle
   schermen wordt dat veel smaller dan de tekstkolom zelf (die geen
   vw-limiet heeft), waardoor de separator te veel inspringt t.o.v. de
   omringende tekst. Op kleinere schermen laten we de separator daarom
   gewoon de volledige breedte van zijn kolom innemen, net als de tekst. */
@media (max-width: 782px) {
  .wp-block-post-content .wp-block-separator {
    max-width: 100%;
  }
}

.alligator-vm-subtitle {
  font-family: var(--vm-font-body);
  letter-spacing: 0.2em;
  text-align: center;
  line-height: 1.8;
}


/* ============================================================
   HEADER
   Bloemmotief-logo + site-titel links, "Retreats"-knop (pil) rechts.
   Plain hand-written HTML (via wp:html in header-retreats.php) - dus
   layout (flex) hier expliciet in CSS i.p.v. via Gutenberg block-support-
   classes zoals bij een wp:group-blok.
   ============================================================ */

.alligator-vm-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  min-height: 4.5rem;
  /* Vast minimum (1.5rem) op smalle schermen, meegroeiend tot een ruimere
     marge (max. 5rem) op brede schermen - i.p.v. altijd 1.5rem, wat op
     een groot scherm de inhoud te dicht tegen de randen liet plakken. */
  padding: 0 clamp(1.5rem, 4vw, 5rem);
  /* Lichte transparantie + blur (i.p.v. een vaste, ondoorzichtige
     achtergrondkleur) zodat de pagina-inhoud er bij het scrollen subtiel
     doorheen/onder vandaan zichtbaar blijft, in plaats van hard verborgen
     te worden door de sticky header. */
  background-color: rgba(244, 242, 240, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.alligator-vm-header-left {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.75rem;
}

.alligator-vm-site-title a {
  /* Elegante serif (dezelfde als de paginatitels) i.p.v. de vette sans-
     serif hoofdletters van voorheen - die oogden vierkant/stoer, wat niet
     paste bij de rest van de site. Iets groter formaat en ruimere
     letter-spacing compenseren het dunnere serif-gewicht, zodat de titel
     ondanks het lagere font-weight nog steeds goed leesbaar/zichtbaar
     blijft op de crème achtergrond. */
  /* Zelfde sierlijke serif als de "Welcome to Vale Mioto"-paginatitel,
     maar bewust RECHTOP (niet cursief) - zo blijft het header-merkje
     contrasteren met de cursieve paginatitel eronder, in plaats van er
     bijna identiek aan te ogen. Iets ruimere letter-spacing geeft de
     rechtopstaande vorm ditzelfde verfijnde, "wordmark"-achtige karakter
     dat de cursiefstijl elders al vanzelf heeft. */
  /* Zwaarste beschikbare gewicht van Cormorant Garamond (600, zie de
     @import bovenaan dit bestand) i.p.v. 500 - steviger/opvallender
     zonder de sierlijke serif-vorm te verliezen. */
  font-family: var(--vm-font-heading);
  font-size: 1.7rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.05em;
  /* "nav"-zone: zie het link-kleurschema bij :root hierboven. */
  color: var(--vm-nav-link-color);
  text-decoration: none;
  /* Subtiel dieptelaagje - iets steviger dan een amper zichtbare schaduw,
     nog steeds geen zware/donkere drop-shadow. */
  text-shadow: 0 1.5px 4px rgba(193, 74, 91, 0.45);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

.alligator-vm-site-title a:hover {
  color: var(--vm-nav-link-hover-color);
  text-shadow: 0 2px 6px rgba(193, 74, 91, 0.6);
}

.alligator-vm-cta-button {
  display: inline-block;
  background-color: transparent;
  border: 1px solid var(--vm-nav-link-color);
  color: var(--vm-nav-link-color);
  border-radius: 8px;
  padding: 0.5rem 1.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  /* Zelfde dieptelaagje als op "Vale Mioto" in de site-titel, voor
     visuele consistentie binnen de hele header. */
  text-shadow: 0 1.5px 4px rgba(193, 74, 91, 0.45);
}

.alligator-vm-cta-button:hover {
  background-color: var(--vm-nav-link-hover-color);
  border-color: var(--vm-nav-link-hover-color);
  color: #fff;
  /* Donkere schaduw i.p.v. de terracotta-tint hierboven - op de nu
     zelf-terracotta achtergrond zou dezelfde kleur amper opvallen. */
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}

/* Ruimte tussen de nav-knoppen (bv. "The Quinta" + "Retreats") - zonder
   deze regel plakken ze tegen elkaar aan, want .alligator-vm-nav-cta zelf
   is enkel een simpele div, geen flex-container. */
.alligator-vm-nav-cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}


/* ============================================================
   PORTRETTEN (cirkel) - homepage About-foto + Teachers-foto's
   ============================================================ */

/* Centreert de portret-figuur zelf (niet enkel de tekst errond) - een
   <figure> is standaard een blok-element, dus "text-align:center" op de
   ouder centreert die niet vanzelf. Geldt voor zowel de homepage-foto
   als elke Teachers-foto (los blok en de archiefpagina). */
.alligator-vm-portrait,
.alligator-teacher-portret {
  margin-left: auto;
  margin-right: auto;
}

.alligator-vm-portrait img,
.alligator-teacher-portret img,
img.alligator-teacher-portret {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Grotere maat specifiek op de Teachers-overzichtspagina. */
img.alligator-teacher-archive-portret {
  width: 180px !important;
  height: 180px !important;
}

/* Portretfoto op de individuele teacher-pagina (bv. /teachers/robin-
   amanda/) - dit is de post-featured-image van het "Teacher"-post-type
   in het basisthema (single-person.html), niet specifiek voor Vale
   Mioto opgezet en dus standaard vierkant. Hier bewust gescoped in
   vale-mioto.css (i.p.v. het basisthema zelf aan te passen) zodat enkel
   déze site de ronde stijl krijgt. */
/* Rij met foto + tekstkolom op de individuele Teacher-pagina. Op brede
   schermen breekt enkel de foto uit naar links, buiten de normale
   paginamarge (zie .alligator-person-portret hieronder) - de tekstkolom
   (naam, functie, bio, Retreats-lijst, Previous/Next-balk) blijft binnen
   de normale marge en deelt daardoor overal dezelfde linkerrand. */
.alligator-person-layout {
  align-items: flex-start;
  /* Ruimere kolomtussenruimte dan elders (i.p.v. een losse negatieve
     margin op de foto) - dat is wat de foto z'n "buiten de normale marge"
     uitstraling geeft, zonder de linker/rechter-balans van het blok te
     verstoren (een negatieve margin op enkel de foto liet meer lege
     ruimte over aan de rechterkant dan aan de linkerkant, waardoor de
     zichtbare inhoud als geheel links van het midden bleef staan). */
  column-gap: 4rem;
  row-gap: 1.5rem;
  /* WordPress' "wide" alignment centreert dit blok normaal op de volle
     wideSize (72rem/1152px, theme.json) - veel breder dan de werkelijke
     inhoud (foto + tekstkolom van max. 42rem). Daardoor bleef er lege
     ruimte over aan de rechterkant van het blok. Hier expliciet de breedte
     beperken tot exact foto + gap + tekstkolom, en dát gecentreerd. */
  max-width: calc(180px + 4rem + 42rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.alligator-person-portret {
  /* Zonder deze regel kromp deze figure in de flex-rij (samen met de
     tekstkolom ernaast) smaller dan haar eigen breedte, waardoor de foto
     ovaal in plaats van rond oogde. */
  flex-shrink: 0;
}

.alligator-person-portret img {
  width: 180px;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Tekstkolom (naam, functie, bio, Retreats-lijst, navigatiebalk) - eigen
   leesbreedte i.p.v. de volledige resterende ruimte naast de foto. */
.alligator-person-textcol {
  flex: 1 1 auto;
  max-width: 42rem;
}

/* Professional title (alligator_person_function) onder de naam, bovenaan
   de Teacher-pagina zelf. Stond al als "toe te voegen" genoteerd in
   single-person.html maar was nooit effectief overgenomen in deze CSS. */
.alligator-person-function {
  margin-top: 0.25rem;
  font-style: italic;
  /* Dunnere gewicht dan de standaard bodytekst - oogt sierlijker. */
  font-weight: 200;
  opacity: 0.75;
}

@media (max-width: 600px) {
  .alligator-person-layout {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .alligator-person-portret {
    margin-left: 0;
  }

  .alligator-person-textcol {
    max-width: 100%;
  }
}


/* ============================================================
   RETREATS-CAROUSEL
   Horizontale scroll-snap galerij bovenaan de Retreats-pagina -
   zelfde mechanisme als de Members-carousel in alligator-base.
   Sleep gerust meer wp:image-blokken in de group om meer slides
   toe te voegen.
   ============================================================ */

.alligator-vm-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding: 0 0 1rem;
  scrollbar-width: thin;
}

/* Vierkante foto's, meerdere tegelijk zichtbaar (i.p.v. 1 paginabrede foto
   per slide) - scrollbaar/snappend, zoals op robinamanda.co.uk. */
.alligator-vm-carousel .wp-block-image {
  flex: 0 0 320px;
  scroll-snap-align: start;
  margin: 0;
}

.alligator-vm-carousel .wp-block-image img {
  width: 320px;
  height: 320px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

@media (max-width: 782px) {
  .alligator-vm-carousel .wp-block-image {
    flex-basis: 220px;
  }
  .alligator-vm-carousel .wp-block-image img {
    width: 220px;
    height: 220px;
  }
}

/* Links/rechts-pijltjes (toegevoegd via carousel-arrows.js). Cirkelvormige
   knop, chevron getekend met CSS-randen (geen tekstsymbool - geen risico
   op verkeerde tekencodering).

   Breedte: de carousel loopt altijd volledig tot de vensterranden
   (edge-to-edge), berekend door assets/carousel-widen.js. Bewust GEEN
   CSS-only oplossing (bv. ".has-global-padding > .alignfull" of een
   vaste vw-marge) - de carousel zit genest binnen "wp:post-content",
   wat WordPress altijd in een eigen wrapper-div stopt, waardoor
   CSS-technieken die op een directe ouder-kind-relatie leunen
   onbetrouwbaar bleken. Hier enkel nog "position: relative" nodig als
   ankerpunt voor de absoluut gepositioneerde pijltjes. */
.alligator-vm-carousel-wrap {
  position: relative;
}

/* Leesbare kolombreedte voor de gewone tekstblokken (niet voor de
   carousel/hero-groepen, die hun eigen breedte zelf regelen). */
.wp-block-post-content > p,
.wp-block-post-content > h2 {
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* Gewone tekstparagrafen in retreat-posts (bv. de Summer Tantra Week-
   pagina) - iets rustiger dan de browserstandaard (zwart, weinig
   regelafstand): warmere, minder harde tekstkleur en meer ademruimte
   tussen paragrafen. ":not(.alligator-vm-intro)" is nodig omdat deze
   regel anders (2 classes) een hogere specificiteit heeft dan
   ".alligator-vm-intro" (1 class) en zo per ongeluk de introtekst-stijl
   op de Retreats-pagina zou overschrijven - die paragraaf zit immers
   óók in ".wp-block-post-content". */
.wp-block-post-content .wp-block-paragraph:not(.alligator-vm-intro) {
  font-size: 1.05rem;
  line-height: 1.85;
  color: #33352f;
  margin-bottom: 1.5rem;
}

/* Testimonial-citaten (wp:quote-blok) - cursieve koppenfont in teal met
   een dunne teal zijlijn, zoals een rustige "getuigenis"-stijl i.p.v. de
   kale browserstandaard. De bronvermelding (<cite>) blijft klein/grijs
   en rechtop, zodat ze duidelijk als toeschrijving leest, niet als
   onderdeel van het citaat zelf. */
.wp-block-post-content .wp-block-quote {
  max-width: 42rem;
  margin: 2.5rem auto;
  padding-left: 1.5rem;
  border-left: 3px solid var(--vm-accent);
}

.wp-block-post-content .wp-block-quote .wp-block-paragraph {
  font-family: var(--vm-font-heading);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--vm-teal);
  margin-bottom: 0.75rem;
}

.wp-block-post-content .wp-block-quote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--vm-font-body);
  font-style: normal;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #5a5f66;
}

/* Opsommingslijsten (bv. "Accommodation" onder Practicals) - iets meer
   lucht tussen items, en de bullet in de accentkleur i.p.v. standaard zwart. */
.wp-block-post-content .wp-block-list {
  margin: 1rem 0 1.5rem;
  padding-left: 1.3rem;
  /* Standaard bullet volledig uit - vervangen door een eigen ::before
     hieronder. ::marker met een custom "content" wordt door sommige
     browsers (o.a. Safari) niet consequent ondersteund - dat gaf een
     kleur-wissel die wél werkte, maar liet de ronde standaardbullet
     gewoon staan. list-style:none + ::before werkt overal identiek. */
  list-style: none;
}

.wp-block-post-content .wp-block-list li {
  position: relative;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.wp-block-post-content .wp-block-list li:last-child {
  margin-bottom: 0;
}

.wp-block-post-content .wp-block-list li::before {
  /* Dunne streep i.p.v. een driehoekje/bolletje - rustiger en
     "editorial" ogend, past beter bij de sierlijke, ingetogen stijl van
     de site dan een geometrische vorm. */
  content: "–";
  position: absolute;
  left: -1.25rem;
  color: var(--vm-teal);
  font-weight: 600;
}

.alligator-vm-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.alligator-vm-carousel-arrow:hover {
  background: var(--vm-teal);
}

.alligator-vm-carousel-arrow:hover::before {
  border-color: #fff;
}

.alligator-vm-carousel-arrow.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.alligator-vm-carousel-arrow::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--vm-teal);
  border-bottom: 2px solid var(--vm-teal);
  transition: border-color 0.15s ease;
}

.alligator-vm-carousel-arrow--prev {
  left: 1rem;
}

.alligator-vm-carousel-arrow--prev::before {
  transform: rotate(135deg);
  margin-left: 0.2rem;
}

.alligator-vm-carousel-arrow--next {
  right: 1rem;
}

.alligator-vm-carousel-arrow--next::before {
  transform: rotate(-45deg);
  margin-right: 0.2rem;
}

@media (max-width: 600px) {
  .alligator-vm-carousel-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .alligator-vm-carousel {
    scroll-behavior: auto;
  }
}


/* ============================================================
   CAROUSEL-LIGHTBOX
   Volledig-scherm overlay bij klik op een carousel-foto (via
   carousel-lightbox.js).
   ============================================================ */

.alligator-vm-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  /* Column i.p.v. de vroegere (impliciete) row - zo komt de caption ONDER
     de foto te staan i.p.v. ernaast. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.alligator-vm-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.alligator-vm-lightbox-img {
  max-width: 90vw;
  /* Iets minder hoog dan voorheen (was 90vh) om ruimte te laten voor de
     caption eronder, zonder dat de foto+tekst samen buiten beeld vallen. */
  max-height: 80vh;
  object-fit: contain;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

/* Caption staat ENKEL hier, in de lightbox - bewust niet onder de
   thumbnails in de gewone (kleine) carousel zelf. Lichte, ingetogen tekst
   op de donkere overlay-achtergrond, met wat afstand tot de foto erboven. */
.alligator-vm-lightbox-caption {
  margin: 1rem 0 0;
  max-width: 90vw;
  font-family: var(--vm-font-heading);
  font-style: italic;
  font-size: 1.05rem;
  color: #f4f2f0;
  text-align: center;
}

.alligator-vm-lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.alligator-vm-lightbox-close::before,
.alligator-vm-lightbox-close::after {
  content: "";
  position: absolute;
  width: 1.1rem;
  height: 2px;
  background: var(--vm-teal);
}

.alligator-vm-lightbox-close::before {
  transform: rotate(45deg);
}

.alligator-vm-lightbox-close::after {
  transform: rotate(-45deg);
}

.alligator-vm-lightbox-close:hover::before,
.alligator-vm-lightbox-close:hover::after {
  background: #b03030;
}

body.alligator-vm-lightbox-locked {
  overflow: hidden;
}

/* Links/rechts-navigatie binnen de lightbox - zelfde chevron-stijl als de
   carousel-pijltjes zelf. */
.alligator-vm-lightbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.alligator-vm-lightbox-arrow:hover {
  background: var(--vm-teal);
}

.alligator-vm-lightbox-arrow:hover::before {
  border-color: #fff;
}

.alligator-vm-lightbox-arrow::before {
  content: "";
  display: block;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid var(--vm-teal);
  border-bottom: 2px solid var(--vm-teal);
  transition: border-color 0.15s ease;
}

.alligator-vm-lightbox-arrow--prev {
  left: 1.5rem;
}

.alligator-vm-lightbox-arrow--prev::before {
  transform: rotate(135deg);
  margin-left: 0.2rem;
}

.alligator-vm-lightbox-arrow--next {
  right: 1.5rem;
}

.alligator-vm-lightbox-arrow--next::before {
  transform: rotate(-45deg);
  margin-right: 0.2rem;
}

@media (max-width: 600px) {
  .alligator-vm-lightbox {
    padding: 1.5rem;
  }

  .alligator-vm-lightbox-arrow {
    width: 2.25rem;
    height: 2.25rem;
  }

  .alligator-vm-lightbox-arrow--prev {
    left: 0.5rem;
  }

  .alligator-vm-lightbox-arrow--next {
    right: 0.5rem;
  }
}


/* ============================================================
   UPCOMING / PAST RETREATS (op de Retreats-pagina zelf)
   ============================================================ */

/* Twee kolommen naast elkaar: Upcoming neemt 2/3, Past 1/3. Elke kolom
   heeft een eigen wrapper-div (simpel en robuust).

   Belangrijk: dit hoeft NIET meer "uit te breken" uit een smallere
   ouder-breedte - het Retreats-template legt vanaf nu geen eigen
   contentSize-beperking meer op aan wp:post-content (die staat op
   "flow", onbeperkt), enkel de introtekst begrenst zichzelf via haar
   eigen .alligator-vm-intro-class. Hierdoor kan dit element gewoon zijn
   eigen max-width nemen zonder tegen een dubbele beperking te botsen. */
.alligator-retreats-wide {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

.alligator-retreats-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
  /* Bewust breder dan de leeskolom van de introtekst (48rem) - dit blok
     mag duidelijk "uitbreken" uit die smalle kolom, maar minder extreem
     dan voorheen: marge van min. 15% van de vensterbreedte aan elke kant
     (dus max. 70% van het venster breed), met een bovengrens van 1500px
     voor erg brede schermen. Waarde staat op :root (--vm-retreats-width)
     zodat de scheidingslijnen elders op de pagina dezelfde breedte
     kunnen overnemen. */
  max-width: var(--vm-retreats-width);
  margin: 3rem auto 0;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .alligator-retreats-columns {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.alligator-retreats-col h2,
.alligator-retreats-col h3 {
  margin-top: 0;
  /* Overschrijft de "has-text-align-center" die in de editor op deze
     headings staat - links uitgelijnd oogt strakker, vooral omdat de
     Upcoming- en Past-kolom niet even breed zijn (2fr / 1fr). */
  text-align: left !important;
}

/* De shortcode-inhoud (gele kader / Past-lijst) zit in de editor in een
   Group-blok met "globale padding" (has-global-padding) - dat schoof de
   inhoud naar rechts t.o.v. de heading ernaast. Neutraliseren zodat het
   gele kader en de Past-lijst exact links aligneren met hun heading. */
.alligator-retreats-col .wp-block-group.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.alligator-retreats-list--upcoming {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 2rem;
  margin: 1.5rem 0 0;
}

.alligator-retreat-card h3 {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
}

.alligator-retreat-card h3 a,
.alligator-retreat-card h4 a {
  /* Kleur: zie "GEWONE TEKSTLINKS (algemeen)" verderop in dit bestand. */
  text-decoration: none;
}

.alligator-retreat-card h3 a:hover,
.alligator-retreat-card h4 a:hover {
  text-decoration: underline;
}

.alligator-retreats-list--past {
  margin: 1.5rem 0 3rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(12, 125, 136, 0.2);
  text-align: left;
}

.alligator-retreat-card--compact {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(12, 125, 136, 0.15);
}

.alligator-retreat-card--compact h4 {
  margin: 0;
  font-size: 1.1rem;
}

/* Datum onder elke past retreat - subtiel, minder opvallend dan de titel. */
.alligator-retreat-card--compact .alligator-event-date {
  margin: 0.15rem 0 0;
  font-size: 0.8rem;
  font-weight: 300;
  font-style: italic;
  color: #7a7f86;
  letter-spacing: 0;
  text-transform: none;
}

/* [alligator_event_daterange]-shortcode - auto-gegenereerde datumrange
   bovenaan een retreat-post (bv. in de H2 onder de titel). Eigen stijlnaam,
   los van de heading eromheen - hier vrij aan te passen. */
.alligator-event-daterange {
  display: inline-block;
  font-size: 0.65em;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--vm-teal);
  opacity: 1;
}

/* "Previous Retreat" / "Next Retreat"-navigatiebalk onderaan elke
   retreat-post. Ontbreekt een van beide kanten, dan toont de balk een
   niet-klikbare, uitgegrijsde placeholder (zie .alligator-retreat-nav--
   disabled) i.p.v. die kant gewoon leeg te laten. */
.alligator-retreat-nav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  /* Zelfde stijl als de gewone wp:separator-lijnen elders op de site
     (.wp-block-post-content .wp-block-separator) - teal, 2px. */
  border-top: 2px solid rgba(12, 125, 136, 0.35);
  /* !important nodig: WordPress' eigen "laatste-kind"-regel
     (":root :where(.is-layout-constrained) > :last-child { margin-block-
     end: 0 }") heeft een hogere specificiteit dan een enkele class en zet
     de margin-bottom anders terug op 0 - deze balk is hier altijd het
     laatste element in de post-inhoud. */
  margin-bottom: 7rem !important;
}

.alligator-retreat-navlink {
  display: flex;
  flex-direction: column;
  max-width: 45%;
  text-decoration: none;
  color: var(--vm-teal);
}

.alligator-retreat-navlink--next {
  margin-left: auto;
  text-align: right;
  align-items: flex-end;
}

.alligator-retreat-navlink-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.65;
}

.alligator-retreat-navlink-title {
  margin-top: 0.3rem;
  font-family: var(--vm-font-heading);
  font-size: 1.15rem;
  line-height: 1.3;
}

.alligator-retreat-navlink:hover .alligator-retreat-navlink-title {
  color: var(--vm-accent);
}

.alligator-retreat-navlink--disabled,
.alligator-retreat-navlink--disabled .alligator-retreat-navlink-label,
.alligator-retreat-navlink--disabled .alligator-retreat-navlink-title {
  color: #a6a9ac;
  cursor: default;
}

@media (max-width: 600px) {
  .alligator-retreat-nav {
    flex-wrap: wrap;
  }

  .alligator-retreat-navlink,
  .alligator-retreat-navlink--next {
    max-width: 100%;
  }
}

/* Lichtgele "waarschuwings"-achtergrond - laat het "geen upcoming
   retreats"-bericht duidelijker opvallen dan de vorige neutraal-grijze
   achtergrond, in lijn met hoe zulke meldingen doorgaans getoond worden. */
/* Breedte via max-width (i.p.v. margin-left/right in %): WordPress'
   "constrained layout"-blocksupport dwingt op dit element
   "margin-left/right: auto !important" af (voor centrering), wat elke
   eigen margin-percentage hier altijd overschreef. max-width botst niet
   met die geforceerde auto-marges - de auto-marges centreren het element
   gewoon binnen de resterende ruimte. */
.alligator-retreats-empty {
  max-width: 80%;
  /* WordPress' "constrained layout"-blocksupport dwingt op dit element
     margin-left/right: auto !important af (voor centrering in de Group
     eromheen) - enkel met !important op margin-left zelf te overschrijven,
     zodat de linkerrand van het kader exact aansluit bij "Upcoming
     Retreats" erboven. De tekst/knop binnenin blijft wel gecentreerd. */
  margin: 1.5rem 0 3rem !important;
  padding: 1.5rem;
  background-color: #fdf6e0;
  border: 1px solid #f0e2ad;
  border-radius: 8px;
  text-align: center;
}

/* Helptekst-stijl: kleiner en lichter dan gewone lopende tekst, zoals
   verwacht van een korte toelichting i.p.v. inhoudelijke tekst.
   Geldt zowel voor de lege staat (geen upcoming retreats) als voor het
   "stay informed"-blok dat ONDER de lijst verschijnt wanneer er wél
   upcoming retreats zijn - zelfde opmaak, andere boodschap erboven. */
.alligator-retreats-empty p,
.alligator-retreats-notify-below .alligator-vm-intro {
  margin: 0.25rem 0;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--vm-teal);
  line-height: 1.6;
  /* Links uitgelijnd, gelijk met het e-mailveld eronder (zie
     .alligator-notify-form justify-content hieronder) i.p.v. gecentreerd. */
  text-align: left;
}

/* Kleur: zie "GEWONE TEKSTLINKS (algemeen)" verderop in dit bestand. */

/* Kopzin ("No retreats are planned...") staat nu als apart element
   VOOR/BOVEN het gele formulier-kader (".alligator-retreats-empty"), niet
   er meer in - zelfde breedte/uitlijning als het kader eronder, plus wat
   ruimte tot dat kader zodat de twee duidelijk als aparte elementen ogen. */
.alligator-retreats-empty-headline {
  max-width: 80%;
  margin: 1.5rem 0 0.75rem !important;
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--vm-teal);
  line-height: 1.6;
  text-align: left;
}

/* Wat extra ruimte boven het "stay informed"-blok, zodat het duidelijk los
   staat van de Upcoming Retreats-lijst erboven. */
.alligator-retreats-notify-below {
  margin-top: 2.5rem;
}

.alligator-notify-form {
  display: flex;
  flex-wrap: wrap;
  /* flex-start i.p.v. center - zo begint het e-mailveld links, op
     dezelfde plek als de links-uitgelijnde tekst erboven/eronder. */
  justify-content: flex-start;
  gap: 0.75rem;
  margin-top: 1rem;
}

.alligator-notify-form input[type="email"] {
  flex: 1 1 240px;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(12, 125, 136, 0.4);
  border-radius: 8px;
  font-family: var(--vm-font-body);
  font-size: 0.9rem;
}

.alligator-notify-form button {
  background-color: var(--vm-teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.alligator-notify-form button:hover {
  background-color: var(--vm-accent);
}

/* Beknopte privacy-verwijzing onder het notify-formulier - klein en
   zacht/ingetogen, zodat het niet concurreert met de eigenlijke
   boodschap/knop erboven, maar wel duidelijk leesbaar blijft. Iets
   compactere line-height dan gewone lopende tekst, want dit is een korte
   bijzin, geen leesparagraaf - te veel witruimte tussen de regels oogde
   nodeloos zwaar voor zo'n bescheiden tekstje. Geldt ook voor het
   "stay informed"-blok onder de Upcoming Retreats-lijst. */
.alligator-retreats-empty .alligator-notify-privacy-note,
.alligator-retreats-notify-below .alligator-notify-privacy-note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  line-height: 1.25;
  /* Specifieker dan ".alligator-retreats-empty p" (teal) hierboven, zodat
     deze zachtere, neutrale kleur effectief wint. */
  color: #7a7f86;
  /* Links uitgelijnd, gelijk met het e-mailveld erboven. */
  text-align: left;
}

.alligator-notify-privacy-note a {
  color: inherit;
  text-decoration: underline;
}

.alligator-notify-privacy-note a:hover {
  color: var(--vm-accent);
}

/* Gecentreerde overlay/kaart na het versturen van het notify-formulier
   (zie de wp_body_open-hook in functions.php) - vervangt de vorige platte
   banner bovenaan: zelfde donkere-achtergrond-met-gecentreerde-kaart-opzet
   als de carousel-lightbox hieronder, voor een zachtere, meer doordachte
   verschijning (fade + lichte opwaartse beweging via CSS-transitie i.p.v.
   abrupt verschijnen) én je kan het onmogelijk missen zonder opdringerig
   te zijn. */
.alligator-vm-notify-overlay {
  position: fixed;
  inset: 0;
  background: rgba(29, 31, 37, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease;
}

.alligator-vm-notify-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.alligator-vm-notify-card {
  position: relative;
  max-width: 26rem;
  padding: 2.5rem 2rem;
  background-color: var(--vm-bg);
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  text-align: center;
  /* Lichte opwaartse beweging tijdens het infaden, in plaats van gewoon
     op-en-neer knipperen - dat "zachte" bewegingseffect was expliciet
     gevraagd. */
  transform: translateY(18px);
  transition: transform 0.35s ease;
}

.alligator-vm-notify-overlay.is-open .alligator-vm-notify-card {
  transform: translateY(0);
}

.alligator-vm-notify-card p {
  margin: 0;
  font-family: var(--vm-font-heading);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--vm-teal);
}

.alligator-vm-notify-card--error p {
  color: #b03030;
}

.alligator-vm-notify-overlay__close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: transparent;
  border: none;
  color: var(--vm-teal);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  opacity: 0.7;
}

.alligator-vm-notify-overlay__close:hover {
  opacity: 1;
}


/* ============================================================
   FOOTER
   Overschrijft de basisthema-footer-pattern (patterns/footer.php) enkel
   voor deze site - bewust hier in plaats van dat bestand zelf aan te
   passen, zodat het basisthema herbruikbaar blijft voor andere sites.
   ============================================================ */

/* De footer-padding komt uit het basisthema als een vaste inline style
   (WordPress spacing-preset "30" = 20px), wat meer specificiteit heeft
   dan een gewone class-regel - vandaar "!important" nodig om dezelfde,
   met het scherm meegroeiende marge als de header (.alligator-vm-header)
   te krijgen. */
footer.wp-block-template-part > .wp-block-group {
  padding-left: clamp(1.5rem, 4vw, 5rem) !important;
  padding-right: clamp(1.5rem, 4vw, 5rem) !important;
}

footer.wp-block-template-part,
footer.wp-block-template-part a {
  /* "nav"-zone: zie het link-kleurschema bij :root hierboven. */
  color: var(--vm-nav-link-color);
  /* Iets kleiner dan de standaard "small"-preset, en hetzelfde subtiele
     dieptelaagje als de site-titel in de header (.alligator-vm-site-title
     a), voor visuele samenhang tussen header en footer. */
  font-size: 0.8rem;
  text-shadow: 0 1.5px 4px rgba(193, 74, 91, 0.45);
}


/* ============================================================
   PRIVACY-POLICY-PAGINA
   Gebruikt het generieke "page.html"-template (geen eigen
   page-privacy-policy.html nodig) - de titel komt dus uit het gewone
   wp:post-title-blok in dat template. Links uitgelijnd, zoals de andere
   koppen op de site (enkel de homepage/Retreats-titel is bewust
   gecentreerd via .alligator-vm-welcome-title). Gescoped via de
   automatische WP-body-class op paginaslug, i.p.v. het gedeelde
   page.html-bestand zelf aan te passen. */
body.privacy-policy .wp-block-post-title {
  text-align: left;
  /* Zonder deze regel gebruikt de titel WordPress' standaard kolombreedte
     (672px), terwijl de paragrafen een eigen bredere kolom van 52rem/832px
     hebben (zie ".wp-block-post-content > p" hierboven). Beide worden
     onafhankelijk gecentreerd, dus zonder gedeelde breedte lopen hun
     linkerranden op brede schermen uit elkaar - vandaar de "inspringing"
     die enkel op smalle/preview-schermen niet opviel. */
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}


/* ============================================================
   TEACHERS-SECTIE
   ============================================================ */

.alligator-teachers-section {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

/* Vroegere kleine ::before-scheidingslijn boven "Teachers" is verwijderd -
   overbodig geworden nu Teachers vlak na de echte wp:separator (berry
   rose) staat, die al als scheiding dient. */

/* Bewust eigen flex-CSS i.p.v. te vertrouwen op WordPress' ingebouwde
   Columns-blok-stijl: deze sectie is (net als de header) hand-written
   HTML via wp:html, dus WordPress herkent geen echt "core/columns"-blok
   in de content en laadt de bijhorende block-library CSS (die normaal
   display:flex zou geven) daardoor niet automatisch. Zonder deze regels
   stapelden de teacher-kolommen altijd onder elkaar, ongeacht
   schermbreedte. flex-wrap zorgt ervoor dat ze bij 2 teachers netjes
   naast elkaar staan op grotere schermen, en alsnog onder elkaar vallen
   op smalle (mobiele) schermen. */
.alligator-teachers-columns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

/* Teacher-preview op de Retreat-pagina's oogt nu als een echte kaart -
   rand, afgeronde hoeken, lichte achtergrond die afsteekt tegen de
   beige paginakleur - als "preview" van de eigenlijke Teacher-pagina. */
.alligator-teacher-kolom {
  flex: 1 1 280px;
  max-width: 340px;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid rgba(12, 125, 136, 0.25);
  border-radius: 12px;
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alligator-teacher-kolom:hover {
  border-color: var(--vm-accent);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

/* Professional title (bv. "Yoga Teacher") onder de naam - klein en
   ingetogen, zelfde uitstraling als .alligator-person-function op de
   Teacher-pagina zelf. */
.alligator-teacher-kolom-functie {
  margin: 0.15rem 0 0.85rem;
  font-size: 0.8rem;
  font-style: italic;
  /* Dunnere gewicht dan de standaard bodytekst - oogt sierlijker. */
  font-weight: 200;
  color: var(--vm-teal);
  opacity: 0.8;
}

/* Foto, naam en bio zijn elk apart klikbaar naar de teacher-pagina - geen
   onderstreping op de tekstlinks (past bij de rest van de site), enkel een
   subtiele hover-aanduiding per element i.p.v. één groot bloklink-gevoel. */
.alligator-teacher-portret-link {
  display: block;
}

.alligator-teacher-portret-link:hover .alligator-teacher-portret img,
.alligator-teacher-portret-link:hover img.alligator-teacher-portret {
  opacity: 0.85;
}

.alligator-teacher-kolom h3 a,
.alligator-teacher-kolom p a {
  color: inherit;
  text-decoration: none;
}

.alligator-teacher-kolom h3 a:hover {
  color: var(--vm-accent) !important;
}

.alligator-teacher-kolom p a:hover {
  color: var(--vm-accent);
}


/* ============================================================
   PAST RETREATS (op de Teacher-pagina zelf)
   ============================================================ */

.alligator-teacher-past-retreats {
  /* Zelfde waarden als .alligator-retreat-nav eronder, zodat de ruimte
     boven deze titel en de ruimte onder de lijst (tot de Previous/Next-
     balk) gelijk ogen. Ook dezelfde separatorstijl (teal, 2px) als de
     rest van de site. */
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 2px solid rgba(12, 125, 136, 0.35);
}

.alligator-teacher-past-retreats h2 {
  /* Zonder deze regel voegt de heading zijn eigen standaard margin-top
     toe bovenop de padding-top hierboven, waardoor de titel verder van
     de separator kwam te staan dan "PREVIOUS/NEXT TEACHER" onder hún
     separator (die geen eigen heading-marge hebben). */
  margin-top: 0;
}

.alligator-teacher-past-retreats ul {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.alligator-teacher-past-retreats li {
  padding: 0.35rem 0;
  margin-bottom: 0.85rem;
}

.alligator-teacher-past-retreats li:last-child {
  margin-bottom: 0;
}

.alligator-teacher-past-retreats a {
  /* Kleur: zie "GEWONE TEKSTLINKS (algemeen)" hieronder. */
  text-decoration: none;
  /* Zonder dit erft deze link de standaard basis-lettergrootte van het
     thema (1.5rem, theme.json) - veel te groot voor een lijst-item. */
  font-size: 1.05rem;
}

.alligator-teacher-past-retreats a:hover {
  text-decoration: underline;
}

/* ============================================================
   GEWONE TEKSTLINKS (algemeen) - "body"-zone
   Gebruikt --vm-link-color / --vm-link-hover-color (zie :root
   hierboven) op elke gewone tekstlink in de paginatekst zelf
   (kaarttitels, teacher-lijst, lege-staat-kader, en gewone links
   middenin de content via .wp-block-post-content a) - een duidelijk
   herkenbare kleur die meteen als "klikbaar" oogt tussen de omringende
   lopende tekst, met een andere kleur bij hover voor extra feedback.
   Bewust NA alle andere link-kleurregels hierboven gezet met exact
   dezelfde selectors, zodat de specificiteit klopt en deze regel wint.
   Bewust NIET header/footer (.alligator-vm-cta-button,
   .alligator-vm-login-nav-link, de header-site-titel,
   footer.wp-block-template-part a) - die horen bij de aparte "nav"-zone
   hieronder (--vm-nav-link-color / --vm-nav-link-hover-color) en
   hebben elk al hun eigen volledige hover-stijl. */
.wp-block-post-content a,
.alligator-retreat-card h3 a,
.alligator-retreat-card h4 a,
.alligator-retreats-empty a,
.alligator-teacher-past-retreats a,
.alligator-teachers-section a {
  color: var(--vm-link-color);
  /* Zachte overgang naar de opgehelderde hover-tint hierboven, i.p.v.
     een abrupte kleursprong. */
  transition: color 0.15s ease;
}

.wp-block-post-content a:hover,
.alligator-retreat-card h3 a:hover,
.alligator-retreat-card h4 a:hover,
.alligator-retreats-empty a:hover,
.alligator-teacher-past-retreats a:hover,
.alligator-teachers-section a:hover {
  color: var(--vm-link-hover-color);
}

/* Footer-links horen bij de "nav"-zone (zie :root), niet bij de
   body-zone hierboven - vandaar de aparte variabelen. */
footer.wp-block-template-part a:hover {
  color: var(--vm-nav-link-hover-color);
}

.alligator-teacher-retreat-date {
  opacity: 0.7;
  font-size: 0.9rem;
}

/* ============================================================
   KLANTEN-LOGIN ("Practical Info"-pagina) — zie functions.php,
   sectie "VALE MIOTO: KLANTEN-LOGIN".
   ============================================================ */
.alligator-vm-login-gate {
  max-width: 32rem;
  margin: 2rem auto 3rem;
  text-align: center;
}

.alligator-vm-login-error {
  color: var(--vm-accent);
  font-size: 0.9rem;
  margin-top: -0.5rem;
  margin-bottom: 1.5rem;
}

.alligator-vm-login-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.alligator-vm-login-form input[type="password"] {
  flex: 1 1 220px;
  padding: 0.6rem 1rem;
  border: 1px solid rgba(12, 125, 136, 0.4);
  border-radius: 8px;
  font-family: var(--vm-font-body);
  font-size: 0.9rem;
}

.alligator-vm-login-form button {
  background-color: var(--vm-teal);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.alligator-vm-login-form button:hover {
  background-color: var(--vm-accent);
}

.alligator-vm-customer-logout {
  text-align: right;
  font-size: 0.85rem;
  margin-bottom: 1.5rem;
}

.alligator-vm-customer-logout a {
  color: var(--vm-teal);
}

/* Kleine Google Maps-embed op de "Practical Info"-pagina (klanten-only,
   achter de login - zie functions.php). Bewust klein en gecentreerd,
   met afgeronde hoek zoals de rest van de site. */
.alligator-vm-map-embed {
  max-width: 32rem;
  margin: 1.5rem 0 0;
  border-radius: 12px;
  overflow: hidden;
}

.alligator-vm-map-embed iframe {
  display: block;
}

/* Login-link in de header - bewust géén pilvormige knop zoals "The
   Quinta"/"Retreats" (geen rand/achtergrond/padding, geen underline),
   maar wel dezelfde typografie + dieptelaagje (text-shadow) als die
   knoppen, voor visuele samenhang binnen de header. */
.alligator-vm-login-nav-link {
  align-self: center;
  margin-left: 0.25rem;
  /* "nav"-zone: zie het link-kleurschema bij :root hierboven. */
  color: var(--vm-nav-link-color);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-decoration: none;
  text-shadow: 0 1.5px 4px rgba(193, 74, 91, 0.45);
  opacity: 0.75;
}

.alligator-vm-login-nav-link:hover {
  opacity: 1;
}

/* E-mailadres van [alligator_email] - de shortcode zet het adres in een
   <span class="alligator-email">; met size=big komt er alligator-email--big bij,
   ongeacht in welke alinea het staat. Uitlijning blijft een keuze van die
   alinea (werkbalk van het blok). Kleuren via de semantische link-
   variabelen bij :root, dus een wijziging daar werkt hier meteen door. */
.alligator-email--big a {
  font-family: var(--vm-font-heading);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--vm-link-color);
  text-decoration: none;
  word-break: break-word;
}

.alligator-email--big a:hover {
  color: var(--vm-link-hover-color);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}