/* Business Hours Pro - Frontend Styles */

/* Block wrapper - default no margin/padding */
.bhp-block-wrapper {
    margin: 0;
    padding: 0;
}

.bhp-hours-widget {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--bhp-text-color, inherit);
    text-align: center;
    padding: var(--bhp-inner-padding-top, 0) var(--bhp-inner-padding-right, 0) var(--bhp-inner-padding-bottom, 0) var(--bhp-inner-padding-left, 0);
    margin: 0;
}

.bhp-hours-widget .bhp-title {
    font-size: var(--bhp-title-font-size, 1.5rem);
    font-weight: 700;
    margin: 0 0 15px 0;
    color: var(--bhp-title-color, inherit);
    text-align: var(--bhp-title-align, center);
}

.bhp-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--bhp-row-gap, 6px);
    background: var(--bhp-list-bg, transparent);
    padding: var(--bhp-list-padding, 0);
    border-radius: var(--bhp-list-border-radius, 0);
}

.bhp-hours-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--bhp-column-gap, 0.5em);
    font-size: 1rem;
    line-height: var(--bhp-line-height, 1.5);
    padding: var(--bhp-row-padding-v, 4px) var(--bhp-row-padding-h, 12px);
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

/* Today highlight - subtle background. --pal-today-highlight is a Palette
   Kit component role (includes/palette.php); the chain deliberately does
   NOT continue to --pal-accent, because a flat accent behind inherited
   body text is exactly the wash-vs-solid mismatch the role map should
   decide, not this stylesheet. Unmapped, the neutral wash stands. */
.bhp-hours-row.bhp-today {
    background-color: var(--bhp-today-bg-color, var(--pal-today-highlight, rgba(128, 128, 128, 0.1)));
    color: var(--bhp-today-color, inherit);
    font-weight: 600;
}

/* Alternative today highlight styles (can be toggled via CSS class) */
.bhp-hours-widget.highlight-underline .bhp-hours-row.bhp-today {
    background: none;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    opacity: 0.5;
}

.bhp-hours-widget.highlight-dot .bhp-hours-row.bhp-today::before {
    content: "\2022";
    margin-right: 8px;
    color: #4ade80;
}

/* ——— Granular text element styles ——— */

.bhp-day {
    font-size: var(--bhp-day-font-size, inherit);
    color: var(--bhp-day-color, inherit);
    white-space: nowrap;
}

.bhp-day-separator {
    font-size: var(--bhp-day-font-size, inherit);
    margin-right: 0.3em;
    white-space: nowrap;
}

.bhp-time-ranges {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0;
}

.bhp-range-comma {
    margin-right: 0.35em;
    font-size: var(--bhp-dash-font-size, inherit);
}

/* ═══════════════════════════════════════════════════════
   Layout: Grid (aligned columns via subgrid)
   ═══════════════════════════════════════════════════════ */

.bhp-hours-widget.layout-grid .bhp-hours-list {
    display: grid;
    grid-template-columns: auto auto 1fr;
    row-gap: var(--bhp-row-gap, 6px);
    column-gap: 0;
}

.bhp-hours-widget.layout-grid .bhp-hours-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    column-gap: var(--bhp-column-gap, 0.3em);
    align-items: start;
    padding: var(--bhp-row-padding-v, 4px) var(--bhp-row-padding-h, 12px);
}

.bhp-hours-widget.layout-grid .bhp-day {
    justify-self: start;
    text-align: left;
}

.bhp-hours-widget.layout-grid .bhp-day-separator {
    justify-self: center;
    margin-right: 0;
}

.bhp-hours-widget.layout-grid .bhp-time-ranges,
.bhp-hours-widget.layout-grid .bhp-time-closed {
    justify-self: start;
}

.bhp-hours-widget.layout-grid .bhp-stacked-ranges {
    align-items: flex-start;
}

/* Stacked ranges: vertical stack */
.bhp-stacked-ranges {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    line-height: var(--bhp-line-height, 1.5);
}

