/**
 * Internal Opening Hours — Frontend Shortcode Styles
 *
 * All greys derive from the inherited text color, so the widget adapts to
 * light and dark backgrounds without a separate theme.
 */

/* Wrapper: block-level, sized to content, creates new BFC so floats can't intrude */
.internal-opening-hours-wrapper {
    --internal-opening-hours-line: rgba(128, 128, 128, 0.3);
    --internal-opening-hours-soft: rgba(128, 128, 128, 0.12);
    display: flow-root;
    width: -moz-fit-content;
    width: fit-content;
    font-variant-numeric: tabular-nums;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .internal-opening-hours-wrapper {
        --internal-opening-hours-line: color-mix(in srgb, currentColor 15%, transparent);
        --internal-opening-hours-soft: color-mix(in srgb, currentColor 7%, transparent);
    }
}

/* Department name heading */
.internal-opening-hours-title {
    font-weight: 600;
    margin-bottom: 0.4em;
}

/* Rows stack vertically; each row keeps the day left and the hours right */
.internal-opening-hours-rows {
    display: flex;
    flex-direction: column;
}

.internal-opening-hours-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2em;
    padding: 0.55em 0;
    border-top: 1px solid var(--internal-opening-hours-line);
}

.internal-opening-hours-rows > .internal-opening-hours-row:last-child {
    border-bottom: 1px solid var(--internal-opening-hours-line);
}

/* Hours column: don't wrap times */
.internal-opening-hours-hours {
    white-space: nowrap;
}

/* Highlight the current day in bold (the week slider sets is-today on the row) */
.internal-opening-hours-day.is-today,
.internal-opening-hours-hours.is-today,
.internal-opening-hours-row.is-today {
    font-weight: 600;
}

/* Small date line shown below the day name for special dates */
.internal-opening-hours-special-date {
    display: block;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.4;
    opacity: 0.7;
}

/* Upcoming special dates beyond the next 7 days: collapsed dropdown */
.internal-opening-hours-upcoming {
    margin-top: 1.25em;
}

