/* Defaults live inside :where() deliberately — it contributes ZERO
   specificity, so any normal site/theme CSS rule targeting .aoa-calendar
   (Cornerstone custom CSS included) always wins regardless of which
   stylesheet happens to load later in the page. No !important required,
   here or in any override. */
:where(.aoa-calendar) {
    --aoa-cal-bg: #ffffff;
    --aoa-cal-text: #1a1a1a;
    --aoa-cal-muted: #8a8f98;
    --aoa-cal-border: #d8dde3;
    --aoa-cal-primary: #011d39;      /* hover/active, status text, active tab */
    --aoa-cal-highlight: var(--aoa-cal-primary); /* today's border/date colour — override with something brighter for real emphasis */
    --aoa-cal-accent: #ffb9c6;       /* currently unused by default — free for site-specific use */
    --aoa-cal-disabled-opacity: 0.4;
    --aoa-cal-font: inherit;
    --aoa-cal-font-heading: inherit;
    --aoa-cal-radius: 8px;
    --aoa-cal-glow: none; /* box-shadow value — e.g. 0 0 12px rgba(95,217,122,0.5) for a glow on hover/active states */
    --aoa-cal-list-date-width: 74px; /* width of the date column in the mobile list */
}

.aoa-calendar {
    font-family: var(--aoa-cal-font);
    color: var(--aoa-cal-text);
    background: var(--aoa-cal-bg);
    padding: 18px;
    border-radius: var(--aoa-cal-radius);
    position: relative;
}

.aoa-calendar--scroll { max-width: none; width: 100%; padding: 0; }
.aoa-calendar--month  { max-width: none; width: 100%; }

/* ---- Month tabs (scroll view) — border + text colour, no filled block ---- */

.aoa-calendar__month-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--aoa-cal-border) transparent;
}

.aoa-calendar__month-tabs::-webkit-scrollbar {
    height: 6px;
}

.aoa-calendar__month-tabs::-webkit-scrollbar-track {
    background: transparent;
}

.aoa-calendar__month-tabs::-webkit-scrollbar-thumb {
    background: var(--aoa-cal-border);
    border-radius: 3px;
}

.aoa-calendar__month-tab {
    flex: 0 0 auto;
    padding: 8px 16px;
    background: none;
    border: 1px solid var(--aoa-cal-border);
    border-radius: 999px;
    color: var(--aoa-cal-muted);
    font-family: inherit;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.aoa-calendar__month-tab.is-active {
    border-color: var(--aoa-cal-primary);
    color: var(--aoa-cal-primary);
    font-weight: 700;
}

.aoa-calendar__month-tab:focus-visible {
    outline: none;
    border-color: var(--aoa-cal-primary);
}

/* ---- Date scroller (scroll view) ---- */

.aoa-calendar__scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 2px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--aoa-cal-border) transparent;
    transition: opacity 0.15s ease;
}

.aoa-calendar__scroller::-webkit-scrollbar {
    height: 6px;
}

.aoa-calendar__scroller::-webkit-scrollbar-track {
    background: transparent;
}

.aoa-calendar__scroller::-webkit-scrollbar-thumb {
    background: var(--aoa-cal-border);
    border-radius: 3px;
}

.aoa-calendar__scroller.is-loading,
.aoa-calendar__grid.is-loading {
    opacity: 0.4;
    pointer-events: none;
}

.aoa-calendar__sr-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Scroll-view cards are just a wider variant of the same day cell used in
   the month grid below — same header/body/status structure, same colours,
   just more horizontal room. */
.aoa-calendar__day--card {
    flex: 0 0 auto;
    width: 150px;
    min-height: auto;
    padding: 14px 12px;
}

.aoa-calendar__card-header {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.aoa-calendar__card-tonight {
    font-family: var(--aoa-cal-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aoa-cal-primary);
}

.aoa-calendar__card-weekday {
    font-family: var(--aoa-cal-font-heading);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aoa-cal-muted);
}

