/**
 * The calendar, drawn in the hall's own page.
 *
 * Deliberately light-touch: inherits the theme's font and colours rather than
 * imposing its own, and everything sizeable is a custom property so a hall or
 * their designer can change it from the theme without fighting specificity.
 */

.vhh-calendar {
    /* Derived from the theme's own text colour rather than from the visitor's
       operating system. A hall's site is light or dark because its theme says
       so, and prefers-color-scheme would have had us drawing white lines on a
       white page for anybody whose laptop happens to be in dark mode. A mid
       grey is the fallback because it is legible either way. */
    --vhh-border: rgba(128, 128, 128, 0.35);
    --vhh-muted: rgba(128, 128, 128, 1);
    --vhh-wash: rgba(128, 128, 128, 0.08);
    --vhh-accent: currentColor;
    --vhh-radius: 8px;
    --vhh-day-min-height: 5.5rem;

    font: inherit;
    color: inherit;

    /* A column, purely so the colour key can be moved above the grid on a
       narrow screen. Set here rather than inside the container query below,
       because an element cannot be restyled by a container it declares itself.
       Its children are full-width blocks either way, so nothing else moves. */
    display: flex;
    flex-direction: column;

    /* Lets the rules below ask how wide this box is rather than how wide the
       screen is. Named, so a theme's own container queries cannot collide. */
    container: vhh-calendar / inline-size;
}

@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .vhh-calendar {
        --vhh-border: color-mix(in srgb, currentColor 22%, transparent);
        --vhh-muted: color-mix(in srgb, currentColor 65%, transparent);
        --vhh-wash: color-mix(in srgb, currentColor 6%, transparent);
    }
}

.vhh-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.vhh-calendar__month {
    margin: 0;
    font-size: 1.15em;
    text-align: center;
}

.vhh-calendar__nav {
    text-decoration: none;
    font-size: 0.9em;
    padding: 0.35em 0.75em;
    border: 1px solid var(--vhh-border);
    border-radius: var(--vhh-radius);
    white-space: nowrap;
}

.vhh-calendar__nav:empty {
    border: 0;
}

/* Scrolls sideways on a phone rather than squeezing seven columns to nothing. */
.vhh-calendar__grid {
    border: 1px solid var(--vhh-border);
    border-radius: var(--vhh-radius);
    overflow: hidden;
}

.vhh-calendar__row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.vhh-calendar__heading {
    padding: 0.5rem 0.35rem;
    text-align: center;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vhh-muted);
    border-bottom: 1px solid var(--vhh-border);
}

.vhh-calendar__day {
    min-height: var(--vhh-day-min-height);
    padding: 0.35rem;
    border-top: 1px solid var(--vhh-border);
    border-right: 1px solid var(--vhh-border);
}

.vhh-calendar__row--head .vhh-calendar__heading:last-child,
.vhh-calendar__day:nth-child(7n) {
    border-right: 0;
}

.vhh-calendar__day--empty {
    background: var(--vhh-wash);
}

.vhh-calendar__day--today .vhh-calendar__date {
    font-weight: 700;
    text-decoration: underline;
}

.vhh-calendar__date {
    display: block;
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.25rem;
}

.vhh-calendar__events {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vhh-calendar__event {
    --vhh-event-colour: var(--vhh-accent);

    font-size: 0.72em;
    line-height: 1.35;
    margin: 0 0 0.2rem;
    padding: 0.15rem 0.3rem;
    border-left: 3px solid var(--vhh-event-colour);
    border-radius: 3px;
    background: var(--vhh-wash);
}

.vhh-calendar__time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vhh-calendar__title {
    font-weight: 600;
}

.vhh-calendar__room {
    display: block;
    color: var(--vhh-muted);
}

.vhh-calendar__legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    font-size: 0.8em;
}

.vhh-calendar__legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.vhh-calendar__swatch {
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    display: inline-block;
}

/* Sized by how much room the calendar actually has, not by the size of the
   screen. A theme's content column is often 600-700px on a large monitor, so a
   viewport query would leave seven columns crushed into that while insisting
   there was plenty of space. What matters is the width of this box. */
@container vhh-calendar (max-width: 700px) {
    /* On the cell, not on .vhh-calendar: an element cannot be restyled by a
       container query it declares itself, only its descendants can. */
    .vhh-calendar__day {
        min-height: 4rem;
    }

    .vhh-calendar__event {
        font-size: 0.66em;
    }

    .vhh-calendar__room {
        display: none;
    }
}

/* The dots and the list, both hidden until the calendar is too narrow to hold
   readable text. */
.vhh-calendar__dots {
    display: none;
    flex-wrap: wrap;
    gap: 3px;
}

.vhh-calendar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: block;
    flex: none;
    background: var(--vhh-accent, currentColor);
}

