/* === Algemene basisinstellingen === */

.markdown-preview-view table td {
  vertical-align: top;
}

.callout {
  border-radius: 12px;
  padding: 12px 16px;
  margin: 12px 0;
  position: relative;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow: visible !important;
}

/* === HOMEPAGE CALLOUT STIJLEN – PUBLISH PROOF === */

/* WELKOM */
.callout[data-callout="welkom"] {
  background-color: #e8f0ff; /* licht pastelblauw */
  --callout-icon: lucide-sparkles;
}

/* ABOUT / OVER JAEZMO */
.callout[data-callout="about"] {
  background-color: #dcf5ea; /* zacht mintgroen */
  --callout-icon: lucide-leaf;
}

/* EZEL (Fieke & Elian) */
.callout[data-callout="ezel"] {
  background-color: #f3e8fa; /* licht lavendelroze */
  --callout-icon: lucide-heart-handshake;
}

/* VIJFDE ELEMENT */
.callout[data-callout="vijfelement"] {
  background-color: #fff4dc; /* warm zachtgeel */
  --callout-icon: lucide-stars;
}

/* CONTACT */
.callout[data-callout="contact"] {
  background-color: #e6f3f8; /* mistig lichtblauw */
  --callout-icon: lucide-message-circle;
}

/* ───────────────────────────────────────────────────────────────
   📁 ONZICHTBARE KOPJES / HEADERS – VOOR STRUCTUUR ZONDER WEERGAVE
   Gebruik deze class om een kopje (bijv. ## Titel) in je Markdown
   wél te laten bestaan voor interne links en TOC, maar onzichtbaar
   te maken op de pagina zelf (bijv. in Obsidian Publish).
   
   🛠️ GEBRUIK:
   Zet in je Markdown een header met class "onzichtbaar", zoals:

     ## Mijn Kopje {.onzichtbaar}
     of
     ## <span class="onzichtbaar">Mijn Kopje</span>

   🧭 TOC en [[wikilinks]] blijven werken, maar het kopje is visueel weg.
   ─────────────────────────────────────────────────────────────── */

h1.onzichtbaar,
h2.onzichtbaar,
h3.onzichtbaar,
h4.onzichtbaar,
h5.onzichtbaar,
h6.onzichtbaar {
  display: none;
}

h1:has(span.onzichtbaar),
h2:has(span.onzichtbaar),
h3:has(span.onzichtbaar),
h4:has(span.onzichtbaar),
h5:has(span.onzichtbaar),
h6:has(span.onzichtbaar) {
  display: none;
}

/* ───────────────────────────────────────────────────────────────
   📁 ONZICHTBARE KOPJES – Alleen verbergen in Preview/Publish
   Blijven zichtbaar in Edit Mode, zodat je ze nog kunt zien bij schrijven.
   ─────────────────────────────────────────────────────────────── */

.markdown-preview-view h1.onzichtbaar,
.markdown-preview-view h2.onzichtbaar,
.markdown-preview-view h3.onzichtbaar,
.markdown-preview-view h4.onzichtbaar,
.markdown-preview-view h5.onzichtbaar,
.markdown-preview-view h6.onzichtbaar {
  display: none;
}

.markdown-preview-view h1:has(span.onzichtbaar),
.markdown-preview-view h2:has(span.onzichtbaar),
.markdown-preview-view h3:has(span.onzichtbaar),
.markdown-preview-view h4:has(span.onzichtbaar),
.markdown-preview-view h5:has(span.onzichtbaar),
.markdown-preview-view h6:has(span.onzichtbaar) {
  display: none;
}

/* IMAGE GRID */
/* zorgt dat de afbeeldingen netjes uitgelijnd zijn en zonder zichtbare borders */
.markdown-preview-view table {
  width: 90%;
  border-collapse: separate;
  border-spacing: 12px;
  margin: auto;
  background-color: transparent;
}

.markdown-preview-view th {
  border: 1px solid transparent !important;
  background-color: transparent !important;
}

.markdown-preview-view td {
  border: 2px solid transparent;
  border-radius: 6px;
  padding: 6px;
  background-color: transparent;
  vertical-align: bottom;
}

.markdown-preview-view td img {
  width: 100%;
  height: auto;
  margin: auto;
  display: block;
  border-radius: 4px;
}

