/* custom-dark-mode.css */

/* Ensure dark mode styles are applied when dark mode is active or loading */
html[data-wp-dark-mode-active] .hentry, 
html[data-wp-dark-mode-active] .widget, 
[data-wp-dark-mode-loading] .hentry, 
[data-wp-dark-mode-loading] .widget {
    background: transparent !important;
}

/* Adjust the pseudo-elements for hentry in dark mode */
html[data-wp-dark-mode-active] .hentry:before, 
html[data-wp-dark-mode-active] .hentry:after, 
[data-wp-dark-mode-loading] .hentry:before, 
[data-wp-dark-mode-loading] .hentry:after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.15) 50%, rgba(0, 0, 0, 0) 100%) 5% !important;
    content: "" !important;
    display: block !important;
    right: 0 !important;
    left: 0 !important;
    position: absolute !important;
    height: 1px !important;
}

/* Widget title and links in dark mode */
html[data-wp-dark-mode-active] .widget .widget-title, 
[data-wp-dark-mode-loading] .widget .widget-title {
    color: #ffffff !important;
}

html[data-wp-dark-mode-active] .widget a, 
html[data-wp-dark-mode-active] .widget a:visited, 
[data-wp-dark-mode-loading] .widget a, 
[data-wp-dark-mode-loading] .widget a:visited {
    color: #ffffff !important;
}

html[data-wp-dark-mode-active] .widget a:hover, 
html[data-wp-dark-mode-active] .widget a:focus, 
html[data-wp-dark-mode-active] .widget a:active, 
[data-wp-dark-mode-loading] .widget a:hover, 
[data-wp-dark-mode-loading] .widget a:focus, 
[data-wp-dark-mode-loading] .widget a:active {
    color: #cccccc !important;
}

/* Optional: Additional customizations for dark mode */
html[data-wp-dark-mode-active], 
[data-wp-dark-mode-loading] {
    --wp-dark-mode-background-color: #000000;
    --wp-dark-mode-secondary-background-color: #000000;
    --wp-dark-mode-text-color: #ffffff;
    --wp-dark-mode-link-color: #ffffff;
    --wp-dark-mode-link-hover-color: #ffffff;
    --wp-dark-mode-input-background-color: #000000;
    --wp-dark-mode-input-text-color: #ffffff;
    --wp-dark-mode-input-placeholder-color: #ffffff;
    --wp-dark-mode-button-text-color: #ffffff;
    --wp-dark-mode-button-hover-text-color: #ffffff;
    --wp-dark-mode-button-background-color: #333333;
    --wp-dark-mode-button-hover-background-color: #444444;
    --wp-dark-mode-button-border-color: #555555;
}

/* Apply the custom CSS variables to relevant elements */
html[data-wp-dark-mode-active] body, 
[data-wp-dark-mode-loading] body {
    background-color: var(--wp-dark-mode-background-color) !important;
    color: var(--wp-dark-mode-text-color) !important;
}

html[data-wp-dark-mode-active] a, 
[data-wp-dark-mode-loading] a {
    color: var(--wp-dark-mode-link-color) !important;
}

html[data-wp-dark-mode-active] a:hover, 
[data-wp-dark-mode-loading] a:hover {
    color: var(--wp-dark-mode-link-hover-color) !important;
}

html[data-wp-dark-mode-active] input, 
[data-wp-dark-mode-loading] input,
html[data-wp-dark-mode-active] select, 
[data-wp-dark-mode-loading] select,
html[data-wp-dark-mode-active] textarea, 
[data-wp-dark-mode-loading] textarea {
    background-color: var(--wp-dark-mode-input-background-color) !important;
    color: var(--wp-dark-mode-input-text-color) !important;
}

html[data-wp-dark-mode-active] input::placeholder, 
[data-wp-dark-mode-loading] input::placeholder,
html[data-wp-dark-mode-active] select::placeholder, 
[data-wp-dark-mode-loading] select::placeholder,
html[data-wp-dark-mode-active] textarea::placeholder, 
[data-wp-dark-mode-loading] textarea::placeholder {
    color: var(--wp-dark-mode-input-placeholder-color) !important;
}

html[data-wp-dark-mode-active] .button, 
[data-wp-dark-mode-loading] .button,
html[data-wp-dark-mode-active] .btn, 
[data-wp-dark-mode-loading] .btn {
    background-color: var(--wp-dark-mode-button-background-color) !important;
    color: var(--wp-dark-mode-button-text-color) !important;
    border-color: var(--wp-dark-mode-button-border-color) !important;
}

html[data-wp-dark-mode-active] .button:hover, 
[data-wp-dark-mode-loading] .button:hover,
html[data-wp-dark-mode-active] .btn:hover, 
[data-wp-dark-mode-loading] .btn:hover {
    background-color: var(--wp-dark-mode-button-hover-background-color) !important;
    color: var(--wp-dark-mode-button-hover-text-color) !important;
}

/* Specificity for site title */
html[data-wp-dark-mode-active] .site-title a, 
html[data-wp-dark-mode-active] .site-title a:visited {
    color: #212121 !important;
}