/* Responsive overrides — toegevoegd 9 sep 2026, laat het bestaande ontwerp
   intact op desktop, maakt de site bruikbaar op tablet/mobiel. */

*, *:before, *:after { box-sizing: border-box; }

img { max-width: 100%; height: auto; }

#main { width: 100%; max-width: 900px; }
/* Let op: GEEN padding hier — #content is precies 825px omdat twee
   kolommen ernaast (280px link-block + 545px content-block) exact
   optellen tot 825px. Padding hier eet in op die breedte en breekt de
   float-naast-elkaar-layout (de tweede kolom valt dan onder i.p.v.
   naast de eerste). De randruimte op mobiel komt uit de padding in de
   media query hieronder, waar de kolommen toch al onder elkaar staan. */
#content { width: 100%; max-width: 825px; }

/* Hamburger toggle (verborgen op desktop, getoond onder de breakpoint).
   Fixed i.p.v. absolute, zodat hij ook nog klikbaar is als het menu straks
   het hele scherm vult. z-index boven het menu (1000 vs 900) zodat de
   knop, die ook dienst doet als sluitkruis, altijd bovenop blijft. */
#nav-toggle {
  display: none;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 1000;
  width: 46px;
  height: 40px;
  padding: 10px;
  background: rgba(33,42,84,0.9);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
#nav-toggle:hover { background: #212a54; transform: scale(1.05); }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  position: relative;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .2s ease, top .3s ease;
}
#nav-toggle span:before { position: absolute; top: -8px; }
#nav-toggle span:after { position: absolute; top: 8px; }
/* Hamburger -> kruis */
#nav-toggle.open span { background: transparent; }
#nav-toggle.open span:before { top: 0; transform: rotate(45deg); }
#nav-toggle.open span:after { top: 0; transform: rotate(-45deg); }

@media (max-width: 820px) {
  /* Header-hoogte en logo-schaal veranderen SAMEN met het omschakelen naar
     het hamburgermenu hieronder — anders komt #menu (die top:50% van
     #sliders gebruikt) los te staan van een header die nog de oude,
     grotere hoogte veronderstelt, en overlapt hij de inhoud eronder. */
  #sliders { height: 45vw; min-height: 220px; max-height: 480px; }
  #logo { transform: scale(0.75); transform-origin: top left; }
  #content { padding: 0 15px; } /* randruimte t.o.v. schermrand; hier geen probleem meer, kolommen staan toch al onder elkaar */

  /* Home: tekst/afbeelding-blok en het "laatste nieuws"-blok onder elkaar */
  .home .content-block { float: none; width: 100%; }
  .home .content-block > div { width: 100%; margin-right: 0; }
  .info-block { float: none; width: 100%; height: auto; }
  .link-block { float: none; width: 100%; }
  .content-block.row-2 { float: none; height: auto; margin: 0 0 30px 0; }
  .content-block.row-2.content-block > div { margin-left: 0; height: auto; }

  /* Tekst/afbeelding kolommen (full-story, joy-ward, press) onder elkaar */
  .content-block .text, .content-block .image { float: none; width: 100%; }
  .content-block .image.normal img { width: 100%; }

  /* Nieuwsartikel-thumbnail niet meer laten zweven naast de tekst */
  article .main { float: none; width: 100%; }
  article [itemprop="thumbnailUrl"] { float: none; margin-bottom: 15px; }
  .nav, .nav.prev { float: none; width: 100%; text-align: left; display: block; margin-bottom: 10px; }

  /* Fotoalbum-tegels: van vaste 225px-breedte naar een vloeiend grid */
  .pictures .album, .pictures .show {
    width: calc(50% - 15px);
    margin-left: 15px;
    margin-bottom: 15px;
    float: left;
  }
  .pictures .album.first, .pictures .show.first { margin-left: 15px; }
  .pictures .album:nth-child(odd), .pictures .show:nth-child(odd) { margin-left: 0; clear: left; }

  /* Menu wordt een volledig-scherm overlay met animatie i.p.v. een kort
     uitklapblokje. Blijft in de DOM (geen display:none) zodat opacity/
     transform kunnen transitionen; visibility+delay voorkomt dat de
     onzichtbare overlay ondertussen nog klikbaar/focusbaar is. */
  #nav-toggle { display: block; }
  #menu {
    position: fixed;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    z-index: 900;
    background: linear-gradient(160deg, #1a2350 0%, #212a54 55%, #2c3a7a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.04);
    transition: opacity .4s ease, transform .4s ease, visibility 0s linear .4s;
  }
  #menu.open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .4s ease, transform .4s ease;
  }
  #menu ul { text-align: center; }
  #menu li {
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease;
  }
  /* Gestaffelde entree: elk item iets later dan het vorige, alleen als het menu open is */
  #menu.open li { opacity: 1; transform: translateY(0); }
  #menu.open li:nth-child(1) { transition-delay: .08s; }
  #menu.open li:nth-child(2) { transition-delay: .14s; }
  #menu.open li:nth-child(3) { transition-delay: .20s; }
  #menu.open li:nth-child(4) { transition-delay: .26s; }
  #menu.open li:nth-child(5) { transition-delay: .32s; }
  #menu a {
    font-size: 2.1em;
    border-bottom-color: rgba(255,255,255,0.35);
    display: inline-block;
    padding-bottom: 4px;
    transition: color .2s ease, border-color .2s ease;
  }
  #menu a:hover, #menu a:active {
    color: #accfe8;
    border-bottom-color: #accfe8;
  }
  body.nav-open { overflow: hidden; }

  /* Tijdperk-tabbladen (Pre-war/Post-war/...) passen niet in smalle
     schermen, ook niet gecomprimeerd (getest op 650px: tekst en
     jaartal-labels overlappen elkaar nog steeds). Bewust helemaal
     verborgen i.p.v. half-werkend; de hero-foto zelf blijft gewoon
     zichtbaar op "default". Zelfde specificiteit als de originele regel
     (#slider-choose.active), anders wint pages.css ondanks dat
     responsive.css later laadt. */
  #slider-choose.active { display: none; }
}

