/* ============================================================================
   retro.css — "Web 1.0" skin voor MNHost
   ----------------------------------------------------------------------------
   Een cosmetische laag die de site laat lijken op het internet van ~1997-2000
   (Netscape-tijdperk), ZONDER de bestaande functionaliteit te raken. Alles is
   gescoped onder `body.retro90`, dus zonder die class blijft de moderne site
   exact zoals hij was. Puur CSS + gradients/data-URI's -> geen externe assets,
   blijft binnen de nonce-based CSP (img-src 'self' data:, style-src 'self').

   Aan/uit gebeurt via de #retroToggle-knop (zet cookie `retro90=1` + body-class).
   ============================================================================ */

/* ── Retro-only chrome: standaard verborgen, alleen zichtbaar in retro-modus ── */
.retro-only { display: none !important; }
body.retro90 .retro-only { display: block !important; }
body.retro90 .retro-only.retro-inline { display: inline-block !important; }

/* ══════════════════════════════════════════════════════════════════════════
   1. GLOBALE RESET — moderne "chrome" plat slaan (geen rondingen/schaduwen)
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 * {
  border-radius: 0 !important;
  box-shadow: none !important;
  text-shadow: none;
  transition: none !important;
  letter-spacing: normal !important;
  -webkit-font-smoothing: none;
  scroll-behavior: auto !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. BODY — sterrenhemel-tegelachtergrond + Times New Roman (de default van toen)
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 {
  background-color: #000044 !important;
  background-image:
    radial-gradient(1px 1px at 20px 30px,  #ffffff, transparent),
    radial-gradient(1px 1px at 80px 70px,  #ffffff, transparent),
    radial-gradient(1px 1px at 130px 40px, #cfd8ff, transparent),
    radial-gradient(2px 2px at 170px 120px,#ffffff, transparent),
    radial-gradient(1px 1px at 50px 160px, #ffffff, transparent),
    radial-gradient(1px 1px at 110px 190px,#a8b4ff, transparent),
    radial-gradient(2px 2px at 30px 110px, #ffffff, transparent);
  background-size: 200px 200px !important;
  color: #000000 !important;
  font-family: "Times New Roman", Times, Georgia, serif !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
}

/* Alles krijgt weer een serif-basis (moderne CSS zet overal Inter/sans) */
body.retro90,
body.retro90 p,
body.retro90 li,
body.retro90 span,
body.retro90 div,
body.retro90 td,
body.retro90 h1, body.retro90 h2, body.retro90 h3,
body.retro90 h4, body.retro90 h5, body.retro90 h6 {
  font-family: "Times New Roman", Times, Georgia, serif !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. TYPOGRAFIE — felle kleuren, onderstreepte links, regenboog-hr
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 h1 { color:#000080 !important; font-size:2.1em !important; font-weight:bold !important; margin:.3em 0 !important; }
body.retro90 h2 { color:#800000 !important; font-size:1.6em !important; font-weight:bold !important; }
body.retro90 h3 { color:#006600 !important; font-size:1.3em !important; font-weight:bold !important; }
body.retro90 h4, body.retro90 h5, body.retro90 h6 { color:#4b0082 !important; }

body.retro90 a { color:#0000ee !important; text-decoration:underline !important; }
body.retro90 a:visited { color:#551a8b !important; }
body.retro90 a:hover { color:#ff0000 !important; background:#ffff00 !important; }
body.retro90 a:active { color:#ff0000 !important; }

/* Klassieke regenboog-scheidingslijn */
body.retro90 hr {
  height:5px !important; border:0 !important;
  background:linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#33cc33,#0099ff,#6633ff,#ff33cc) !important;
}

body.retro90 blockquote {
  border-left:4px solid #808080 !important; background:#eeeecc !important;
  padding:.4em .8em !important; font-style:italic !important; color:#333 !important;
}

body.retro90 code, body.retro90 pre, body.retro90 kbd {
  font-family:"Courier New",Courier,monospace !important;
  background:#e8e8e8 !important; color:#000 !important;
  border:1px solid #808080 !important;
}
body.retro90 pre { padding:.6em !important; }

/* Pygments code-blokken: de moderne site gebruikt een DONKER kleurenschema
   (.highlight, bg ~#1e1e2e) met token-kleuren voor een donkere bg. In retro
   maken we er een klassiek licht "Notepad"-codeblok van: zwarte monospace op
   lichtgrijs. Anders: lichte tokens op onze lichte pre = onleesbaar. */
body.retro90 .highlight,
body.retro90 .highlight pre,
body.retro90 .codehilite,
body.retro90 .codehilite pre {
  background:#f4f4f4 !important; border:2px inset #c0c0c0 !important; color:#111 !important;
}
body.retro90 .highlight *,
body.retro90 .codehilite * {
  color:#111111 !important; background:transparent !important; text-shadow:none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. IP-BAR (bovenbalk) — grijze systeembalk
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 .ip-bar {
  background:#c0c0c0 !important; color:#000 !important;
  border-bottom:2px solid #808080 !important;
}
body.retro90 .ip-bar-inner { color:#000 !important; }
body.retro90 .ip-bar code { background:#000 !important; color:#00ff00 !important; padding:0 4px !important; font-family:"Courier New",monospace !important; }

/* De toggle-knop zelf (staat in de ip-bar) */
body.retro90 #retroToggle {
  background:#c0c0c0 !important; color:#000080 !important; font-weight:bold !important;
  border:2px outset #ffffff !important; font-family:"Times New Roman",serif !important;
}
body.retro90 #retroToggle:active { border-style:inset !important; }
/* In moderne modus: subtiel, onopvallend knopje */
#retroToggle {
  cursor:pointer; font:inherit; background:transparent; border:1px solid currentColor;
  opacity:.7; border-radius:4px; padding:1px 7px; margin-left:auto; color:inherit;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
}
#retroToggle:hover { opacity:1; }

/* ══════════════════════════════════════════════════════════════════════════
   5. HEADER + NAVIGATIE — beige tabel-look met beveled knoppen
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 .site-header {
  background:#c0c0c0 !important;
  border-bottom:3px ridge #dfdfdf !important;
}
body.retro90 .header-inner { gap:.4rem !important; }

body.retro90 .site-nav { gap:4px !important; }
body.retro90 .nav-link {
  background:#c0c0c0 !important; color:#000080 !important;
  border:2px outset #ffffff !important; padding:2px 8px !important;
  font-weight:bold !important; text-decoration:none !important; font-size:14px !important;
}
body.retro90 .nav-link:hover { background:#000080 !important; color:#ffff00 !important; border-style:outset !important; }
body.retro90 .nav-link.active { border-style:inset !important; background:#a8a8a8 !important; color:#000 !important; }
body.retro90 .nav-link-baby { color:#cc0066 !important; }
body.retro90 .nav-link-admin { color:#800000 !important; }

/* /retro games-pagina: de console-pills (<a> met gekleurde bg + witte tekst)
   krijgen dezelfde Win95-knoplook — anders maakt de generieke a{color:blauw}-
   regel ze blauw-op-donker (onleesbaar). Cohesief + gegarandeerd contrast. */
body.retro90 .retro-nav-pill,
body.retro90 .retro-nav-pill:visited {
  background:#c0c0c0 !important; color:#000080 !important;
  border:2px outset #ffffff !important; font-weight:bold !important; text-decoration:none !important;
}
body.retro90 .retro-nav-pill:hover { background:#000080 !important; color:#ffff00 !important; border-style:outset !important; }
body.retro90 .retro-nav-pill.active { background:#a8a8a8 !important; color:#000 !important; border-style:inset !important; }

/* Zoek + upload knoppen in de header */
body.retro90 .header-search input,
body.retro90 .header-search button,
body.retro90 .header-upload-btn {
  background:#ffffff !important; color:#000 !important;
  border:2px inset #c0c0c0 !important; font-family:"Times New Roman",serif !important;
}
body.retro90 .header-upload-btn { background:#c0c0c0 !important; border:2px outset #ffffff !important; font-weight:bold !important; }
body.retro90 .header-upload-btn:active { border-style:inset !important; }

/* De reggae one-drop dotjes mogen blijven, passen prima in de retro-vibe */

/* Mobiel hamburger-knopje */
body.retro90 .nav-toggle span { background:#000 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   6. PAGINA-LAYOUT — witte "documenten" met beveled randen op de sterrenhemel
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 .page-wrapper { gap:14px !important; padding:14px !important; }

body.retro90 .main-content {
  background:#ffffff !important;
  border:3px outset #e0e0e0 !important;
  padding:16px !important; color:#000 !important;
}
body.retro90 .sidebar { background:transparent !important; }

body.retro90 .sidebar-widget {
  background:#ffffcc !important;
  border:2px outset #e8e8b0 !important;
  padding:10px !important; margin-bottom:14px !important;
}
body.retro90 .widget-title {
  color:#800000 !important; font-weight:bold !important;
  border-bottom:2px groove #c0c0c0 !important; text-transform:none !important;
  font-size:1.05em !important; letter-spacing:normal !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. HOMEPAGE-CONTENT (kbe-*)
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 .home-logo-banner { background:transparent !important; text-align:center !important; }
body.retro90 .home-logo-tagline { color:#000080 !important; font-style:italic !important; font-weight:bold !important; }

body.retro90 .kbe-search-wrap form { background:#c0c0c0 !important; border:2px inset #fff !important; padding:6px !important; }
body.retro90 .kbe-search-wrap input { background:#fff !important; border:2px inset #c0c0c0 !important; color:#000 !important; }

body.retro90 .kbe-category {
  background:#f4f4ff !important; border:2px groove #ccccff !important;
  padding:10px !important; margin-bottom:12px !important;
}
body.retro90 .kbe-category h2 a { color:#0000ee !important; }
body.retro90 .kbe-count {
  background:#000080 !important; color:#ffff00 !important;
  padding:0 6px !important; font-size:.75em !important; font-weight:bold !important;
  border:1px solid #000 !important; float:right !important;
}
body.retro90 .kbe-article-list li { list-style:none !important; }
body.retro90 .kbe-article-list li::before { content:"» "; color:#ff6600; font-weight:bold; }
body.retro90 .kbe-widget-list li { list-style:none !important; }
body.retro90 .kbe-widget-list li::before { content:"• "; color:#ff6600; }

body.retro90 .cat-count { background:#c0c0c0 !important; color:#000 !important; border:1px outset #fff !important; padding:0 5px !important; }

/* Tag cloud -> ouderwetse "keywords" */
body.retro90 .tag {
  background:#ffff99 !important; color:#0000cc !important;
  border:1px solid #999900 !important; padding:0 5px !important;
  text-decoration:underline !important; display:inline-block !important; margin:2px !important;
}
body.retro90 .weer-sidebar-link, body.retro90 .baby-sidebar-link { color:#0000ee !important; text-decoration:underline !important; }

/* ══════════════════════════════════════════════════════════════════════════
   8. FORMULIEREN / KNOPPEN / TABELLEN (generiek, dekt alle sub-pagina's)
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 button,
body.retro90 input[type=submit],
body.retro90 input[type=button],
body.retro90 .btn {
  background:#c0c0c0 !important; color:#000 !important;
  border:2px outset #ffffff !important; font-family:"Times New Roman",serif !important;
  padding:2px 10px !important; cursor:pointer !important;
}
body.retro90 button:active,
body.retro90 input[type=submit]:active,
body.retro90 .btn:active { border-style:inset !important; }

body.retro90 input[type=text],
body.retro90 input[type=search],
body.retro90 input[type=password],
body.retro90 input[type=email],
body.retro90 input[type=number],
body.retro90 textarea,
body.retro90 select {
  background:#ffffff !important; color:#000 !important;
  border:2px inset #c0c0c0 !important; font-family:"Times New Roman",serif !important;
}

body.retro90 table { border-collapse:collapse !important; }
body.retro90 th, body.retro90 td { border:1px solid #808080 !important; padding:3px 6px !important; }
body.retro90 th { background:#000080 !important; color:#fff !important; }

/* ══════════════════════════════════════════════════════════════════════════
   9. FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
body.retro90 .site-footer {
  background:#c0c0c0 !important; color:#000 !important;
  border-top:3px ridge #dfdfdf !important;
}
body.retro90 .footer-copy, body.retro90 .footer-stats { color:#000 !important; }
body.retro90 .footer-nav a { color:#0000ee !important; }
body.retro90 .logo-mark { background:#000080 !important; color:#ffff00 !important; }

/* ══════════════════════════════════════════════════════════════════════════
   10. RETRO CHROME — marquee, under construction, teller, badges, webring
   ══════════════════════════════════════════════════════════════════════════ */

/* --- Scrollende marquee-banner ------------------------------------------- */
body.retro90 .retro-marquee {
  background:#000000; color:#00ff00; overflow:hidden; white-space:nowrap;
  border-top:2px solid #00ff00; border-bottom:2px solid #00ff00;
  font-family:"Courier New",monospace; font-weight:bold; padding:4px 0;
}
body.retro90 .retro-marquee span {
  display:inline-block; padding-left:100%;
  animation:retro-scroll 22s linear infinite;
}
@keyframes retro-scroll { 0%{ transform:translateX(0); } 100%{ transform:translateX(-100%); } }

/* --- "Under construction" barber-pole ------------------------------------ */
body.retro90 .retro-construction {
  text-align:center; font-weight:bold; color:#000; padding:5px;
  border:3px ridge #ffcc00; font-family:"Comic Sans MS","Times New Roman",cursive;
  background-image:repeating-linear-gradient(45deg,#ffcc00 0 18px,#000000 18px 36px);
  background-size:51px 51px; animation:retro-barber 1s linear infinite;
}
body.retro90 .retro-construction span {
  background:#ffffcc; padding:2px 12px; border:1px solid #000; display:inline-block;
}
@keyframes retro-barber { 0%{ background-position:0 0; } 100%{ background-position:51px 0; } }

/* --- Bezoekersteller (echte data) als LCD-odometer ----------------------- */
body.retro90 .retro-counter {
  text-align:center; margin:10px auto; color:#000;
  font-family:"Courier New",monospace; font-weight:bold;
}
body.retro90 .retro-odo {
  display:inline-block; padding:3px; background:#000; border:2px inset #888; margin-left:6px;
}
body.retro90 .retro-odo .odo-d {
  display:inline-block; width:16px; text-align:center;
  background:#101810; color:#33ff33; font-family:"Courier New",monospace;
  font-size:1.2em; border:1px solid #003300; margin:0 1px;
}

/* --- 88x31 badges (Netscape Now! etc.) ----------------------------------- */
body.retro90 .retro-badges { text-align:center; margin:10px 0; line-height:2.4; }
body.retro90 .retro-badge {
  display:inline-block; width:88px; height:31px; margin:3px; vertical-align:middle;
  font-family:Arial,Helvetica,sans-serif; font-size:9px; font-weight:bold; line-height:1.05;
  border:1px solid #000; box-sizing:border-box; padding:2px 3px; overflow:hidden;
  text-align:center; color:#fff; white-space:normal;
}
body.retro90 .badge-netscape { background:linear-gradient(#3a3a8a,#000030); color:#fff; }
body.retro90 .badge-ie       { background:linear-gradient(#dfdfff,#8ea8d8); color:#003; }
body.retro90 .badge-notepad  { background:#008080; color:#fff; }
body.retro90 .badge-html     { background:#ff9900; color:#000; }
body.retro90 .badge-valid    { background:#ffffff; color:#c00; }
body.retro90 .badge-800      { background:#000; color:#0f0; }
body.retro90 .retro-badge b  { color:#ffcc00; }

/* --- Webring ------------------------------------------------------------- */
body.retro90 .retro-webring {
  text-align:center; margin:10px 0; padding:6px; background:#000080; color:#fff;
  border:2px ridge #6666cc; font-weight:bold;
}
body.retro90 .retro-webring a { color:#ffff00 !important; }

/* --- <blink>-emulatie + regenboogtekst ----------------------------------- */
body.retro90 .retro-blink { animation:retro-blink 1s step-start infinite; }
@keyframes retro-blink { 50%{ visibility:hidden; } }
body.retro90 .retro-rainbow {
  background:linear-gradient(90deg,#ff0000,#ff9900,#ffff00,#33cc33,#0099ff,#6633ff,#ff33cc);
  -webkit-background-clip:text; background-clip:text; color:transparent !important; font-weight:bold;
}

/* ══════════════════════════════════════════════════════════════════════════
   11. TOEGANKELIJKHEID — respecteer prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.retro90 .retro-marquee span { animation:none; padding-left:0; }
  body.retro90 .retro-construction { animation:none; }
  body.retro90 .retro-blink { animation:none; }
}