/*
 * Korea Inside – dark-mode.css
 * Version: 1.0.0
 *
 * Alle Dark-Mode-Overrides greifen über [data-theme="dark"].
 * Farben kommen aus den CSS Custom Properties (werden vom Customizer gesetzt).
 * Diese Datei steuert strukturelle Dark-Mode-Anpassungen die über Farben hinausgehen.
 */

/* ── Sanfte Bilddarstellung im Dark Mode ──────────────────────────────────── */
[data-theme="dark"] img {
    filter: brightness(0.92) contrast(1.02);
}

[data-theme="dark"] .ki-hero__slide-bg,
[data-theme="dark"] .ki-topcat__bg,
[data-theme="dark"] .ki-card__image {
    filter: brightness(0.85) contrast(1.05);
}

/* ── Schatten im Dark Mode verstärken ────────────────────────────────────── */
[data-theme="dark"] {
    --ki-shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
    --ki-shadow-md:   0 4px 16px rgba(0,0,0,0.45);
    --ki-shadow-lg:   0 8px 32px rgba(0,0,0,0.55);
    --ki-shadow-card: 0 2px 8px rgba(0,0,0,0.35);
}

/* ── Dropdown im Dark Mode ────────────────────────────────────────────────── */
[data-theme="dark"] .ki-menu__dropdown {
    background-color: var(--ki-bg-alt);
    border-color:     var(--ki-border);
}

[data-theme="dark"] .ki-menu__dropdown .ki-menu__link {
    color: var(--ki-text);
}

[data-theme="dark"] .ki-menu__dropdown .ki-menu__link:hover {
    background-color: rgba(255,255,255,0.05);
    color:            var(--ki-accent);
}

/* ── Karten im Dark Mode ──────────────────────────────────────────────────── */
[data-theme="dark"] .ki-card {
    border: 1px solid var(--ki-border);
}

/* ── Suchleiste im Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] .ki-search-panel {
    background: var(--ki-bg);
}

/* ── Scrollbar im Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] {
    scrollbar-color: var(--ki-border) var(--ki-bg-alt);
}

[data-theme="dark"] ::-webkit-scrollbar {
    width:  8px;
    height: 8px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--ki-bg-alt);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background-color: var(--ki-border);
    border-radius:    4px;
}

/* ── Übergänge beim Theme-Wechsel ────────────────────────────────────────── */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ── Wetter-Widget im Dark Mode leicht anpassen ─────────────────────────── */
[data-theme="dark"] .ki-weather {
    background: linear-gradient(135deg, #1a2a4a 0%, #0d1321 100%);
}

/* ── Code-Blöcke im Dark Mode ─────────────────────────────────────────────── */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background-color: #1e2535;
    color:            #e2e8f0;
    border-color:     var(--ki-border);
}

/* ── Blockquote im Dark Mode ──────────────────────────────────────────────── */
[data-theme="dark"] blockquote {
    border-color: var(--ki-accent);
    color:        var(--ki-heading);
}

/* ── Formulare im Dark Mode ───────────────────────────────────────────────── */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--ki-bg-alt);
    border-color:     var(--ki-border);
    color:            var(--ki-text);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--ki-text-light);
}