/**
 * CouncilWare calendar and event styles.
 *
 * Rewritten in 4.2.0. Notes for whoever reads this next:
 *
 * - Roughly 250 lines of this file used to style a hand-rolled calendar
 *   (div#calendar, ul.dates, .events-tooltip) that no code path has emitted
 *   for years, plus a Genesis nav fix that had nothing to do with calendars.
 *   All verified unreferenced before removal.
 * - It also set body { font-family / font-size } and :focus { outline: none }
 *   globally, on every page of the site, from a calendar plugin. Both are gone.
 *   The calendar now inherits the theme's typography.
 * - Colours live in custom properties so a council can rebrand without editing
 *   this file. The naming follows beascout/style.css, which already
 *   established the --cw-* convention.
 *
 * FullCalendar 3.9.0 ships 2018-era Bootstrap-3-lookalike chrome. Most rules
 * below scope to #calendar-content, which beats FullCalendar's class selectors
 * without needing !important.
 */


/* -------------------------------------------------------------------------
 * Design tokens
 * ---------------------------------------------------------------------- */

:root {
    --cw-cal-accent: #003f87;          /* Scouting blue */
    --cw-cal-accent-hover: #00529b;
    --cw-cal-accent-active: #002f66;
    --cw-cal-accent-soft: #eaf1f9;
    --cw-cal-on-accent: #ffffff;

    --cw-cal-focus: #ffb81c;           /* Scouting gold, used only for focus */
    --cw-cal-success: #1f7a4d;
    --cw-cal-success-border: #17603c;
    --cw-cal-danger: #ce1126;
    --cw-cal-info: #0b6b8a;

    --cw-cal-surface: #ffffff;
    --cw-cal-surface-alt: #f5f7fa;
    --cw-cal-border: #d3d8de;
    --cw-cal-border-strong: #b4bcc6;
    --cw-cal-text: #1a1d21;
    --cw-cal-muted: #5b6470;

    --cw-cal-radius: 10px;
    --cw-cal-radius-sm: 6px;
    --cw-cal-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 12px rgba(16, 24, 40, .08);
    --cw-cal-shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);
}


/* -------------------------------------------------------------------------
 * Calendar toolbar
 * ---------------------------------------------------------------------- */

/**
 * Flexbox instead of FullCalendar's floats, so the three slots align on a
 * single baseline and wrap sensibly on narrow screens instead of collapsing.
 */

#calendar-content .fc-toolbar.fc-header-toolbar,
#calendar-content .fc-toolbar.fc-footer-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

#calendar-content .fc-toolbar.fc-footer-toolbar {
    margin-top: 16px;
    margin-bottom: 0;
}

#calendar-content .fc-toolbar .fc-left,
#calendar-content .fc-toolbar .fc-center,
#calendar-content .fc-toolbar .fc-right {
    float: none;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/**
 * Explicit order, because FullCalendar appends these sections in the order
 * left, right, center (see Toolbar.prototype.render) and depends on
 * float:left / float:right to put them where they belong. Dropping the floats
 * for flexbox handed positioning back to DOM order, which put the prev/next
 * group immediately after "today" and pushed the title to the far end.
 */

#calendar-content .fc-toolbar .fc-left {
    order: 1;
    justify-content: flex-start;
}

#calendar-content .fc-toolbar .fc-center {
    order: 2;
    justify-content: center;

    /* Sized to its content rather than filling the gap, so the two sides can
       balance it. */
    flex: 0 1 auto;
}

#calendar-content .fc-toolbar .fc-right {
    order: 3;
    justify-content: flex-end;
}

/**
 * Equal, flexible side rails. The obvious approach of letting the centre
 * section grow only centres the title within whatever space is left over, so
 * it drifts off true whenever the "today" button and the prev/next group are
 * different widths, which they always are. Giving both sides the same
 * flex-basis of 0 makes them equal, so the middle lands on the real centre of
 * the toolbar.
 */

#calendar-content .fc-toolbar .fc-left,
#calendar-content .fc-toolbar .fc-right {
    flex: 1 1 0;
}

/* FullCalendar floats every direct child and adds a left margin. */
#calendar-content .fc-toolbar > * > * {
    float: none;
    margin-left: 0;
}