.internal-opening-hours-upcoming > summary {
    display: flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0;
    list-style: none;
    cursor: pointer;
    font-size: 0.75em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

.internal-opening-hours-upcoming > summary::-webkit-details-marker {
    display: none;
}

.internal-opening-hours-upcoming > summary::marker {
    content: "";
}

.internal-opening-hours-upcoming > summary:hover,
.internal-opening-hours-upcoming > summary:focus-visible,
.internal-opening-hours-upcoming[open] > summary {
    opacity: 1;
}

.internal-opening-hours-upcoming-chevron {
    flex-shrink: 0;
    margin-left: auto;
    transition: transform 0.15s ease;
}

.internal-opening-hours-upcoming[open] .internal-opening-hours-upcoming-chevron {
    transform: rotate(180deg);
}

.internal-opening-hours-upcoming > .internal-opening-hours-rows {
    margin-top: 0.4em;
}

@media (prefers-reduced-motion: reduce) {
    .internal-opening-hours-upcoming-chevron {
        transition: none;
    }
}
/* Info icon for inline special dates (special_style="icon") */
.internal-opening-hours-info {
    position: relative;
    display: inline-block;
    margin-left: 0.3em;
    vertical-align: -0.05em;
    line-height: 1;
}

.internal-opening-hours-info > summary {
    display: block;
    list-style: none;
    cursor: pointer;
    opacity: 0.8;
}

.internal-opening-hours-info > summary::-webkit-details-marker {
    display: none;
}

.internal-opening-hours-info > summary::marker {
    content: "";
}

.internal-opening-hours-info > summary:hover,
.internal-opening-hours-info > summary:focus-visible,
.internal-opening-hours-info[open] > summary {
    opacity: 1;
}

.internal-opening-hours-info > summary svg {
    width: 0.8em;
    height: 0.8em;
    display: block;
}

/* Tooltip: browsers only render it while the details are open (click, tap or keyboard) */
.internal-opening-hours-info-text {
    position: absolute;
    bottom: calc(100% + 0.5em);
    left: 50%;
    z-index: 10;
    transform: translateX(-50%);
    padding: 0.4em 0.6em;
    border-radius: 4px;
    background: var(--internal-opening-hours-tooltip-bg, #1e1e1e);
    color: var(--internal-opening-hours-tooltip-color, #fff);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.4;
    white-space: nowrap;
}

/* ---------- Week slider (layout="weeks") ---------- */
.internal-opening-hours-slider {
    --internal-opening-hours-speed: 280ms;
    --internal-opening-hours-shift: 24px;
    position: relative;
    min-width: 16em;
}

@media (prefers-reduced-motion: reduce) {
    .internal-opening-hours-slider {
        --internal-opening-hours-speed: 0ms;
    }
}

/* Visually hidden, still read by screen readers and focusable */
.internal-opening-hours-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.internal-opening-hours-slider dl,
.internal-opening-hours-slider dd {
    margin: 0;
}

/* Weeks outside the visible range (passed weeks, buffer week) */
.internal-opening-hours-slider [hidden] {
    display: none !important;
}

/* All weeks share one grid cell; only the checked one is visible */
.internal-opening-hours-weeks {
    display: grid;
}

.internal-opening-hours-week {
    grid-area: 1 / 1;
    visibility: hidden;
    transition: visibility 0s linear var(--internal-opening-hours-speed);
}

.internal-opening-hours-week-radio:checked + .internal-opening-hours-week {
    visibility: visible;
    transition: visibility 0s;
}

/* Title and rows slide; weeks after the active one wait to the right */
.internal-opening-hours-week-title,
.internal-opening-hours-week > .internal-opening-hours-rows {
    opacity: 0;
    transform: translateX(var(--internal-opening-hours-shift));
    transition: transform var(--internal-opening-hours-speed) ease, opacity var(--internal-opening-hours-speed) ease;
}

.internal-opening-hours-week-radio:checked + .internal-opening-hours-week .internal-opening-hours-week-title,
.internal-opening-hours-week-radio:checked + .internal-opening-hours-week > .internal-opening-hours-rows {
    opacity: 1;
    transform: none;
}

/* Weeks before the active one wait to the left (browsers without :has() slide from the right) */
.internal-opening-hours-week:has(~ .internal-opening-hours-week-radio:checked) .internal-opening-hours-week-title,
.internal-opening-hours-week:has(~ .internal-opening-hours-week-radio:checked) > .internal-opening-hours-rows {
    transform: translateX(calc(var(--internal-opening-hours-shift) * -1));
}

/* Week header */
.internal-opening-hours-week-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding-bottom: 0.75em;
}

.internal-opening-hours-week-title {
    font-weight: 600;
    line-height: 1.2;
}

.internal-opening-hours-week-range {
    display: block;
    margin-top: 0.15em;
    font-size: 0.75em;
    font-weight: normal;
    opacity: 0.7;
}

/* Arrows switch instantly (no slide), so two sets never overlap */
.internal-opening-hours-week-buttons {
    display: flex;
    flex-shrink: 0;
    gap: 4px;
    border-radius: 2em;
    visibility: hidden;
}

.internal-opening-hours-week-radio:checked + .internal-opening-hours-week .internal-opening-hours-week-buttons {
    visibility: visible;
}

/* Keyboard focus on the radio group shows around the arrows */
.internal-opening-hours-week-radio:focus-visible + .internal-opening-hours-week .internal-opening-hours-week-buttons {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.internal-opening-hours-nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6em;
    height: 1.6em;
    border: 1px solid var(--internal-opening-hours-line);
    border-radius: 50%;
    color: inherit;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

/* Invisible 44px-high touch target */
.internal-opening-hours-nav-btn::after {
    content: "";
    position: absolute;
    inset: -10px -3px;
}

.internal-opening-hours-nav-btn svg {
    width: 0.75em;
    height: 0.75em;
}

.internal-opening-hours-nav-btn:hover:not(.is-disabled) {
    background: var(--internal-opening-hours-soft);
}

.internal-opening-hours-nav-btn.is-disabled {
    opacity: 0.3;
    cursor: default;
}