/*
 * Lunchboard – shared structure for every design.
 *
 * The designs in presets/*.css only set the look on top of this file. All
 * rules are scoped to .lunchboard, so the theme stays untouched.
 */

.lunchboard {
	--lb-accent: #1e4636;
	--lb-on-accent: #fff;
	--lb-muted: currentcolor;
	--lb-rule: rgba(127, 127, 127, 0.35);
	--lb-font-display: inherit;
	--lb-font-text: inherit;
	--lb-gap: 1em;
	--lb-group-gap: 1.75em;
	box-sizing: border-box;
	margin-block: 1.5em;
	font-family: var(--lb-font-text);
	overflow-wrap: break-word;
}

@supports (color: color-mix(in srgb, red 50%, blue)) {

	.lunchboard {
		--lb-muted: color-mix(in srgb, currentcolor 68%, transparent);
		--lb-rule: color-mix(in srgb, currentcolor 18%, transparent);
	}
}

.lunchboard.is-compact {
	--lb-gap: 0.55em;
	--lb-group-gap: 1.1em;
}

.lunchboard *,
.lunchboard *::before,
.lunchboard *::after {
	box-sizing: inherit;
}

/* Themes style these elements globally; inside a menu they start from zero. */
.lunchboard :where(p, ul, dl, dd, figure, h2, h3, h4, h5, h6) {
	margin: 0;
	padding: 0;
}

.lunchboard :where(h2, h3, h4, h5, h6) {
	font-family: var(--lb-font-display);
	letter-spacing: normal;
	text-transform: none;
}

/* Header of a weekly menu */

.lunchboard-header {
	margin-bottom: 1.25em;
}

.lunchboard-header__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 0.75em;
	font-family: var(--lb-font-display);
}

.lunchboard-header__week {
	font-variant-numeric: tabular-nums;
}

.lunchboard-header__note {
	margin-top: 0.35em;
	color: var(--lb-muted);
}

/* Groups: weekdays or menu categories */

.lunchboard-group + .lunchboard-group {
	margin-top: var(--lb-group-gap);
}

.lunchboard-group__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.15em 0.5em;
	margin-bottom: 0.65em;
	line-height: 1.2;
}

.lunchboard-group__date {
	font-variant-numeric: tabular-nums;
}

.lunchboard-group__note {
	margin-bottom: 0.65em;
	color: var(--lb-muted);
	font-style: italic;
}

.lunchboard-group__items {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--lb-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Dishes */

.lunchboard-dish {
	container: lb-dish / inline-size;
	margin: 0;
	padding: 0;
}

.lunchboard-dish::marker {
	content: none;
}

.lunchboard-dish.has-image {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 1em;
	align-items: start;
}

.lunchboard-dish__image {
	display: block;
	width: 5rem;
	height: 5rem;
	border-radius: 0.4rem;
	object-fit: cover;
}

.lunchboard-dish__head {
	display: flex;
	align-items: baseline;
	gap: 0.5em;
}

.lunchboard-dish__title {
	flex: 0 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}

.lunchboard-dish__name {
	font-weight: 600;
}

.lunchboard-dish__codes {
	margin-left: 0.15em;
	color: var(--lb-muted);
	font-size: 0.68em;
	font-weight: 400;
	line-height: 0;
	white-space: nowrap;
}

.lunchboard-dish__badges {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.3em;
	margin-left: 0.3em;
}

.lunchboard-badge {
	color: var(--lb-accent);
	font-size: 0.78em;
	font-weight: 600;
	white-space: nowrap;
}

.lunchboard-dish__leader {
	flex: 1 1 1.5em;
	min-width: 1.5em;
	border-bottom: 1px dotted currentcolor;
	opacity: 0.4;
	transform: translateY(-0.28em);
}

.lunchboard-dish__price {
	display: inline-flex;
	flex: none;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.15em 0.9em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.lunchboard-price__label {
	color: var(--lb-muted);
	font-size: 0.88em;
	font-weight: 400;
}

.lunchboard-dish__desc {
	margin-top: 0.2em;
	color: var(--lb-muted);
	font-size: 0.92em;
}

/* Legend */

.lunchboard-legend {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.75em 2em;
	margin-top: 1.75em;
	padding-top: 1em;
	border-top: 1px solid var(--lb-rule);
	color: var(--lb-muted);
	font-size: 0.85em;
}

.lunchboard-legend__title {
	margin-bottom: 0.3em;
	font-weight: 600;
}

.lunchboard-legend__list {
	display: grid;
	gap: 0.1em;
}

.lunchboard-legend__list div {
	display: flex;
	gap: 0.5em;
}

.lunchboard-legend__list dt {
	min-width: 1.6em;
	font-weight: 600;
}

.lunchboard-legend__notice {
	grid-column: 1 / -1;
	font-style: italic;
}

/* States */

.lunchboard-empty {
	color: var(--lb-muted);
}

.lunchboard-empty__link {
	color: inherit;
}

.lunchboard .lunchboard-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* Narrow places such as cards or sidebars: the price moves below the name. */

@container lb-dish (max-width: 17em) {

	.lunchboard-dish__head {
		flex-wrap: wrap;
		row-gap: 0.1em;
	}

	.lunchboard-dish__title {
		flex-basis: 100%;
	}

	.lunchboard-dish__leader {
		display: none;
	}

	.lunchboard-dish__price {
		justify-content: flex-start;
		white-space: normal;
		text-align: start;
	}
}

/* Small screens: several sizes may stack, but prices stay next to the dish. */

@media (max-width: 30em) {

	.lunchboard-dish__leader {
		min-width: 0.75em;
	}

	.lunchboard-dish__price {
		flex: 0 1 auto;
		max-width: 50%;
		white-space: normal;
	}

	.lunchboard-price {
		display: inline-block;
		white-space: nowrap;
	}
}

@media print {

	.lunchboard {
		color: #000;
	}

	.lunchboard-group {
		break-inside: avoid;
	}
}