/*
Theme Name: Chemistry Nightclub
Theme URI: https://chemistrynightclub.com
Author: Chemistry Development
Description: Chemistry Nightclub Theme - Red Theme
Version: 2.0.0
Text Domain: flex-starter
*/

:root {
    --text-red: #cd2027;
    --text-darkred: #8a1a1f;
    --bg-dark: #0a0a0a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: linear-gradient(180deg, #1a1a1a 0%, #0a0a0a 100%);
    background-attachment: fixed;
    color: #fff;
    min-height: 100vh;
}

a { color: var(--text-red); text-decoration: none; }
a:hover { color: var(--text-darkred); }

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
.site-header, #masthead {
    background: linear-gradient(180deg, #1e1e1e 0%, #0f0f0f 100%);
}

#menubar {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    padding: 25px 20px !important;
}

#menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
}

#menu li {
    display: inline-block !important;
}

#menu li a {
    display: inline-block !important;
    padding: 14px 32px !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 30px !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    background: rgba(0, 0, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
}

#menu li a:hover {
    background: linear-gradient(135deg, var(--text-red), var(--text-darkred)) !important;
    color: #000 !important;
    border-color: var(--text-red) !important;
}

#header {
    display: flex;
    justify-content: center;
    padding: 20px;
}

#logo {
    display: flex;
    align-items: center;
    gap: 25px;
}

#logo img { max-width: 420px; height: auto; }
#logo .address { color: #fff; font-size: 14px; line-height: 1.6; }

/* ============================================
   MAIN CONTENT - CENTERED CONTAINER WITH BORDER
   ============================================ */
#page {
    width: 100%;
}

#content, .site-content {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
}

/* Main content container with gold border */
.entry-content,
.elementor-widget-container,
.e-con {
    /* Don't add border to every element */
}

/* Elementor page wrapper */
.elementor-page #content,
.elementor-page .site-content {
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
}

/* The main page content box */
.elementor-page .elementor {
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(205, 32, 39, 0.3);
    border-radius: 20px;
    padding: 30px;
}

/* Elementor sections inside should be transparent */
.elementor-page .elementor-section {
    background: transparent !important;
}

.elementor-page .elementor-container {
    max-width: 100% !important;
}

/* ============================================
   UPCOMING EVENTS
   ============================================ */
.flyers-section {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid rgba(205, 32, 39, 0.2);
    border-radius: 20px;
    padding: 30px;
    margin: 30px 0;
}

.flyers-section h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 24px;
    color: var(--text-red) !important;
}

.flyers-container {
    display: flex;
    gap: 15px;
    padding: 10px 0;
    overflow-x: auto;
    scroll-behavior: smooth;
}

.flyers-centered { justify-content: center; flex-wrap: wrap; }

.flyers-scroll {
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--text-red) rgba(0,0,0,0.3);
}

.event-flyer-box {
    flex: 0 0 160px;
    transition: transform 0.3s ease;
}

.event-flyer-box:hover { transform: translateY(-5px); }

.event-flyer-box a {
    display: block;
    background: rgba(0, 0, 0, 0.6);
    border: 2px solid rgba(205, 32, 39, 0.3);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
}

.event-flyer-box:hover a {
    border-color: var(--text-red);
}

.flyer-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #1a1a1a, #2a2a2a);
}

.flyer-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flyer-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-red);
    font-size: 14px;
    font-weight: 600;
}

.flyer-info {
    padding: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}

.flyer-day {
    color: #fff !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 3px;
}

.flyer-date {
    color: var(--text-red);
    font-size: 16px;
    font-weight: 700;
}

.no-events { text-align: center; color: #999; padding: 40px; }

/* ============================================
   NIGHTLY EVENTS
   ============================================ */
.weekly-events h3,
.flex-nightly-events h3 {
    color: var(--text-red) !important;
}

.events-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 8px;
}

.events-table tr {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
}

.events-table td {
    padding: 15px 20px;
}

.events-table td:first-child {
    border-left: 3px solid var(--text-red);
    border-radius: 10px 0 0 10px;
}

.day-name {
    color: var(--text-red);
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
}

.event-details { color: #fff; font-size: 15px; }

.event-time {
    color: #000;
    font-size: 13px;
    background: var(--text-darkred);
    padding: 4px 12px;
    border-radius: 15px;
    display: inline-block;
    margin-top: 5px;
}

/* ============================================
   FOOTER
   ============================================ */
#footer, .site-footer {
    background: #000;
    border-top: 2px solid var(--text-red);
    padding: 30px 0;
    text-align: center;
    margin-top: 40px;
}

