/* === CSS/STYLE.CSS === */
/* Vernieuwde versie: Licht Thema, Blauw Accent (#1c1d3d), Minecraft-stijl */

/* --- Globale Reset & Standaard Stijlen --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border-radius: 0 !important; /* GEEN AFGERONDE HOEKEN (Minecraft-stijl) */
}

body {
    font-family: Verdana, Arial, sans-serif; /* Schoon, leesbaar lettertype */
    background-color: #ffffff; /* Witte achtergrond */
    color: #333333; /* Donkergrijs voor standaard tekst */
    line-height: 1.6;
    padding-bottom: 50px;
}

.container {
    max-width: 950px; /* Iets breder voor layout */
    margin: 30px auto; /* Meer ruimte boven/onder */
    padding: 25px;
    background-color: #f0f0f0; /* Heel lichtgrijs voor content gebied */
    border: 3px solid #cccccc; /* Duidelijke grijze rand */
    /* Harde, offset schaduw voor blocky effect */
    box-shadow: 6px 6px 0px #bbbbbb;
}

/* --- Header Stijlen --- */
header {
    background-color: #1c1d3d; /* Accentkleur Blauw */
    padding: 25px 20px;
    text-align: center;
    border-bottom: 3px solid #0e0f1f; /* Donkerdere blauwe rand */
    margin-bottom: 25px;
    box-shadow: 0px 4px 0px #5c5e8d; /* Subtiele schaduw onder header */
}

header h1 {
    font-size: 2.8em;
    text-transform: uppercase;
    color: #ffffff; /* Witte tekst */
    text-shadow: 2px 2px 0px #0e0f1f; /* Harde schaduw op tekst */
    margin-bottom: 5px;
}
header h1 a.home-link {
    color: #ffffff;
    text-decoration: none;
}
header h1 a.home-link:hover {
    color: #ffeb3b; /* Geel bij hover */
}

header p {
    font-size: 1.1em;
    color: #c5cae9; /* Licht blauw/paars voor subtitel */
}

/* --- Navigatie Stijlen --- */
nav ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 25px;
    padding: 10px 0;
    background-color: #e0e0e0; /* Lichtgrijs voor nav achtergrond */
    border-top: 3px solid #cccccc;
    border-bottom: 3px solid #cccccc;
}

nav li {
    margin: 6px 8px; /* Iets dichter bij elkaar */
}

nav a {
    display: block;
    background-color: #1c1d3d; /* Accentkleur Blauw */
    color: #ffffff; /* Witte tekst */
    padding: 12px 22px; /* Iets grotere knoppen */
    text-decoration: none;
    border: 2px solid #0e0f1f; /* Donkerdere blauwe rand */
    /* Harde schaduw, iets lichter blauw/grijs */
    box-shadow: 3px 3px 0px #5c5e8d;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    font-weight: bold;
    text-align: center;
    min-width: 130px;
}

nav a:hover, nav a:focus {
    background-color: #2c2e5a; /* Iets lichtere blauw bij hover */
    transform: translate(1px, 1px); /* Kleine verschuiving */
    box-shadow: 2px 2px 0px #5c5e8d;
}

/* Actieve navigatie link */
nav a.nav-active {
    background-color: #ffeb3b; /* Geel (contrast Minecraft-achtig) */
    color: #1c1d3d; /* Accent blauwe tekst */
    border-color: #fbc02d; /* Donkerder geel */
    box-shadow: 3px 3px 0px #f9a825; /* Gele schaduw */
    cursor: default;
}
nav a.nav-active:hover {
     transform: none;
     box-shadow: 3px 3px 0px #f9a825;
}

/* --- Sectie Stijlen --- */
section {
    background-color: #e8e8e8; /* Iets ander lichtgrijs */
    padding: 20px;
    margin-bottom: 25px; /* Meer ruimte tussen secties */
    border: 2px solid #d0d0d0; /* Rand */
    box-shadow: 4px 4px 0px #c0c0c0; /* Schaduw */
}
section:last-child {
    margin-bottom: 0;
}

section h2 {
    font-size: 1.9em; /* Groter */
    color: #1c1d3d; /* Accent Blauw */
    margin-bottom: 15px;
    border-bottom: 3px solid #1c1d3d; /* Dikkere blauwe streep */
    padding-bottom: 8px;
    text-shadow: 1px 1px 0px #cccccc; /* Subtiele lichte schaduw */
}

section h3 {
    font-size: 1.5em;
    color: #444444; /* Donkerder grijs voor subkoppen */
    margin-top: 25px; /* Meer ruimte boven h3 */
    margin-bottom: 12px;
}

section ul {
    margin-left: 25px;
    margin-bottom: 15px;
}
section li {
    margin-bottom: 6px;
}

/* --- Specifieke Element Stijlen (Blocky) --- */