.bhp-stacked-range {
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   Layout: Grid Centered (colon centered in container)
   ═══════════════════════════════════════════════════════════ */

.bhp-hours-widget.layout-grid-centered .bhp-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--bhp-row-gap, 6px);
}

.bhp-hours-widget.layout-grid-centered .bhp-hours-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    column-gap: var(--bhp-column-gap, 0.3em);
    align-items: start;
}

.bhp-hours-widget.layout-grid-centered .bhp-day {
    justify-self: end;
    text-align: right;
}

.bhp-hours-widget.layout-grid-centered .bhp-day-separator {
    justify-self: center;
    margin-right: 0;
}

.bhp-hours-widget.layout-grid-centered .bhp-time-ranges,
.bhp-hours-widget.layout-grid-centered .bhp-time-closed {
    justify-self: start;
}

.bhp-hours-widget.layout-grid-centered .bhp-stacked-ranges {
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   Layout: Grid Right (hours flush right)
   ═══════════════════════════════════════════════════════════ */

.bhp-hours-widget.layout-grid-right .bhp-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--bhp-row-gap, 6px);
}

.bhp-hours-widget.layout-grid-right .bhp-hours-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--bhp-column-gap, 0.3em);
    align-items: start;
}

.bhp-hours-widget.layout-grid-right .bhp-day {
    justify-self: end;
    text-align: right;
}

.bhp-hours-widget.layout-grid-right .bhp-day-separator {
    justify-self: center;
    margin-right: 0;
}

.bhp-hours-widget.layout-grid-right .bhp-time-ranges,
.bhp-hours-widget.layout-grid-right .bhp-time-closed {
    justify-self: end;
    text-align: right;
}

.bhp-hours-widget.layout-grid-right .bhp-stacked-ranges {
    align-items: flex-end;
}

/* ═══════════════════════════════════════════════════════════
   Layout: Columns (day right-aligned · : · hours left)
   ═══════════════════════════════════════════════════════════ */

.bhp-hours-widget.layout-columns .bhp-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--bhp-row-gap, 6px);
}

.bhp-hours-widget.layout-columns .bhp-hours-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: var(--bhp-column-gap, 0.3em);
    align-items: start;
}

.bhp-hours-widget.layout-columns .bhp-day {
    justify-self: end;
    text-align: right;
}

.bhp-hours-widget.layout-columns .bhp-day-separator {
    justify-self: center;
    margin-right: 0;
}

.bhp-hours-widget.layout-columns .bhp-time-ranges,
.bhp-hours-widget.layout-columns .bhp-time-closed {
    justify-self: start;
}

.bhp-hours-widget.layout-columns .bhp-stacked-ranges {
    align-items: flex-start;
}

/* ═══════════════════════════════════════════════════════════
   Layout: Table (day left-aligned · : · hours left)
   ═══════════════════════════════════════════════════════════ */

.bhp-hours-widget.layout-table .bhp-hours-list {
    display: flex;
    flex-direction: column;
    gap: var(--bhp-row-gap, 6px);
}

.bhp-hours-widget.layout-table .bhp-hours-row {
    display: grid;
    grid-template-columns: auto auto 1fr;
    column-gap: var(--bhp-column-gap, 0.3em);
    align-items: start;
}

.bhp-hours-widget.layout-table .bhp-day {
    justify-self: start;
    text-align: left;
}

.bhp-hours-widget.layout-table .bhp-day-separator {
    justify-self: center;
    margin-right: 0;
}

.bhp-hours-widget.layout-table .bhp-time-ranges,
.bhp-hours-widget.layout-table .bhp-time-closed {
    justify-self: start;
}

.bhp-hours-widget.layout-table .bhp-stacked-ranges {
    align-items: flex-start;
}

/* ——— Layout: Stacked ——— */

.bhp-hours-widget.layout-stacked .bhp-hours-row {
    justify-content: center;
}

.bhp-hours-widget.layout-stacked .bhp-stacked-ranges {
    align-items: center;
}

/* ——— Layout: Inline ——— */

