/* ============================================================
 *  PLACIDE TEMPELS — EIGEN STIJLBLAD, LOS VAN AEQUATORIA
 * ============================================================
 *
 *  Volledig zelfstandig stijlblad voor de Tempels-subsite (tempels/) --
 *  hangt NIET af van css/aequatoria.css en wordt ook niet ernaast
 *  geladen (zie build_tempels_css_link() in convert_mdv2_to_html5.py):
 *  elke tempels/-pagina laadt uitsluitend dit bestand. Alle regels die
 *  de hoofdsite en de Tempels-subsite nodig hebben (basis-typografie,
 *  header/nav, kolomindeling, tabellen, citaten, ...) staan daarom
 *  bewust HIER OOK, met eigen kleurwaarden, i.p.v. via een gedeeld
 *  bestand of overgenomen custom properties.
 *
 *  Kleurenpalet gebaseerd op de originele klassieke Tempels-site
 *  (marineblauw/donkerrood, terug te vinden in htdocs/tempels/ABC.css en
 *  alink.css) i.p.v. het bruine Aequatoria-thema.
 *
 *  Zelfde compatibiliteitsprincipes als het hoofdsite-stijlblad: geen
 *  externe afhankelijkheden (werkt offline), geen moderne CSS-selectors
 *  (:has(), :is(), clamp()), systeemlettertypes.
 *
 *  INHOUD
 *  ------
 *   1. Variabelen        4. Header & navigatie
 *   2. Basis & typografie 5. Kolomindeling & footer
 *   3. Tabellen & citaten 6. Mobiel (<=860px)
 * ============================================================ */


/* ── 1. VARIABELEN ──────────────────────────────────────── */

/* Zelf-gehoste lettertypes (bestanden in tempels/css/fonts/, geen
   CDN-aanroep) -- zelfde 5 bestanden als css/aequatoria.css (bewust
   gedupliceerd, geen gedeelde map, zelfde onafhankelijkheidsprincipe als
   de rest van dit stijlblad). Enkel de "latin"-subset, voldoende voor
   Franse/Engelse inhoud (dekt ook Æ, é, è, ê, ç, ... -- alles binnen
   U+00FF). */
@font-face {
  font-family: "Crimson Pro";
  src: url("fonts/CrimsonPro-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Crimson Pro";
  src: url("fonts/CrimsonPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-dark:#001F3F; --bg-nav:#003366; --bg-nav-active:#004C99;
  --border:#336699;  --border-light:#A9C6DE; --sand:#CFE0EC;
  --bg-light:#F4F4F4; --bg-card:#FFFFFF;
  /* Linkkleur bewust lichter dan de oorspronkelijke #003366 (marineblauw,
     bijna gelijk aan de --bg-nav van de header) -- klantfeedback 2026-08-21:
     linkgevoelige woorden in de lopende tekst (bv. "in memoriam") kwamen
     onvoldoende uit tegen de tekstkleur. #336699 is dezelfde toon als
     --border hierboven, dus geen nieuwe kleur in de palet, enkel een
     lichtere/duidelijkere toepassing ervan op links. */
  --river:#336699; --river-hover:#990033; --river-light:#E3ECF3;
  --moss:#5C7A99;  --moss-light:#E8EEF3;
  --text:#333333; --text-soft:#666666; --text-dark:#002347;
  --serif: "Crimson Pro", Georgia, "Times New Roman", serif;
  --ui: "Inter", -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
}


/* ── 2. BASIS & TYPOGRAFIE ──────────────────────────────── */

* { box-sizing: border-box; }

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
  padding: 0;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg-light);
  color: var(--text);
  font-family: var(--ui);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  /* De klassieke Tempels-tekstpagina's gebruiken een lange rits
     em-dashes als platte-tekst sectiescheiding (zie
     convert_lone_emdash_lines_to_hr() in convert_mdv2_to_html5.py, dat
     de meeste al naar een echte <hr> omzet) -- waar er toch nog een rist
     overblijft, kan die zonder spaties niet afbreken en zou de pagina op
     smalle schermen breder maken dan de viewport. */
  overflow-wrap: break-word;
}