/* The float clearer is redundant under flex and adds a stray flex item. */
#calendar-content .fc-toolbar .fc-clear {
    display: none;
}

/**
 * The month title is hidden, not removed. The picker toggle displays the same
 * "August 2026" text, so showing both prints the month twice. The element stays
 * in the DOM because cw-calendar-ui.js watches it to know when the calendar has
 * navigated, and display:none does not stop MutationObserver from firing.
 */

#calendar-content .fc-toolbar h2 {
    display: none;
}


/* -------------------------------------------------------------------------
 * Toolbar buttons
 * ---------------------------------------------------------------------- */

#calendar-content .fc-button {
    height: auto;
    padding: 8px 14px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    font-family: inherit;
    color: var(--cw-cal-text);
    background: var(--cw-cal-surface);
    background-image: none;
    border: 1px solid var(--cw-cal-border);
    border-radius: var(--cw-cal-radius-sm);
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;

    /* FullCalendar's locale strings are lowercase, so the button reads
       "today". Capitalising in CSS avoids forking the locale files. */
    text-transform: capitalize;
}

#calendar-content .fc-button:hover {
    background: var(--cw-cal-surface-alt);
    border-color: var(--cw-cal-border-strong);
    color: var(--cw-cal-text);
}

#calendar-content .fc-state-down,
#calendar-content .fc-state-active {
    background: var(--cw-cal-accent);
    border-color: var(--cw-cal-accent);
    color: var(--cw-cal-on-accent);
    box-shadow: none;
}

#calendar-content .fc-state-disabled {
    opacity: .4;
    box-shadow: none;
}

/**
 * Restore a visible focus ring. Both FullCalendar and this plugin's old
 * stylesheet set outline:none, which left keyboard users with no indication of
 * where they were.
 */

#calendar-content .fc-button:focus,
#calendar-content .fc-button:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 2px;
}

/* Pointer users get no ring on click, keyboard users keep it. */
#calendar-content .fc-button:focus:not(:focus-visible) {
    outline: none;
}

/* Segmented prev/next pair. */
#calendar-content .fc-button-group {
    display: inline-flex;
}

#calendar-content .fc-button-group > * {
    margin: 0;
}

#calendar-content .fc-button-group > *:not(:first-child) {
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#calendar-content .fc-button-group > *:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#calendar-content .fc-button-group > *:hover,
#calendar-content .fc-button-group > *:focus {
    /* Lift the hovered button so its full border is visible over its
       negative-margin neighbour. */
    position: relative;
    z-index: 1;
}


/* -------------------------------------------------------------------------
 * Prev / next arrows
 * ---------------------------------------------------------------------- */

/**
 * FullCalendar draws these as the characters U+2039 and U+203A in Courier New
 * at 200%, nudged with a percentage offset. They read as angle quotes rather
 * than chevrons and sit slightly off centre. Replaced with a rotated border
 * box, which stays crisp at any size and takes its colour from the button.
 */

#calendar-content .fc-icon {
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    overflow: visible;
    font-size: 1em;
}

#calendar-content .fc-icon:after {
    content: "";
}

#calendar-content .fc-icon-left-single-arrow:before,
#calendar-content .fc-icon-right-single-arrow:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .42em;
    height: .42em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    border-radius: 1px;
}

#calendar-content .fc-icon-left-single-arrow:before {
    transform: translate(-25%, -50%) rotate(135deg);
}

#calendar-content .fc-icon-right-single-arrow:before {
    transform: translate(-75%, -50%) rotate(-45deg);
}


/* -------------------------------------------------------------------------
 * Month / year picker
 * ---------------------------------------------------------------------- */

/**
 * Replaces the jQuery UI datepicker. A month grid navigates by month, so the
 * old day-level picker was asking for precision it then threw away.
 */

.cw-monthpicker {
    position: relative;
    display: inline-block;
}

.cw-monthpicker__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cw-cal-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cw-cal-radius-sm);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}

.cw-monthpicker__toggle:hover {
    background: var(--cw-cal-surface-alt);
    border-color: var(--cw-cal-border);
}

.cw-monthpicker__toggle:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 2px;
}

