/* Het volgende werkt goed na: /usr/share/pandoc/data/epub.css */
/* ----------------- NU DE overruling DOOR MMF ----------------- */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');


/* Deze css maakt de verhaal-stijl default en album-stijl de uitzondering. 
   De album-stijl wordt afgedwonmden door de fence :::{.album} . . .  :::,
   In de verhaal-stijl is de rendering breedte var(--verhaal-width)(bijv. 700px) of
   kleiner als de gebruiker het venster kleiner maakt, en de
   achtergrondkleur beige. 
   In de album-stijl is de rendering breedte zo groot als de vensterbreedte (dus
   veel ruimte voor foto's) en de achtergronkleur donkergrijsgroenbruin */

/* variablelen (custom properties) */
:root {
    --album-achtergrondkleur: #494a42; 
    /* kaki/legergroen/donkerOlijfgroen (donkergrijs, diepgroen en een beetje bruin) */
    --verhaal-achtergrondkleur:  #f5f5dc; 
         /* "beige/safraanwit" */
    --verhaal-tekstkleur:  #2e2e2e;  
         /* "antraciet" (heel donkergrijs) */
    --linkkleur: #3498db;      
         /* "hemelsblauw" (veel gebruikt voor hyperlinks, actieknoppen) */
    --album-tekstkleur: #ffffff;      
         /* "puur wit" (spierwit) */
    --verhaal-width: 600px;
    --verhaal-quotewidth: 540px;
    --verhaal-quoteindentatie: 7%; /* percentage van current width */
    /*  #555 #555555 "donkergrijs" (puur een mengsel van zwart en wit, geen kleur erin) */

}

/* algemene definities: */
.subtitle { text-align: center; font-style: italic; }
.author, .date, .institute, .department { text-align: center; }
.instituut { text-align: center; }
.extra {
    display: flex;
    flex-direction: column; 
     text-align: center;
    align-items: center;    
    justify-content: center; 
    color: var(--verhaal-tekstkleur);
}

h1 { text-align: center; }
h2, h3 { /* default font size maar bold: */
    font-size: 1em; /* 1em is gelijk aan de standaard lettergrootte */
    font-weight: bold;
    margin-top: 1.5em; /* Optioneel: wat ruimte boven de kop */
}
a { color: blue; } /* kleur van klikbare links */

/* Laat Markdown blockquotes (>-regels) inspringen */
blockquote {
    margin-left: var(--verhaal-quoteindentatie) ;
    /* margin-right: 2em ; */
    padding-left: 2em;
    /* border-left: 3px solid #ccc;*/ /* Optioneel: verticale streep links */
}

/* Laat Markdown line blocks (|-regels) links goed uitlijnen */
.line-block {
    /* margin-left: 1em !important; heeft geen effect */
    padding-left: 1.5em;  /* nu zijn de |-regels links bijna goed uitgelijnd */
}

/* Zorgt ervoor dat eventuele geneste regels binnen een line block netjes uitlijnen */
.line-block .line {
    margin: 0;         /* Haalt de extra ruimte onder/boven elke regel weg */
    white-space: pre-wrap;
}

/* ================= TOEVOEGING VOOR ARCHIEF-STIJL ================= */

/* 1. DE BASIS (Verhaalstijl - Standaard voor de hele pagina) */
body { 
    margin: 0;
    padding: 0;
    width: 100%;
    text-shadow: 0 0 1px rgba(255,255,255,0.3); 
    font-family: 'Roboto', sans-serif; 
    /* Gebruik het standaardsysteem-lettertype van het apparaat (iOS, Android, Windows, Linux) */
    /* font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif ; */
    line-height: 1.5;               
    background-color: var(--verhaal-achtergrondkleur) ;
    color: var(--verhaal-tekstkleur);            
}

/* Zorgt ervoor dat alle STANDAARD elementen binnen de var(--verhaal-width) centreren, 
 * en herstel daardoor veroorzaakte foute indentatie bij .line-block ("|"-regels in .md) */