#footer p, .footer-copyright { color: #888; font-size: 14px; }

.footer-bottom {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    #menubar { padding: 15px 10px !important; }
    #menu { gap: 8px !important; }
    #menu li a { padding: 10px 18px !important; font-size: 12px !important; }
    #logo { flex-direction: column; text-align: center; }
    #logo img { max-width: 280px; }
    
    #content, .site-content,
    .elementor-page #content,
    .elementor-page .site-content {
        max-width: 100%;
        margin: 15px auto;
        padding: 0 10px;
    }
    
    .event-flyer-box { flex: 0 0 140px; }
    .flyer-image { height: 170px; }
}

/* Fix event time color - white on gold background */
.osec-event .event-time,
.osec_event .event-time,
.event-time,
.osec-time,
.ai1ec-time,
.timely-time {
    color: #fff !important;
}

/* Event single page styles */
.single-osec_event .entry-content,
.single-osec_event article {
    color: #fff;
}
.single-osec_event .event-time {
    color: #fff !important;
    background: rgba(0,0,0,0.5);
    padding: 5px 10px;
    border-radius: 4px;
}

/* Fix event time - gold text on gold background issue */
.event-time {
    color: #fff !important;
    background: #000 !important;
    padding: 8px 16px !important;
    border-radius: 20px !important;
    display: inline-block !important;
}

.event-datetime {
    color: #cd2027 !important;
}

/* Single event page fixes */
.single-osec_event .event-time,
body.single-osec_event .event-time {
    color: #fff !important;
    background: #000 !important;
}

/* Hide unwanted event fields */
.ai1ec-event-location,
.ai1ec-event-cost,
.ai1ec-event-contact,
.osec-event-location,
.osec-event-cost,
.osec-event-contact,
.ai1ec-cost,
.ai1ec-contact,
.ai1ec-location,
.ai1ec-map,
.ai1ec-gmap-container,
.osec-location,
.osec-cost,
.osec-contact,
.osec-map,
[class*="location"],
[class*="venue"],
[class*="organizer"],
.ai1ec-field-label:contains("Cost"),
.ai1ec-field-label:contains("Location"),
.ai1ec-field-label:contains("Contact"),
.ai1ec-row:has(.ai1ec-field-label:contains("Cost")),
.ai1ec-row:has(.ai1ec-field-label:contains("Location")) {
    display: none !important;
}

/* More specific hiding */
.ai1ec-cost.ai1ec-row,
.ai1ec-location.ai1ec-row,
.ai1ec-contact.ai1ec-row {
    display: none !important;
}

/* Calendar - make "more" link clickable and visible */
.ai1ec-month-view .ai1ec-more-events,
.osec-month-view .osec-more-events,
.ai1ec-agenda-more,
.osec-agenda-more,
a[class*="more-events"],
.ai1ec-popup-trigger {
    cursor: pointer !important;
    color: #cd2027 !important;
    text-decoration: underline !important;
}

.ai1ec-month-view .ai1ec-more-events:hover,
.osec-month-view .osec-more-events:hover {
    color: #fff !important;
    background: #9b59b6 !important;
    padding: 2px 5px;
    border-radius: 3px;
}

/* Calendar popup for multiple events */
.ai1ec-popup,
.osec-popup,
.ai1ec-events-list-popup {
    background: #1a1a1a !important;
    border: 1px solid #cd2027 !important;
    border-radius: 8px !important;
    padding: 10px !important;
    max-height: 300px !important;
    overflow-y: auto !important;
}

.ai1ec-popup a,
.osec-popup a {
    color: #cd2027 !important;
}

/* Make +X more link clickable on calendar */
.ai1ec-month-view .ai1ec-event-container .ai1ec-popup-trigger,
.osec-month-view .osec-event-container .osec-popup-trigger,
.ai1ec-month-view a.ai1ec-load-more,
.osec-month-view a.osec-load-more,
.ai1ec-month-view .ai1ec-more-link,
.osec-month-view .osec-more-link,
span[class*="more"],
a[class*="more"] {
    cursor: pointer !important;
    pointer-events: auto !important;
    color: #cd2027 !important;
    text-decoration: underline !important;
    display: inline-block !important;
}

.ai1ec-month-view .ai1ec-more-link:hover,
.osec-month-view .osec-more-link:hover {
    color: #fff !important;
    background: #9b59b6 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}