/* Calendar (Events Manager) styling overrides.
   Category color shown as a light tint background with the full category
   color for border + text (like Tailwind's e.g. sky-100 bg / sky-800 text
   pairing), instead of a solid fill. Derived with color-mix() from the
   single stored category color, since Events Manager only stores one
   color per category (no separate light/dark pair).
   See divi-child/functions.php: em_dynamic_calendar_with_filter() for the
   category-color data source. */

/* Higher-specificity version to deterministically beat Divi's dynamically
   regenerated customizer CSS (#calendar-anchor.calendar-page .em.em-calendar
   .em-cal-body.event-style-pill .em-cal-event > div), regardless of load order. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div {
    background-color: color-mix(in srgb, var(--event-background-color) 15%, white) !important;
    border: none !important;
    color: var(--event-background-color) !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div a {
    color: var(--event-background-color) !important;
}

/* Also override the OUTER .em-cal-event wrapper's own opaque background
   (set by a separate Divi-injected inline <style> rule), which otherwise
   still shows through the inner div above. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event {
    background-color: color-mix(in srgb, var(--event-background-color) 15%, white) !important;
}

/* Saturday shown in gray, Sunday and weekdays in white.
   em-cal-col-1 = Sunday, em-cal-col-7 = Saturday (1-indexed). */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-7 {
    background-color: #e0e0e0 !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-1,
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-2,
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-3,
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-4,
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-5,
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day.em-cal-col-6 {
    background-color: #fff !important;
}

/* Light gray border around each day cell so days read as visually separate. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day {
    border: 1px solid #e8e8e8 !important;
}

/* Hide the colored category dot for now - checkbox, label background, and
   label text already convey the category color. */
.cat-color-box {
    display: none !important;
}

/* Smaller event text (Divi's generated CSS sets font-size:12px !important
   on this exact selector, so match/exceed its specificity to override it). */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div a {
    font-size: 10px !important;
}

/* Tighter left/right padding on each day cell. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day {
    padding-left: 2px !important;
    padding-right: 2px !important;
}

/* Hover tooltip showing time + title (see calendar.js: setupEventTooltips()).
   Positioned via pageX/pageY in JS, so this must stay position:absolute. */
.em-event-tooltip {
    position: absolute;
    z-index: 99999;
    background: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    white-space: nowrap;
    display: none;
}

/* Truncate event title to a single line with an ellipsis instead of wrapping. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div a {
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
}

/* Force each event to fill the full width of its day cell, left-aligned. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event {
    width: 100% !important;
    box-sizing: border-box !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: left !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div a {
    text-align: left !important;
}

/* Guarantee equal-width day columns: clip any event content that would
   otherwise overflow into a neighboring day (e.g. long titles), rather than
   letting it visually spill over. Also reinforce min-width:0 so
   text-overflow:ellipsis actually engages instead of the link growing to
   fit its unwrapped text. */
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body .em-cal-day {
    overflow: hidden !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event {
    max-width: 100% !important;
    min-width: 0 !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div {
    max-width: 100% !important;
    min-width: 0 !important;
}
#calendar-anchor.calendar-page.sanitary-calendar .em.em-calendar .em-cal-body.event-style-pill .em-cal-event > div a {
    min-width: 0 !important;
}

/* "+N more" indicator when a day has more than 4 events (see calendar.js:
   limitEventsPerDay()). Click reveals the rest of that day's events. */
.em-more-events {
    font-size: 10px;
    color: #666;
    cursor: pointer;
    padding: 2px 4px;
    text-align: left;
}
.em-more-events:hover {
    text-decoration: underline;
}

/* Actually hide events beyond the "+N more" limit. Plain .hide()/.show()
   (inline style) isn't enough here - Events Manager's own inline <style>
   sets ".em-cal-event { display: block !important; }", which beats a plain
   inline display:none. Using a class + !important with higher specificity
   (2 classes vs their 1) reliably wins instead. */
.em-cal-event.em-event-hidden {
    display: none !important;
}