body p, body h1, body h2, body h3, body h4, body h5, body ul, body ol, body pre, body hr, .minipage, #TOC, main p, main h1, main h2, main h3, body .line-block {
    max-width: var(--verhaal-width);
    margin-left: auto;  /* moet !IMPORTANT zijn voor body .line-block, zie daar! */
    margin-right: auto;
    /* padding-left: 0% ; */ /* Inspringing binnen de tekstbreedte */
}
body pre {padding-left: 4em !important;}  /* Tja, experimenteel gevonden. Kan vast beter. */
body h1, body h2, body h3, body h4, body h5 { padding-left: 15px;} /* experimenteel... maar zie "body p {...}" */

body .line-block {
    margin-left: auto !important;  /* echt !IMPORTANT; Blijf binnen de tekstbreedte */
    display: block;
    row-gap: 0;            /* Absoluut 0 pixels ruimte tussen de regels */
    line-height: 0.8;
}
body .line-block .line {
    display: block;
    margin: 0;
    padding: 0;
    line-height:  inherit; /* Neemt die van hierboven over */
    min-height: 0;
}

/* Extra ademruimte voor tekst op kleine (mobiele) schermen */
body p, main p {
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}
body .line-block {
    text-align: left;
    /* Zorg dat de witruimte en regeleinden van de '|' syntax behouden blijven */
    white-space: pre-line; 
}

#TOC {
    padding: 20px;
    box-sizing: border-box;
}

#TOC a {
    color: var(--linkkleur) ; 
    display: block;            
    text-decoration: none;  
}

a { color: var(--linkkleur); }  

hr { 
    border: 0;
    border-top: 3px solid gray;            
    margin: 20px auto; 
}


pre {
  /* margin: 1em 0; */
  overflow: auto;
  overflow-x: auto;                     
  padding: 1em;
  display: block;
  /* font-family: sans-serif;   */
  /* border: 1px solid #cccccc;  */
  /* border-radius: 4px; */
  /* border-left: 5px solid #cccccc;  */
  background-color: var(--verhaal-achtergrondkleur); 
  color: var(--verhaal-tekstkleur);            
}

.gecentreerd {
    text-align: center;
}

.quote-blok  {
    display: block;            /* Zorgt dat max-width en margin gaan werken */
    text-align: left;          /* Zorg dat de tekst zelf links uitlijnt */
    max-width: var(--verhaal-quotewidth); /* Dwing de quote breedte af */
    margin-left: auto;         /* Centreer het blok op het scherm */
    margin-right: auto;
      /* We zetten de linker- en rechterkant keihard op 0. */
    padding-left: 0;
    padding-right: 0;
}
/* Richt je specifiek op de alinea BINNEN het verhaal-blok */
mmf .quote-blok p {
    max-width: var(--verhaal-quotewidth);
    margin-left: 0;   /* Zorgt dat de tekst binnen het blok niet inspringt */
    padding-left: 0;
    text-align: left;
    clear: both;    
}


/* ========== DE ALBUM STIJL, algemeen ======= */
.album {
    /* We breken nu moeiteloos uit omdat body 100% breed is */
    width: 100% !important;
    max-width: 100% !important; /* Overschrijft de var(--verhaal-width) limiet */
    clear: both;                /* Voorkomt dat foto's uit het verhaal hierin overlappen! */
    /* CRUCIALE TOEVOEGING: Dwingt de container om alle interne floats te omsluiten */
    display: flow-root;
    padding: 40px 20px;         
    box-sizing: border-box;   
    background-color: var(--album-achtergrondkleur); 
    color: var(--album-tekstkleur);             
    margin-top: 30px;
    margin-bottom: 30px;
    text-align: center; /* added 3-6-2026 */
}

.album a { color: var(--linkkleur); }  
.album hr { border: 0; border-top: 3px solid var(--verhaal-tekstkleur) } 

/* Tekst en koppen BINNEN het album worden nu ook netjes wit */
.album p, .album span, .album li, .album h1, .album h2, .album h3, .album h4, .album h5 { 
    color: var(--album-tekstkleur) !important; 
    max-width: 100% !important; /* Zorgt dat tekst in album wél breed mag worden */
}

.album pre {
    background-color: var(--album-achtergrondkleur) !important; 
    color: var(--album-tekstkleur) !important;            
    overflow-x: auto;                     
}

/* ===========  OPMAAK VAN FOTO's === voor ========= default (verhaal-stijl) style ===============*/

