/* ===== DARK MODE ===== */

body {
    background: #0f172a;
    color: #e5e7eb;
}

/* Cards / vlakken */
.topbar,
.hero-card,
.boek-card {
    background: #1e293b;
}

/* Titels en tekst: OVERRIDE vaste kleuren uit main.css */
h1, h2, h3 {
    color: #ffffff;
}

p, li, ul, ol, span {
    color: #e5e7eb;
}

/* Links */
a {
    color: #60a5fa;
}

/* Footer tekst (jij gebruikt .site-footer, niet .footer) */
.site-footer,
.footer-center {
    color: #e5e7eb;
}

/* Optioneel: links in footer blijven geel maar iets rustiger */
.footer-links a {
    color: #ffd400;
}

.btn-outline {
    border-color: #60a5fa;
    color: #60a5fa;
}

.btn-outline:hover {
    background: #60a5fa;
    color: #0f172a;
}

.site-title {
    color: #e5e7eb;
}

.site-title:hover,
.site-title:active {
    color: #ffd400;
}

.hero-links a:hover,
.hero-links a:active {
    color: #ffd400;
}

/* ===== HERO LINKS – DARK MODE ===== */

.hero-links a {
    color: #ffd400;               /* Spectrum-geel */
}

/* Hover / klik: donkerder geel */
.hero-links a:hover,
.hero-links a:active {
    color: #e6bf00;
}

/* ===== LOGOUT PAGINA – DARK MODE ===== */

.logout-card {
    background: #1e293b;              /* zelfde als andere cards */
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.logout-card h1 {
    color: #ffffff;
}

.logout-card p {
    color: #e5e7eb;
}

.logout-card strong {
    color: #60a5fa;                   /* subtiele accentkleur */
}

/* Zorg dat secondary knop mooi blijft */
.logout-card .btn-secondary {
    background: #60a5fa;
    color: #0f172a;
}

.logout-card .btn-secondary:hover {
    background: #3b82f6;
}

/* ===== HERO LINKS – underline effect (DARK) ===== */
.hero-links a::after{
    background: #ffd400; /* geel */
}

/* ===== INFO.PHP – DARK ===== */
.info-card{
    background: #1e293b;
}

/* ===== CONTACT.PHP – DARK MODE ===== */

.contact-hero{
    background: #1e293b;
}

.contact-hero p{
    color: rgba(229,231,235,.80);
}

.contact-card{
    background: #1e293b;
    box-shadow: 0 8px 25px rgba(0,0,0,.35);
}

.contact-photo{
    background: rgba(96,165,250,.10);
}

.contact-desc{
    color: rgba(229,231,235,.80);
}

.tvb-form input[type="email"] {
    background: #0f172a;
    color: #e5e7eb;
    border-color: rgba(255,255,255,.15);
}

.tvb-form input[type="email"]::placeholder {
    color: rgba(229,231,235,.6);
}

.tvb-form input[type="email"]:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 4px rgba(96,165,250,.18);
}