img, video, figure { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--border-light);
  margin: 32px 0;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-dark);
  line-height: 1.2;
}
h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: normal;
}
h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: normal;
}
h1 { font-size: 36px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h6 { font-size: 15px; }

/* Sectiekoppen in de lopende inhoud hebben verticaal ritme nodig: de
   reset nult alle heading-marges, en alleen losse contexten zetten die
   terug. Scoped op <main> zodat enkel echte inhoudskoppen geraakt worden.
   Diepere niveaus (h5/h6) iets krapper. */
main h2, main h3, main h4 { margin: 32px 0 16px; }
main h5, main h6 { margin: 24px 0 16px; }
main.page-content > h2:first-child { margin-top: 0; }

p { margin-bottom: 16px; }
p:last-child { margin-bottom: 0; }

a { color: var(--river); text-decoration: none; }
a:hover { color: var(--river-hover); text-decoration: underline; }

/* Tempels' academische volledige teksten staan vol met inline
   voetnootverwijzingen als "[1]", vaak zonder spatie tegen de omringende
   tekst/leestekens aan (bv. "...het woord."[5](#5)"). Wat extra
   horizontale witruimte errond maakt zulke lange pagina's rustiger
   leesbaar, zonder de navigatie-pillen (eigen padding) te raken. */
main.page-content a { margin: 0 2px; }

strong { font-weight: bold; }
/* Enkel een 400-cursief-variant meegeleverd (Inter + Crimson Pro), terwijl
   de lopende tekst gewicht 500 is -- een kaal <em> vroeg dus om "500
   cursief" en de browser synthetiseerde dat. Expliciet 400. */
em { font-weight: 400; }
strong em, em strong { font-weight: bold; }

ul, ol { padding-left: 24px; }
li { margin-bottom: 8px; }

/* Portret op de Tempels-homepage, ingebed naast de openingsalinea (zie
   insert_tempels_home_photo() in convert_mdv2_to_html5.py). */
.tempels-portrait {
  float: right;
  width: 220px;
  max-width: 40%;
  margin: 4px 0 20px 24px;
}
.tempels-portrait img {
  border: 1px solid var(--border-light);
  border-radius: 4px;
}
.tempels-portrait figcaption {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--text-soft);
  text-align: center;
  margin-top: 6px;
}


/* ── 3. TABELLEN & CITATEN ──────────────────────────────── */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  margin-bottom: 24px;
}
th {
  background: var(--bg-nav);
  color: var(--sand);
  font-family: var(--ui);
  font-weight: bold;
  text-align: left;
  padding: 12px 16px;
}
td { padding: 12px 16px; border-bottom: 1px solid var(--border-light); }

blockquote {
  border-left: 3px solid var(--border);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--bg-card);
}
blockquote p {
  font-family: var(--serif);
  font-size: 20px;
  font-style: italic;
  font-weight: 400;          /* enkel 400-cursief meegeleverd, zie em hierboven */
  color: var(--text-dark);
  margin: 0;
}
blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--ui);
  font-size: 14px;
  font-style: normal;
  color: var(--text-soft);
}

/* Museumobject-bijschrift bij een plaat-illustratie (zie
   flatten_artifact_blockquotes() in convert_mdv2_to_html5.py): klein en
   recht i.p.v. de grote cursieve citaat-opmaak hierboven. */
blockquote.plate-caption {
  border-left-color: var(--border-light);
  padding: 8px 16px;
  margin: 8px 0 24px;
  background: transparent;
}
blockquote.plate-caption p {
  font-family: var(--ui);
  font-size: 13px;
  font-style: normal;
  color: var(--text-soft);
}


/* ── 4. HEADER & NAVIGATIE ──────────────────────────────── */

.gen-header {
  background: var(--bg-nav);
  border-bottom: 3px solid var(--border);
}
.gen-header-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 12px 24px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.gen-logo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  margin-right: 24px;
  white-space: nowrap;
}
/* Het "verguld fleuron"-SVG-logo (build_tempels_logo_svg() in
   convert_mdv2_to_html5.py) i.p.v. een tekstlogo. */
.gen-logo-img {
  display: block;
  height: 44px;
  width: auto;
}

