/* =====================
   BODY / ALGEMEEN
   ===================== */
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #f5f5f5;
  color: #222;
  line-height: 1.6;
}

/* =====================
   TOPBAR / NAVIGATIE
   ===================== */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;

  display: flex;
  align-items: center;
  /* 👈 alles netjes verticaal */
  justify-content: space-between;
  /* 👈 DIT duwt links & rechts uit elkaar */

  padding: 8px 20px;
  background: white;

  z-index: 1000;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}

.topbar a {
  margin-right: 15px;
  text-decoration: none;
  color: #555;
  font-size: 14px;
}

.topbar a:hover {
  text-decoration: underline;
}

.topbar input {
  padding: 5px 10px;
  font-size: 14px;
}

.nav-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-right {
  margin-right: 40px;
}

.logo img {
    height: 32px;
    /* grootte van icoon */
    width: auto;
    display: block;
}

body {
  padding-top: 70px; /* zelfde als height van topbar */
}

/* =====================
   PAGINA-INHOUD - HOOFD- EN SUBPAGINA
   ===================== */
main {
  margin-top: 60px;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
}

/* Subpagina’s met witte achtergrond */
main.subpage {
  max-width: 900px;
  margin: 60px auto;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Header en Footer */
header, footer {
  text-align: center;
  padding: 20px;
}

header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #222;
  margin-bottom: 10px;
}

header p {
  font-size: 16px;
  color: #222;
  margin-bottom: 20px;
}

/* Inhoudsopgave */
.inhoudsopgave {
    float: left;
    width: 220px;
    font-size: 13px;
    background: #f9f9f9;
    padding: 12px;
    margin: 0 20px 20px 0;
    border: 1px solid #ddd;
}

.inhoudsopgave ul {
    list-style: none;
    padding-left: 10px;
}

.inhoudsopgave ul ul {
    padding-left: 15px;
}

.inhoudsopgave a {
    text-decoration: none;
    color: #222;
}

.inhoudsopgave a:hover {
    text-decoration: underline;
}

