/* Leesbaarheids-laag (Kelvin 27 aug 2026).
   De Funnelish-originelen zetten line-height gelijk aan font-size (18px op
   18px) met alle marges op 0: regels plakken aan elkaar en koppen kleven
   tegen de alinea erboven. Dit bestand laadt NA core.min.css en corrigeert
   ALLEEN ademruimte.

   Wat we bewust NIET aanraken (gemeten 27 aug tegen try.monavida.nl/25 en
   /26 op iPhone-formaat): lettergroottes, kopgroottes en de horizontale
   marges. Een eerdere versie zette op mobiel 17px tekst, 24px koppen en
   14px extra padding; daardoor werd de tekstkolom 334px in plaats van de
   370px van het origineel, wat onnodig veel regelafbrekingen gaf. Het
   origineel benut de schermbreedte beter, dus die maatvoering houden we aan.

   Let op: koppen staan in .headline(-inner), lopende tekst in
   .paragraph(-inner) — beide selectors zijn nodig. */

/* ── lopende tekst: alleen regelafstand en tussenruimte ── */
.paragraph, .paragraph-inner, .paragraph-inner p, .paragraph-inner span,
.paragraph-inner h1, .paragraph-inner li, .paragraph-inner div {
  line-height: 1.55 !important;
}
.paragraph-inner p { margin: 0 0 1.05em 0 !important; }
.paragraph-inner p:last-child { margin-bottom: 0 !important; }
.paragraph-inner br { display: none; }

/* ── sectiekoppen: lucht erboven, leesbare regelafstand ── */
.headline, .headline-inner, .headline h1, .headline h2, .headline h3,
.headline-inner h1, .headline-inner h2, .headline-inner h3,
.headline-inner strong, .headline-inner span {
  line-height: 1.25 !important;
}
.headline { margin-top: 1.5em !important; margin-bottom: 0.35em !important; }

/* ── kaart-titels (<h1><strong> in .paragraph-inner) strak boven hun tekst ── */
.paragraph-inner h1 { margin: 0 0 0.35em 0 !important; line-height: 1.3 !important; }
.paragraph-inner h1 + h1 { margin-top: 0 !important; }

/* ── icoon-blokken: regelafstand op de ECHTE tekstgrootte ──
   Funnelish zet in deze blokken de alinea op de kopgrootte (22px) terwijl de
   tekst erin in een span van 18px staat. Een unitless regelafstand rekent dan
   op die 22px: 1,55 × 22 = 34px, wat voor 18px-tekst neerkomt op ratio 1,9.
   Het blok valt daardoor uit elkaar (gemeten 27 aug: 102px hoog waar het
   origineel 66px doet). Hier terug naar de originele waarde; de p én de span
   moeten allebei, want de hoogste van de twee bepaalt de regelhoogte. */
.paragraph-inner p:has(> span[style*="font-size: 18px"]),
.paragraph-inner p:has(> span[style*="font-size: 18px"]) span,
/* Een alinea die alleen uit een <strong> bestaat is zo'n kopje. Selecteren op
   het style-attribuut kon niet: op de ene pagina staat er font-size:22px op de
   strong, op de andere niets, terwijl het visueel hetzelfde blok is. */
.paragraph-inner p:has(> strong:only-child),
.paragraph-inner p:has(> strong:only-child) strong {
  line-height: 1 !important;
}
/* In het origineel plakt zo'n kopje direct op zijn tekst (gat = 0px). Onze
   alinea-marge zette daar een witregel tussen, waardoor kop en tekst niet meer
   als een blok lazen. */
.paragraph-inner p:has(> strong:only-child) {
  margin-bottom: 0 !important;
}
/* Waar kop en tekst in APARTE wrappers staan (zo is de zwaar-pagina opgebouwd,
   de sagging heeft ze in een container) zet de wrapper er nog eens 10px onder. */
.paragraph:has(> .paragraph-inner > p > strong:only-child) {
  padding-bottom: 0 !important;
}
/* ...en de wrapper die er direct op volgt zet er nog 10px bovenop. */
.element-wrapper:has(.paragraph-inner > p > strong:only-child) + .element-wrapper .paragraph {
  padding-top: 0 !important;
}

/* ── geen enkel beeld breder dan het scherm ──
   De export zet vaste pixelbreedtes (bv. 400px) op img-tags; op een telefoon
   van 390px steekt zo'n beeld eruit en krijg je horizontaal geschuif. */
img { max-width: 100%; }
/* Zonder !important: onze eigen beelden dragen een inline max-width (420px,
   520px) en die hoort te winnen. Met !important verloren ze die maat en
   rekten ze uit tot de halve kolombreedte (585px). */
/* GEEN height:auto hier. Een deel van de beelden schaalt in het origineel op
   hoogte (width:auto, vaste height); height:auto haalt die maat weg en maakt
   ze fors breder dan bedoeld (gemeten 27 aug: 585px waar het origineel 400px
   doet). max-width alleen voorkomt de overloop zonder de maatvoering te
   veranderen. */

/* ── mobiel: alleen de koppen iets rustiger, verder de originele maatvoering ── */
@media only screen and (max-width: 600px) {
  .headline { margin-top: 1.2em !important; }
}

/* ── layout gelijk aan de sagging-originelen (/29 en /26), op ELK formaat ──
   Besluit Kelvin 27 aug 2026: beide advertorials volgen die twee, ook deze
   pagina, ook al is /25 zijn eigen origineel. /25 laat tekst en beeld tot de
   schermrand lopen (tekst 370px op x=10, foto's 390px op x=0) en centreert de
   tekst; /29 houdt 30px marge (tekst 310px op x=40, foto's 330px op x=30) en
   lijnt links uit. Dat laatste is rustiger en is wat we aanhouden.

   Eerder stond deze marge alleen op desktop, waardoor mobiel en tablet nog
   het /25-gedrag hielden: precies het verschil dat opviel. */
.main_wrapper_main {
  padding-left: 30px !important;
  padding-right: 30px !important;
  box-sizing: border-box;
}
/* Alleen de tekst-elementen zelf links uitlijnen, NIET hun wrapper-divs: die
   wrappers sturen ook de iconen die boven een kopje staan, en die horen
   gecentreerd te blijven (in het origineel staan ze midden boven de tekst). */
.paragraph-inner > p, .paragraph-inner > h1,
.headline-inner > h1, .headline-inner > h2 {
  text-align: left !important;
}