.gen-header .top-menu {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
}
.gen-header .top-menu ul {
  list-style: none;
  margin: 0 -3px;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /* verticaal centreren i.p.v. "stretch": de kleinere Æquatoria-
     terugkeerlink (a.nav-ext-site, 11px) en het icoon-only Home-item
     blijven zo op één lijn met de tekst-items. */
  -ms-flex-align: center;
  align-items: center;
}
.gen-header .top-menu li { margin: 3px; }
.gen-header .top-menu a {
  /* flex i.p.v. block: het gedeelde Home-huisicoon (_new_nav_icon_svg() in
     convert_markdown_to_html5.py) is een SVG zonder omringende tekst, en
     hing met enkel vertical-align een paar pixels te laag t.o.v. de
     tekst-items ernaast. align-items:center centreert beide gelijk. */
  display: flex;
  align-items: center;
  font-family: var(--ui);
  font-size: 13px;
  padding: 5px 11px;
  border-radius: 6px;
  border: 1px solid transparent;
  color: var(--sand);
  text-decoration: none;
}
.gen-header .top-menu a:hover {
  background: var(--bg-nav-active);
  border-color: var(--border);
  color: var(--bg-light);
  text-decoration: none;
}
/* Link terug naar de Aequatoria-hoofdsite (zie
   add_aequatoria_site_link_to_tempels_nav() in convert_mdv2_to_html5.py):
   laatste item in het menu, bewust iets kleiner en met een scheidingslijntje
   ervoor -- het leidt van de Tempels-site af. */
.gen-header .top-menu a.nav-ext-site {
  font-size: 11px;
  color: var(--border-light);
  margin-left: 6px;
  padding-left: 13px;
  border-left: 1px solid var(--border);
  border-radius: 0;
}
.gen-header .top-menu a.nav-ext-site::after {
  content: "\00a0\2197";   /* nbsp + ↗ */
  font-size: 0.9em;
}
/* Taalkeuze: apart van het gewone menu, altijd uiterst rechts in de
   header -- laatste flex-kind van .gen-header-inner, en .top-menu ernaast
   heeft flex:1, dus die duwt dit vanzelf helemaal naar rechts. */
.gen-header .lang-switch {
  margin-left: 12px;
  flex-shrink: 0;
}
.gen-header .lang-switch a {
  display: block;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: bold;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid var(--sand);
  color: var(--sand);
  text-decoration: none;
  white-space: nowrap;
}
.gen-header .lang-switch a:hover {
  background: var(--sand);
  color: var(--bg-nav);
  text-decoration: none;
}

/* Enkel zichtbaar binnen de mobiel/tablet-mediaquery hieronder -- op
   desktop staat het topmenu altijd al volledig uitgeklapt, dan is er
   niets om open/dicht te plooien. */
/* font-family: een <button> erft dat niet vanzelf -- zonder dit rendert het
   ☰-teken in Arial i.p.v. de site-UI-letter. */
.menu-toggle { display: none; font-family: inherit; }


/* ── 5. KOLOMINDELING & FOOTER ──────────────────────────── */

