/*
 * Dark Mode Specific Overrides
 * Famoid Blogger Theme
 *
 * Most dark mode styles are handled via CSS custom properties in variables.css
 * This file contains overrides that need specific selectors or can't be tokenized
 */

/* ==========================================================================
   Color Scheme Transition
   ========================================================================== */

html {
    transition: background-color var(--transition-base), color var(--transition-base);
}

html.theme-transitioning,
html.theme-transitioning * {
    transition: background-color var(--transition-base),
                color var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base) !important;
}

/* ==========================================================================
   Images & Media
   ========================================================================== */

/* Slightly reduce image brightness in dark mode for easier viewing */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) img:not([src*=".svg"]) {
        filter: brightness(0.95);
    }
}

html[data-theme="dark"] img:not([src*=".svg"]) {
    filter: brightness(0.95);
}

/* Restore full brightness on hover */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) img:not([src*=".svg"]):hover {
        filter: brightness(1);
    }
}

html[data-theme="dark"] img:not([src*=".svg"]):hover {
    filter: brightness(1);
}

/* ==========================================================================
   Code Blocks
   ========================================================================== */

/* Syntax highlighting adjustments for dark mode */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .wp-block-code,
    html:not([data-theme="light"]) pre {
        background-color: #1e1e1e;
        border: 1px solid var(--color-border);
    }

    html:not([data-theme="light"]) code {
        color: #e6e6e6;
    }
}

html[data-theme="dark"] .wp-block-code,
html[data-theme="dark"] pre {
    background-color: #1e1e1e;
    border: 1px solid var(--color-border);
}

html[data-theme="dark"] code {
    color: #e6e6e6;
}

/* ==========================================================================
   Forms
   ========================================================================== */

/* Autofill styling for dark mode */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) input:-webkit-autofill,
    html:not([data-theme="light"]) input:-webkit-autofill:hover,
    html:not([data-theme="light"]) input:-webkit-autofill:focus,
    html:not([data-theme="light"]) textarea:-webkit-autofill,
    html:not([data-theme="light"]) textarea:-webkit-autofill:hover,
    html:not([data-theme="light"]) textarea:-webkit-autofill:focus,
    html:not([data-theme="light"]) select:-webkit-autofill,
    html:not([data-theme="light"]) select:-webkit-autofill:hover,
    html:not([data-theme="light"]) select:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0 1000px var(--color-bg-secondary) inset !important;
        -webkit-text-fill-color: var(--color-text) !important;
        caret-color: var(--color-text);
    }
}

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] textarea:-webkit-autofill:hover,
html[data-theme="dark"] textarea:-webkit-autofill:focus,
html[data-theme="dark"] select:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill:hover,
html[data-theme="dark"] select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--color-bg-secondary) inset !important;
    -webkit-text-fill-color: var(--color-text) !important;
    caret-color: var(--color-text);
}

/* ==========================================================================
   Scrollbar
   ========================================================================== */

/* Dark mode scrollbar */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        scrollbar-color: var(--color-border) var(--color-bg);
    }

    html:not([data-theme="light"])::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    html:not([data-theme="light"])::-webkit-scrollbar-track {
        background: var(--color-bg);
    }

    html:not([data-theme="light"])::-webkit-scrollbar-thumb {
        background-color: var(--color-border);
        border-radius: 6px;
        border: 3px solid var(--color-bg);
    }

    html:not([data-theme="light"])::-webkit-scrollbar-thumb:hover {
        background-color: var(--color-text-tertiary);
    }
}

html[data-theme="dark"] {
    scrollbar-color: var(--color-border) var(--color-bg);
}

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

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

html[data-theme="dark"]::-webkit-scrollbar-thumb {
    background-color: var(--color-border);
    border-radius: 6px;
    border: 3px solid var(--color-bg);
}

html[data-theme="dark"]::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-text-tertiary);
}

/* ==========================================================================
   Alerts (need specific color overrides)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .alert--success {
        background-color: rgba(16, 185, 129, 0.15);
    }

    html:not([data-theme="light"]) .alert--warning {
        background-color: rgba(245, 158, 11, 0.15);
    }

    html:not([data-theme="light"]) .alert--error {
        background-color: rgba(239, 68, 68, 0.15);
    }
}

html[data-theme="dark"] .alert--success {
    background-color: rgba(16, 185, 129, 0.15);
}

html[data-theme="dark"] .alert--warning {
    background-color: rgba(245, 158, 11, 0.15);
}

html[data-theme="dark"] .alert--error {
    background-color: rgba(239, 68, 68, 0.15);
}

/* ==========================================================================
   Selection
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) ::selection {
        background-color: var(--color-accent);
        color: #ffffff;
    }
}

html[data-theme="dark"] ::selection {
    background-color: var(--color-accent);
    color: #ffffff;
}

/* ==========================================================================
   Logo & Brand (if using dark variant)
   ========================================================================== */

.site-logo--light {
    display: block;
}

.site-logo--dark {
    display: none;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .site-logo--light {
        display: none;
    }

    html:not([data-theme="light"]) .site-logo--dark {
        display: block;
    }
}

html[data-theme="dark"] .site-logo--light {
    display: none;
}

html[data-theme="dark"] .site-logo--dark {
    display: block;
}

/* ==========================================================================
   External Content / Embeds
   ========================================================================== */

/* Invert colors for light-themed embeds that don't support dark mode */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .wp-block-embed--force-dark iframe {
        filter: invert(0.9) hue-rotate(180deg);
    }
}

html[data-theme="dark"] .wp-block-embed--force-dark iframe {
    filter: invert(0.9) hue-rotate(180deg);
}

/* ==========================================================================
   Buttons (dark mode)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .btn--secondary {
        background-color: var(--color-bg-secondary);
        color: var(--color-text) !important;
        border-color: var(--color-border);
    }

    html:not([data-theme="light"]) .btn--secondary:hover,
    html:not([data-theme="light"]) .btn--secondary:focus {
        background-color: var(--color-accent);
        border-color: var(--color-accent);
        color: #ffffff !important;
    }
}

html[data-theme="dark"] .btn--secondary {
    background-color: var(--color-bg-secondary);
    color: var(--color-text) !important;
    border-color: var(--color-border);
}

html[data-theme="dark"] .btn--secondary:hover,
html[data-theme="dark"] .btn--secondary:focus {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff !important;
}

/* ==========================================================================
   Print Styles (always light)
   ========================================================================== */

@media print {
    html,
    html[data-theme="dark"],
    html[data-theme="light"] {
        --color-bg: #ffffff !important;
        --color-bg-secondary: #f8f9fa !important;
        --color-text: #000000 !important;
        --color-text-secondary: #333333 !important;
        --color-accent: #0066cc !important;
        --color-border: #cccccc !important;
    }

    img {
        filter: none !important;
    }

    .theme-toggle,
    .reading-progress {
        display: none !important;
    }
}