:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
    :root { font-family: InterVariable, sans-serif; }
}
/* Add minimal custom styles for layout if needed */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1;
    background-color: #F9FAFC;
}
main {
    flex: 1; /* Allows main content to grow and push footer down */
}
/* Style placeholder events */
.event-link[href^="/awareness/"] { color: #0a58ca; font-weight: bold; } /* Example: Blue for Awareness */
.event-link[href^="/webinars/"] { color: #5c2f80; } /* Example: Purple for Webinars */
.event-link[href^="/conferences/"] { color: #0d6efd; } /* Example: Default link blue */
.event-link[href^="/support/"] { color: #198754; } /* Example: Green for Support */

/* Ensure footer stays at the bottom */
footer {
    margin-top: auto;
}

.hero-banner {
    background-image:
    /* 1. Dark Blue Semi-Transparent Overlay (adjust color and opacity) */
    linear-gradient(rgba(30, 50, 90, 0.65), rgba(30, 50, 90, 0.8)),
    /* 2. Your Background Image */
    url('https://images.unsplash.com/photo-1579154204603-017858093c8c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80'); 

    /* Image display properties */
    background-size: cover;     /* Scale image to cover the entire div */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat; /* Do not repeat the image */

    /* Ensure text is readable */
    color: #fff; /* Set default text color to white */
}

/* Optional: Adjust heading color if needed, but Bootstrap 'text-white' should handle it */
.hero-banner h1 {
    /* You could add text-shadow for more contrast if needed */
    /* text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); */
}

/* Optional: Adjust lead paragraph color/style */
.hero-banner .lead {
    color: rgba(255, 255, 255, 0.9); /* Slightly less bright white for lead */
    max-width: 800px; /* Limit width of lead paragraph for readability */
    margin-left: auto; /* Center the lead paragraph if max-width is applied */
    margin-right: auto;
}

/* General Calendar Styling */
.calendar-container {
    max-width: 900px; /* Adjust as needed */
    margin: auto;
}

/* Style for the initial loading/error message */
.calendar-message {
    min-height: 200px; /* Ensure it takes some space */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Desktop Calendar Grid */
#calendar-grid .col {
    padding: 0; /* Remove default Bootstrap col padding */
}

.calendar-body .row {
    /* Ensure rows don't wrap unexpectedly */
    flex-wrap: nowrap;
}

.day-cell {
    border: 1px solid #eee;
    min-height: 120px; /* Adjust height as needed */
    padding: 5px;
    position: relative;
    overflow: hidden; /* Hide overflow content */
    background-color: #fff;
    transition: background-color 0.2s ease;
    display: flex; /* Use flexbox for better control */
    flex-direction: column; /* Stack day number and links */
}

.day-cell.other-month {
    background-color: #f8f9fa; /* Light grey for other month days */
}

.day-cell.today {
    background-color: #e9f5ff; /* Light blue highlight for today */
    border: 1px solid #a3d5ff;
}

.day-number {
    font-size: 0.85rem;
    font-weight: bold;
    color: #555;
    text-align: right;
    margin-bottom: 5px;
    padding-right: 5px; /* Space from edge */
    flex-shrink: 0; /* Prevent number from shrinking */
}

.day-cell.other-month .day-number {
    color: #adb5bd; /* Lighter color for other month numbers */
}

.day-links {
    font-size: 0.75rem; /* Smaller font for links */
    overflow-y: auto; /* Allow scrolling if many events */
    flex-grow: 1; /* Allow links container to fill space */
    line-height: 1.4; /* Improve readability */
}

.day-links a.event-link { /* Use a more specific class */
    display: block;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #0d6efd;
    text-decoration: none;
    background-color: #f0f8ff; /* Light background for links */
    padding: 2px 5px; /* Adjusted padding */
    border-radius: 3px;
    transition: background-color 0.2s ease;
    border-left: 3px solid transparent; /* Default transparent borders */
    border-right: 3px solid transparent;
}

.day-links a.event-link:hover {
    background-color: #d6eaff;
    text-decoration: underline;
}

/* --- Styles for Multi-Day Event Indicators --- */
.day-links a.event-start {
    border-left-color: #0d6efd; /* Blue border on the left */
    /* Make corners square on the left if it starts */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.day-links a.event-end {
     border-right-color: #0d6efd; /* Blue border on the right */
     /* Make corners square on the right if it ends */
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
}

/* If an event is single-day (both start and end), reset radius */
.day-links a.event-start.event-end {
    border-left-color: transparent;
    border-right-color: transparent;
     /* Add back radius if it's a single day event */
    border-radius: 3px;
     /* Optional: add a small dot or different background for single day */
    /* background-color: #e7f3ff; */
}

/* Style for the 'more events' indicator */
.day-links .more-events {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #6c757d; /* Secondary text color */
    margin-top: 2px;
    cursor: help; /* Indicate it's just an indicator */
}
/* --- End Multi-Day Styles --- */


/* Mobile Mini Calendar */
#mini-calendar .col {
    padding: 0; /* Remove default Bootstrap col padding */
}

.mini-calendar-body .row {
     flex-wrap: nowrap;
}

.mini-day-cell {
    border: 1px solid #eee;
    height: 50px; /* Fixed height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center number vertically */
    align-items: center; /* Center number horizontally */
    font-size: 0.9rem;
    position: relative;
    cursor: default; /* Default cursor */
    background-color: #fff;
     transition: background-color 0.2s ease;
}

.mini-day-cell .day-number {
    text-align: center; /* Center number text */
    padding: 0;
    margin-bottom: 2px; /* Space between number and dots */
}


.mini-day-cell.other-month {
    background-color: #f8f9fa;
    color: #adb5bd;
}
.mini-day-cell.other-month .day-number {
    color: #adb5bd;
}


.mini-day-cell.today {
    background-color: #e9f5ff;
     border: 1px solid #a3d5ff;
     font-weight: bold;
}
.mini-day-cell.today .day-number {
    color: #333; /* Ensure today's number is dark */
}


.mini-day-cell.has-events {
    cursor: pointer; /* Pointer cursor only if there are events */
    font-weight: bold; /* Make number bold if has events */
}

.mini-day-cell.active {
     background-color: #cce5ff; /* Highlight tapped day */
     border-color: #b8daff;
}


.event-dots {
    position: absolute;
    bottom: 5px; /* Position dots at the bottom */
    left: 0;
    right: 0;
    text-align: center;
    line-height: 0; /* Prevent extra space */
}

.event-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    background-color: #0d6efd; /* Bootstrap primary blue */
    border-radius: 50%;
    margin: 0 1px;
}

/* Mobile Event List */
#mobile-event-list {
    border-top: 1px solid #dee2e6;
}

#mobile-event-links-ul li {
    margin-bottom: 5px;
}

#mobile-event-links-ul a {
    display: block;
    padding: 5px 8px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #212529;
    transition: background-color 0.2s ease;
}
#mobile-event-links-ul a:hover {
    background-color: #e9ecef;
}


/* Adjustments for calendar header */
.calendar-header.mini-header .col {
    font-size: 0.8rem;
}