.vhh-calendar__agenda {
    display: none;
    margin-top: 1rem;
}

.vhh-calendar__agenda-day {
    font-size: 0.95em;
    font-weight: 700;
    margin: 1rem 0 0.35rem;
}

.vhh-calendar__agenda-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.vhh-calendar__agenda-item {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--vhh-border);
    font-size: 0.9em;
}

.vhh-calendar__agenda-item .vhh-calendar__dot {
    align-self: center;
}

.vhh-calendar__agenda-time {
    font-variant-numeric: tabular-nums;
    color: var(--vhh-muted);
    white-space: nowrap;
}

.vhh-calendar__agenda-room {
    color: var(--vhh-muted);
}

.vhh-calendar__agenda-empty {
    font-size: 0.9em;
    color: var(--vhh-muted);
    margin: 0.5rem 0 0;
}

@container vhh-calendar (max-width: 520px) {
    .vhh-calendar__day {
        min-height: 3.25rem;
    }

    /* There is no honest way to show times and titles in a column under 70px
       wide. The cell keeps a dot per booking so the month still reads as an
       availability overview, and the list below carries the detail - which
       used to live in a title tooltip no touch screen can show. */
    .vhh-calendar__event {
        display: none;
    }

    .vhh-calendar__dots {
        display: flex;
    }

    .vhh-calendar__agenda {
        display: block;
    }

    /* Above the grid, where the colours are first met. A key a screen further
       down explains them too late to be any use. */
    .vhh-calendar__legend {
        order: -1;
        margin: 0 0 0.75rem;
    }
}

/* For browsers without container queries, which cannot know better than the
   viewport. Narrow screens are the case they get right anyway. */
@supports not (container-type: inline-size) {
    @media (max-width: 700px) {
        .vhh-calendar {
            --vhh-day-min-height: 4rem;
        }

        .vhh-calendar__room {
            display: none;
        }
    }
}


/* The upcoming list. Shares the calendar's colours so a page using both looks
   like one thing rather than two. */
.vhh-whats-on {
    list-style: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    container: vhh-whats-on / inline-size;
}

.vhh-whats-on__item {
    --vhh-event-colour: var(--vhh-accent, currentColor);
    --vhh-border: rgba(128, 128, 128, 0.35);
    --vhh-muted: rgba(128, 128, 128, 1);

    display: flex;
    align-items: baseline;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--vhh-border);
}

.vhh-whats-on__item:last-child {
    border-bottom: 0;
}

@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .vhh-whats-on__item {
        --vhh-border: color-mix(in srgb, currentColor 18%, transparent);
        --vhh-muted: color-mix(in srgb, currentColor 65%, transparent);
    }
}

.vhh-whats-on__date {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 2.6em;
    padding: 0.3em 0;
    border-left: 3px solid var(--vhh-event-colour);
    padding-left: 0.55em;
    line-height: 1.1;
}

.vhh-whats-on__day {
    font-size: 1.25em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.vhh-whats-on__mon {
    font-size: 0.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vhh-muted);
}

.vhh-whats-on__detail {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    min-width: 0;
}

.vhh-whats-on__title {
    font-weight: 600;
}

.vhh-whats-on__meta {
    font-size: 0.82em;
    color: var(--vhh-muted);
}

.vhh-whats-on__empty {
    color: var(--vhh-muted, inherit);
    font-style: italic;
    margin: 0;
}

/* Room filters ------------------------------------------------------------ */

.vhh-calendar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.vhh-calendar__filter {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    font-size: 0.8em;
    line-height: 1;
    padding: 0.45em 0.85em;
    border: 1px solid var(--vhh-border);
    border-radius: 999px;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

/* The chosen room is filled and bolder, so which one you are looking at reads
   at a glance rather than depending on telling two greys apart. One rule, so
   there is nothing here quietly overriding anything else. */
.vhh-calendar__filter.is-selected {
    background: rgba(128, 128, 128, 0.18);
    border-color: rgba(128, 128, 128, 0.55);
    font-weight: 600;
}

@supports (color: color-mix(in srgb, currentColor 20%, transparent)) {
    .vhh-calendar__filter.is-selected {
        background: color-mix(in srgb, currentColor 12%, transparent);
        border-color: color-mix(in srgb, currentColor 45%, transparent);
    }
}

/* While a month or a room is loading. Deliberately gentle: the old month stays
   readable and only dims, because a calendar that blanks out and comes back is
   more unsettling than one that takes a moment. */
.vhh-calendar.is-loading {
    opacity: 0.6;
    transition: opacity 120ms ease-in;
}

@media (prefers-reduced-motion: reduce) {
    .vhh-calendar.is-loading {
        transition: none;
    }
}