/* Dark Mode Styles */
:root {
    /* Light mode variables (defaults) already defined in style.css */
}

/* Dark mode color scheme */
:root.dark-mode {
    --primary: #FFC107;           /* Brighter yellow for dark mode */
    --light-bg: #2B2513;          /* Dark background */
    --darker-bg: #5E4B0E;         /* Slightly lighter dark background */
    --svg-color: #FF9040;         /* Brighter orange for dark mode */
    --green: #4AFF8C;             /* Brighter green for dark mode */
    --gray-bg: #333333;           /* Darker gray */
    --gray-text: #BBBBBB;         /* Lighter gray text for readability */
    --black: #FFFFFF;             /* Inverted - white text */
    --white: #121212;             /* Inverted - dark background */
    --site-bg: #1A1A1A;           /* Dark site background */
}

/* Dark mode editor styles */
.editor-styles-wrapper.dark-mode {
    --primary: #FFC107;
    --light-bg: #2B2513;
    --darker-bg: #5E4B0E;
    --svg-color: #FF9040;
    --green: #4AFF8C;
    --gray-bg: #333333;
    --gray-text: #BBBBBB;
    --black: #FFFFFF;
    --white: #121212;
    --site-bg: #1A1A1A;
}

/* Theme toggle styling */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px; /* Reduced padding */
    margin-right: 5px; /* Reduced margin */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s;
    flex-shrink: 0; /* Don't allow shrinking */
}

#theme-toggle:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

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

/* Fix for theme toggle icons */
.theme-icon {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: var(--black);
    stroke-width: 2px; /* Increased stroke width for the moon icon */
    transition: transform 0.3s ease;
}

/* Fix sun icon color in dark mode */
.dark-mode .theme-icon {
    stroke: var(--black); /* This will be white in dark mode since --black is set to #FFFFFF */
}

/* Make sure the sun icon's circle is filled properly */
#sun-icon circle, #sun-icon path {
    fill: var(--black);
    stroke: var(--black);
}

/* Show/hide appropriate icon based on theme */
#sun-icon {
    display: none;
}

#moon-icon {
    display: block;
}

.dark-mode #sun-icon {
    display: block;
}

.dark-mode #moon-icon {
    display: none;
}

/* Site title container with theme toggle */
.site-title-container {
    display: flex;
    align-items: center;
}

/* Dark mode text and background overrides */
.dark-mode body,
.dark-mode .wp-site-blocks {
    background-color: var(--site-bg);
    color: var(--black);
}

.dark-mode a {
    color: var(--primary);
}

/* Make sure the site title has proper spacing */
.site-title {
    margin: 0;
}

/* Mobile adjustments for theme toggle */
@media (max-width: 768px) {
    #theme-toggle {
        margin-right: 3px;
    }
    
    .theme-icon {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    #theme-toggle {
        margin-right: 2px;
    }
}