/* Calendar glyph, drawn in CSS. The old trigger was a 346-byte PNG that could
   not scale and had no retina variant. */
.cw-monthpicker__icon {
    position: relative;
    width: 16px;
    height: 15px;
    flex: none;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    opacity: .75;
}

.cw-monthpicker__icon:before {
    /* The binding rings across the top. */
    content: "";
    position: absolute;
    top: -1.5px;
    left: -1.5px;
    right: -1.5px;
    height: 4px;
    background: currentColor;
    border-radius: 2px 2px 0 0;
}

.cw-monthpicker__caret {
    width: 0;
    height: 0;
    flex: none;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid currentColor;
    opacity: .6;
    transition: transform .15s ease;
}

.cw-monthpicker__toggle[aria-expanded="true"] .cw-monthpicker__caret {
    transform: rotate(180deg);
}

.cw-monthpicker__panel {
    position: absolute;
    z-index: 1000; /* Below Bootstrap popovers at 1060. */
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: 264px;
    padding: 12px;
    background: var(--cw-cal-surface);
    border: 1px solid var(--cw-cal-border);
    border-radius: var(--cw-cal-radius);
    box-shadow: var(--cw-cal-shadow-lg);
    text-align: center;
}

.cw-monthpicker__panel[hidden] {
    display: none;
}

.cw-monthpicker__years {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cw-monthpicker__year {
    font-size: 16px;
    font-weight: 600;
    color: var(--cw-cal-text);
}

.cw-monthpicker__step {
    width: 32px;
    height: 32px;
    padding: 0;
    position: relative;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cw-cal-radius-sm);
    color: var(--cw-cal-muted);
    cursor: pointer;
}

.cw-monthpicker__step:hover {
    background: var(--cw-cal-surface-alt);
    border-color: var(--cw-cal-border);
    color: var(--cw-cal-text);
}

.cw-monthpicker__step:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 1px;
}

.cw-monthpicker__step:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
}

.cw-monthpicker__step--prev:before {
    transform: translate(-30%, -50%) rotate(135deg);
}

.cw-monthpicker__step--next:before {
    transform: translate(-70%, -50%) rotate(-45deg);
}

.cw-monthpicker__months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
}

.cw-monthpicker__month {
    padding: 9px 4px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--cw-cal-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cw-cal-radius-sm);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.cw-monthpicker__month:hover {
    background: var(--cw-cal-surface-alt);
}

.cw-monthpicker__month:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 1px;
}

/* The month the calendar is on. */
.cw-monthpicker__month.is-selected {
    background: var(--cw-cal-accent);
    border-color: var(--cw-cal-accent);
    color: var(--cw-cal-on-accent);
}

/* The real current month, when it is not the one being viewed. */
.cw-monthpicker__month.is-current:not(.is-selected) {
    border-color: var(--cw-cal-accent);
    color: var(--cw-cal-accent);
    font-weight: 600;
}

.cw-monthpicker__footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cw-cal-border);
}

.cw-monthpicker__today {
    width: 100%;
    padding: 8px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--cw-cal-accent);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--cw-cal-radius-sm);
    cursor: pointer;
}

.cw-monthpicker__today:hover {
    background: var(--cw-cal-surface-alt);
}

.cw-monthpicker__today:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 1px;
}


/* -------------------------------------------------------------------------
 * Calendar switcher
 * ---------------------------------------------------------------------- */

/**
 * Previously a bare browser default select with an inline margin and no class.
 * The chevron is an inline SVG data URI so it needs no image file.
 */

#calendarSelect {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 12px;
    padding: 9px 36px 9px 12px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.3;
    color: var(--cw-cal-text);
    background-color: var(--cw-cal-surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6470' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    border: 1px solid var(--cw-cal-border);
    border-radius: var(--cw-cal-radius-sm);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

#calendarSelect:hover {
    border-color: var(--cw-cal-border-strong);
}

#calendarSelect:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
 * Calendar grid
 * ---------------------------------------------------------------------- */

#calendar-content .fc-view,
#calendar-content .fc-view > table {
    z-index: 0;
}

#calendar-content table {
    margin: 0;
}

#calendar-content td.fc-head-container.fc-widget-header,
#calendar-content td.fc-widget-content {
    padding: 0;
}