/* Knoppen voor uitleg */
.uitleg-knop {
    background-color: #4caf50; /* Groen */
    color: white;
    padding: 10px 18px; /* Groter */
    border: 2px solid #388e3c; /* Donkerder groen rand */
    box-shadow: 3px 3px 0px #2e7d32; /* Nog donkerder groene schaduw */
    cursor: pointer;
    margin-top: 10px;
    margin-right: 5px;
    font-weight: bold;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.uitleg-knop:hover, .uitleg-knop:focus {
    background-color: #66bb6a; /* Lichter groen */
    transform: translate(1px, 1px);
    box-shadow: 2px 2px 0px #2e7d32;
}

/* Verborgen tekst vak */
.verborgen-tekst {
    display: none;
    background-color: #f5f5f5; /* Heel licht grijs */
    color: #333333;
    padding: 15px;
    margin-top: 10px;
    border: 2px dashed #aaaaaa; /* Grijze stippellijn */
}
.zichtbaar {
    display: block;
}

/* Trias Politica Schema (politiek.html) */
.trias-politica {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Meer ruimte */
    margin-top: 15px;
}
.macht-blok {
    flex: 1;
    min-width: 220px;
    padding: 20px;
    border: 3px solid; /* Kleur specifiek */
    box-shadow: 4px 4px 0px; /* Kleur specifiek */
    text-align: center;
    color: #333; /* Donkere tekst op lichte achtergrond */
}
.macht-blok h3 {
    color: #1c1d3d; /* Blauwe titel */
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 1.3em;
    border-bottom: 2px solid; /* Kleur specifiek */
    padding-bottom: 5px;
}
.macht-blok img { margin-top: 10px; }

/* Kleuren voor macht blokken */
.macht-blok.wetgevend { background-color: #e3f2fd; border-color: #90caf9; box-shadow-color: #64b5f6; } /* Licht Blauw */
.macht-blok.wetgevend h3 { border-color: #90caf9;}
.macht-blok.uitvoerend { background-color: #e8f5e9; border-color: #a5d6a7; box-shadow-color: #81c784; } /* Licht Groen */
.macht-blok.uitvoerend h3 { border-color: #a5d6a7;}
.macht-blok.rechterlijk { background-color: #fff3e0; border-color: #ffcc80; box-shadow-color: #ffb74d; } /* Licht Oranje */
.macht-blok.rechterlijk h3 { border-color: #ffcc80;}


/* €100 Verdeling Game (samenwerking.html) */
.verdeling-game {
    background-color: #e0e0e0; /* Licht grijs */
    color: #333;
    padding: 20px;
    margin-top: 20px;
    border: 3px solid #bdbdbd;
    box-shadow: 4px 4px 0px #9e9e9e;
}
.verdeling-game label { display: block; margin-bottom: 8px; font-weight: bold; }
.verdeling-game input[type="range"] { width: 100%; cursor: pointer; height: 10px; margin-bottom: 10px; }
.verdeling-game .output {
    font-weight: bold; margin-left: 10px; color: #1c1d3d; /* Blauw */
    background-color: #ffffff; padding: 2px 6px; border: 1px solid #cccccc;
    display: inline-block; min-width: 30px; text-align: right;
}
#totaal-bedrag {
    margin-top: 20px; padding-top: 15px; border-top: 2px dashed #bdbdbd;
    font-size: 1.2em; font-weight: bold; text-align: center;
}
#compromis-resultaat {
    margin-top: 15px; font-weight: bold; padding: 12px; text-align: center;
    display: none; border: 2px solid; box-shadow: 2px 2px 0px rgba(0,0,0,0.2);
}
#compromis-resultaat.succes { background-color: #c8e6c9; border-color: #4caf50; color: #2e7d32; } /* Licht groen */
#compromis-resultaat.mislukt { background-color: #ffcdd2; border-color: #f44336; color: #c62828; } /* Licht rood */

/* Nepnieuws Voorbeeld & Spel (journalistiek.html) */
.nepnieuws-voorbeeld {
     background-color: #ffecb3; /* Licht geel/oranje */
     color: #e65100; /* Donker oranje */
     padding: 15px; margin-top: 15px;
     border: 2px dashed #ffa726;
}
/* Game styles (knoppen, feedback) passen we hier ook toe */
.choice-button { /* Knop in spellen */
    padding: 10px 15px; font-weight: bold; cursor: pointer;
    border: 2px solid; flex-grow: 1; text-align: center;
    box-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    transition: transform 0.1s, box-shadow 0.1s;
}
.choice-button:hover { transform: translate(1px, 1px); box-shadow: 1px 1px 0px rgba(0,0,0,0.1); }
.choice-button.real { background-color: #c8e6c9; border-color: #4caf50; color: #2e7d32; }
.choice-button.fake { background-color: #ffcdd2; border-color: #f44336; color: #c62828; }
.feedback-area, .feedback-area-veiligheid { /* Feedback in spellen */
    margin-top: 15px; padding: 12px; font-weight: bold; text-align: center;
    display: none; border: 2px solid;
}
.feedback-correct, .feedback-correct-veiligheid { background-color: #e8f5e9; border-color: #4caf50; color: #2e7d32; }
.feedback-incorrect, .feedback-incorrect-veiligheid { background-color: #ffebee; border-color: #f44336; color: #c62828; }
.next-button, .next-button-veiligheid { /* Volgende knop in spellen */
    display: block; margin: 15px auto 0 auto; padding: 10px 20px;
    background-color: #1c1d3d; color: white; border: 2px solid #0e0f1f;
    box-shadow: 2px 2px 0px #5c5e8d; font-weight: bold; cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.next-button:hover, .next-button-veiligheid:hover { background-color: #2c2e5a; transform: translate(1px, 1px); box-shadow: 1px 1px 0px #5c5e8d; }


/* Onderwerp Blokken (index.html) */
.onderwerp-blokken { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 25px; justify-content: center; }
.onderwerp-blok {
    flex-basis: calc(33.333% - 25px); min-width: 200px;
    background-color: #f5f5f5; /* Neutraal lichtgrijs */
    color: #333; padding: 25px 15px; text-align: center; text-decoration: none;
    font-weight: bold; font-size: 1.1em;
    border: 3px solid #bdbdbd; /* Grijze rand */
    box-shadow: 4px 4px 0px #9e9e9e; /* Grijze schaduw */
    transition: transform 0.1s ease, box-shadow 0.1s ease;
    display: flex; align-items: center; justify-content: center;
}
.onderwerp-blok img { margin-right: 10px; filter: brightness(0.3); /* Maak standaard iconen donker */ }
.onderwerp-blok:hover {
    transform: translate(2px, 2px); box-shadow: 2px 2px 0px #9e9e9e;
    border-color: #1c1d3d; /* Blauwe rand bij hover */
    color: #1c1d3d; /* Blauwe tekst bij hover */
}
.onderwerp-blok:hover img { filter: none; /* Normale kleur icoon bij hover */ }
/* Optioneel: houd specifieke kleuren als je dat wilt, anders weglaten */
/* .onderwerp-blok.politiekkleur { ... } etc. */

/* Spandoek Maker (demonstreren.html) */
#spandoek-maker-container { border: 3px solid #bdbdbd; padding: 20px; background-color: #fafafa; color: #333; margin-top: 20px; box-shadow: 4px 4px 0px #cccccc; }
.spandoek-controls { display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: flex-end; }
.spandoek-controls label { display: block; margin-bottom: 5px; font-weight: bold; }
.spandoek-controls input[type="text"], .spandoek-controls select { padding: 8px; border: 2px solid #cccccc; background-color: #ffffff; min-width: 150px; }
.spandoek-controls input[type="color"] { height: 40px; padding: 5px; cursor: pointer; border: 2px solid #cccccc; }
#spandoek-voorbeeld { display: inline-block; padding: 30px 40px; border: 5px solid #8d6e63; /* Bruine 'stokken' */ background-color: #ffffff; color: #000000; font-weight: bold; font-size: 1.5em; text-align: center; box-shadow: 3px 3px 5px rgba(0,0,0,0.2); min-height: 100px; max-width: 100%; word-wrap: break-word; }

/* Veiligheid Pagina Specifiek */
.organisatie-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 20px; }
.organisatie-blok { padding: 20px; border: 3px solid; box-shadow: 4px 4px 0px; text-align: center; color: #ffffff; /* Witte tekst op gekleurde blok */ }
.organisatie-blok h4 { margin-top: 10px; margin-bottom: 15px; font-size: 1.4em; color: #ffffff; text-shadow: 1px 1px 0px rgba(0,0,0,0.3); }
.organisatie-blok .org-icon { width: 50px; height: 50px; display: block; margin: 0 auto 10px auto; }
.organisatie-blok button.uitleg-knop { background-color: rgba(255,255,255,0.8); color: #333; border-color: #cccccc; box-shadow: 2px 2px 0px rgba(0,0,0,0.2); }
.organisatie-blok button.uitleg-knop:hover { background-color: #ffffff; }
/* Kleuren voor blokken */
.organisatie-blok.politie { border-color: #1565c0; background-color: #2196f3; box-shadow-color: #0d47a1; }
.organisatie-blok.leger { border-color: #2e7d32; background-color: #4caf50; box-shadow-color: #1b5e20; }
.organisatie-blok.om { border-color: #e65100; background-color: #ff9800; box-shadow-color: #bf360c; }
.organisatie-blok.rechter { border-color: #4a148c; background-color: #9c27b0; box-shadow-color: #311b92; }

/* --- Responsiviteit --- */
@media (max-width: 768px) {
    header h1 { font-size: 2em; }
    nav ul { flex-direction: column; align-items: center; }
    nav li { width: 90%; }
    .trias-politica, .bestuurslaag-container { flex-direction: column; }
    .onderwerp-blokken { flex-direction: column; align-items: center; }
    .onderwerp-blok { flex-basis: 80%; width: 80%; }
    .container { padding: 15px; margin: 20px auto; }
    .organisatie-container, #machten-dropzones { grid-template-columns: 1fr; /* Alles onder elkaar */}
}

@media (max-width: 480px) {
     header h1 { font-size: 1.8em; }
     section h2 { font-size: 1.6em; }
     section h3 { font-size: 1.3em; }
     nav a { padding: 10px 15px; font-size: 0.95em; }
}