.bhp-hours-widget.layout-inline .bhp-hours-row {
    justify-content: center;
}

.bhp-time {
    display: inline-flex;
    align-items: baseline;
    white-space: nowrap;
    flex-wrap: nowrap;
    color: var(--bhp-hours-color, inherit);
}

.bhp-time-num {
    font-size: var(--bhp-time-font-size, inherit);
}

.bhp-time-period {
    font-size: var(--bhp-period-font-size, inherit);
}

.bhp-time-dash {
    font-size: var(--bhp-dash-font-size, inherit);
}

.bhp-time-closed {
    font-size: var(--bhp-time-font-size, inherit);
    color: var(--bhp-closed-color, inherit);
    white-space: nowrap;
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .bhp-hours-widget {
        padding: var(--bhp-inner-padding-top, 0) var(--bhp-inner-padding-right, 0) var(--bhp-inner-padding-bottom, 0) var(--bhp-inner-padding-left, 0);
    }

    .bhp-title {
        font-size: var(--bhp-title-font-size, 1.25rem);
    }

    .bhp-hours-row {
        font-size: 0.9rem;
    }
}

/* Light theme variant — convenience class, same as setting colors individually */
.bhp-hours-widget.theme-light {
    --bhp-text-color: #333;
    --bhp-title-color: #1a1a1a;
    --bhp-today-bg-color: rgba(0, 0, 0, 0.05);
}

/* For use in a dark container (like the example image) */
.bhp-container-dark {
    background-color: #1a2744;
    padding: 30px;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════
   Alternative Hours Notice (Upcoming Exceptions)
   ═══════════════════════════════════════════════════════════ */

.bhp-upcoming-notice {
    margin-top: 12px;
    text-align: center;
}

.bhp-upcoming-separator {
    border: none;
    border-top: 1px solid var(--bhp-upcoming-separator-color, currentColor);
    margin: 12px auto 10px;
    width: 80%;
    opacity: 0.2;
}

.bhp-upcoming-title {
    font-size: var(--bhp-upcoming-title-font-size, 0.9rem);
    font-weight: 500;
    color: var(--bhp-upcoming-title-color, inherit);
    opacity: 0.8;
    margin-bottom: 4px;
}

.bhp-upcoming-desc {
    font-size: var(--bhp-upcoming-desc-font-size, 0.8rem);
    color: var(--bhp-upcoming-desc-color, inherit);
    opacity: 0.6;
    margin-bottom: 8px;
}

.bhp-upcoming-empty {
    font-size: var(--bhp-upcoming-hours-font-size, 0.85rem);
    color: var(--bhp-upcoming-hours-color, inherit);
    margin: 0;
}

.bhp-upcoming-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bhp-upcoming-row {
    font-size: var(--bhp-upcoming-hours-font-size, 0.85rem);
    color: var(--bhp-upcoming-hours-color, inherit);
    opacity: 0.75;
    line-height: 1.5;
}

.bhp-upcoming-date {
    margin-right: 0.3em;
}

.bhp-upcoming-hours {
    /* inherits from row */
}

.bhp-upcoming-closed {
    font-style: italic;
}

.bhp-upcoming-label {
    opacity: 0.85;
}

/* 2.12.0 -- public look-ahead calendar
   Every colour is a --bhp-cal-* custom property; the site's own text/link
   colours (currentColor) and transparency do the differentiating, per the
   "no hard front-end colours" rule -- see AGENTS.md "Palette Kit". */

.bhp-calendar {
    color: inherit;
}

.bhp-calendar-title {
    font-size: var(--bhp-cal-title-font-size, 1.1em);
    color: var(--bhp-cal-title-color, inherit);
    margin: 0 0 0.75em;
}

/* Months flow side by side only when each can have at least 17em (em, not
   rem: bodysoul's html is 62.5%, so a rem floor let two months squeeze into
   a 390px phone and overflow the page — 2.15.1). min(100%, …) means a
   container narrower than the floor still gets one full-width column. */
.bhp-calendar-months {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17em), 1fr));
    gap: var(--bhp-cal-months-gap, 1.5em);
    width: 100%;
}