/* Day-of-week header row. */
#calendar-content .fc-day-header {
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--cw-cal-muted);
    background: var(--cw-cal-surface-alt);
}

#calendar-content .fc-day-number {
    padding: 6px 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--cw-cal-muted);
}

#calendar-content .fc-other-month .fc-day-number {
    opacity: .45;
}

/* Today's cell, replacing FullCalendar's #fcf8e3 wash. */
#calendar-content .fc-today.fc-widget-content {
    background: var(--cw-cal-accent-soft);
}

#calendar-content .fc-today .fc-day-number {
    display: inline-block;
    min-width: 24px;
    margin: 4px 4px 0 4px;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--cw-cal-accent);
    color: var(--cw-cal-on-accent);
    font-weight: 600;
    text-align: center;
}

#calendar-content td.fc-event-container {
    padding: 2.5px 5px;
}

#calendar-content .fc-title {
    color: #fff;
}

#calendar-content .fc-day-grid-event {
    padding: 2px 5px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
}

#calendar-content .fc-content {
    cursor: pointer;
}


/* -------------------------------------------------------------------------
 * Wrapping event titles
 * ---------------------------------------------------------------------- */

/**
 * Opt in via [cw_calendar wrap_titles="true"] or the block's "Wrap long event
 * names" toggle, which puts .cw-wrap-titles on the calendar container.
 *
 * FullCalendar forces day-grid events onto a single line:
 *
 *     .fc-day-grid-event .fc-content { white-space: nowrap; overflow: hidden; }
 *
 * There is no text-overflow on that rule, so a title that does not fit is hard
 * clipped mid-word with nothing to signal it was cut. On a narrow column
 * "Popcorn Kickoff Meeting" can render as "Popcorn Kick".
 *
 * Only the month grid is affected. The list view used under 800px already
 * wraps, so none of this needs to touch it.
 */

.cw-wrap-titles .fc-day-grid-event .fc-content {
    white-space: normal;
    overflow: visible;
}

.cw-wrap-titles .fc-day-grid-event .fc-title {
    display: block;

    /* Hyphenation needs a lang attribute to pick a dictionary. WordPress puts
       one on <html>, so this inherits without any markup changes. Browsers
       without a dictionary for that language simply ignore it and fall back to
       the overflow-wrap rule below. */
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;

    /* Breaks a single word that is longer than the column even when hyphens
       cannot help, which is the case that actually overflows: a long unbroken
       string has no space to wrap at. break-word rather than anywhere, so
       ordinary words still prefer to move down whole. */
    overflow-wrap: break-word;
    word-wrap: break-word;

    white-space: normal;
}

/**
 * Let the row grow.
 *
 * All three calendar renderers pass contentHeight:'auto', so rows are not
 * rigid and this is normally redundant. It is here because a rigid row clips
 * with overflow:hidden and positions its content absolutely, which would
 * silently reinstate the truncation this option exists to remove if that
 * option is ever changed.
 */

.cw-wrap-titles .fc-row.fc-rigid {
    overflow: visible;
}

.cw-wrap-titles .fc-row.fc-rigid .fc-content-skeleton {
    position: relative;
}

.cw-wrap-titles .fc-day-grid-event {
    line-height: 1.25;
}


/* -------------------------------------------------------------------------
 * List view (used under 800px)
 * ---------------------------------------------------------------------- */

#calendar-content td.fc-list-item-title.fc-widget-content {
    padding-left: 0 !important;
    line-height: 1.3;
    padding-top: 8px;
    padding-bottom: 8px;
    cursor: pointer;
}

.fc-unthemed .fc-list-item:hover td {
    background: inherit !important;
}

.fc-list-item-title.fc-widget-content {
    color: #fff !important;
    text-indent: 5%;
}

.fc-list-table td {
    padding: 1% 5% !important;
}

.fc-ltr .fc-list-heading-main {
    margin-left: 0 !important;
}


/* -------------------------------------------------------------------------
 * Calendar subscribe link
 * ---------------------------------------------------------------------- */

/**
 * Had no styling at all and inherited whatever the theme did with a.button.
 * It sits inside #calendar-content, which is FullCalendar's own mount element,
 * so it lands after the grid.
 */