.aoa-calendar__card-date {
    font-family: var(--aoa-cal-font-heading);
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* ---- Month view ---- */

.aoa-calendar__month {
    display: none;
}

.aoa-calendar--month .aoa-calendar__month { display: block; }
.aoa-calendar--scroll .aoa-calendar__scroll-view { display: block; }

.aoa-calendar__month-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.aoa-calendar__month-label {
    font-family: var(--aoa-cal-font-heading);
    font-weight: 600;
    font-size: 18px;
}

.aoa-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--aoa-cal-bg);
    color: var(--aoa-cal-text);
    border: 1px solid var(--aoa-cal-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.aoa-calendar__nav svg {
    display: block;
}

.aoa-calendar__nav:hover:not(:disabled) {
    border-color: var(--aoa-cal-primary);
    color: var(--aoa-cal-primary);
}

.aoa-calendar__nav:focus-visible {
    outline: none;
    border-color: var(--aoa-cal-primary);
    box-shadow: var(--aoa-cal-glow);
}

.aoa-calendar__nav:disabled {
    opacity: var(--aoa-cal-disabled-opacity);
    cursor: not-allowed;
}

.aoa-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 6px;
}

.aoa-calendar__weekdays span {
    text-align: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--aoa-cal-muted);
}

.aoa-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    transition: opacity 0.15s ease;
}

/* Every grid cell carries both a bare day number and the fuller
   "Mon / 17 MAY" header. The grid shows the number; the mobile list
   below swaps them over. */
.aoa-calendar__grid .aoa-calendar__card-header {
    display: none;
}

/* ---- Day cell — shared, identical styling, by the month grid and the
   date scroller. The only difference between the two is the header (a
   bare day number in the grid, a fuller "Tonight / 17 May" header on
   scroll cards, set in calendar.js) — the event content below it is
   styled exactly the same either way. ---- */

