/* ===========================================
 * xFact — Dark Mode Overrides
 * =========================================== */

[data-theme="dark"] {
    --wp--preset--color--surface-alt: rgba(255, 255, 255, 0.1);
    --wp--preset--color--text-secondary: rgba(255, 255, 255, 0.45);
    --xfact-dark-section-secondary: rgba(255, 255, 255, 0.6);
    --xfact-dark-section-muted: rgba(255, 255, 255, 0.45);
}

/* Override WP generated colors in dark mode */
[data-theme="dark"] body {
    background-color: var(--has-surface-background-color);
    color: var(--wp--preset--color--text-primary);

    /* Override WP Block Theme Presets */
    --wp--preset--color--surface: var(--has-surface-background-color);
    --wp--preset--color--surface-alt: var(--has-surface-alt-background-color);
    --wp--preset--color--text-primary: var(--wp--preset--color--text-primary);
    --wp--preset--color--text-secondary: var(--wp--preset--color--text-secondary);
}

[data-theme="dark"] .wp-block-group,
[data-theme="dark"] .wp-block-cover,
[data-theme="dark"] .wp-site-blocks {
    color: var(--wp--preset--color--text-primary);
}



/* Footer dark mode overrides */
[data-theme="dark"] .xfact-footer {
    border-color: rgba(255, 255, 255, 0.1);
    background-color: var(--has-surface-background-color);
}

/* Dark mode toggle button */
.xfact-dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    border-radius: 0.375rem;
    transition:
        color 0.2s,
        background-color 0.2s;
}

.xfact-dark-mode-toggle:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.xfact-dark-mode-toggle svg {
    width: 1.125rem;
    height: 1.125rem;
    fill: currentColor;
}

.xfact-dark-mode-toggle .icon-sun {
    display: none;
}

.xfact-dark-mode-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .xfact-dark-mode-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .xfact-dark-mode-toggle .icon-moon {
    display: none;
}

[data-theme="dark"] .xfact-header,
[data-theme="dark"] .xfact-header--scrolled {
    background: var(--has-surface-background-color) !important;
}