/* =========================
   DARK MODE VARIABLES
========================= */
:root {
    --bg: #ffffff;
    --text: #000000;
    --link: #0066cc;
}
 
html.dark-mode {
    --bg: #121212;
    --text: #ffffff;
    --link: #bb86fc;
}
 
/* =========================
   GLOBAL STYLES
========================= */
html,
body {
    background-color: var(--bg);
    color: var(--text);
    transition: background-color 0.3s, color 0.3s;
}
 
/* Links */
a {
    color: var(--link);
}
 
/* =========================
   COMMON THEME CONTAINERS
========================= */
html.dark-mode body,
html.dark-mode .site,
html.dark-mode .site-content,
html.dark-mode .front-top,
html.dark-mode .content,
html.dark-mode .container,
html.dark-mode .main,
html.dark-mode .page,
html.dark-mode .wrapper {
    background-color: var(--bg) !important;
    color: var(--text) !important;
}
 
html.dark-mode .footer,
html.dark-mode footer * {
    background-color: #ffffff !important;
    color: #000000 !important;
}
 
/* Headers, nav, footer blocks */
html.dark-mode header,
html.dark-mode nav {
    background-color: #1e1e1e !important;
}
 
/* Cards / widgets */
html.dark-mode .card,
html.dark-mode .widget,
html.dark-mode .post,
html.dark-mode .entry {
    background-color: #1e1e1e !important;
}
 
 
 
/* =========================
   DARK MODE TOGGLE BUTTON
========================= */
#dark-mode-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 10px 15px;
    font-size: 18px;
    border-radius: 20px;
    background: #000;
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 9999;
}
 
/* Button hover */
#dark-mode-toggle:hover {
    opacity: 0.8;
}
 
/* =========================
   OPTIONAL: SMOOTH TRANSITIONS
========================= */
* {
    transition: background-color 0.3s ease, color 0.3s ease;
}
 
/* =========================
   UPCOMING EVENTS WIDGET
   Kept light in dark mode
========================= */
html.dark-mode #hsd_upcoming_events_list-4,
html.dark-mode #hsd_upcoming_events_list-4 *,
html.dark-mode .hsd-upcoming-events-widget,
html.dark-mode .hsd-upcoming-events-widget *,
html.dark-mode .widget_hsd_upcoming_events_list,
html.dark-mode .widget_hsd_upcoming_events_list * {
    background-color: #ffffff !important;
    color: #000000 !important;
}