#calendar-content .calendar-feed {
    margin-top: 16px;
    text-align: right;
}

#calendar-content .calendar-feed .button {
    display: inline-block;
    padding: 9px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--cw-cal-accent);
    background: transparent;
    border: 1px solid var(--cw-cal-border);
    border-radius: var(--cw-cal-radius-sm);
    text-decoration: none;
    box-shadow: none;
}

#calendar-content .calendar-feed .button:hover {
    background: var(--cw-cal-surface-alt);
    border-color: var(--cw-cal-accent);
    color: var(--cw-cal-accent-hover);
}


/* -------------------------------------------------------------------------
 * Event grid  [cw_event_grid]
 * ---------------------------------------------------------------------- */

/**
 * Was floats at a fixed 30% with a single 400px breakpoint, so it went from
 * three columns straight to one and the cards were absolutely centred inside a
 * 200px minimum. Grid with auto-fit handles every width in between, and cards
 * size to their own content.
 */

.councilware-eventgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    clear: both;
    margin: 0 0 24px;
}

.eventgrid-event {
    display: flex;
    background-color: var(--cw-cal-surface);
    border: 1px solid var(--cw-cal-border);
    border-radius: var(--cw-cal-radius);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.eventgrid-event:hover {
    border-color: var(--cw-cal-accent);
    box-shadow: var(--cw-cal-shadow);
    transform: translateY(-2px);
}

.eventgrid-event > a {
    display: flex;
    flex: 1;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
}

.eventgrid-event > a:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: -2px;
}

.eventgrid-event .eventgrid-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    text-align: left;
}

.eventgrid-event .eventgrid-content h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    color: var(--cw-cal-text);
}

.eventgrid-event .event-location,
.eventgrid-event .event-duration {
    font-size: 14px;
    line-height: 1.4;
    color: var(--cw-cal-muted);
}

/* The date is the thing people scan for, so it leads visually. */
.eventgrid-event .event-duration {
    order: -1;
    font-weight: 600;
    color: var(--cw-cal-accent);
}

@media (prefers-reduced-motion: reduce) {
    .eventgrid-event {
        transition: none;
    }

    .eventgrid-event:hover {
        transform: none;
    }
}


/* -------------------------------------------------------------------------
 * Event list  [cw_event_list]
 * ---------------------------------------------------------------------- */

/* Had no styling whatsoever and fell back to raw theme list bullets. */

.eventlist ul {
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cw-cal-border);
}

.eventlist li {
    margin: 0;
    padding: 12px 0;
    border-bottom: 1px solid var(--cw-cal-border);
    font-size: 15px;
    line-height: 1.45;
    color: var(--cw-cal-muted);
}

.eventlist li a {
    display: inline-block;
    font-weight: 600;
    color: var(--cw-cal-accent);
    text-decoration: none;
}

.eventlist li a:hover {
    color: var(--cw-cal-accent-hover);
    text-decoration: underline;
}


/* -------------------------------------------------------------------------
 * Event buttons
 * ---------------------------------------------------------------------- */

/**
 * Used by [cw_event_button], [cw_event_registration_button] and the popover.
 * The !important flags are inherited from the previous stylesheet and are load
 * bearing: without them a theme's own a.button rules win. The values are custom
 * properties, so a site can still rebrand by redefining the token rather than
 * fighting the specificity.
 */

.event-page a.button,
.registration-page a.button {
    display: inline-block;
    padding: 11px 22px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    border-radius: var(--cw-cal-radius-sm);
    box-shadow: none;
    transition: background-color .15s ease;
}

.event-page a.button {
    background-color: var(--cw-cal-accent) !important;
    color: var(--cw-cal-on-accent) !important;
    border: 1px solid var(--cw-cal-accent) !important;
}

.event-page a.button:hover {
    background-color: var(--cw-cal-accent-hover) !important;
}

.registration-page a.button {
    background: var(--cw-cal-success) !important;
    color: var(--cw-cal-on-accent) !important;
    border: 1px solid var(--cw-cal-success-border) !important;
}

.registration-page a.button:hover {
    background: var(--cw-cal-success-border) !important;
}

