/*
 * JCF Events – mobile month view with truncated event titles.
 * Applies only below TEC's "medium" breakpoint (when TEC shows its mobile grid).
 */

.tribe-events:not(.tribe-common--breakpoint-medium) {
    --jcfe-mm-chip-bg: #0D2042;      /* navy */
    --jcfe-mm-chip-fg: #ffffff;
    --jcfe-mm-allday-bg: #A3915E;    /* gold */
    --jcfe-mm-featured-bg: #BE6127;  /* orange accent */
}

/* Let the cells grow taller than square so titles fit. */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day {
    aspect-ratio: auto;
    padding-top: 0;
    min-height: 84px;
    overflow: hidden;
}

.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--mobile {
    position: relative;
    justify-content: flex-start;
    align-items: stretch;
    gap: 2px;
    height: 100%;
    min-height: 84px;
    padding: 4px 1px;
    box-sizing: border-box;
}

/* Hide the dot; the titles replace it. */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--mobile .tribe-events-calendar-month__mobile-events-icon {
    display: none;
}

.jcfe-mm-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    min-width: 0;
}

/* Chips are clipped like Google Calendar (no ellipsis – more letters fit). */
.jcfe-mm-event {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    text-align: left;
    padding: 1px 3px;
    border-radius: 3px;
    background: var(--jcfe-mm-chip-bg);
    color: var(--jcfe-mm-chip-fg);
    font-family: "Source Sans Pro", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.35;
}

.jcfe-mm-event--allday {
    background: var(--jcfe-mm-allday-bg);
}

.jcfe-mm-event--featured {
    background: var(--jcfe-mm-featured-bg);
}

/* Category color (set inline per event) wins over the defaults above. */
.jcfe-mm-event--cat {
    background: var(--jcfe-mm-cat-bg);
    color: var(--jcfe-mm-cat-fg);
}

.jcfe-mm-more {
    display: block;
    text-align: left;
    padding: 0 3px;
    font-family: "Source Sans Pro", sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
    opacity: .75;
}

/* Past days: dim the chips. */
.tribe-events-calendar-month__day--past .jcfe-mm-event {
    opacity: .55;
}

/*
 * Current + selected day: orange outline instead of TEC's solid orange fill,
 * so event chips keep their category colors. An inset box-shadow is used so
 * the outline follows rounded corners and doesn't shift the layout.
 */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--selected,
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--selected:focus,
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--selected:hover {
    background-color: transparent;
    border: 0;
    box-shadow: inset 0 0 0 2px var(--tec-color-accent-primary, #BE6127);
}

/* Today (when not the selected day): thinner outline. */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-cell--mobile:not(.tribe-events-calendar-month__day-cell--selected) {
    box-shadow: inset 0 0 0 1px var(--tec-color-accent-primary, #BE6127);
}

/* Keep the date number its normal color on the selected day (TEC makes it white). */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date {
    color: inherit;
}

/* Today's date number: bold orange, so it's identifiable after selecting another day. */
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date,
.tribe-events:not(.tribe-common--breakpoint-medium) .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum {
    color: var(--tec-color-accent-primary, #BE6127);
    font-weight: 700;
}

/* Very narrow phones: slightly smaller text. */
@media (max-width: 360px) {
    .jcfe-mm-event,
    .jcfe-mm-more {
        font-size: 9px;
        padding-left: 2px;
        padding-right: 2px;
    }
}

/*
 * Hide the events bar (view selector icon) at all screen sizes – the site
 * only uses Month view. visibility keeps its space so the header layout and
 * the "+ Add Event" button stay where they are.
 */
.tribe-events .tribe-events-header__events-bar.tribe-events-c-events-bar {
    visibility: hidden;
}

/* Hide the "Browse by category" (category color) filter dropdown. */
.tribe-events .tec-events-category-color-filter {
    display: none !important;
}