/* ==========================================================================
   1. FONTS & GLOBALE TYPOGRAFIE / UI
   ========================================================================== */

/* Laad Merriweather van Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

/* Broodtekst (Quanta-stijl) */
body, 
#quarto-document-content p {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.125rem;    /* ca. 18px */
  line-height: 1.8;       /* Royale regelafstand voor rustige leesbaarheid */
  color: #222222;         /* Donkergrijs in plaats van hard zwart */
}

/* Koppen globaal over de hele site */
h1, h2, h3, h4, h5, h6, .title {
  font-family: 'Haettenschweiler', 'Impact', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: normal;
  letter-spacing: 0.02em;
  color: #407CBF;
}

/* UI & Navigatie behoudt een strakke sans-serif */
.navbar, .sidebar, nav, .toc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ==========================================================================
   2. HEADER & NAVIGATIE (LOGO LINKS, MENU RECHTS UITGELIJND)
   ========================================================================== */

/* Navbar als geheel */
.navbar {
  min-height: unset !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid #000000;
}

/* Navbar container: alles op één rij met maximale breedteverdeling */
.navbar .container-fluid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* 1. Logo uiterst links */
.navbar-brand-container,
.navbar-brand {
  flex: 0 0 auto !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin-right: 2rem !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.navbar-brand img,
.navbar-brand-logo,
.navbar-brand-logo img,
.navbar-brand > img,
nav.navbar img {
  height: auto !important;
  width: auto !important;
  max-height: 48px !important;
  min-height: unset !important;
  max-width: 100% !important;
  display: block !important;
  margin: 0 !important;
}

/* 2. Menu-container en items helemaal naar rechts geduwd */
.navbar-collapse {
  flex: 1 1 auto !important;
  width: auto !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin: 0 !important;
}

.navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 1.25rem !important;
  margin: 0 !important;
}

