/* Styles specific to /breakfast-menu (and reused by /glp-1-menu,
   /catering-menu for the sticky TOC / toast-note pattern where used).
   Ported from _design/menu.html's inline <style> block — the base rules
   didn't exist in site.css (only @media print overrides for these
   classes did, which is why they looked "present" on a naive grep). */

.menu-toc {
	/* Sticks just below .nav (also sticky/top:0, z-index:50 — see
	   site.css) rather than at top:0, which would overlap it. --nav-height
	   is measured live by nav.js since the real nav's height changes
	   across breakpoints (e.g. .nav-links hides under 1100px); 72px is
	   only the pre-JS/no-JS fallback. */
	position: sticky;
	top: var(--nav-height, 72px);
	z-index: 40;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
	padding: 14px 0;
}
.menu-toc-inner { display: flex; gap: var(--space-3); overflow-x: auto; scrollbar-width: none; }
.menu-toc-inner::-webkit-scrollbar { display: none; }
.menu-toc a {
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: var(--radius-pill);
	background: var(--surface-warm);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid var(--border);
	color: var(--fg1);
	text-decoration: none;
}
.menu-toc a:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }

.menu-section {
	padding: var(--space-16) 0 var(--space-10);
	border-bottom: 1px solid var(--border);
	/* Clicking a TOC pill anchor-jumps a section to the very top of the
	   viewport by default — which lands it underneath .nav + .menu-toc
	   (both sticky, stacked). This reserves that space above the target
	   instead, plus a little breathing room, so the heading lands just
	   below both bars rather than behind them. */
	scroll-margin-top: calc(var(--nav-height, 72px) + var(--menu-toc-height, 64px) + var(--space-4));
}
.menu-section:last-of-type { border-bottom: 0; }
.menu-section-head { display: grid; grid-template-columns: 1fr 1.3fr; gap: var(--space-8); align-items: end; margin-bottom: var(--space-8); }
@media (max-width: 800px) { .menu-section-head { grid-template-columns: 1fr; gap: var(--space-5); } }

.toast-note {
	display: flex;
	gap: var(--space-3);
	align-items: center;
	padding: var(--space-3) var(--space-4);
	background: var(--surface-warm);
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	font-size: 14px;
	color: var(--fg2);
	margin-top: var(--space-5);
}
.toast-note strong { color: var(--fg1); }
.toast-note .toast-dot { width: 8px; height: 8px; background: var(--accent); border-radius: 50%; flex-shrink: 0; }