@media (prefers-color-scheme: dark) {
    :root {
        /* Override The Events Calendar CSS variables */
        --tec-color-text-primary: #f5f0e1 !important;
        --tec-color-text-secondary: #f5f0e1 !important;
        --tec-color-text-events-title: #f5f0e1 !important;
        --tec-color-background: transparent !important;
        --tec-color-background-events: transparent !important;
        --tec-color-background-secondary: #333333 !important;
    }
    
    body {
        background-color: #121212 !important;
        color: #f5f0e1 !important;
    }
    
    /* Make regular text elements light colored */
    p, span, a, div, li, td, th, label, input, textarea, button {
        color: #f5f0e1 !important;
    }
    
    /* Ultra-specific selectors for site title with !important */
    html body .site-title, 
    html body .site-title a, 
    html body a.site-title,
    html body #site-title, 
    html body #site-title a,
    html body .wp-block-site-title a,
    html body .site-header .site-title,
    html body .site-header .site-title a,
    html body header .site-title,
    html body header .site-title a,
    html body .site-branding .site-title,
    html body .site-branding .site-title a,
    html body #masthead .site-title,
    html body #masthead .site-title a,
    html body div.site-title,
    html body div.site-title a,
    html body h1.site-title,
    html body h1.site-title a,
    html body p.site-title,
    html body p.site-title a,
    html body span.site-title,
    html body span.site-title a,
    html body .logo-title,
    html body .logo-title a,
    html body .site-name,
    html body .site-name a,
    html body [class*="site-title"],
    html body [class*="site-title"] a,
    html body [id*="site-title"],
    html body [id*="site-title"] a {
        color: #FFD700 !important; /* Gold color */
        -webkit-text-fill-color: #FFD700 !important; /* For WebKit browsers */
    }
    
    /* Regular headings get the same gold color */
    h1, h2, h3, h4, h5, h6, 
    .entry-title, 
    .page-title {
        color: #FFD700 !important; /* Gold color */
    }
    
    /* Site header headings get a different color */
    .site-header h1:not(.site-title), 
    .site-header h2:not(.site-description), 
    .site-header h3, 
    .site-header h4, 
    .site-header h5, 
    .site-header h6,
    header h1:not(.site-title), 
    header h2:not(.site-description), 
    header h3, 
    header h4, 
    header h5, 
    header h6 {
        color: #8AFFFF !important; /* Light cyan */
    }
    
    /* Other header elements remain light colored */
    .site-header a:not(.site-title),
    .site-header span:not(.site-title),
    .site-header div:not(.site-title),
    header a:not(.site-title),
    header span:not(.site-title),
    header div:not(.site-title) {
        color: #f5f0e1 !important;
    }
    
    /* Additional overrides for The Events Calendar elements */
    .tribe-common .tribe-common-h1,
    .tribe-common .tribe-common-h2,
    .tribe-common .tribe-common-h3,
    .tribe-common .tribe-common-h4,
    .tribe-common .tribe-common-h5,
    .tribe-common .tribe-common-h6,
    .tribe-common .tribe-common-h7,
    .tribe-common .tribe-common-h8,
    .tribe-common .tribe-common-b1,
    .tribe-common .tribe-common-b2,
    .tribe-common .tribe-common-b3 {
        color: #f5f0e1 !important;
    }
}

.tribe-events-event-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    max-width: 100%;
}


does work, but not in mobile menu of normal twenty twenty five theme, after clicking hamburger menu