/* === twee-kolommen-65-35 voor foto's in Persoons Dossiers === */
───────────────────────────────────────────────
   Afbeeldingen in 2-koloms Markdown-tabellen
   met vaste max-hoogte, onderaan uitgelijnd
────────────────────────────────────────────────

/* Alleen binnen notities met deze klasse */
.markdown-preview-view.beeldenset-2koloms-65-35 table {
  table-layout: fixed;
  width: 100%; !important
}

.markdown-preview-view.beeldenset-2koloms-65-35 td {
  vertical-align: bottom;
  padding: 0;
  border: 1px solid transparent;
}

.markdown-preview-view.beeldenset-2koloms-65-35 td:first-child:nth-last-child(2) {
  width: 53%;
}
.markdown-preview-view.beeldenset-2koloms-65-35 td:nth-child(2):nth-last-child(1) {
  width: 47%;
}

.markdown-preview-view.beeldenset-2koloms-65-35 td img {
  display: block;
 /* max-height: 450px !important;*/
  min-height: 450px !important;
  width: auto;
  height: auto !important;
  margin: 0 auto;
  object-fit: contain;
  vertical-align: bottom;
}

/* === Sprekers aan RECHTS (Fie, Elian, etc.) === */
.callout[data-callout="fie"],
.callout[data-callout="ezirah"],
.callout[data-callout="elian"],
.callout[data-callout="logan"],
.callout[data-callout="archie"],
.callout[data-callout="solan"],
.callout[data-callout="mireille"] {
  align-self: flex-end;
  margin-left: auto;
}

/* Fie */
.callout[data-callout="fie"] {
  background-color: #f9e4e0;
  --callout-icon: feather;
}
.callout[data-callout="fie"]::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f9e4e0;
}

/* Ezirah */
.callout[data-callout="ezirah"] {
  background-color: #f9e4e0;
  --callout-icon: heart-handshake;
}
.callout[data-callout="ezirah"]::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f9e4e0;
}

/* Elian */
.callout[data-callout="elian"] {
  background-color: #f2f1ed;
  --callout-icon: sparkles;
}
.callout[data-callout="elian"]::after {
  content: "";
  position: absolute;
  top: 16px;
  right: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #f2f1ed;
}

/* Alleen in notities met cssclass: tweegesprek */
.markdown-preview-view.tweegesprek {

  /* Overschrijf de algemene callout voor Elian */
  .callout[data-callout="elian"] {
    background-color: #f2f1ed;
    --callout-icon: sparkles;
  }

  .callout[data-callout="elian"]::after {
    /* Verberg het standaard driehoekje rechts */
    display: none;
  }
}

/* Speciaal driehoekje voor Elian LINKS in tweegesprek */
.markdown-preview-view.tweegesprek .callout[data-callout="elian"]::before {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f2f1ed;
}

/* === Sprekers aan LINKS (Gasten) === */
.callout[data-callout="rudolf_steiner"],
.callout[data-callout="thich_nhat_hanh"],
.callout[data-callout="moeder_teresa"],
.callout[data-callout="martin_luther_king"],
.callout[data-callout="padmasambhava"],
.callout[data-callout="tenzin_palmo"],
.callout[data-callout="chief_seattle"],
.callout[data-callout="socrates"],
.callout[data-callout="adolf_hitler"] {
  align-self: flex-start;
  margin-right: auto;
}

/* Rudolf Steiner */
.callout[data-callout="rudolf_steiner"] {
  background-color: #D9DAD9;
  --callout-icon: brain-circuit;
}
.callout[data-callout="rudolf_steiner"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #D9DAD9;
}

/* Thich Nhat Hanh */
.callout[data-callout="thich_nhat_hanh"] {
  background-color: #eddcd2;
  --callout-icon: flower-lotus;
}
.callout[data-callout="thich_nhat_hanh"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #eddcd2;
}

/* Moeder Teresa */
.callout[data-callout="moeder_teresa"] {
  background-color: #C5DEDD;
  --callout-icon: hand-heart;
}
.callout[data-callout="moeder_teresa"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #C5DEDD;
}

/* Martin Luther King Jr. */
.callout[data-callout="martin_luther_king"] {
  background-color: #E8C59E;
  --callout-icon: megaphone;
}
.callout[data-callout="martin_luther_king"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #E8C59E;
}

