/* Marty's Menu — branded, mobile-first display.
   Brand tokens (see site BRANDING.md): teal #2A656B, Playfair Display headings, Inter body. */
.mm-menu {
	--mm-teal:  #2A656B;
	--mm-slate: #54595F;
	--mm-gray:  #7A7A7A;
	--mm-ink:   #1a1a1a;
	--mm-paper: #ffffff;
	--mm-line:  #e5e7e8;
	--mm-font-display: "Playfair Display", Georgia, serif;
	--mm-font-body: "Inter", -apple-system, "Segoe UI", sans-serif;
	color: var(--mm-ink);
	font-family: var(--mm-font-body);
	width: 100%;
	margin: 0;
}

/* Category grid: single column on mobile, multi-column on wider screens. */
.mm-menu--columns {
	/* Newspaper-style flow: all categories stream through the columns and balance,
	   so a short category is followed by the next one in the SAME column (no gaps). */
	column-gap: 3rem;
	column-count: 1;
}
@media (min-width: 720px) {
	.mm-menu--columns { column-count: 2; }
}
@media (min-width: 1040px) {
	.mm-menu--columns { column-count: 3; }
}

/* Categories may flow/split across columns for a tight fill, but individual items
   never split, and a category title is never orphaned at a column bottom. */
.mm-menu--columns .mm-item { break-inside: avoid; }
.mm-menu--columns .mm-cat-head { break-inside: avoid; break-after: avoid; }

.mm-cat { margin: 0 0 2rem; }
.mm-cat-head { margin-bottom: 1rem; }
.mm-cat-title {
	font-family: var(--mm-font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--mm-ink);
	margin: 0 0 .35rem;
	padding-bottom: .4rem;
	border-bottom: 3px solid var(--mm-teal);
	display: inline-block;
}
.mm-cat-note {
	font-style: italic;
	color: var(--mm-gray);
	font-size: .9rem;
	margin: .25rem 0 0;
}

.mm-item { padding: .7rem 0; border-bottom: 1px solid var(--mm-line); }
.mm-item:last-child { border-bottom: 0; }
.mm-item-main { min-width: 0; } /* allow dot-leader flex to shrink */

/* Optional dish photo: shown as a full-width banner above the item text, so a real
   photo reads as an appetizing menu card. Without an image, layout is the clean
   text menu (unchanged). */
.mm-item-photo {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 12px;
	overflow: hidden;
	background: #f2f4f4;
	margin: .1rem 0 .7rem;
}
.mm-item-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.mm-item--has-image:hover .mm-item-photo img { transform: scale(1.03); }

/* Photo items become a branded card so the photo + its text read as one group,
   set apart from the surrounding flat text rows. */
.mm-item--has-image {
	border: 1px solid var(--mm-line);
	border-top: 3px solid var(--mm-teal);
	border-radius: 12px;
	padding: .7rem .8rem .8rem;
	margin: .4rem 0 1rem;
	background: var(--mm-paper);
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
	break-inside: avoid;
}
.mm-item--has-image:last-child { border-bottom: 1px solid var(--mm-line); } /* override the hairline reset */
.mm-item--has-image .mm-item-photo { margin: 0 0 .7rem; }

/* Name … price row with dot leaders. */
.mm-item-head {
	display: flex;
	align-items: baseline;
	gap: .4rem;
}
.mm-item-name {
	font-family: var(--mm-font-body);
	font-weight: 700;
	font-size: 1.15rem;
	margin: 0;
	color: var(--mm-ink);
	flex: 0 1 auto;
}
.mm-dots {
	flex: 1 1 auto;
	border-bottom: 2px dotted #cfd4d5;
	transform: translateY(-3px);
	min-width: 12px;
}
.mm-price {
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--mm-teal);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.mm-desc {
	margin: .2rem 0 0;
	color: var(--mm-gray);
	font-size: .9rem;
	line-height: 1.45;
}

/* Badges (GF, Veg, etc.) */
.mm-badge {
	display: inline-block;
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	vertical-align: middle;
	padding: .1em .45em;
	border-radius: 999px;
	background: var(--mm-teal);
	color: #fff;
	margin-left: .15rem;
}
.mm-badge--spicy, .mm-badge--popular { background: transparent; color: inherit; padding: 0; }

/* Inline modifiers line (Add Egg $3 · Add Bacon $2.50) */
.mm-mods {
	margin: .35rem 0 0;
	font-size: .82rem;
	font-style: italic;
	color: var(--mm-slate);
}