.toc-header {
    font-weight: bold;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Subpagina koppen en paragrafen */
main.subpage h2 {
  font-size: 22px;
  font-weight: 600;
  color: #222;
  margin-top: 30px;
  margin-bottom: 10px;
}

h2 {
    border-bottom: 1px solid rgba(0,0,0,0.2);
    padding-bottom: 6px;
}

main.subpage p {
  line-height: 1.6;
  font-size: 16px;
  color: #222;
  margin-bottom: 20px;
}

/* Footer extra styling */
footer {
  text-align: center;
  padding: 20px;
  color: #222;
  font-size: 14px;
}

footer a {
  color: #222;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* =====================
   KAART
   ===================== */
.map-container {
  position: relative;
  max-width: 1000px;
  margin: 40px auto;
}

.map {
  width: 100%;
  display: block;
}

/* =====================
   KLIKBARE REGIO'S
   ===================== */
.region {
  position: absolute;
  border-radius: 50%;
}

.balticum {
  top: 16%;
  left: 51%;
  width: 8%;
  height: 19%;
}

.poland {
  top: 34%;
  left: 44%;
  width: 11%;
  height: 17%;
}

.sudetenland {
  top: 45%;
  left: 40%;
  width: 5%;
  height: 8%;
}

.russia {
  top: 6%;
  left: 56%;
  width: 40%;
  height: 59%;
}

.yugoslavia {
  top: 60%;
  left: 41%;
  width: 12%;
  height: 12%;
}

.romania {
  top: 52%;
  left: 52%;
  width: 12%;
  height: 16%;
}

.hungary {
  top: 51%;
  left: 44%;
  width: 10%;
  height: 12%;
}

.rest {
  top: 43%;
  left: 29%;
  width: 5%;
  height: 12%;
}

/* =====================
   Region basis
   ===================== */
.region {
    position: absolute;
    border-radius: 50%;
    outline: 2px solid transparent;
    box-shadow: none;
    cursor: pointer;
    opacity: 0;
    /* standaard onzichtbaar */
    transition: opacity 0.5s ease, outline 0.5s ease, box-shadow 0.5s ease;
    /* snelle hover */
}

/* =====================
   Hover / touch effect
   ===================== */
.region.hovering,
.region:hover {
    opacity: 1;
    /* meteen zichtbaar bij hover/touch */
    outline: 2px solid rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* =====================
   Automatische animatie (pulse)
   ===================== */
@keyframes pulseAnimation {
    0% {
        opacity: 0;
        outline: 2px solid transparent;
        box-shadow: none;
    }

    33% {
        opacity: 1;
        outline: 2px solid rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
    }

    66% {
        opacity: 1;
        outline: 2px solid rgba(0, 0, 0, 0.5);
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.12);
    }

    100% {
        opacity: 0;
        outline: 2px solid transparent;
        box-shadow: none;
    }
}

.region.pulse {
    animation: pulseAnimation 1.5s ease-in-out forwards;
    /* fade-in 4s, fade-out 4s, pauze 4s */
}

/* =====================
   KOPPEN OVERALL
   ===================== */
section h2 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  margin-top: 40px;
  margin-bottom: 10px;
}

/* =====================
   EXTRA: SCROLL-MARGIN VOOR MENU
   ===================== */
[id] {
  scroll-margin-top: 80px; /* voorkomt dat sticky menu tekst bedekt bij springen */
}

.highlight {
  background: yellow;
  padding: 2px;
}

/* =====================
   AFBEELDINGEN
   ===================== */
figure {
  margin: 0;
}

figure.afbeelding-rechts {
  float: right;
  width: 300px;
  margin: 0 0 15px 20px;
  text-align: center;
}

figure.afbeelding-rechts img {
  width: 100%;
  border: 1px solid #ccc;
  cursor: pointer;
}

figure figcaption {
  font-size: 13px;
  color: #555;
  font-style: italic;
  margin-top: 6px;
}

.clearfix {
  clear: both;
}

/* =====================
   ZWEVEND LOGO (TERUG NAAR INDEX)
   ===================== */
.floating-logo {
  position: fixed;
  top: 15px;
  left: 15px;          /* zet right: 15px als je ’m rechts wilt */
  z-index: 3000;
}

.floating-logo img {
  height: 32px;        /* zelfde als favicon / topbar */
  width: auto;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* subtiel hover-effect */
.floating-logo img:hover {
  transform: scale(1.1);
  opacity: 0.85;
}

/* =====================
   RESPONSIVE TOPBAR
   ===================== */

/* Desktop: alleen desktop-nav tonen, hamburger verbergen */
.hamburger,
.mobile-nav {
    display: none;
}

.desktop-nav {
    display: flex;
    gap: 15px;
}

/* Mobiel (<768px) */
@media (max-width: 768px) {

    /* Topbar layout mobiel */
    .topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 1000;
        justify-content: flex-start;
    }

    /* Verberg desktop links op mobiel */
    .desktop-nav {
        display: none;
    }

    /* Hamburger tonen */
    .hamburger {
        display: block;
        font-size: 28px;
        cursor: pointer;
    }

    /* Logo tonen */
    .logo {
        display: block;
    }

    .logo img {
        height: 32px;
        width: auto;
    }

    /* Zoekbalk */
    .topbar input[type="search"] {
        display: block;
        flex: 1;
        /* vult resterende ruimte */
        font-size: 16px;
        padding: 5px 10px;
        min-width: 0;
        /* voorkomt dat het te ver naar rechts schuift */
    }

    /* Mobiele nav links */
    .mobile-nav {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid #ccc;
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
        z-index: 4000;
    }

    .mobile-nav a {
        display: block;
        text-decoration: none;
        color: #222;
        font-size: 16px;
    }

    .mobile-nav.active {
        display: flex;
    }

    body {
        overflow-x: hidden;
    }
}

/* Extra kleine schermen (<480px) */
@media (max-width: 480px) {
    .logo img {
        height: 40px;
    }

    .topbar input[type="search"] {
        font-size: 17px;
        padding: 5px 8px;
    }
}

/* Reset de teller bij het begin van de pagina */
body {
  counter-reset: figuur;
}

/* Tel elke figure */
figure {
  counter-increment: figuur;
}

/* Voeg automatisch "Figuur X: " toe */
figcaption::before {
  content: "Figuur " counter(figuur) ": ";
  font-weight: bold;
}

/* =====================
   TOPBAR SPLIT MOBILE / DESKTOP
   ===================== */

/* Standaard: mobiel verbergen, desktop tonen */
.mobile-topbar {
    display: none;
}

.desktop-topbar {
    display: flex;
}

/* Mobiel ≤768px */
@media (max-width: 768px) {

    .desktop-topbar {
        display: none;
        /* desktop topbar verbergen */
    }

    .mobile-topbar {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 15px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        position: sticky;
        top: 0;
        z-index: 1000;
        justify-content: flex-start;
    }

    .hamburger {
        font-size: 28px;
        cursor: pointer;
        display: block;
    }

    .logo img {
        height: 32px;
        width: auto;
        display: block;
    }

    .mobile-topbar input[type="search"] {
        display: block;
        flex: 1;
        font-size: 16px;
        padding: 5px 10px;
        min-width: 0;
        /* voorkomt overflow */
    }

    .mobile-nav {
        display: none;
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid #ccc;
        flex-direction: column;
        gap: 10px;
        padding: 10px 15px;
        z-index: 4000;
    }

    .mobile-nav a {
        display: block;
        text-decoration: none;
        color: #222;
        font-size: 16px;
    }

    .mobile-nav.active {
        display: flex;
    }
}

@media (max-width: 1000px) {
    .inhoudsopgave {
        display: none;
    }
}

/* Voorkom horizontale scroll */
html, body {
    overflow-x: hidden;
}

#lightbox {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.lightbox-content {
  position: relative;
  background: white;
  padding: 20px;
  border-radius: 6px;
  max-width: 90%;
  text-align: center;
}