.aoa-calendar__day {
    position: relative; /* anchor for the moon phase disc */
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 112px;
    padding: 10px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.aoa-calendar__day.has-date {
    border-color: var(--aoa-cal-border);
    background: var(--aoa-cal-bg);
}

.aoa-calendar__day.has-date:hover,
.aoa-calendar__day.has-date:focus-within {
    border-color: var(--aoa-cal-primary);
    box-shadow: var(--aoa-cal-glow);
    transform: translateY(-1px);
}

.aoa-calendar__day-num {
    font-size: 13px;
    font-weight: 600;
    color: var(--aoa-cal-muted);
}

.aoa-calendar__day.has-date .aoa-calendar__day-num {
    color: var(--aoa-cal-text);
}

/* Today is marked with a brighter border and highlighted date text —
   never a filled block, consistent with everything else in the widget. */
.aoa-calendar__day.is-today {
    border-color: var(--aoa-cal-highlight);
    border-width: 2px;
}

.aoa-calendar__day.is-today .aoa-calendar__day-num,
.aoa-calendar__day.is-today .aoa-calendar__card-date {
    color: var(--aoa-cal-highlight);
}

/* Dashed cell border for sold out / cancelled dates — the one place a
   border style still carries meaning, now that the event itself has no
   border of its own. */
.aoa-calendar__day:has(> .aoa-calendar__event.is-sold_out),
.aoa-calendar__day:has(> .aoa-calendar__event.is-cancelled),
.aoa-calendar__day:has(> .aoa-calendar__event.is-closed) {
    border-style: dashed;
}

/* ---- Moon phase ----
   Every date carries its phase in the top corner: Ragnell keeps the old
   calendar, so the calendar shows it. Drawn as a real lit shape rather than
   one of eight stock icons, so the waxing and waning nights either side of
   a full moon actually look different from each other.

   Deliberately quiet. The four principal phases come forward in the accent
   colour; every night in between sits back in the muted tone, and nights
   with no walk on them fade further still. */

.aoa-calendar__moon {
    position: absolute;
    top: 8px;
    right: 8px;
    display: block;
    width: 14px;
    height: 14px;
    opacity: 0.4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.aoa-calendar__moon svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.aoa-calendar__moon-disc {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.45;
}

.aoa-calendar__moon-lit {
    fill: currentColor;
    stroke: none;
}

.aoa-calendar__day .aoa-calendar__moon {
    color: var(--aoa-cal-muted);
}

.aoa-calendar__day.has-date .aoa-calendar__moon {
    opacity: 0.65;
}

/* New, first quarter, full, last quarter — the nights the folklore
   calendar is actually built around. */
.aoa-calendar__moon.is-principal {
    opacity: 0.85;
}

.aoa-calendar__day.has-date .aoa-calendar__moon.is-principal {
    color: var(--aoa-cal-primary);
    opacity: 1;
}

.aoa-calendar__day.has-date:hover .aoa-calendar__moon,
.aoa-calendar__day.has-date:focus-within .aoa-calendar__moon {
    opacity: 1;
}

/* The day number sits top left, so reserve the corner rather than let a
   two-digit date run under the disc. */
.aoa-calendar__grid .aoa-calendar__day-num {
    padding-right: 18px;
}

/* One event per occurrence — a real link, clicking it IS the booking
   action. No separate "select date, then click Book Now" step anywhere
   in this plugin. Fills the remaining height of the cell and pins the
   status line to the bottom regardless of how much content (time only,
   or time + a wrapped theme) sits above it, so cells in the same row
   line up cleanly without a fixed height guess. */
.aoa-calendar__event {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 6px;
    border: none;
    padding: 0;
    background: none;
    text-decoration: none;
    color: var(--aoa-cal-text);
    font-family: inherit;
    cursor: pointer;
}

.aoa-calendar__event-main {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.aoa-calendar__event-time {
    text-transform: uppercase;
    color: var(--aoa-cal-muted);
    font-weight: 600;
    font-size: 13px;
}

.aoa-calendar__event-theme {
    display: block;
    color: var(--aoa-cal-text);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.aoa-calendar__event-status {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--aoa-cal-primary);
}

.aoa-calendar__event.is-sold_out,
.aoa-calendar__event.is-cancelled {
    opacity: var(--aoa-cal-disabled-opacity);
    color: var(--aoa-cal-muted);
    text-decoration: line-through;
    cursor: default;
}

/* 'Closed' (cutoff passed, not sold out/cancelled) — dimmed like the
   others but no strikethrough, the walk itself isn't off, it's just not
   bookable through this calendar any more. */
.aoa-calendar__event.is-closed {
    opacity: var(--aoa-cal-disabled-opacity);
    color: var(--aoa-cal-muted);
    cursor: default;
}

.aoa-calendar__empty {
    color: var(--aoa-cal-muted);
    font-size: 13px;
    grid-column: 1 / -1;
    margin: 8px 0 0;
}

/* =============================================================================
   Special night details
   ==========================================================================
   A date with WYSIWYG details renders its chip as a <button> rather than a
   link, so it needs the usual button reset to sit identically alongside the
   <a> and <span> variants.
   ========================================================================== */

button.aoa-calendar__event {
    width: 100%;
    text-align: left;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    letter-spacing: inherit;
}

button.aoa-calendar__event:focus-visible {
    outline: 2px solid var(--aoa-cal-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* A quiet affordance that there's something behind this one. */
.aoa-calendar__day.has-details .aoa-calendar__event-status::after {
    content: ' \203A';
    font-weight: 700;
}

.aoa-calendar__dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: min(80vh, 720px);
    padding: 28px;
    border: 1px solid var(--aoa-cal-border);
    border-radius: var(--aoa-cal-radius);
    background: var(--aoa-cal-bg);
    color: var(--aoa-cal-text);
    font-family: var(--aoa-cal-font);
    overflow: auto;
    position: relative;
}

.aoa-calendar__dialog::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

/* Fallback for browsers without showModal() — the element is toggled with
   a plain [open] attribute instead and has to position itself. Keyed off a
   class the script adds, not :modal: a browser old enough to need this path
   is old enough not to understand :modal, and an unknown pseudo-class
   invalidates the whole rule in exactly the browsers it was meant for. */
.aoa-calendar-dialog-open { overflow: hidden; }

.aoa-calendar__dialog.is-fallback[open] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.6);
}

.aoa-calendar__dialog:not([open]) { display: none; }

.aoa-calendar__dialog-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    color: var(--aoa-cal-muted);
    border: 1px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.aoa-calendar__dialog-close:hover,
.aoa-calendar__dialog-close:focus-visible {
    outline: none;
    color: var(--aoa-cal-primary);
    border-color: var(--aoa-cal-border);
}

.aoa-calendar__dialog-when {
    margin: 0 0 4px;
    padding-right: 40px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aoa-cal-muted);
}

.aoa-calendar__dialog-title {
    margin: 0 0 16px;
    padding-right: 40px;
    font-family: var(--aoa-cal-font-heading);
    font-size: 24px;
    line-height: 1.2;
    color: var(--aoa-cal-text);
}

.aoa-calendar__dialog-title:empty { display: none; }

.aoa-calendar__dialog-content {
    font-size: 15px;
    line-height: 1.6;
}

.aoa-calendar__dialog-content > :first-child { margin-top: 0; }
.aoa-calendar__dialog-content > :last-child { margin-bottom: 0; }

.aoa-calendar__dialog-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
}