.event-page a.button:focus-visible,
.registration-page a.button:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 2px;
}


/* -------------------------------------------------------------------------
 * Event popover
 * ---------------------------------------------------------------------- */

/**
 * The accent stripe used to come from a <style> block appended to every event's
 * popover body, each one written against the global .popover selector. Thirty
 * events on a month meant thirty competing rules and the last one won for all
 * of them. cw-calendar-ui.js now sets --cw-event-color on the individual
 * popover when it opens.
 */

.popover {
    border-left: 5px solid var(--cw-event-color, var(--cw-cal-accent));
    border-radius: var(--cw-cal-radius);
    box-shadow: var(--cw-cal-shadow-lg);
    font-family: inherit;
}

.popover-body {
    position: relative;
    padding: 16px 18px;
}

.popover h3 {
    margin: 0 28px 8px 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    word-break: normal;
    color: var(--cw-cal-text);
}

.popover-body .event-location,
.popover-body .event-duration {
    font-size: 14px;
    line-height: 1.45;
    color: var(--cw-cal-muted);
}

.popover-body .event-duration {
    font-weight: 600;
    color: var(--cw-cal-text);
}

/* Scoped to the popover. This used to be a bare button.close, which matched
   every close control on the page including the theme's own. */
.popover .close,
.popover .cw-popover-close {
    position: absolute;
    top: 10px;
    right: 12px;
    margin: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    font-size: 22px;
    line-height: 1;
    color: var(--cw-cal-muted);
    background: transparent;
    border: 0;
    border-radius: var(--cw-cal-radius-sm);
    cursor: pointer;
    opacity: .8;
}

.popover .close:hover {
    opacity: 1;
    background: var(--cw-cal-surface-alt);
}

.popover .close:focus-visible {
    outline: 2px solid var(--cw-cal-focus);
    outline-offset: 1px;
}

.popover-body .event-page,
.popover-body .registration-page {
    padding: 0 !important;
    margin-top: 12px;
    margin-bottom: 0;
    text-align: center;
    width: 100% !important;
}

.popover-body .button {
    width: 100% !important;
    margin-top: 0 !important;
    padding: 11px 20px !important;
    display: block !important;
}

/* Status messages, previously inline styles in render.php using Bootstrap 3's
   info and danger colours. */
.event-message {
    display: inline-block;
    margin: 2px 0;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.event-message--postponed {
    background-color: var(--cw-cal-info);
}

.event-message--cancelled {
    background-color: var(--cw-cal-danger);
}


/* -------------------------------------------------------------------------
 * Responsive
 * ---------------------------------------------------------------------- */

@media screen and (max-width: 800px) {
    #calendar-content .fc-toolbar.fc-header-toolbar {
        gap: 6px;
    }

    .cw-monthpicker__toggle {
        font-size: 16px;
        padding: 6px 10px;
    }

    #calendar-content .fc-button {
        padding: 7px 12px;
        font-size: 14px;
    }

    .fc-scroller.fc-day-grid-container {
        overflow: scroll !important;
    }

    #calendar-content .calendar-feed {
        text-align: left;
    }

    .popover.bs-popover-right {
        position: absolute;
        margin-left: -50%;
        right: 0;
    }
}

@media screen and (max-width: 480px) {
    /**
     * Below this the month name, the today button and the arrows stop fitting
     * on one line and the title gets squeezed. Give the title its own row and
     * put the controls underneath, rather than letting flex shrink everything
     * until the month is unreadable.
     */

    #calendar-content .fc-toolbar.fc-header-toolbar,
    #calendar-content .fc-toolbar.fc-footer-toolbar {
        flex-wrap: wrap;
        row-gap: 4px;
    }

    #calendar-content .fc-toolbar .fc-center {
        order: 1;
        flex: 1 0 100%;
    }

    #calendar-content .fc-toolbar .fc-left {
        order: 2;
    }

    #calendar-content .fc-toolbar .fc-right {
        order: 3;
    }
}

@media screen and (max-width: 420px) {
    /* Keep the picker panel on screen when the toolbar is near the viewport
       edge; the centred transform alone can push it off. */
    .cw-monthpicker__panel {
        width: calc(100vw - 32px);
        max-width: 264px;
    }
}