/* ============================================================
   3-COLUMN WELCOME PAGE LAYOUT - SIMPLE FULL WIDTH
   ============================================================ */

/* Main 3-Column Grid Container */
.welcome-three-columns {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Individual Column Styling */
.welcome-column {
    background: transparent !important;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    min-height: 200px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    font-size: 0.80em !important;
}

/* Column Headers (Grid Status, Upcoming Events, Sim Status) */
.welcome-column h2 {
    margin-top: 0;
    margin-bottom: 15px;
    color: white !important;
    font-size: 1.8em !important;
    font-weight: bold !important;
    text-align: center;
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}

/* Keep h3 and h4 their own sizes */
.welcome-column h3 {
    font-size: 1.3em !important;
}

.welcome-column h4 {
    font-size: 1.1em !important;
}

/* ============================================================
   MINI EVENT CONTAINER (for next event display)
   ============================================================ */

.event-container-mini {
    background: transparent !important;
    width: 100%;
}

.event-card-mini {
    background: transparent !important;
    padding: 15px;
    border-radius: 8px;
}

.event-card-mini .event-title {
    font-size: 1.0em;
    font-weight: bold;
    color: white !important;
    margin-bottom: 10px;
    text-align: center;
}

.event-card-mini .event-info {
    margin: 8px 0;
    font-size: 1em;
    color: white !important;
}

.event-card-mini .event-info strong {
    color: white !important;
}

.event-card-mini .event-description {
    margin-top: 12px;
    line-height: 1.5;
    font-size: 1em;
    color: white !important;
    text-align: left;
}

.event-card-mini .event-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 8px;
    margin: 10px 0;
}

.event-card-mini .maturity-badge {
    display: inline;        /* instead of inline-block */
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 0.85em;
    font-weight: 400;       /* normal weight */
    margin: 0;              /* remove bottom margin */
    line-height: 1;         /* optional: prevents extra spacing */
    vertical-align: baseline; /* aligns with text */
}

.event-card-mini .maturity-pg {
    background: #28a745;
    color: white !important;
}

.event-card-mini .maturity-mature {
    background: #ffc107;
    color: #000 !important;
}

.event-card-mini .maturity-adult {
    background: #dc3545;
    color: white !important;
}

/* No Events Message */
.no-events {
    text-align: center;
    padding: 40px 20px;
    color: white !important;
    font-size: 1.1em;
    font-style: italic;
}

/* Loading State */
#next-event-display .loading {
    text-align: center;
    padding: 30px 20px;
    color: white !important;
    font-size: 1em;
}

/* ============================================================
   OVERRIDE ANY EVENTS.CSS STYLES FOR FRONT PAGE
   ============================================================ */

/* Force transparent backgrounds for all event-related elements on welcome page */
.welcome-column .event-container-mini *,
.welcome-column #next-event-display *,
.welcome-column .event-card-mini * {
    background: transparent !important;
}

/* Ensure text is white - but allow inline styles to override */
.welcome-column {
    color: white !important;
}

.welcome-column div,
.welcome-column p,
.welcome-column label {
    color: white !important;
}

/* Spans without inline styles are white */
.welcome-column span:not([style*="color"]) {
    color: white !important;
}

/* ============================================================
   FORCE INLINE STYLES TO WORK - COLUMN 1 ONLY
   ============================================================ */

/* Target inline color styles ONLY in column 1 (dynamic-sim-check) */
.welcome-column:nth-child(1) [style*="color:"],
.welcome-column:nth-child(1) [style*="color :"],
.welcome-column:nth-child(1) span[style*="color"],
.welcome-column:nth-child(1) div[style*="color"],
.welcome-column:nth-child(1) p[style*="color"] {
    color: inherit !important;
}

/* Specific color overrides for column 1 inline styles */
.welcome-column:nth-child(1) span[style*="limegreen"] {
    color: limegreen !important;
}

.welcome-column:nth-child(1) span[style*="green"]:not([style*="limegreen"]) {
    color: green !important;
}

