.elementor-kit-6{--e-global-color-primary:#CB090D;--e-global-color-secondary:#000000;--e-global-color-text:#1D1D1D;--e-global-color-accent:#FFFFFF;--e-global-typography-primary-font-family:"Libre Baskerville";--e-global-typography-primary-font-size:40px;--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Montserrat";--e-global-typography-secondary-font-size:36px;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Montserrat";--e-global-typography-accent-font-size:16px;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-font-style:italic;font-family:"Georama", Sans-serif;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 h2{font-family:"Adamina", Sans-serif;font-weight:900;letter-spacing:-0.5px;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Fredoka", Sans-serif;font-size:30px;font-weight:600;text-transform:uppercase;line-height:52px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* =========================================
   1. GRID LAYOUT & CONTAINER
   ========================================= */
.mix-events-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr); 
    gap: 1.5rem;
    overflow: visible !important; 
    padding: 1rem;
    padding-bottom: 2rem; 
    max-width: 1200px;
    margin: 0 auto;
}

@media (min-width: 640px) {
    .mix-events-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .mix-events-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================
   2. EVENT CARD STYLING
   ========================================= */
.full-event-card {
    display: block;
    text-decoration: none;
    color: #ffffff; 
    background-color: #70253F !important;
    border-radius: 6px;
    border: solid;
    border-color: #CB090D;
    border-width: 6px;
    height: 100%; 
    overflow: visible; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Content Wrapper */
.event-content {
    display: flex; 
    gap: 1rem;
    align-items: center; 
    padding: 1rem;
    border-radius: 2px;
    background-color: #000000 !important;
    transition: background-color 0.3s ease; 
    height: 100%;
    box-sizing: border-box;
}

/* Hover Effects */
.mix-events-grid a.full-event-card:hover .event-content {
    background-color: #1D1D1D !important;
    border-color: transparent !important; 
}

.mix-events-grid a.full-event-card:hover {
    background-color: #AD3A62 !important;
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    text-decoration: none !important;
}

/* Hover Text Colors */
.mix-events-grid a.full-event-card:hover .event-title,
.mix-events-grid a.full-event-card:hover .event-date {
    color: #FFF !important;
}

/* Image Styling */
.full-event-card img {
    max-width: 175px; 
    flex-shrink: 0; 
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 8px; 
}

/* =========================================
   3. TYPOGRAPHY
   ========================================= */
.event-info-stack {
    display: flex;
    flex-direction: column; 
    justify-content: center;
    align-items: flex-start; 
    flex-grow: 1; 
}

.event-title {
    font-family: 'libre baskerville', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1; 
    color: #FFF; 
    margin: 0; 
    margin-bottom: 0px; 
    width: 100%;
}

.event-date {
    font-family: 'montserrat', sans-serif;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.1;
    color: #FFF; 
    margin: 0;
    margin-top: 0px; 
    align-self: center; 
}

/* =========================================
   4. EVENTS MANAGER FIXES (Updated)
   ========================================= */

/* A. FORCE TEXT WHITE (When, Dates, Times) */
.em-view-container .em.pixelbones .em-item-meta-line,
.em-view-container .em.pixelbones .em-item-meta h3,
.em-view-container .em.pixelbones .em-item-meta-column {
    color: #FFFFFF !important;
}

/* C. "ADD TO CALENDAR" BUTTON */

/* Default State */
.em-view-container .em.pixelbones button.em-event-add-to-calendar {
    color: #ffffff !important;             
    border: 2px solid #ffffff !important;  
    background: transparent !important;    
    box-shadow: none !important;           
}

/* Force the icon INSIDE the button to REMAIN VISIBLE and WHITE */
/* We have to be explicit here so rule 'B' doesn't hide this one too */
.em-view-container .em.pixelbones button.em-event-add-to-calendar .em-icon {
    display: inline-block !important; /* Ensure it stays visible */
    color: #ffffff !important;
}

/* Hover State (White Background, Black Text) */
.em-view-container .em.pixelbones button.em-event-add-to-calendar:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

/* Force icon inside button to black on hover */
.em-view-container .em.pixelbones button.em-event-add-to-calendar:hover .em-icon {
    color: #000000 !important;
}/* End custom CSS */