.gen-layout {
  max-width: 1160px;
  margin: 0 auto;
  padding: 24px 24px 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

.left-col {
  width: 230px;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  margin-right: 32px;
}

.left-col > .side-menu {
  padding: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  font-family: var(--ui);
  font-size: 14px;
}
.left-col > .side-menu ul { list-style: none; margin: 0; padding-left: 0; }
.left-col > .side-menu ul ul { padding-left: 16px; margin-top: 4px; margin-bottom: 8px; }
.left-col > .side-menu li { margin-bottom: 6px; }
.left-col > .side-menu > ul > li > strong {
  display: block;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: 6px;
}
.left-col > .side-menu a { color: var(--text); }
.left-col > .side-menu a:hover { color: var(--river); }

main.page-content {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  min-width: 0;
  max-width: none;
  margin: 0;
  padding: 0;
}
main.page-content:after { display: none; }
main.page-content > h1 { margin-bottom: 16px; }
main.page-content > .breadcrumb {
  font-family: var(--ui);
  font-size: 14px;
  color: var(--text-soft);
  margin-bottom: 12px;
}
main.page-content > .breadcrumb a { color: var(--river); }
main.page-content.no-side {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

.gen-footer {
  background: var(--bg-dark);
  color: var(--text-soft);
  padding: 20px 24px;
  border-top: 3px solid var(--border);
  font-family: var(--ui);
  font-size: 13px;
  text-align: center;
}
.gen-footer a { color: var(--text-soft); }
.gen-footer a:hover { color: var(--sand); text-decoration: none; }


/* ── 6. MOBIEL (<=860px) ────────────────────────────────── */

@media (max-width: 860px) {
  /* .gen-header-inner blijft een rij (net als op desktop) i.p.v. om te
     schakelen naar 1 kolom: logo + taalkeuze delen zo op natuurlijke
     wijze de eerste rij (allebei smal genoeg om naast elkaar te passen),
     en enkel het topmenu (verderop width:100%, dus nooit smal genoeg om
     op diezelfde rij te passen) springt vanzelf naar een eigen volle rij
     dankzij flex-wrap. */
  .gen-header-inner { padding: 10px 16px; }
  .gen-logo { margin-right: 0; margin-bottom: 8px; }
  /* Knop + taalkeuze samen rechts op de eerste rij -- margin-left:auto
     verhuisde van .lang-switch naar .menu-toggle, zodat die 2 nu als
     koppel naast elkaar rechts staan. Zie ook build_page_structure() in
     convert_markdown_to_html5.py voor de knop zelf (gedeeld met de
     hoofdsite, geen Tempels-specifieke logica nodig). */
  .menu-toggle {
    display: block;
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    margin-left: auto;
    background: none;
    border: 1px solid var(--sand);
    color: var(--sand);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 20px;
    line-height: 1.4;
    cursor: pointer;
  }
  .menu-toggle:hover { background: var(--bg-nav-active); }
  .gen-header .lang-switch {
    -webkit-box-ordinal-group: 1;
    -ms-flex-order: 0;
    order: 0;
    margin-left: 8px;
    margin-top: 0;
  }
  .gen-header .top-menu {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    /* De onvoorwaardelijke regel hierboven (sectie 4) zet "flex: 1", d.i.
       flex-basis:0% -- die wint van een gewone "width", dus expliciet de
       flex-basis zelf op 100% zetten i.p.v. enkel width. */
    -webkit-box-flex: 1;
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    width: 100%;
    /* Standaard toegeplooid, zie css/aequatoria.css voor de volledige
       toelichting -- zelfde gedrag, want zelfde .menu-toggle-mechaniek. */
    display: none;
  }
  .gen-header .top-menu.is-open { display: block; }
  .gen-header .top-menu ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 -3px;
  }
  .gen-header .top-menu li { margin: 2px 3px; }
  /* justify-content i.p.v. het vroegere text-align: nu de "a" hierboven
     display:flex is (voor de icoon-uitlijning), doet text-align niets meer. */
  .gen-header .top-menu a { padding: 12px 14px; justify-content: center; font-size: 18px; }
  /* In de toegeplooide mobiele kolom heeft een linker-scheidingslijntje geen
     zin -- gewoon iets kleiner houden dan de rest. */
  .gen-header .top-menu a.nav-ext-site {
    font-size: 15px;
    margin-left: 0;
    padding-left: 14px;
    border-left: 0;
  }
  .gen-layout {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 16px 16px 32px;
  }
  .left-col { width: 100%; margin-right: 0; margin-bottom: 16px; }
  /* .gen-layout--with-side: modifierklasse die build_page_structure() (zie
     convert_markdown_to_html5.py, gedeeld met de hoofdsite) enkel toevoegt
     op pagina's mét subnav (left-col). stretch i.p.v. het overgeërfde
     flex-start: nodig zodat main's kinderen hieronder, eens "losgemaakt"
     van main, elk uit zichzelf de volledige breedte innemen i.p.v. hun
     eigen inhoud-breedte (voorheen deed de aparte
     "main.page-content { width:100% }" regel dat nog voor main als geheel). */
  .gen-layout--with-side {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
  }

  /* .gen-layout is een flex-column met align-items:flex-start -- zonder
     een expliciete breedte hier krijgt main dan een shrink-to-fit
     breedte in de kruisas (dus horizontaal) i.p.v. de volledige
     containerbreedte, wat een brede afbeelding main tot aan zijn eigen
     max-width kon laten uitrekken en zo horizontale scroll veroorzaakte.
     (Blijft nuttig als fallback voor browsers zonder display:contents --
     zie hieronder.) */
  main.page-content { width: 100%; }

  /* De titel (h1, of h2 als er geen h1 is) moet net onder de broodkruimel
     en boven de subnav (left-col) staan, ook al staat left-col in de
     brontekst vóór main (nodig voor de kolomvolgorde op desktop: subnav
     links, hoofdtekst rechts). main.page-content "ontplooien"
     (display:contents) maakt zijn kinderen (broodkruimel, h1, p, ul, ...)
     individueel herschikbare flex-items binnen .gen-layout--with-side,
     zodat enkel broodkruimel+titel vóór left-col kunnen komen te staan
     i.p.v. heel main in zijn geheel. De broodkruimel (indien aanwezig)
     staat in de brontekst altijd al vóór de h1, dus zelfde order-waarde
     volstaat om ze samen, in die volgorde, vóór left-col te krijgen.
     Browsers zonder display:contents-steun negeren deze regels gewoon en
     tonen nog altijd main als geheel (dus subnav onderaan) -- geen breuk,
     enkel geen herschikking. */
  .gen-layout--with-side > main.page-content { display: contents; }
  .gen-layout--with-side > main.page-content > * { order: 3; }
  .gen-layout--with-side > main.page-content > nav.breadcrumb,
  .gen-layout--with-side > main.page-content > h1,
  .gen-layout--with-side > main.page-content > h2:first-child {
    order: 1;
  }
  .gen-layout--with-side > .left-col { order: 2; }

  /* Sommige pagina's bevatten brede tabellen (meerdere kolommen) die op
     mobiele breedte niet kunnen krimpen zonder de data onleesbaar te
     maken -- laat de tabel zelf horizontaal scrollen i.p.v. de hele
     pagina. */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Subnav op mobiel: net als het hoofdmenu duidelijke, tikbare nav-items
     (blokken met rand, ~44px hoog, gecentreerd) i.p.v. een rijtje kleine
     tekstlinks. */
  .left-col > .side-menu { padding: 8px; }
  .left-col > .side-menu li { text-align: center; margin-bottom: 4px; }
  .left-col > .side-menu ul ul { padding-left: 0; margin-top: 4px; margin-bottom: 4px; }
  .left-col > .side-menu a {
    display: block;
    padding: 12px 14px;
    font-size: 17px;
    border-radius: 6px;
    border: 1px solid var(--border-light);
  }
  .left-col > .side-menu a:hover,
  .left-col > .side-menu a:active {
    background: var(--bg-nav-active);
    border-color: var(--border);
    color: var(--bg-light);
  }
  .left-col > .side-menu > ul > li > strong {
    font-size: 13px;
    padding: 10px 0 6px;
    margin-bottom: 8px;
    border-bottom: 2px solid var(--border-light);
  }

  /* Portret op de Tempels-homepage: op smalle schermen niet laten
     drijven (te weinig ruimte naast de tekst) maar gecentreerd boven de
     tekst tonen. */
  .tempels-portrait {
    float: none;
    width: 160px;
    max-width: 50%;
    margin: 0 auto 20px;
  }
}

/* Tablet (bv. iPad-formaat): zelfde verticale menu-opmaak als op
   smartphone (die op smartphone-formaat prima leesbaar is, bevestigd door
   de gebruiker), maar logo en topmenu-tekst iets groter -- op een fysiek
   veel groter scherm oogde dezelfde px-grootte als op smartphone te
   klein/schraal. */
@media (min-width: 481px) and (max-width: 860px) {
  .gen-logo-img { height: 60px; }
  .gen-header .top-menu a { font-size: 22px; padding: 14px 16px; }
  .left-col > .side-menu { font-size: 16px; }
  /* Zelfde redenering als hierboven, maar dan voor de lopende tekst --
     die bleef tot nu toe overal vast op de body-basis van 16px. */
  body { font-size: 18px; }
}