#lightbox-img {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  cursor: zoom-in;
}

#lightbox-caption {
  color: black;
  margin-top: 10px;
  font-size: 14px;
}

.lightbox-prev,
.lightbox-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  color: white;
  cursor: pointer;
  padding: 20px;
  z-index: 10000;
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.loupe {
  position: absolute;
  width: 150px;
  height: 150px;
  border: 3px solid white;
  border-radius: 50%;
  display: none;
  background-repeat: no-repeat;
  background-size: 200%;
  pointer-events: none;
  z-index: 10002;
}

/* Highlight wanneer via anchor wordt geopend */
li:target {
  background-color: #dbeeff;
  padding: 8px;
  border-radius: 6px;
  transition: background-color 0.4s ease;
  animation: flashHighlight 1.5s ease;
}

@keyframes flashHighlight {
  0%   { background-color: #a8d8ff; }
  100% { background-color: #dbeeff; }
}

/* =====================
   TOOLTIP / INFO-WOLKJE
   ===================== */

.tooltip {
  color: #1a73e8;                 /* blauw woord */
  cursor: help;
  position: relative;
}

/* het wolkje zelf */
.tooltip::after {
  content: attr(data-info);
  position: absolute;
  bottom: 140%;
  left: 50%;
  transform: translateX(-50%);

  background: #333;
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;

  font-size: 13px;
  line-height: 1.4;
  width: max-content;
  max-width: 260px;
  text-align: center;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2000;
}

/* klein driehoekje onder het wolkje */
.tooltip::before {
  content: "";
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);

  border-width: 6px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;

  opacity: 0;
  transition: opacity 0.2s ease;
}

/* hover = zichtbaar */
.tooltip:hover::after,
.tooltip:hover::before {
  opacity: 1;
}

/* ============================= */
/* AUTOMATISCHE BLAUWE WOORDEN  */
/* ============================= */

.auto-tooltip {
  color: #1a73e8;
  cursor: help;
  position: relative;
}

/* ============================= */
/* TOOLTIP BOX BLAUWE WOORDEN    */
/* ============================= */

.tooltip-box {
  position: absolute;
  max-width: 260px;
  text-align: center;
  background: #333;
  color: white;
  padding: 12px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  font-size: 13px;
  line-height: 1.4;
  z-index: 2000;

  opacity: 0;
  transform: translateY(2px);
  animation: fadeInTooltip 0.15s ease forwards;
}

/* Fade-in animatie */
@keyframes fadeInTooltip {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================= */
/* TOOLTIP AFBEELDING           */
/* ============================= */

.tooltip-box img,
.tooltip-img {
  width: 100%;
  height: auto;
  border-radius: 6px;
  margin-bottom: 8px;
  display: block;
}

/* ============================= */
/* PIJL ONDER TOOLTIP           */
/* ============================= */

.tooltip-box::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 15px;
  width: 12px;
  height: 12px;
  background: #1a73e8;
  transform: rotate(45deg);
  box-shadow: -2px -2px 5px rgba(0,0,0,0.05);
}