.aoa-calendar__dialog-book {
    display: inline-block;
    margin-top: 22px;
    padding: 12px 22px;
    border: 1px solid var(--aoa-cal-primary);
    border-radius: 999px;
    color: var(--aoa-cal-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.aoa-calendar__dialog-book:hover,
.aoa-calendar__dialog-book:focus-visible {
    outline: none;
    box-shadow: var(--aoa-cal-glow);
}

.aoa-calendar__dialog-book[hidden] { display: none; }

/* =============================================================================
   Mobile list (month view)
   =============================================================================
   Below the breakpoint the month grid collapses to a single-column list of
   only the dates that actually have a walk on, newest first, month header
   and prev/next nav unchanged. Purely additive: everything above stays the
   desktop presentation, so [aoa_calendar_month mobile="grid"] opts out by
   simply not carrying the --mobile-list class.

   Past dates never appear because the REST layer stops at today, so the
   current month's list is naturally month-to-date.
   ========================================================================== */

@media (max-width: 767px) {

    .aoa-calendar--mobile-list .aoa-calendar__weekdays {
        display: none;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    /* Leading blank cells only mean something in a 7-column grid, and an
       empty day is just noise in a list. */
    .aoa-calendar--mobile-list .aoa-calendar__spacer,
    .aoa-calendar--mobile-list .aoa-calendar__grid > .aoa-calendar__day:not(.has-date) {
        display: none;
    }

    /* Every cell is hidden until its data lands, so without this the
       month header would sit on nothing and the list would pop in under
       it. Roughly two rows' worth of held space. */
    .aoa-calendar--mobile-list .aoa-calendar__grid.is-loading {
        min-height: 160px;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__day {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-height: 0;
        padding: 14px;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__day:hover,
    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__day:focus-within {
        transform: none;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__day-num {
        display: none;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__card-header {
        display: flex;
        flex: 0 0 var(--aoa-cal-list-date-width);
        margin-bottom: 0;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__event {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    /* In the single-column list the cell is a row, and its top right corner
       is occupied by the status line. The disc joins the flow between the
       date and the event instead of being pinned over it. */
    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__moon {
        position: static;
        flex: 0 0 auto;
        align-self: center;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__day-num {
        padding-right: 0;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__event-main {
        flex: 1;
        gap: 2px;
    }

    .aoa-calendar--mobile-list .aoa-calendar__grid .aoa-calendar__event-status {
        flex: 0 0 auto;
        text-align: right;
    }

    .aoa-calendar--mobile-list .aoa-calendar__empty {
        margin: 0;
    }

    .aoa-calendar__dialog {
        padding: 22px 18px 24px;
        max-height: 88vh;
    }

    .aoa-calendar__dialog-title {
        font-size: 20px;
    }

    .aoa-calendar__dialog-book {
        display: block;
        text-align: center;
    }
}