/* Variable price tiers list (Bagels: butter .50 …) */
.mm-tiers, .mm-opts { list-style: none; margin: .4rem 0 0; padding: 0; }
.mm-tiers li, .mm-opts li {
	display: flex;
	align-items: baseline;
	gap: .4rem;
	font-size: .88rem;
	padding: .12rem 0;
	color: var(--mm-slate);
}
.mm-tiers li::after, .mm-opts li::after { content: none; }
.mm-opt-label { flex: 0 1 auto; }
.mm-tiers li .mm-opt-price, .mm-opts li .mm-opt-price {
	margin-left: auto;
	color: var(--mm-teal);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Collapsible attached option groups (Proteins, Breads…) */
.mm-group { margin: .4rem 0 0; }
.mm-group > summary {
	cursor: pointer;
	font-size: .84rem;
	font-weight: 600;
	color: var(--mm-teal);
	list-style: none;
}
.mm-group > summary::-webkit-details-marker { display: none; }
.mm-group > summary::before { content: "＋ "; font-weight: 700; }
.mm-group[open] > summary::before { content: "－ "; }
.mm-group > summary em { color: var(--mm-gray); font-weight: 400; }

/* Accordion layout (mobile-friendly single column of collapsible categories) */
.mm-menu--accordion .mm-cat {
	border: 1px solid var(--mm-line);
	border-radius: 10px;
	margin-bottom: .75rem;
	overflow: hidden;
}
.mm-menu--accordion .mm-cat-head {
	margin: 0;
	padding: 1rem 1.2rem;
	cursor: pointer;
	background: #fafbfb;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.mm-menu--accordion .mm-cat-title { border: 0; margin: 0; padding: 0; }
.mm-menu--accordion .mm-cat-body {
	padding: 0 1.2rem 1rem;
	display: none;
}
.mm-menu--accordion .mm-cat.is-open .mm-cat-body { display: block; }
.mm-menu--accordion .mm-cat-head::after {
	content: "＋";
	color: var(--mm-teal);
	font-size: 1.4rem;
	line-height: 1;
}
.mm-menu--accordion .mm-cat.is-open .mm-cat-head::after { content: "－"; }

/* ---- Mobile "Jump to section" category picker (portrait phones only) ---- */
.mm-jump { display: none; }
.mm-jump-btn {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	z-index: 40;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: #2A656B;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: .8rem 1.4rem;
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	font-weight: 600;
	box-shadow: 0 6px 20px rgba(0,0,0,.28);
	cursor: pointer;
}
.mm-jump-btn:active { transform: translateX(-50%) scale(.97); }
.mm-jump-ico { font-size: 1.05rem; }

.mm-jump-backdrop {
	position: fixed; inset: 0; z-index: 44;
	background: rgba(0,0,0,.4);
}
.mm-jump-sheet {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 45;
	background: #fff;
	border-radius: 18px 18px 0 0;
	padding: .5rem .75rem calc(env(safe-area-inset-bottom, 0px) + .75rem);
	box-shadow: 0 -8px 30px rgba(0,0,0,.25);
	max-height: 70vh;
	overflow-y: auto;
	animation: mm-sheet-up .22s ease;
}
@keyframes mm-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.mm-jump-sheet-head {
	display: flex; align-items: center; justify-content: space-between;
	font-family: "Playfair Display", serif; font-weight: 700; font-size: 1.15rem;
	padding: .6rem .6rem .4rem;
	border-bottom: 2px solid #e5e7e8;
	margin-bottom: .35rem;
	position: sticky; top: 0; background: #fff;
}
.mm-jump-close {
	background: none; border: none; font-size: 1.6rem; line-height: 1;
	color: #7A7A7A; cursor: pointer; padding: 0 .3rem;
}
.mm-jump-link {
	display: block;
	padding: .95rem .8rem;
	font-family: "Inter", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	color: #1a1a1a;
	text-decoration: none;
	border-bottom: 1px solid #f0f2f2;
}
.mm-jump-link:last-child { border-bottom: 0; }
.mm-jump-link:active { background: #f2f6f6; color: #2A656B; }

/* Show the jump button only on portrait phones. */
@media (max-width: 640px) and (orientation: portrait) {
	.mm-jump { display: block; }
}

/* Offset anchor scroll so the category title isn't hidden under the sticky site header. */
.mm-cat { scroll-margin-top: 90px; }