/* The Daily Berry — LAYOUT ONLY.
   Fonts, sizes, and colors are intentionally left to the site theme.
   Structural lines/fills derive from currentColor so they adapt to any palette. */

/* Today flavor + Soup of the Day blocks */
.dailyberry-today__label,
.dailyberry-today__name,
.dailyberry-soup__label,
.dailyberry-soup__name {
	margin: 0 0 0.25em;
}

.dailyberry-today__desc,
.dailyberry-today__empty,
.dailyberry-soup__desc,
.dailyberry-soup__empty {
	margin: 0;
}

/* Sandwich Special block — photo left, text right; the photo's crop size is
   layout, its rounding/border are the theme's call */
.dailyberry-sandwich__label,
.dailyberry-sandwich__title {
	margin: 0 0 0.25em;
}

.dailyberry-sandwich__desc,
.dailyberry-sandwich__empty {
	margin: 0;
}

.dailyberry-sandwich__body {
	display: flex;
	align-items: center;
	gap: 1em;
}

.dailyberry-sandwich__photo {
	width: 7em;
	height: 7em;
	max-width: 100%;
	object-fit: cover;
	flex-shrink: 0;
}

.dailyberry-sandwich__text {
	min-width: 0;
}

/* Narrow screens: photo stacks above the title/description, centered at
   50% width (matches the app's 475px sandwich breakpoint) */
@media (max-width: 474.98px) {
	.dailyberry-sandwich__body {
		flex-direction: column;
		align-items: flex-start;
		margin-top: 0.75em;
	}

	.dailyberry-sandwich__photo {
		align-self: center;
		width: 50%;
		height: auto;
		aspect-ratio: 1;
	}
}

/* Day note — sizing/italics come from <small><em>; block so it sits on its
   own line below the flavor name or **CLOSED** */
.dailyberry-note {
	display: block;
}

/* Fan favorite / Today / Sold Out badge — outlined pill, no color opinion */
.dailyberry-badge {
	display: inline-block;
	padding: 0 0.5em;
	border: 1px solid currentColor;
	border-radius: 999px;
	vertical-align: middle;
	white-space: nowrap;
}

/* Flavor links (open the modal) — layout only; link color, underline, and
   cursor come from the theme's normal anchor styling. The ::after overlay
   stretches across the positioned day cell / list row, so a tap anywhere in
   the square opens the popup while the date number stays plain text. */
.dailyberry-flavor-link {
	overflow-wrap: anywhere;
}

.dailyberry-flavor-link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/* Calendar nav */
.dailyberry-cal-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5em;
	margin-bottom: 0.5em;
}

/* Desktop calendar table (>=768px) */
.dailyberry-cal {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.dailyberry-cal th {
	padding: 0.35em 0.25em;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	text-align: center;
}

.dailyberry-cal__day {
	position: relative; /* anchor ::after overlay stretches to this box */
	padding: 0.35em;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	vertical-align: top;
	height: 4.5em; /* acts as min-height on table cells — even rows, full-square tap area */
	overflow-wrap: anywhere;
}

/* Keep long flavor names inside their own cell */
.dailyberry-cal__link {
	display: block;
}

.dailyberry-cal__day--outside {
	opacity: 0.45;
}

.dailyberry-cal__day--today {
	box-shadow: inset 0 0 0 2px currentColor;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.dailyberry-cal__date {
	display: block;
	opacity: 0.6;
}

/* Mobile stacked day list (<768px) */
.dailyberry-cal-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dailyberry-cal-list__day {
	position: relative; /* anchor ::after overlay stretches to this box */
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.75em;
	padding: 0.6em 0.75em;
	margin: 0 0 0.35em;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	border-radius: 0.5em;
}

.dailyberry-cal-list__day--today {
	box-shadow: inset 0 0 0 2px currentColor;
	background: color-mix(in srgb, currentColor 6%, transparent);
}

.dailyberry-cal-list__date {
	flex-shrink: 0;
}

.dailyberry-cal-list__flavor {
	min-width: 0;
	text-align: right;
	overflow-wrap: anywhere;
}

.dailyberry-cal-list__none {
	opacity: 0.35;
}

/* Breakpoint: table above 768px, list below (matches the app's md breakpoint) */
@media (max-width: 767.98px) {
	.dailyberry-cal--desktop {
		display: none;
	}
}

@media (min-width: 768px) {
	.dailyberry-cal-list {
		display: none;
	}
}

/* Flavor description modal — positioning and containment only;
   the dialog's text, background, and the Close button style come from the theme/UA */
.dailyberry-modal {
	max-width: min(28rem, calc(100vw - 2rem));
	padding: 1.5rem;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	border-radius: 0.5em;
}

.dailyberry-modal::backdrop {
	background: rgba(0, 0, 0, 0.4);
}

.dailyberry-modal__name {
	margin: 0 0 0.5em;
}

.dailyberry-modal__desc {
	margin: 0 0 1.25em;
}