/*
 * Opening calendar ([dma_calendar], [opening_calendar]).
 * Square shapes like the rest of the site; closed days use the coming-days tiles' hatching.
 * Every token has a fallback, because the admin preview loads this file without site.css.
 */
.dma-cal {
	--dma-cal-ink: var(--dma-ink, #1d201d);
	--dma-cal-muted: var(--dma-muted, #585451);
	--dma-cal-line: var(--dma-line, #ddd8cc);
	--dma-cal-hatch: repeating-linear-gradient(-45deg, #fff 0 5px, #ede7da 5px 10px);
	color: var(--dma-text, #3b3936);
	font-family: var(--dma-body, "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
}

.dma-cal__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 32px;
	margin: 0 0 24px;
}

.dma-cal__now {
	margin: 0 !important;
	font-size: 1.15rem;
}

.dma-cal__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	font-size: .95rem;
}

.dma-cal__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.dma-cal__swatch {
	flex: none;
	width: 20px;
	height: 20px;
	border: 1px solid rgb(29 32 29 / 30%);
	background: var(--dma-cal-c, #e8e4da);
}

.dma-cal__swatch.is-closed {
	background: var(--dma-cal-hatch);
}

.dma-cal__swatch.is-today {
	border: 0;
	background: #fff;
	box-shadow: inset 0 0 0 2px var(--dma-cal-ink), 0 0 0 2px var(--dma-brand, #98c21d);
}

.dma-cal__months {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 36px 32px;
}

.dma-cal__month {
	container-type: inline-size;
	/* calendar.js centres today; keep a month's title clear of the sticky header when one is targeted. */
	scroll-margin-top: 140px;
}

.dma-cal__month[hidden],
.dma-cal tr[hidden] {
	display: none;
}

.dma-cal .dma-cal__title {
	margin: 0 0 6px;
	padding: 0 0 6px;
	border-bottom: 3px solid var(--dma-cal-ink);
	color: var(--dma-cal-ink);
	font-family: var(--dma-display, "Rift", "Fira Sans Condensed", "Arial Narrow", sans-serif);
	font-size: 1.7rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.1;
	text-transform: uppercase;
}

.dma-cal .dma-cal__title span {
	color: var(--dma-cal-muted);
}

.dma-cal .is-current .dma-cal__title {
	border-bottom-color: var(--dma-brand, #98c21d);
}

/* The theme styles every table (borders, padding, zebra rows, hover); this one is a grid of tiles. */
.dma-cal .dma-cal__grid {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: separate;
	border-spacing: 3px;
	table-layout: fixed;
	font-size: 1rem;
}

/* Three classes: the theme's header-cell rule (table thead:first-child tr:first-child th) is 0,2,4. */
.dma-cal .dma-cal__month .dma-cal__grid th {
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--dma-cal-muted);
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
}

.dma-cal .dma-cal__grid td,
.dma-cal .dma-cal__grid tr:hover > td,
.dma-cal .dma-cal__grid tbody > tr:nth-child(odd) > td {
	position: relative;
	height: 3.4rem;
	padding: 5px 6px;
	border: 0;
	/* The fill comes from the day's classes below; this rule only has to outrank the theme's. */
	background: var(--dma-cal-bg, none);
	line-height: 1.1;
	text-align: left;
	vertical-align: top;
}

.dma-cal__day.is-open {
	--dma-cal-bg: var(--dma-cal-c, #e8e4da);
}

.dma-cal__day.is-closed {
	--dma-cal-bg: var(--dma-cal-hatch);
}

.dma-cal__n {
	display: block;
	color: var(--dma-cal-ink);
	font-size: .95rem;
	font-weight: 700;
}

.dma-cal__h {
	display: block;
	margin-top: 5px;
	overflow: hidden;
	color: var(--dma-cal-ink);
	font-family: var(--dma-display, "Rift", "Fira Sans Condensed", "Arial Narrow", sans-serif);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: .01em;
	white-space: nowrap;
}

/* Narrow months: the colour says which hours apply, the key explains it. */
@container (max-width: 290px) {
	.dma-cal__h {
		display: none;
	}
}

.dma-cal .is-closed .dma-cal__n {
	color: var(--dma-cal-muted);
	font-weight: 600;
}

/* Days that are over: no colour, a light number, nothing to read. */
.dma-cal__day.is-past {
	--dma-cal-bg: none;
}

.dma-cal .is-past .dma-cal__n {
	color: #9a958c;
	font-weight: 400;
}

.dma-cal .is-past .dma-cal__h {
	visibility: hidden;
}

/* Today keeps its own fill, so open or closed still reads at a glance. It is marked by an
   ink frame inside a brand-green ring, a "Heute" label, and its status in words. */
.dma-cal .dma-cal__grid td.is-today {
	z-index: 1;
	padding: 6px 7px;
	box-shadow: inset 0 0 0 3px var(--dma-cal-ink), 0 0 0 3px var(--dma-brand, #98c21d), 0 6px 16px rgb(29 32 29 / 25%);
}

.dma-cal .is-today .dma-cal__n {
	color: var(--dma-cal-ink);
	font-size: 1.05rem;
	font-weight: 700;
}

.dma-cal .is-today .dma-cal__n::after {
	content: var(--dma-cal-today, "Heute");
	display: block;
	margin-top: 3px;
	font-size: .66rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
}

.dma-cal .is-today .dma-cal__h {
	display: block;
	margin-top: 3px;
}

.dma-cal .is-today.is-closed .dma-cal__h::before {
	content: var(--dma-cal-closed, "geschlossen");
	color: var(--dma-closed, #b3261e);
	text-transform: uppercase;
}

/* "geschlossen" needs about 80px of tile. */
@container (max-width: 560px) {
	.dma-cal .is-today.is-closed .dma-cal__h::before {
		content: var(--dma-cal-closed-short, "zu");
		font-size: .9rem;
		letter-spacing: 0;
		text-transform: none;
	}
}

.dma-cal__after {
	margin: 32px 0 0 !important;
	color: var(--dma-cal-muted);
}

@media print {
	.dma-cal .dma-cal__grid td {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}