.bhp-month-grid {
    min-width: 0;
    container-type: inline-size;
    border: 1px solid var(--bhp-cal-grid-border-color, transparent);
    border-color: var(--bhp-cal-grid-border-color, transparent);
    border-radius: var(--bhp-cal-grid-radius, 4px);
    padding: var(--bhp-cal-grid-padding, 0.6em);
}

.bhp-month-grid-title {
    font-weight: 600;
    font-size: var(--bhp-cal-month-title-font-size, 0.95em);
    color: var(--bhp-cal-month-title-color, inherit);
    text-align: center;
    margin-bottom: 0.5em;
}

.bhp-month-grid-weekdays,
.bhp-month-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: var(--bhp-cal-cell-gap, 2px);
}

.bhp-month-weekday {
    min-width: 0;
    overflow: hidden;
    font-size: var(--bhp-cal-weekday-font-size, 0.7em);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    text-align: center;
    opacity: 0.6;
    color: var(--bhp-cal-weekday-color, inherit);
    padding-bottom: 0.3em;
}

/* Two labels per weekday ("Mon" / "M"); the container query below picks. */
.bhp-month-weekday-short {
    display: none;
}

@container (max-width: 21em) {
    .bhp-month-weekday-full {
        display: none;
    }

    .bhp-month-weekday-short {
        display: inline;
    }

    /* The holiday name cannot fit a ~2em cell; the dot and the detail
       disclosure still carry the fact. (Specificity beats the base rule
       further down, which is later in source order.) */
    .bhp-month-day .bhp-month-day-holiday {
        display: none;
    }

    .bhp-month-day {
        font-size: var(--bhp-cal-day-font-size-narrow, 0.75em);
    }
}

.bhp-month-day {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    font-size: var(--bhp-cal-day-font-size, 0.8em);
    color: var(--bhp-cal-day-color, inherit);
    border: 1px solid var(--bhp-cal-day-border-color, transparent);
    border-radius: var(--bhp-cal-day-radius, 3px);
    padding: 2px;
    box-sizing: border-box;
    overflow: visible;
}

.bhp-month-day-num {
    line-height: 1;
}

/* Quiet by default; outside-month and past days fade back further. */
.bhp-month-day.is-outside {
    opacity: var(--bhp-cal-outside-opacity, 0.35);
}

.bhp-month-day.is-past {
    opacity: var(--bhp-cal-past-opacity, 0.55);
}

.bhp-month-day.is-today {
    font-weight: 700;
}

/* Colour code (2.15.1, Oliver's ask): standard hours read as one colour,
   anything non-standard as a contrasting one. Three washes, each a
   --bhp-cal-* token → a Palette Kit role (--pal-cal-*) → a soft literal.
   These are the ONE place the plugin ships real front-end colours, because
   a calendar with no colour cannot do its job; the weekly table stays on
   inherit/currentColor (AGENTS.md "Palette Kit"). */