.navbar-nav.me-auto,
.navbar-nav.ms-auto {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 3. Zoekicoon sluit aan de rechterkant direct aan achter het menu */
#quarto-search,
.quarto-search-trigger,
.navbar .search-trigger {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 0 0 1.25rem !important;
  padding: 0 !important;
}


/* ==========================================================================
   3. ARTIKELWEERGAVE & TOOLTIPS
   ========================================================================== */

/* Artikeltitel bovenaan pagina vergroten en Haettenschweiler forceren */
header.quarto-title-block h1.title,
.quarto-title-block .title {
  font-family: 'Haettenschweiler', 'Impact', sans-serif !important;
  font-size: 3.4rem !important;
  line-height: 1.15 !important;
  margin-bottom: 0.6rem !important;
  color: #407CBF !important;
  letter-spacing: 0.02em;
}

/* Artikelondertitel / description cursief maken */
.quarto-title-block .description,
header.quarto-title-block p.subtitle {
  font-style: italic !important;
  color: #444444;
}

/* Voetnoot-hover popup (Tippy.js) compacter maken */
.tippy-box {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
}

.tippy-box .tippy-content p {
  font-size: 0.85rem !important;
  line-height: 1.45 !important;
  margin-bottom: 0 !important;
}

/* Drop Cap (Beginkapitaal) desktop - over 3 regels */
.lead-in::first-letter,
.drop-cap::first-letter {
  font-family: 'Haettenschweiler', 'Impact', sans-serif;
  float: left;
  font-size: 7.2rem;
  line-height: 0.73;
  padding-top: 6px;
  padding-right: 0.75rem;
  padding-bottom: 2px;
  color: #407CBF;
}

/* Zorg dat de figuurcontainer mee krimpt met de afbeelding */
figure.figure,
.quarto-figure-center {
  display: table !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Laat het bijschrift linksuitgelijnd staan tegen de linkerrand van de foto */
figure.figure > figcaption,
.quarto-figure-center > figcaption {
  display: table-caption !important;
  caption-side: bottom !important;
  text-align: left !important;
  font-size: 0.88rem;
  color: #666666;
  padding-top: 0.5rem;
}

/* Kader om een afbeelding of container */
img.img-border,
.img-border img,
figure.img-border img {
  border: 1px solid #c1c1c1;
  border-radius: 4px;
}


/* ==========================================================================
   4. AUTEURSBLOK IN DE ZIJBALK
   ========================================================================== */

.author-sidebar {
  font-family: 'Merriweather', Georgia, serif;
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #e5e5e5;
}

.author-sidebar p {
  font-family: 'Merriweather', Georgia, serif !important;
  font-size: 0.88rem !important;
  line-height: 1.55 !important;
  margin-bottom: 0.35rem;
}

/* Gecentreerde ronde pasfoto */
.author-sidebar .author-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.85rem;
}

/* Auteursnaam in de stijl van de artikelkoppen */
.author-sidebar .author-name {
  font-family: 'Haettenschweiler', 'Impact', sans-serif;
  font-size: 1.35rem;
  color: #407CBF;
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.author-sidebar .author-name a {
  text-decoration: none;
  color: inherit;
}

.author-sidebar .author-name a:hover {
  text-decoration: underline;
}

/* Rol subtiel gecursiveerd in Merriweather */
.author-sidebar .author-role {
  font-style: italic;
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.author-sidebar .author-bio {
  color: #444;
  font-size: 0.82rem;
}


/* ==========================================================================
   5. OVERZICHTSPAGINA'S (LISTING GRID)
   ========================================================================== */

/* Titels van artikelen in het grid */
.quarto-grid-item .card-title,
.quarto-grid-item .listing-title {
  font-family: 'Haettenschweiler', 'Impact', sans-serif !important;
  font-size: 1.35rem !important;
  line-height: 1.25 !important;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  color: #407CBF !important;
  letter-spacing: 0.02em;
}

.quarto-grid-item .card-title a,
.quarto-grid-item .listing-title a {
  text-decoration: none;
  color: inherit;
}

.quarto-grid-item .card-title a:hover,
.quarto-grid-item .listing-title a:hover {
  text-decoration: underline;
}

/* Beschrijving van artikelen in het grid */
#quarto-document-content .quarto-grid-item .card-text,
#quarto-document-content .quarto-grid-item .listing-description,
#quarto-document-content .quarto-grid-item .card-text p,
#quarto-document-content .quarto-grid-item .listing-description p {
  font-size: 0.88rem !important;
  line-height: 1.5 !important;
  color: #555555 !important;
  margin-bottom: 0.5rem !important;
}


/* ==========================================================================
   6. FEATURED HERO ARTICLE (SHOWCASE COMPACT & CLEAN)
   ========================================================================== */

.featured-story {
  margin-bottom: 3.5rem;
}

/* Titel in Haettenschweiler */
.featured-story h1,
.featured-story h1 a {
  font-family: 'Haettenschweiler', 'Impact', sans-serif !important;
  font-size: 3.8rem !important;
  line-height: 1.1 !important;
  color: #407CBF !important;
  text-decoration: none !important;
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem !important;
}

.featured-story h1 a:hover {
  text-decoration: underline !important;
}

/* Categoriebadge */
.featured-story .featured-badge {
  display: inline-block;
  background-color: #f0f5fa;
  color: #407CBF;
  border: 1px solid #d2e3f3;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  margin-bottom: 0.75rem;
}

/* Ondertitel / description */
.featured-story .featured-desc {
  display: block;
  font-style: italic;
  color: #444444;
  font-size: 1.15rem;
  margin-bottom: 0.5rem;
}

/* Publicatiedatum */
.featured-story .featured-date {
  display: block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: #888888;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

/* Hero-banner over de breedte van het scherm */
.featured-story .column-screen {
  margin-bottom: 2rem;
}

.featured-story .column-screen img {
  width: 100%;
  display: block;
}

/* Knop 'Read full article' */
.featured-story .btn-read-more {
  display: inline-block;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #407CBF !important;
  text-decoration: none !important;
  border: 1px solid #407CBF;
  padding: 0.5rem 1.2rem;
  border-radius: 4px;
  margin-top: 1.5rem;
  transition: all 0.2s ease;
}

.featured-story .btn-read-more:hover {
  background-color: #407CBF !important;
  color: #ffffff !important;
}


/* ==========================================================================
   7. RESPONSIVITEIT & MOBIEL (SCHERMEN SMALLER DAN 992PX)
   ========================================================================== */

@media (max-width: 991px) {
  #quarto-document-content,
  main.content {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  header.quarto-title-block h1.title,
  .quarto-title-block .title {
    font-size: 2.4rem !important;
  }

  .column-margin {
    order: 99;
    margin-top: 3rem;
    border-top: 1px solid #e5e5e5;
    padding-top: 1.5rem;
  }

  .lead-in::first-letter,
  .drop-cap::first-letter {
    font-size: 4.5rem;
    line-height: 0.85;
    padding-top: 3px;
    padding-right: 0.5rem;
  }

  .navbar-nav {
    flex-wrap: wrap !important;
    gap: 0.75rem 1rem !important;
  }

  /* Hero-titel op mobiel */
  .featured-story h1,
  .featured-story h1 a {
    font-size: 2.5rem !important;
  }
}