/* Padmasambhava */
.callout[data-callout="padmasambhava"] {
  background-color: #B3D5CF;
  --callout-icon: compass;
}
.callout[data-callout="padmasambhava"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #B3D5CF;
}

/* Tenzin Palmo */
.callout[data-callout="tenzin_palmo"] {
  background-color: #D3E1D2;
  --callout-icon: moon-star;
}
.callout[data-callout="tenzin_palmo"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #D3E1D2;
}

/* Chief Seattle */
.callout[data-callout="chief_seattle"] {
  background-color: #F2C4B7;
  --callout-icon: earth;
}
.callout[data-callout="chief_seattle"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #F2C4B7;
}

/* Socrates */
.callout[data-callout="socrates"] {
  background-color: #EEEDE9;
  --callout-icon: message-circle-question-mark;
}
.callout[data-callout="socrates"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #EEEDE9;
}

/* Adolf Hitler (gelouterd) */
.callout[data-callout="adolf_hitler"] {
  background-color: #D5CBBF;
  --callout-icon: refresh-ccw;
}
.callout[data-callout="adolf_hitler"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #D5CBBF;
}

/* Dietrich Bonhoeffer */
.callout[data-callout="dietrichbonhoeffer"] {
  background-color: #E1EBE1;
  --callout-icon: shield-check;
}
.callout[data-callout="dietrichbonhoeffer"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #E1EBE1;
}

/* Simone Weil */
.callout[data-callout="simoneweil"] {
  background-color: #EFE9F1;
  --callout-icon: eye;
}
.callout[data-callout="simoneweil"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #EFE9F1;
}

/* Malcolm X */
.callout[data-callout="malcolmx"] {
  background-color: #FCEFEA;
  --callout-icon: flame;
}
.callout[data-callout="malcolmx"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #FCEFEA;
}

/* Socrates */
.callout[data-callout="socrates"] {
  background-color: #EAF3F9;
  --callout-icon: help-circle;
}
.callout[data-callout="socrates"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #EAF3F9;
}

/* Maria Magdalena */
.callout[data-callout="mariamagdalena"] {
  background-color: #F6EAF1;
  --callout-icon: droplet;
}
.callout[data-callout="mariamagdalena"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #F6EAF1;
}

/* Black Elk */
.callout[data-callout="blackelk"] {
  background-color: #F2EFE3;
  --callout-icon: feather;
}
.callout[data-callout="blackelk"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #F2EFE3;
}

/* Stalin */
.callout[data-callout="stalin"] {
  background-color: #EDE9E5;
  --callout-icon: unlock;
}
.callout[data-callout="stalin"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #EDE9E5;
}

/* Desmond Tutu */
.callout[data-callout="desmondtutu"] {
  background-color: #E1C9EB;
  --callout-icon: heart;
}
.callout[data-callout="desmondtutu"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #E1C9EB;
}

/* Mata Hari */
.callout[data-callout="matahari"] {
  background-color: #F6C5C5;
  --callout-icon: mask;
}
.callout[data-callout="matahari"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #F6C5C5;
}

/* Ada Lovelace */
.callout[data-callout="adalovelace"] {
  background-color: #C3DFF0;
  --callout-icon: code;
}
.callout[data-callout="adalovelace"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #C3DFF0;
}

/* Abraham Lincoln */
.callout[data-callout="abrahamlincoln"] {
  background-color: #fff1ad;
  --callout-icon: scales;
}
.callout[data-callout="abrahamlincoln"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff1ad;
}

/* Acharya Tulsi */
.callout[data-callout="acharyatulsi"] {
  background-color: #BEE3CC;
  --callout-icon: leaf;
}
.callout[data-callout="acharyatulsi"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #BEE3CC;
}

/* Jeanne d'Arc */
.callout[data-callout="jeannedarc"] {
  background-color: #fff6f6;
  --callout-icon: flame;
}
.callout[data-callout="jeannedarc"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #fff6f6;
}

/* Old Swan */
.callout[data-callout="oldswan"] {
  background-color: #E0CBB3;
  --callout-icon: feather;
}
.callout[data-callout="oldswan"]::after {
  content: "";
  position: absolute;
  top: 16px;
  left: -10px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #E0CBB3;
}