@media (max-width: 480px) {
  #sliders { height: 55vw; min-height: 180px; }
  #logo { transform: scale(0.55); }
  .pictures .album, .pictures .show { width: 100%; margin-left: 0 !important; }
}

/* Hamburgerknop: een echt rondje (48 x 48) van doorzichtig blauw zonder rand, witte streepjes met ronde
   uiteinden precies in het midden. Eerder was de knop 46 x 40 en dus een ovaal. Als het menu open is, wordt het
   kruisje getoond in dezelfde stijl. */
#nav-toggle {
  width: 48px;
  height: 48px;
  padding: 0;
  top: 14px;
  right: 14px;
  border-radius: 50%;
  background: rgba(33,42,84,0.55);
  box-shadow: 0 4px 16px rgba(20,28,64,0.30);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
}
@media (max-width: 820px) {
  #nav-toggle { display: flex; }
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { width: 20px; height: 2.5px; border-radius: 2px; background: #fff; }
#nav-toggle span:before { top: -7px; }
#nav-toggle span:after { top: 7px; }
#nav-toggle.open span { background: transparent; }
#nav-toggle.open span:before { top: 0; }
#nav-toggle.open span:after { top: 0; }
#nav-toggle:hover { transform: scale(1.06); background: rgba(33,42,84,0.72); }
#nav-toggle.open { background: rgba(255,255,255,0.12); box-shadow: none; }

/* Slider: de hoogte volgt de foto (1088 x 720), zodat het welkomstblok er maar een klein stukje overheen valt
   (dat stukje is de vaste negatieve marge van #content). Eerder was #sliders korter dan de foto (45vw tegen 66vw),
   waardoor het blok ver over de foto viel. */
@media (max-width: 820px) {
  #sliders { height: auto; min-height: 0; max-height: none; aspect-ratio: 1088 / 720; }
}
@media (max-width: 480px) {
  #sliders { height: auto; min-height: 0; max-height: none; aspect-ratio: 1088 / 720; }
}

/* Tussen 821 en 899 px is de foto korter dan de vaste hoogte van #sliders (555 px), waardoor er een gat van een paar
   pixels tussen de foto en het welkomstblok viel (bij 821 px: 8 px). Daar volgt de hoogte van #sliders de breedte van
   de foto (1088 x 720, dus 66,18 vw). */
@media (min-width: 821px) and (max-width: 899px) {
  #sliders { height: 66.18vw; }
}

/* Mobiel: lopende tekst groter. De basistekst is 11,5 px met een regelhoogte van ook 11,5 px, wat op een telefoon klein en
   krap is. Alleen de lopende tekst (alinea's, tabelcellen, definitielijsten) gaat naar 16 px met ruimere regels; koppen
   en menu blijven zoals ze waren, want die rekenen in em en zouden anders mee-exploderen. */
@media (max-width: 820px) {
  #content p, #content td, #content th, #content dd, #content dt { font-size: 16px; line-height: 1.55; }
  #content p { margin-bottom: 0.7em; }
}