.fotonaam {
    display: block;                 
    opacity: 0;                     
    transition: opacity 0.3s ease;  
/*    font-family: sans-serif;       */ 
    font-size: 0.7rem !important;   
    font-style: normal !important;  
    text-align: center; /* binnen zijn text box */
    width: 100%; /* 100% van de container, de minipage */
}

.beschrijving {
    display: block;
    line-height: 1.0;               
    font-size: 1rem; 
    text-align: center; /* binnen zijn text box */
    width: 100%; /* 100% van de container, de minipage */
    height: 100%; /* 100% van de container, de minipage */
}

.breedte-1 { width: 100% !important; } 
.breedte-2 { width: 47% !important; }  
.breedte-3 { width: 30% !important; }  
.breedte-4 { width: 23% !important; }  
.breedte-9 { width: 63% !important; }  

/* De minipages worden als een <span> worden gegenereerd (<span class="minipage...">) */
/* Als er andere minipages zouden zijn, specificeer dan daarvoor .minipage {...}  */
/* Zorg dat de minipage flexibel is en de gekrompen hoogte van de foto volgt */
span.minipage {
    display: inline-block !important;
    align-items: center !important;    /* Centreert de inhoud netjes */
    text-align: center;
    flex-direction: column !important; /* Dwingt beschrijving en fotonaam ONDER de foto te blijven */
    height: auto !important;           /* Zorgt dat de minipage meegroeit als de foto+tekst groeit */
    max-width: 100vw !important; /* Max breedte van het venster */
    max-height: 90vh !important; /* Max 85% van het venster (ruimte voor tekst eronder) */
    margin-bottom: 30px !important; /* Garandeert dat de tekst eronder nooit overlapt wordt */
    box-sizing: border-box !important;
    overflow: visible !important;      /* Voorkomt vreemde afsnijdingen */
    vertical-align: top !important; /* werkt goed in span.minipage */
}

.minipage img {
    display: block;            
    max-width: 100%;        /* Zorgt dat hij nooit buiten de minipage breekt */
    width: auto !important; /* Overschrijft inline-breedtes zodat de foto zijn ECHTE breedte pakt! */
    height: auto;              
    /* max-height: inherit;       was er wel... */
    margin: 0 auto;        /* Centreert de foto netjes in de minipage */
    object-fit: contain;   /* 'contain' zorgt dat de foto inside de box blijft */
    /* object-fit: cover;   foto wordt vergroot zo dat die de hele box vult, een deel valt weg */
}

img.foto-container {
    display: block !important;
    width: fit-content !important; 
    height: auto !important; /* Dwingt de browser de juiste verhoudingen te bewaren */
    max-height: 85vh !important; /* De foto mag NOOIT hoger worden dan 85% van het venster. */
    max-width: 100% !important; /* Breedte krimpt en groeit proportioneel mee, maar max breedte minipage */
    flex-shrink: 1 !important; /* Voorkom dat de foto buiten zijn flex-box container treedt */
    margin: 0 auto 10px auto !important;
    /* Zie ook: .album img.foto-container {...} */
}

.minipage:hover .fotonaam { opacity: 1; }

.foto-container {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    /* outline: 2px solid blue; */ /* debugging:*/
}
.foto-container img {
    display: block;
    max-width: 100%; /* Voorkomt dat de foto groter wordt dan zijn container */
    height: auto;    /* Behoudt de verhoudingen keurig */
}

.float-L {
    display: inline-block;
    float: left;          
    margin-right: 20px;   
    margin-left: 0;       
    margin-bottom: 10px;  
}
.float-R {
    display: inline-block;
    float: right;
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 10px;
}
.float-C {
    display: flex !important;       
    float: none !important;         
    clear: both;                    
    margin-left: auto !important;   
    margin-right: auto !important;  
}
.float-N {
    display: inline-flex !important; 
    float: none !important;          
    flex-shrink: 0;                  
}
h1, h2, h3, h4, h5, .nieuwe-paragraaf {
    clear: both; /* Om het floaten van text naast een foto te beeindigen bij h1 etc, [[clear]] ---lua---> .nieuwe-paragraaf*/
}


/* =========== Album-stijl uitzonderingen voor =============== OPMAAK VAN FOTO's ==================*/

.album .minipage {
    /* debugging: border: 3px solid red !important; NIET bij de minipage maar bij zijn img */
    /* box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.4); NIET bij minipage maar bij zijn img */
    max-width: 100% !important; /* Staat toe dat foto's in album breder worden dan var(--verhaal-width) */
}