/* Regular open day: quiet green. */
.bhp-month-day.is-regular:not(.is-closed),
.bhp-cal-swatch.is-regular {
    background-color: var(--bhp-cal-regular-bg, var(--pal-cal-regular, #e4f3e9));
    border-color: var(--bhp-cal-regular-border-color, transparent);
}

/* Regular closed day (the weekly day off): no wash, just faded. */
.bhp-month-day.is-regular.is-closed {
    opacity: var(--bhp-cal-regular-closed-opacity, 0.5);
}

/* Exception — closed: rose. */
.bhp-month-day.is-exception.is-closed,
.bhp-cal-swatch.is-closed {
    background-color: var(--bhp-cal-closed-bg, var(--pal-cal-closed, #fbe3e3));
    border-color: var(--bhp-cal-closed-border-color, transparent);
    font-weight: 600;
}

/* Exception — different hours: amber. */
.bhp-month-day.is-modified,
.bhp-cal-swatch.is-modified {
    background-color: var(--bhp-cal-modified-bg, var(--pal-cal-changed, #fdefd2));
    border-color: var(--bhp-cal-modified-border-color, transparent);
    font-weight: 600;
}

/* Today: keep whichever wash applies and ring the cell instead, so the
   colour code is never hidden by the highlight. */
.bhp-month-day.is-today {
    box-shadow: inset 0 0 0 2px var(--bhp-cal-today-ring-color, currentColor);
}

.bhp-month-day.is-tentative {
    border-style: dashed;
    border-color: var(--bhp-cal-tentative-border-color, currentColor);
}

.bhp-month-day.is-holiday::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--bhp-cal-holiday-dot-color, transparent);
    background-color: var(--bhp-cal-holiday-dot-color, currentColor);
    opacity: 0.7;
}

/* Pinned to the cell's bottom edge so a long holiday name can never grow
   the cell out of its square and break the row (it did: "Labour Day"). */
.bhp-month-day-holiday {
    display: block;
    position: absolute;
    left: 2px;
    right: 2px;
    bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: var(--bhp-cal-holiday-font-size, 0.6em);
    line-height: 1.1;
    opacity: 0.7;
    color: var(--bhp-cal-holiday-color, inherit);
}

/* Details/summary: the day number is the whole clickable control. */
.bhp-month-day-detail {
    width: 100%;
}

.bhp-month-day-detail > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    list-style: none;
}

.bhp-month-day-detail > summary::-webkit-details-marker {
    display: none;
}

.bhp-month-day-detail > summary::marker {
    content: "";
}

.bhp-month-day-detail > summary:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 2px;
}

/* Opened state (2.15.2): the body floats as a small card UNDER the cell,
   out of normal flow, so opening a day never changes any row's height —
   2.12.0 grew the cell in flow and the whole grid reflowed (Oliver: "the
   calendar resizes and gets distorted"). The cell stays square; the card
   is positioned against it (.bhp-month-day is position: relative). */
.bhp-month-day:has(.bhp-month-day-detail[open]) {
    z-index: 2;
}

.bhp-month-day-body {
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 9em;
    max-width: 15em;
    padding: 0.5em 0.7em;
    font-size: 1.15em;
    line-height: 1.3;
    text-align: left;
    /* Split days ("9.00am – 2.00pm, 2.05pm – 5.00pm") may take two lines
       rather than run past a phone's edge. */
    white-space: normal;
    background: var(--bhp-cal-popover-bg, #fff);
    color: var(--bhp-cal-popover-color, #1d2327);
    border: 1px solid var(--bhp-cal-popover-border-color, rgba(0, 0, 0, 0.12));
    border-radius: var(--bhp-cal-popover-radius, 6px);
    box-shadow: var(--bhp-cal-popover-shadow, 0 6px 18px rgba(0, 0, 0, 0.16));
    z-index: 3;
}

/* A small pointer back to the day. */
.bhp-month-day-body::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 8px;
    height: 8px;
    transform: translateX(-50%) rotate(45deg);
    background: inherit;
    border-left: 1px solid var(--bhp-cal-popover-border-color, rgba(0, 0, 0, 0.12));
    border-top: 1px solid var(--bhp-cal-popover-border-color, rgba(0, 0, 0, 0.12));
}

/* Edge columns anchor to the grid edge instead of centring, so the card
   never hangs off the side of the month on a phone. */
.bhp-month-grid-days > .bhp-month-day:nth-child(7n + 1) .bhp-month-day-body,
.bhp-month-grid-days > .bhp-month-day:nth-child(7n + 2) .bhp-month-day-body {
    left: 0;
    transform: none;
}

.bhp-month-grid-days > .bhp-month-day:nth-child(7n + 1) .bhp-month-day-body::before,
.bhp-month-grid-days > .bhp-month-day:nth-child(7n + 2) .bhp-month-day-body::before {
    left: 1em;
    transform: rotate(45deg);
}

.bhp-month-grid-days > .bhp-month-day:nth-child(7n) .bhp-month-day-body,
.bhp-month-grid-days > .bhp-month-day:nth-child(7n - 1) .bhp-month-day-body {
    left: auto;
    right: 0;
    transform: none;
}

.bhp-month-grid-days > .bhp-month-day:nth-child(7n) .bhp-month-day-body::before,
.bhp-month-grid-days > .bhp-month-day:nth-child(7n - 1) .bhp-month-day-body::before {
    left: auto;
    right: 1em;
    transform: rotate(45deg);
}

.bhp-month-day-hours {
    font-weight: 600;
    font-size: var(--bhp-cal-hours-font-size, 0.85em);
    color: var(--bhp-cal-hours-color, inherit);
}

.bhp-month-day-label {
    font-size: var(--bhp-cal-label-font-size, 0.8em);
    opacity: 0.8;
    color: var(--bhp-cal-label-color, inherit);
}

.bhp-month-day-tentative {
    font-size: 0.75em;
    font-style: italic;
    opacity: 0.6;
    color: var(--bhp-cal-tentative-color, inherit);
}

.bhp-cal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 1em;
    list-style: none;
    margin: 1em 0 0;
    padding: 0;
    font-size: var(--bhp-cal-legend-font-size, 0.75em);
    opacity: 0.85;
}

.bhp-cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.bhp-cal-swatch {
    display: inline-block;
    width: 0.8em;
    height: 0.8em;
    border-radius: 2px;
    border: 1px solid var(--bhp-cal-day-border-color, transparent);
    border-color: var(--bhp-cal-day-border-color, transparent);
    flex-shrink: 0;
}

/* .is-regular / .is-closed / .is-modified swatches share the day-cell rules
   above (selector lists), so legend and grid can never disagree. */

.bhp-cal-swatch.is-tentative {
    border-style: dashed;
    border-color: var(--bhp-cal-tentative-border-color, currentColor);
}

.bhp-cal-swatch.is-holiday {
    position: relative;
}

.bhp-cal-swatch.is-holiday::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: var(--bhp-cal-holiday-dot-color, transparent);
    background-color: var(--bhp-cal-holiday-dot-color, currentColor);
    opacity: 0.7;
}

/* ---------------------------------------------------------------------------
   @compat color-mix
   These borders were already written as a pair — a `transparent` default,
   then the derived one — but the pair never worked. A color-mix() carrying a
   var() is accepted at PARSE time and only fails at substitution, and an
   invalid border-color resolves to its initial value, which is currentcolor:
   a solid ink box round every calendar cell, not the hairline intended and
   not the `transparent` above. Only a feature query keeps the default.
   Delete this block and the `transparent` defaults together when the floor
   passes Chrome 111 / Safari 16.2. See ../../COLOR-COMPAT.md.
   ------------------------------------------------------------------------ */
@supports (color: color-mix(in oklab, red, blue)) {
    .bhp-month-grid {
        border-color: var(--bhp-cal-grid-border-color, color-mix(in srgb, currentColor 15%, transparent));
    }

    .bhp-month-day.is-regular:not(.is-closed),
    .bhp-cal-swatch.is-regular {
        border-color: var(--bhp-cal-regular-border-color, color-mix(in srgb, var(--bhp-cal-regular-bg, var(--pal-cal-regular, #e4f3e9)) 70%, currentColor));
    }

    .bhp-month-day.is-exception.is-closed,
    .bhp-cal-swatch.is-closed {
        border-color: var(--bhp-cal-closed-border-color, color-mix(in srgb, var(--bhp-cal-closed-bg, var(--pal-cal-closed, #fbe3e3)) 65%, currentColor));
    }

    .bhp-month-day.is-modified,
    .bhp-cal-swatch.is-modified {
        border-color: var(--bhp-cal-modified-border-color, color-mix(in srgb, var(--bhp-cal-modified-bg, var(--pal-cal-changed, #fdefd2)) 65%, currentColor));
    }

    .bhp-cal-swatch {
        border-color: var(--bhp-cal-day-border-color, color-mix(in srgb, currentColor 30%, transparent));
    }
}