/**
 * Dark theme styles for Scrolls Community Hub theme
 * Contains CSS custom properties and styles for dark mode
 *
 * IMPORTANT: Dark theme functionality is available ONLY on the frontend.
 * WordPress Site Editor always displays in light mode for better readability during editing.
 * To preview dark theme changes, view the site on the frontend and use the theme toggle button.
 */

/* CSS Custom Properties for Dark Theme */
:root {
    /* Light theme colors (default) */
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-text-primary: #000000;
    --theme-text-secondary: #1a0f00;
    --theme-text-muted: rgba(0, 0, 0, 0.8);
    --theme-border-color: #e0e0e0;
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-card-bg: #ffffff;
    --theme-sidebar-bg: #f8f9fa;
    --theme-input-bg: #ffffff;
    --theme-input-border: #cccccc;

    /* Header gradient for light theme */
    --theme-header-gradient: linear-gradient(135deg, #000000 0%, #4d260f 100%);

    /* Category count background */
    --theme-category-count-bg: rgba(230, 81, 0, 0.1);

    /* Navigation text colors */
    --theme-nav-text: #000000;

    /* Footer background colors */
    --theme-footer-bg: #4a2c17; /* Burnt Sienna for light theme */

    /* Accent color override for light theme */
    --wp--preset--color--accent: #feecc6;
}

/* Dark theme colors - activated by system preference */
@media (prefers-color-scheme: dark) {
    :root {
        --theme-bg-primary: #1a1a1a;
        --theme-bg-secondary: #2d2d2d;
        --theme-text-primary: #ffffff;
        --theme-text-secondary: #e0e0e0;
        --theme-text-muted: rgba(255, 255, 255, 0.8);
        --theme-border-color: #404040;
        --theme-shadow: rgba(0, 0, 0, 0.3);
        --theme-card-bg: #2d2d2d;
        --theme-sidebar-bg: #262626;
        --theme-input-bg: #333333;
        --theme-input-border: #555555;

        /* Header gradient for dark theme */
        --theme-header-gradient: linear-gradient(135deg, #2d2d2d 0%, #4d260f 100%);

        /* Category count background for dark theme */
        --theme-category-count-bg: rgba(230, 81, 0, 0.2);

        /* Navigation text colors for dark theme */
        --theme-nav-text: #ffffff;

        /* Footer background colors for dark theme */
        --theme-footer-bg: #2d1a0a; /* Darker brown for dark theme */

        /* Accent color override for dark theme - darker, more muted */
        --wp--preset--color--accent: #3d3426;
    }
}

/* Manual dark theme override - activated by JavaScript */
[data-theme="dark"] {
    --theme-bg-primary: #1a1a1a;
    --theme-bg-secondary: #2d2d2d;
    --theme-text-primary: #ffffff;
    --theme-text-secondary: #e0e0e0;
    --theme-text-muted: rgba(255, 255, 255, 0.8);
    --theme-border-color: #404040;
    --theme-shadow: rgba(0, 0, 0, 0.3);
    --theme-card-bg: #2d2d2d;
    --theme-sidebar-bg: #262626;
    --theme-input-bg: #333333;
    --theme-input-border: #555555;
    --theme-header-gradient: linear-gradient(135deg, #2d2d2d 0%, #4d260f 100%);
    --theme-category-count-bg: rgba(230, 81, 0, 0.2);
    --theme-nav-text: #ffffff;
    --theme-footer-bg: #2d1a0a; /* Darker brown for dark theme */
    --wp--preset--color--accent: #3d3426;
}

/* Manual light theme override - activated by JavaScript */
[data-theme="light"] {
    --theme-bg-primary: #ffffff;
    --theme-bg-secondary: #f8f9fa;
    --theme-text-primary: #000000;
    --theme-text-secondary: #1a0f00;
    --theme-text-muted: rgba(0, 0, 0, 0.8);
    --theme-border-color: #e0e0e0;
    --theme-shadow: rgba(0, 0, 0, 0.1);
    --theme-card-bg: #ffffff;
    --theme-sidebar-bg: #f8f9fa;
    --theme-input-bg: #ffffff;
    --theme-input-border: #cccccc;
    --theme-header-gradient: linear-gradient(135deg, #000000 0%, #4d260f 100%);
    --theme-category-count-bg: rgba(230, 81, 0, 0.1);
    --theme-nav-text: #000000;
    --theme-footer-bg: #4a2c17; /* Burnt Sienna for light theme */
    --wp--preset--color--accent: #feecc6;
}

/*
 * WordPress Site Editor Light Mode Override
 *
 * The editor will automatically use light mode for better editing experience.
 * This is handled by a separate editor.css file that forces light color scheme.
 * See: assets/css/editor.css
 */

/*
 * Apply theme colors to body and main elements - but NOT in WordPress admin/editor
 *
 * The :not(.wp-admin) selector ensures that dark theme styles are applied ONLY on the frontend.
 * This keeps the WordPress Site Editor in light mode for better usability during content editing.
 * Users can preview dark theme changes by viewing the site on the frontend.
 */
body:not(.wp-admin) {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Header gradient override */
.gradient-header::before {
    background: var(--theme-header-gradient) !important;
}

/* Card backgrounds */
.is-style-card,
.wp-block-group.is-style-card {
    background-color: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-border-color) !important;
    box-shadow: 0 2px 4px var(--theme-shadow) !important;
}

/* Override WordPress default cyan-bluish-gray border color for dark theme */
body:not(.wp-admin) .has-cyan-bluish-gray-border-color {
    border-color: var(--theme-border-color) !important;
}

/* Posts compact now uses is-style-card, so it inherits card styling automatically */

/* Sidebar styling removed - let individual blocks keep their original styling */

/* Text color overrides for dark theme - but NOT in WordPress admin */
body:not(.wp-admin) h1,
body:not(.wp-admin) h2,
body:not(.wp-admin) h3,
body:not(.wp-admin) h4,
body:not(.wp-admin) h5,
body:not(.wp-admin) h6,
body:not(.wp-admin) .wp-block-heading {
    color: var(--theme-text-primary) !important;
}

/* Dark to Brown gradient override for dark theme */
@media (prefers-color-scheme: dark) {
    body:not(.wp-admin) .has-dark-to-brown-gradient-background {
        background: var(--wp--preset--gradient--dark-to-brown-dark) !important;
    }
}

[data-theme="dark"] .has-dark-to-brown-gradient-background {
    background: var(--wp--preset--gradient--dark-to-brown-dark) !important;
}

/* Exception: Headings with dark backgrounds should always have white text in both themes */
body:not(.wp-admin) .has-header-gradient-gradient-background,
body:not(.wp-admin) .has-header-gradient-gradient-background h1,
body:not(.wp-admin) .has-header-gradient-gradient-background h2,
body:not(.wp-admin) .has-header-gradient-gradient-background h3,
body:not(.wp-admin) .has-header-gradient-gradient-background h4,
body:not(.wp-admin) .has-header-gradient-gradient-background h5,
body:not(.wp-admin) .has-header-gradient-gradient-background h6,
body:not(.wp-admin) .has-header-gradient-gradient-background .wp-block-heading,
body:not(.wp-admin) .has-header-gradient-gradient-background span,
body:not(.wp-admin) .has-header-gradient-gradient-background i {
    color: #ffffff !important; /* Always white text on dark gradient background */
}

/* Dark to Brown gradient text styling - ensure white text on both variants */
body:not(.wp-admin) .has-dark-to-brown-gradient-background,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h1,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h2,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h3,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h4,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h5,
body:not(.wp-admin) .has-dark-to-brown-gradient-background h6,
body:not(.wp-admin) .has-dark-to-brown-gradient-background .wp-block-heading,
body:not(.wp-admin) .has-dark-to-brown-gradient-background span,
body:not(.wp-admin) .has-dark-to-brown-gradient-background i {
    color: #ffffff !important; /* Always white text on dark gradient background */
}

/* Query title with dark background - ensure white text in both themes */
body:not(.wp-admin) .wp-block-query-title.has-header-gradient-gradient-background,
body:not(.wp-admin) .wp-block-query-title.has-header-gradient-gradient-background span,
body:not(.wp-admin) .wp-block-query-title.has-header-gradient-gradient-background i {
    color: #ffffff !important; /* Always white text for query titles with dark background */
}

body:not(.wp-admin) p,
body:not(.wp-admin) span,
body:not(.wp-admin) div {
    color: var(--theme-text-primary) !important;
}

/* Navigation text colors - theme-aware for header navigation */
body:not(.wp-admin) .wp-block-navigation a,
body:not(.wp-admin) .wp-block-navigation-item a {
    color: var(--theme-nav-text) !important;
}

/* Header navigation specific styling */
body:not(.wp-admin) .header-navigation .wp-block-navigation a,
body:not(.wp-admin) .header-navigation .wp-block-navigation-item a {
    color: var(--theme-nav-text) !important;
}

/* Post meta styling for dark theme - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-post-author,
body:not(.wp-admin) .wp-block-post-date,
body:not(.wp-admin) .wp-block-post-author__name,
body:not(.wp-admin) .wp-block-post-date time {
    color: var(--theme-text-muted) !important;
}

/* Category count styling */
.category-post-count {
    background-color: var(--theme-category-count-bg) !important;
}

/* Form elements - but NOT in WordPress admin */
body:not(.wp-admin) input,
body:not(.wp-admin) textarea,
body:not(.wp-admin) select {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Search form - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-search__input {
    background-color: var(--theme-input-bg) !important;
    border-color: var(--theme-input-border) !important;
    color: var(--theme-text-primary) !important;
}

/* Links maintain primary color but adjust hover - but NOT in WordPress admin */
body:not(.wp-admin) a {
    color: var(--wp--preset--color--primary) !important;
}

body:not(.wp-admin) a:hover {
    color: var(--theme-text-secondary) !important;
}

/* Old button hover effects removed - now handled by unified button styles above */

/* Dark theme toggle button */
.theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px var(--theme-shadow);
    transition: all 0.3s ease;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 16px var(--theme-shadow);
}

.theme-toggle:focus {
    outline: 2px solid var(--wp--preset--color--secondary);
    outline-offset: 2px;
}

/* Icon transitions */
.theme-toggle i {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.theme-toggle .fa-sun {
    opacity: 1;
}

.theme-toggle .fa-moon {
    opacity: 0;
    position: absolute;
}

[data-theme="dark"] .theme-toggle .fa-sun {
    opacity: 0;
}

[data-theme="dark"] .theme-toggle .fa-moon {
    opacity: 1;
}

/* WordPress admin bar styling - ensure light text on dark background */
#wpadminbar,
#wpadminbar * {
    color: #ffffff !important;
}

#wpadminbar .ab-item,
#wpadminbar .ab-submenu .ab-item,
#wpadminbar .quicklinks .menupop ul li a,
#wpadminbar .quicklinks .menupop ul li .ab-item {
    color: #ffffff !important;
}

#wpadminbar .ab-item:hover,
#wpadminbar .ab-submenu .ab-item:hover {
    color: #00a0d2 !important;
}

/* Dark theme for tables - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-table table {
    background-color: var(--theme-card-bg) !important;
    color: var(--theme-text-primary) !important;
}

body:not(.wp-admin) .wp-block-table th,
body:not(.wp-admin) .wp-block-table td {
    border-color: var(--theme-border-color) !important;
}

/* Dark theme for code blocks - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-code,
body:not(.wp-admin) .wp-block-preformatted {
    background-color: var(--theme-bg-secondary) !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border-color) !important;
}

/* Dark theme for quotes - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-quote {
    border-left-color: var(--wp--preset--color--primary) !important;
    background-color: var(--theme-bg-secondary) !important;
}

/* Dark theme for separators - but NOT in WordPress admin */
body:not(.wp-admin) .wp-block-separator {
    border-color: var(--theme-border-color) !important;
}

/* Hero section text colors - ensure proper contrast on background images */
body:not(.wp-admin) .wp-block-cover h1,
body:not(.wp-admin) .wp-block-cover h2,
body:not(.wp-admin) .wp-block-cover h3,
body:not(.wp-admin) .wp-block-cover h4,
body:not(.wp-admin) .wp-block-cover h5,
body:not(.wp-admin) .wp-block-cover h6,
body:not(.wp-admin) .wp-block-cover .wp-block-heading {
    color: #ffffff !important; /* Always white on light theme for contrast */
}

body:not(.wp-admin) .wp-block-cover p,
body:not(.wp-admin) .wp-block-cover span,
body:not(.wp-admin) .wp-block-cover div:not(.wp-block-cover__image-background):not(.wp-block-cover__background) {
    color: #ffffff !important; /* Always white on light theme for contrast */
}

/* Dark theme specific hero section text colors */
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h1,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h2,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h3,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h4,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h5,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover h6,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover .wp-block-heading {
    color: var(--theme-text-primary) !important; /* Use theme text color in dark mode */
}

[data-theme="dark"] body:not(.wp-admin) .wp-block-cover p,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover span,
[data-theme="dark"] body:not(.wp-admin) .wp-block-cover div:not(.wp-block-cover__image-background):not(.wp-block-cover__background) {
    color: var(--theme-text-primary) !important; /* Use theme text color in dark mode */
}

/* Button styling - ensure consistent orange background and white text in both themes */
body:not(.wp-admin) .wp-block-button .wp-block-button__link,
body:not(.wp-admin) .wp-block-button .wp-element-button,
body:not(.wp-admin) .wp-block-button__link,
body:not(.wp-admin) .wp-element-button {
    background-color: var(--wp--preset--color--primary) !important; /* Orange background */
    color: var(--wp--preset--color--white) !important; /* White text */
    border: 2px solid transparent !important;
}

/* Button hover effects - consistent for both themes */
body:not(.wp-admin) .wp-block-button .wp-block-button__link:hover,
body:not(.wp-admin) .wp-block-button .wp-element-button:hover,
body:not(.wp-admin) .wp-block-button__link:hover,
body:not(.wp-admin) .wp-element-button:hover {
    background-color: var(--theme-bg-primary, #ffffff) !important;
    color: var(--wp--preset--color--primary) !important; /* Orange text on hover */
    border-color: var(--wp--preset--color--primary) !important; /* Orange border on hover */
}

/* Footer styling with custom background color and theme support */
body:not(.wp-admin) .has-dark-background-color {
    background-color: var(--theme-footer-bg) !important;
    transition: background-color 0.3s ease;
}

/* Footer text styling - ensure white text on dark background in both themes */
body:not(.wp-admin) .has-dark-background-color,
body:not(.wp-admin) .has-dark-background-color h1,
body:not(.wp-admin) .has-dark-background-color h2,
body:not(.wp-admin) .has-dark-background-color h3,
body:not(.wp-admin) .has-dark-background-color h4,
body:not(.wp-admin) .has-dark-background-color h5,
body:not(.wp-admin) .has-dark-background-color h6,
body:not(.wp-admin) .has-dark-background-color p,
body:not(.wp-admin) .has-dark-background-color span,
body:not(.wp-admin) .has-dark-background-color div,
body:not(.wp-admin) .has-dark-background-color .wp-block-heading,
body:not(.wp-admin) .has-dark-background-color .wp-block-site-title,
body:not(.wp-admin) .has-dark-background-color .wp-block-navigation a {
    color: var(--wp--preset--color--white) !important; /* Always white text on dark background */
}

/* Footer links styling */
body:not(.wp-admin) .has-dark-background-color a,
body:not(.wp-admin) .has-dark-background-color .wp-block-navigation-item a {
    color: var(--wp--preset--color--white) !important;
}

body:not(.wp-admin) .has-dark-background-color a:hover,
body:not(.wp-admin) .has-dark-background-color .wp-block-navigation-item a:hover {
    color: var(--wp--preset--color--secondary) !important; /* Light yellow on hover */
}

/*
 * WordPress Editor Dark Theme Support - DISABLED for Site Editor
 *
 * These styles are intentionally limited to frontend only (body:not(.wp-admin)).
 * The WordPress Site Editor (.wp-admin) will always display in light mode for:
 * - Better readability during content editing
 * - Consistent editing experience
 * - Avoiding confusion with WordPress admin interface
 *
 * Dark theme preview is available on the frontend using the theme toggle button.
 */
body:not(.wp-admin) .editor-styles-wrapper {
    background-color: var(--theme-bg-primary) !important;
    color: var(--theme-text-primary) !important;
}

body:not(.wp-admin) .editor-styles-wrapper h1,
body:not(.wp-admin) .editor-styles-wrapper h2,
body:not(.wp-admin) .editor-styles-wrapper h3,
body:not(.wp-admin) .editor-styles-wrapper h4,
body:not(.wp-admin) .editor-styles-wrapper h5,
body:not(.wp-admin) .editor-styles-wrapper h6,
body:not(.wp-admin) .editor-styles-wrapper .wp-block-heading {
    color: var(--theme-text-primary) !important;
}

body:not(.wp-admin) .editor-styles-wrapper p,
body:not(.wp-admin) .editor-styles-wrapper span,
body:not(.wp-admin) .editor-styles-wrapper div {
    color: var(--theme-text-primary) !important;
}

body:not(.wp-admin) .editor-styles-wrapper .is-style-card {
    background-color: var(--theme-card-bg) !important;
    border: 1px solid var(--theme-border-color) !important;
}

body:not(.wp-admin) .editor-styles-wrapper .wp-block-post-author,
body:not(.wp-admin) .editor-styles-wrapper .wp-block-post-date {
    color: var(--theme-text-muted) !important;
}

/* Dark theme for mobile responsive - but NOT in WordPress admin */
@media (max-width: 782px) {
    /* Ensure mobile menu works with dark theme */
    body:not(.wp-admin) .wp-block-navigation__responsive-container {
        background-color: var(--theme-bg-primary) !important;
    }

    body:not(.wp-admin) .wp-block-navigation__responsive-container .wp-block-navigation-item a {
        color: var(--theme-text-primary) !important;
    }

    /* Mobile navigation button should be visible in both themes */
    body:not(.wp-admin) .wp-block-navigation__responsive-container-open {
        color: var(--theme-nav-text) !important;
    }

    /* Mobile navigation close button should be visible in both themes */
    body:not(.wp-admin) .wp-block-navigation__responsive-container-close {
        color: var(--theme-text-primary) !important;
    }

    /* Mobile navigation close button SVG icon */
    body:not(.wp-admin) .wp-block-navigation__responsive-container-close svg {
        fill: var(--theme-text-primary) !important;
    }
}