.welcome-column:nth-child(1) span[style*="red"] {
    color: red !important;
}

.welcome-column:nth-child(1) span[style*="lime"] {
    color: lime !important;
}

/* ============================================================
   STATUS COLOR EXCEPTIONS - All Columns (Class-Based)
   ============================================================ */

/* Green for all online/running statuses */
.welcome-column .status-online,
.welcome-column .online,
.welcome-column .active,
.welcome-column .running,
.welcome-column .status-on,
.welcome-column .up {
    color: #32CD32 !important;
}

/* Red for all offline/down statuses */
.welcome-column .status-offline,
.welcome-column .offline,
.welcome-column .inactive,
.welcome-column .down,
.welcome-column .status-off {
    color: red !important;
}

/* Light grey for timestamps and metadata */
.welcome-column .up-time,
.welcome-column .up-time *,
.welcome-column .last-update,
.welcome-column .last-update *,
.welcome-column .timestamp,
.welcome-column .meta {
    color: #d3d3d3 !important;
}

/* Simulator/service names stay white */
.welcome-column .sim-name,
.welcome-column .service-name {
    color: white !important;
}

/* ============================================================
   COLUMN 3 SPECIFIC - FORCE CLASS-BASED COLORS
   ============================================================ */

/* Column 3 should always use class-based colors */
.welcome-column:nth-child(3) .status-online {
    color: #32CD32 !important;
}

.welcome-column:nth-child(3) .status-offline {
    color: red !important;
}

.welcome-column:nth-child(3) .sim-name {
    color: white !important;
}

.welcome-column:nth-child(3) .up-time,
.welcome-column:nth-child(3) .up-time *,
.welcome-column:nth-child(3) .last-update,
.welcome-column:nth-child(3) .last-update * {
    color: #d3d3d3 !important;
}

/* Keep headers white */
.welcome-column h2,
.welcome-column h3,
.welcome-column h4 {
    color: white !important;
}

/* Force equal widths - override any shortcode styling */
.welcome-three-columns > .welcome-column {
    min-width: 0;
    max-width: none;
}

/* Override any internal fixed widths from shortcodes */
.welcome-column > *,
.welcome-column .shortcode-box,
.welcome-column div[style] {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* ============================================================
   RESPONSIVE DESIGN
   ============================================================ */

/* Tablet - 2 columns */
@media (max-width: 1024px) {
    .welcome-three-columns {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
    }
    
    .welcome-column:last-child {
        grid-column: 1 / -1;
    }
}

/* Mobile - 1 column */
@media (max-width: 768px) {
    .welcome-three-columns {
        grid-template-columns: 1fr;
        gap: 15px;
        margin: 10px 0;
    }
    
    .welcome-column {
        padding: 15px;
    }
    
    .welcome-column h2 {
        font-size: 1.5em !important;
    }
    
    .event-card-mini .event-title {
        font-size: 1.1em;
    }
    
    .event-card-mini .event-info {
        font-size: 0.9em;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .welcome-three-columns {
        gap: 10px;
        margin: 5px 0;
    }
    
    .welcome-column {
        padding: 12px;
    }
    
    .welcome-column h2 {
        font-size: 1.3em !important;
        margin-bottom: 10px;
    }
}
/* ============================================================
   COLUMN 2 SPECIFIC - EVENT TITLE COLOR OVERRIDE
   ============================================================ */
.welcome-three-columns > .welcome-column:nth-child(2) h3.event-title,
.welcome-three-columns > .welcome-column:nth-child(2) .event-card-mini .event-title {
    color: gold !important;    /* Force yellow text for event titles */
}

/* font-size: 0.7em;   /* 70% - Very small */
/* font-size: 0.8em;   /* 80% - Small */
/* font-size: 0.85em;  /* 85% - Slightly small */
/* font-size: 0.9em;   /* 90% - A bit smaller */
/* font-size: 1em;     /* 100% - Normal/default */
/* font-size: 1.1em;   /* 110% - Slightly larger */