/* MOAA Google Calendar events widget — Google-style month grid in MOAA's light/branded look,
   plus a month-grouped highlights list.
   Category color is driven by the --gcal-color custom property (set per element), with the
   .calendar-* classes below as the source of truth. Color is a visual enhancement only:
   every event also carries a text category label so it stays accessible without color. */

.calendar-roundtable-webinar { --gcal-color: #2E5C9A; }
.calendar-workshop { --gcal-color: #C7631E; }
.calendar-council-chapter-visit { --gcal-color: #6E7B8B; }
.calendar-cp-icp-meeting { --gcal-color: #5C4E8C; }
.calendar-advocacy { --gcal-color: #A4282E; }
.calendar-deadlines { --gcal-color: #B8860B; }

.gcal__title { margin-bottom: 0.5rem; }
.gcal__intro { margin-bottom: 1.25rem; }
.gcal__heading { margin: 0 0 1rem; font-size: 1.5rem; }
.gcal__status { padding: 1rem 0; color: #666; }
.gcal__calendar-section { margin-bottom: 2.5rem; }

/* Category filters (clickable chips at the top of the calendar) */
.gcal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.gcal__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem;
    border: 1px solid #d0d0d0;
    border-radius: 999px;
    background: #fff;
    color: #333;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gcal__chip:hover { border-color: var(--gcal-color, #888); }
.gcal__chip.is-active {
    color: #fff;
    border-color: var(--gcal-color, #333);
    background: var(--gcal-color, #333);
}
.gcal__chip--all.is-active { background: #333; border-color: #333; }
.gcal__chip-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    background: var(--gcal-color, #888);
}
.gcal__chip.is-active .gcal__chip-dot { background: #fff; }

/* ---- Month calendar (Google-style, MOAA-branded light theme) --------- */
.gcal-cal__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.gcal-cal__today {
    border: 1px solid #d3d6da;
    background: #fff;
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-size: 0.9rem;
    color: #1f2937;
    cursor: pointer;
}
.gcal-cal__today:hover { background: #f3f4f6; }
.gcal-cal__nav { display: flex; gap: 0.15rem; }
.gcal-cal__navbtn {
    border: none;
    background: transparent;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1.5rem;
    line-height: 1;
    color: #44474a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.gcal-cal__navbtn:hover { background: #f0f0f0; }
.gcal-cal__navbtn:disabled,
.gcal-cal__navbtn:disabled:hover {
    opacity: 0.3;
    cursor: default;
    background: transparent;
}
.gcal-cal__label {
    font-size: 1.5rem;
    font-weight: 400;
    color: #1f2937;
}

.gcal-cal__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
    background: #fff;
}
.gcal-cal__weekday {
    padding: 0.6rem 0.5rem;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #70757a;
}

.gcal-cal__grid {
    border: 1px solid #e0e0e0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.gcal-week { position: relative; }
.gcal-week__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}
.gcal-day {
    border-right: 1px solid #ededed;
    border-bottom: 1px solid #ededed;
    padding: 0.35rem 0.4rem;
    text-align: center;
}
.gcal-day:nth-child(7n) { border-right: none; }
.gcal-day--muted { background: #f7f8fa; }
.gcal-day--muted .gcal-day__num { color: #b5b9bd; }
.gcal-day__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    font-size: 0.8rem;
    color: #3c4043;
    border-radius: 999px;
}
.gcal-day--today .gcal-day__num {
    background: #2E5C9A;
    color: #fff;
}

/* Event layer overlays the day cells, below the date numbers (leave clearance for the today circle). */
.gcal-week__events {
    position: absolute;
    top: 2.55rem;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: 1.5rem;
    gap: 3px 2px;
    padding: 0 4px;
    pointer-events: none;
}

/* All-day / multi-day: filled rounded bar */
.gcal-bar {
    pointer-events: auto;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    background: var(--gcal-color, #888);
    color: #fff;
    font-size: 0.75rem;
    line-height: 1.4rem;
    height: 1.4rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    text-decoration: none;
}
a.gcal-bar:hover { filter: brightness(0.93); color: #fff; text-decoration: none; }
.gcal-bar--continues-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.gcal-bar--continues-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.gcal-bar__label { display: block; overflow: hidden; text-overflow: ellipsis; }

/* Single-day timed: dot + time + title, no fill */
.gcal-chip {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    height: 1.4rem;
    padding: 0 0.35rem;
    font-size: 0.75rem;
    color: #3c4043;
    border-radius: 6px;
    text-decoration: none;
}
a.gcal-chip:hover { background: #f0f0f0; color: #3c4043; text-decoration: none; }
.gcal-chip__dot {
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--gcal-color, #888);
}
.gcal-chip__time { font-weight: 600; }
.gcal-chip__title { overflow: hidden; text-overflow: ellipsis; }

/* ---- Highlights: month tabs + panel ----------------------------------
   Tab styling mirrors the Scholarship Application's jQuery UI tabs:
   gray header bar, top-rounded gray tabs, bright blue active tab. */
.gcal-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 0.2em;
    padding: 0.3em 0.3em 0;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    background: #e9e9e9;
    border-radius: 3px;
    font-weight: bold;
}
.gcal-tab {
    border: 1px solid #c5c5c5;
    border-bottom: none;
    background: #f6f6f6;
    color: #454545;
    font-weight: normal;
    border-radius: 3px 3px 0 0;
    padding: 0.5em 1em;
    margin-top: 1px;
    font-size: 20px;
    line-height: 1.2;
    cursor: pointer;
}
.gcal-tab:hover {
    border-color: #ccc;
    border-bottom: none;
    background: #ededed;
    color: #2b2b2b;
}
.gcal-tab.is-active,
.gcal-tab.is-active:hover {
    border-color: #003eff;
    border-bottom: none;
    background: #007fff;
    color: #fff;
    margin-top: 0;
}

@media (max-width: 600px) {
    .gcal-tab { font-size: 15px; padding: 0.4em 0.7em; }
}

.gcal-highlights__group { margin-bottom: 1.75rem; }
.gcal-highlights__month {
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid #e4e4e4;
    font-size: 1.15rem;
}
.gcal-highlights__list { list-style: none; margin: 0; padding: 0; }
.gcal-highlights__item {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid #f0f0f0;
}
.gcal-highlights__dot {
    flex: 0 0 auto;
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--gcal-color, #888);
    transform: translateY(0.15rem);
    cursor: pointer;
}
.gcal-highlights__when {
    flex: 0 0 9rem;
    font-weight: 600;
    color: #333;
    font-size: 0.9rem;
}
.gcal-highlights__detail { display: flex; flex-direction: column; }
.gcal-highlights__category {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--gcal-color, #555);
    cursor: pointer;
}
.gcal-highlights__category:hover { text-decoration: underline; }
.gcal-highlights__title { font-size: 1rem; color: #222; }
.gcal-highlights__link { color: var(--gcal-color, #2E5C9A); }
.gcal-highlights__location { font-size: 0.85rem; color: #666; }
.gcal-highlights__empty { color: #666; }

@media (max-width: 600px) {
    .gcal-highlights__item { flex-wrap: wrap; }
    .gcal-highlights__when { flex-basis: 100%; }
    .gcal-bar, .gcal-chip { font-size: 0.65rem; }
}