/*
 * OpenSign – minimal frontend styles. Colors: --siop-open, --siop-soon, --siop-closed.
 * Shortcodes with styling="off" get the class .siop-unstyled and are not styled.
 */
.siop-status { --siop-color: var(--siop-closed, #c5221f); }
.siop-status--open { --siop-color: var(--siop-open, #1e8e3e); }
.siop-status--closing_soon,
.siop-status--opening_soon,
.siop-status--break { --siop-color: var(--siop-soon, #e37400); }

.siop-status:not(.siop-unstyled) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25em .5em;
	max-width: 100%;
}
.siop-status:not(.siop-unstyled) .siop-status__badge {
	font-weight: 600;
	color: var(--siop-color);
}

/* Status dot: a flex item of the whole element, so it is centered on the element's height (line-height). */
.siop-status:not(.siop-unstyled)::before {
	content: "";
	align-self: center;
	width: .6em;
	height: .6em;
	margin-right: -.1em;
	border-radius: 50%;
	background: var(--siop-color);
	flex: none;
}
.siop-status:not(.siop-unstyled):not(:has(.siop-status__badge))::before { display: none; }
/* If the text wraps (small screens), keep the dot on the first line instead of between the lines. */
@supports (height: 1lh) {
	.siop-status:not(.siop-unstyled)::before { align-self: flex-start; margin-top: calc((1lh - .6em) / 2); }
}
.siop-status--open:not(.siop-unstyled)::before { animation: siop-pulse 2s ease-in-out infinite; }
@keyframes siop-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) {
	.siop-status::before { animation: none !important; }
}

.siop-hours:not(.siop-unstyled) { border-collapse: collapse; width: auto; max-width: 100%; background: none; }
.siop-hours:not(.siop-unstyled) tr,
.siop-hours:not(.siop-unstyled) th,
.siop-hours:not(.siop-unstyled) td { background: none; border: 0; }
.siop-hours:not(.siop-unstyled) th,
.siop-hours:not(.siop-unstyled) td { padding: .3em 1em .3em 0; text-align: left; vertical-align: top; }
.siop-hours:not(.siop-unstyled) .siop-hours__day { font-weight: normal; }
/* Equal-width digits so times line up below each other (if the font supports it). */
.siop-hours:not(.siop-unstyled) .siop-hours__time { font-variant-numeric: tabular-nums; }
/* Never break inside a time range, date or weekday; lines wrap between the slots. */
.siop-hours:not(.siop-unstyled) .siop-hours__slot,
.siop-hours:not(.siop-unstyled) .siop-hours__weekday,
.siop-hours:not(.siop-unstyled) .siop-hours__date { white-space: nowrap; }
.siop-hours--list:not(.siop-unstyled) .siop-hours__row { display: flex; flex-wrap: wrap; gap: .1em 1em; padding: .3em 0; }
.siop-hours--list:not(.siop-unstyled) .siop-hours__day { min-width: 7em; }

/* Today: weekday bold; of the times only the open slot or, while closed, the next slot of today. */
.siop-hours:not(.siop-unstyled) .siop-hours__row--today .siop-hours__day,
.siop-hours:not(.siop-unstyled) .siop-hours__slot--active,
.siop-hours:not(.siop-unstyled) .siop-hours__slot--next { font-weight: 700; }
.siop-hours:not(.siop-unstyled) .siop-hours__row--closed .siop-hours__time { opacity: .7; }
.siop-hours:not(.siop-unstyled) .siop-hours__date { opacity: .7; font-variant-numeric: tabular-nums; }
.siop-hours:not(.siop-unstyled) .siop-hours__note { font-style: italic; }
.siop-hours:not(.siop-unstyled) .siop-hours__note::after { content: ":"; }

.siop-special:not(.siop-unstyled) { list-style: none; margin: 0; padding: 0; }
.siop-special:not(.siop-unstyled) .siop-special__item { margin: 0 0 .3em; }
.siop-special:not(.siop-unstyled) .siop-special__date { font-weight: 600; }
.siop-special:not(.siop-unstyled) .siop-special__hours { white-space: nowrap; }

@media (max-width: 30em) {
	.siop-hours:not(.siop-unstyled) th,
	.siop-hours:not(.siop-unstyled) td { padding-right: .75em; }
	.siop-hours--list:not(.siop-unstyled) .siop-hours__day { min-width: 0; }
}
.siop-special:not(.siop-unstyled) .siop-special__label::after { content: ":"; }

/* [oeffnungsstatus_alle]: department names in the first column, status in the second. */
.siop-overview:not(.siop-unstyled) {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: .35em 1em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.siop-overview:not(.siop-unstyled) .siop-overview__item { display: contents; }
.siop-overview:not(.siop-unstyled) .siop-overview__name { font-weight: 600; }