/* De container krimpt exact rondom de foto en krijgt de rand */
.album img.foto-container {
   display: block;
    max-width: 100%;
    width: max-content !important; /* Dwingt de tag te krimpen tot de echte fotomaat */
    margin: 0 auto;
    box-sizing: border-box;
    border: 4px solid #cccccc !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    box-shadow: 5px 5px 15px rgba(255, 255, 255, 0.4); /* NIET bij minipage maar bij zijn img */
 }

/* In de albumstijl schalen de foto's t.o.v. het brede venster */
.album .breedte-1 { width: 96% !important; }   
.album .breedte-2 { width: 47% !important; }   
.album .breedte-3 { width: 31% !important; }   
.album .breedte-4 { width: 23% !important; }   
.album .breedte-9 { width: 63% !important; }   

/*  lange tekst XXX binnen album stijl: 
 *  gebruik :::{.verhaal} XXX :::
 *  of midden in een regel: [XXX]{.verhaal} */
/* Forceer het blok binnen de album-stijl terug naar de verhaal-breedte */
.verhaal, .album .verhaal {
    display: block;            /* Zorgt dat max-width en margin gaan werken */
    text-align: left !important;  /* Zorg dat de tekst zelf mooi links uitlijnt */
    max-width: var(--verhaal-width) !important;/* Dwing de maximale breedte af */
    margin-left: auto !important; /* Centreer het blok op het scherm */
    margin-right: auto !important;
      /* We zetten de linker- en rechterkant keihard op 0. */
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Richt je specifiek op de alinea BINNEN het verhaal-blok */
.verhaal p {
    max-width: var(--verhaal-width) ;
    margin-left: 0 ;   /* Zorgt dat de tekst binnen het blok niet inspringt */
    padding-left: 0 ;
    text-align: left ;
    clear: both;    
}

/* speciaal voor epub/ereader: */
section.album, div.album {
    background-color: var(--album-achtergrondkleur) !important;
    display: block;
    width: 100%;
    padding: 15px;
}

/* ================= koppen binnen .album stijl ================== */
/* Een <kop> binnen :::{.album} en ::: wordt door general.lua omgezet naar :::<kop>{.albumtitel}:::{.album} */

/* --- VEILIGE ALBUM-KOPPEN STYLING ZONDER WITRUIMTES --- */

.album-titel {
    width: 100% !important;
    max-width: 100% !important;
    background-color: var(--album-achtergrondkleur) !important;
    color: var(--album-tekstkleur) !important;            /* Witte tekst */
    
    /* 1. CRUCIAAL: We zetten de bovenmarge op 0 zodat er GEEN lichte strook boven komt.
       We gebruiken padding om de tekst binnen het donkere vlak ademruimte te geven. */
    margin-top: 0 !important; 
    margin-bottom: 0 !important;          /* Sluit strak aan op het album eronder */
    
    padding: 30px 20px 10px 20px !important; /* Ruimte aan de binnenkant */
    box-sizing: border-box !important;
    display: block !important;
}

/* 2. Zorg dat het album dat er direct onder staat ook naadloos aansluit */
.album-titel + .album {
    margin-top: 0 !important;
    padding-top: 10px !important;
}

/* 3. DE FINISHING TOUCH: 
   Als er een normale paragraaf of ander element DIRECT boven een album-titel staat,
   moeten we de ondermarge daarvan op 0 zetten. Anders duwt die de titel naar beneden! */
* + .album-titel {
    margin-top: 0 !important;
}

/* Om te zorgen dat er wel wat ruimte zit tussen het vorige hoofdstuk en dit nieuwe album,
   zetten we die ruimte (margin-top) nu op de .album-titel zelf, MAAR we vangen dat op 
   door een extra donkere 'bumper' te maken met padding, óf we doen het via een border: */
.album-titel {
    /* We maken een onzichtbare dikke bovenrand in dezelfde kleur als het album.
       Dit duwt de tekst naar beneden, maar vult de strook met de JUISTE kleur! */
    border-top: 30px solid var(--album-achtergrondkleur) !important; 
}

/* ============== line blocks ontdoen van ongewenste tussenrgels =========== */