/* Food and drinks menus from Toast (cbco-menu.php), 2026-10-13.
 * The Warehouse menu design (Claude Design handoff "Warehouse Menu Explorations", turn 7b; exact
 * values in food-menus/work/design-components.md §3) at web sizes, inside the location page's
 * #menus drop-downs. On-brand navy #002D5C — deliberately NOT the page's --lp-navy #01207f.
 * Enqueued only where the module renders. The panels close with height:0 + visibility:hidden
 * (css/cbco-location.css), never display:none, so the menu text stays in the page.
 * Fonts: the licensed Flama OTFs (D11, 2026-10-13: the license covers www.cinderlands.com). A
 * browser downloads a face only for text that uses it, and closed panels still lay their text out,
 * so a closed drop-down sets the fallback stack (below): the ~310 KB of OTFs load when a menu is
 * hovered, focused or opened, never with the page. */

@font-face { font-family: 'Flama'; src: url('../fonts/Flama-Basic.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Flama'; src: url('../fonts/Flama-BasicItalic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Flama'; src: url('../fonts/Flama-Medium.otf') format('opentype'); font-weight: 500 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Flama Condensed'; src: url('../fonts/FlamaCondensed-Medium.otf') format('opentype'); font-weight: 400 700; font-style: normal; font-display: swap; }

.cbco-menu {
	--menu-navy: #002D5C; --menu-navy-soft: #33577D; --menu-navy-wash: #E5EAEF;
	--menu-ember: #E04E39; --menu-ember-deep: #C43F2C; --menu-ember-tint: #F9EDEA; --menu-cream: #F0EAD8;
	--menu-rule: rgba(0, 45, 92, .25); --menu-rule-col: rgba(0, 45, 92, .14); --menu-out: rgba(0, 45, 92, .45);
	--menu-font: 'Flama', -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--menu-font-cond: 'Flama Condensed', 'Flama', -apple-system, 'Arial Narrow', Arial, sans-serif;
	container: cbco-menu / inline-size;
	font-family: var(--menu-font); font-size: 14px; font-weight: 400; line-height: 1.4; color: var(--menu-navy);
	text-align: left; -webkit-font-smoothing: antialiased;
}
/* inside a closed drop-down (not hovered / focused): no Flama, so no font download until a guest reaches for a menu */
.cbco-loc__acc:not(.is-open):not(:hover):not(:focus-within) .cbco-menu {
	--menu-font: -apple-system, 'Helvetica Neue', Arial, sans-serif;
	--menu-font-cond: -apple-system, 'Arial Narrow', Arial, sans-serif;
}
/* the theme styles bare p / ul / li / h3; every element here carries a class, so these win */
.cbco-menu p, .cbco-menu ul, .cbco-menu li, .cbco-menu span, .cbco-menu a, .cbco-menu abbr { font-family: inherit; }
.cbco-menu p { margin: 0; padding: 0; }
.cbco-menu ul, .cbco-menu li { list-style: none; margin: 0; padding: 0; }
.cbco-menu li::before { content: none; }
.cbco-menu abbr[title] { text-decoration: none; border: 0; cursor: help; }
.cbco-menu .cbco-menu__sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* subtitle (Manager), e.g. "Sundays 10:30–2" */
.cbco-menu .cbco-menu__sub { font-size: 11.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--menu-ember-deep); margin: 0 0 16px; }
/* the drinks drop-down's first line ("Draft beer is on this page's live board…"): a whole sentence,
 * so the design's italic-note voice (design-components.md §3) instead of a subtitle's tracked caps */
.cbco-menu .cbco-menu__sub--note { font-size: 13.5px; font-weight: 400; font-style: italic; letter-spacing: 0; text-transform: none; line-height: 1.45; color: var(--menu-navy-soft); margin: 0 0 18px; }

/* sections: one column, two when the drop-down is wide enough (container query, below) */
.cbco-menu .cbco-menu__section { margin: 0 0 26px; }
.cbco-menu .cbco-menu__section--line { break-inside: avoid; }
.cbco-menu .cbco-menu__top { break-inside: avoid; break-after: avoid; }
.cbco-menu .cbco-menu__tick { display: block; width: 22px; height: 4px; background: var(--menu-ember); margin-bottom: 7px; }
.cbco-menu .cbco-menu__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; border-bottom: 1.5px solid var(--menu-rule); padding-bottom: 5px; margin-bottom: 10px; }
.cbco-menu h3.cbco-menu__h { font-family: var(--menu-font-cond); font-size: 26px; font-weight: 500; letter-spacing: .05em; line-height: 1; text-transform: uppercase; color: var(--menu-navy); margin: 0; padding: 0; text-wrap: balance; }
.cbco-menu .cbco-menu__sp { font-size: 15px; font-weight: 500; color: var(--menu-ember-deep); }
.cbco-menu .cbco-menu__intro { font-size: 13.5px; line-height: 1.45; color: var(--menu-navy-soft); margin: 0 0 11px; }
.cbco-menu .cbco-menu__intro + .cbco-menu__intro { margin-top: -8px; } /* the intro, then "Served with …" */
.cbco-menu .cbco-menu__line { font-size: 14.5px; line-height: 1.6; }
.cbco-menu .cbco-menu__line .cbco-menu__price { margin-left: 1px; }
/* the shared add-ons' block under the heading (design turn 7a's tinted band; Jamie 2026-10-14): one line per verb */
.cbco-menu .cbco-menu__ladder { border: 1.5px solid var(--menu-navy); background: var(--menu-ember-tint); padding: 7px 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.5; font-weight: 500; break-inside: avoid; }
.cbco-menu .cbco-menu__ladder-line { margin: 0; }
.cbco-menu .cbco-menu__ladder-line + .cbco-menu__ladder-line { margin-top: 2px; }
.cbco-menu .cbco-menu__ladder-h { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--menu-ember-deep); }
.cbco-menu .cbco-menu__note { font-size: 13px; font-style: italic; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 6px; break-inside: avoid; }

/* items */
.cbco-menu .cbco-menu__item { margin: 0 0 13px; break-inside: avoid; }
.cbco-menu .cbco-menu__items > .cbco-menu__item:first-child { break-before: avoid; }
.cbco-menu .cbco-menu__name { font-size: 16px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; line-height: 1.25; }
.cbco-menu .cbco-menu__price { color: var(--menu-ember-deep); margin-left: 7px; white-space: nowrap; } /* the design's margin-left:7px; no space before it in the markup */
.cbco-menu .cbco-menu__diet { margin-left: 2px; font-size: 11px; letter-spacing: .22em; color: var(--menu-navy-soft); white-space: nowrap; }
.cbco-menu .cbco-menu__flag { display: inline-block; margin-left: 3px; padding: 2px 6px 1px; font-size: 10px; letter-spacing: .16em; line-height: 1.3; color: #fff; background: var(--menu-ember-deep); vertical-align: 2px; }
.cbco-menu .cbco-menu__flag--fave { background: var(--menu-navy); }
.cbco-menu .cbco-menu__special { display: inline-block; margin-left: 2px; padding: 1px 7px; background: var(--menu-ember-tint); color: var(--menu-ember-deep); font-size: 12.5px; letter-spacing: .03em; text-transform: none; line-height: 1.5; vertical-align: 1px; white-space: nowrap; }
.cbco-menu .cbco-menu__when { color: var(--menu-navy-soft); font-weight: 400; }
.cbco-menu .cbco-menu__desc { font-size: 14px; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 3px; }
.cbco-menu .cbco-menu__item .cbco-menu__inc { font-size: 13px; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 3px; } /* "Served with Chips" when a section's sides differ */
.cbco-menu .cbco-menu__allergens { font-size: 12px; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 3px; }
.cbco-menu .cbco-menu__inote { font-size: 12.5px; font-style: italic; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 3px; }
.cbco-menu .cbco-menu__addons { font-size: 13px; font-weight: 500; line-height: 1.45; color: var(--menu-ember-deep); margin-top: 3px; }
.cbco-menu .cbco-menu__choices { font-size: 13px; line-height: 1.45; color: var(--menu-navy-soft); margin-top: 3px; }
.cbco-menu .cbco-menu__cl { font-weight: 500; color: var(--menu-navy); }

/* 86'd in Toast: greyed, "sold out today" where the price was */
.cbco-menu .is-out .cbco-menu__n, .cbco-menu .is-out .cbco-menu__desc, .cbco-menu .cbco-menu__line .is-out { color: var(--menu-out); }
.cbco-menu .cbco-menu__out { margin-left: 7px; font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--menu-navy-soft); white-space: nowrap; } /* design §4: 11.5px .05em, where the price was */
.cbco-menu .cbco-menu__line .cbco-menu__out { margin-left: 1px; }

/* the Manager's callout (Super Secret Burger Club) */
.cbco-menu .cbco-menu__callout { border: 2px solid var(--menu-navy); background: var(--menu-ember-tint); padding: 13px 16px; margin: 2px 0 0; max-width: 560px; }
.cbco-menu .cbco-menu__callout + .cbco-menu__callout { margin-top: 12px; }
.cbco-menu .cbco-menu__callout-eye { font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--menu-ember-deep); margin-bottom: 5px; }
.cbco-menu .cbco-menu__callout-t { font-size: 17px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2; }
.cbco-menu .cbco-menu__callout-b { font-size: 14px; line-height: 1.4; color: var(--menu-navy-soft); margin-top: 3px; }

/* footer lines, legend, print link */
.cbco-menu .cbco-menu__end { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-top: 2px solid var(--menu-navy); margin-top: 22px; padding-top: 10px; }
.cbco-menu .cbco-menu__end-txt { flex: 1 1 260px; min-width: 0; }
.cbco-menu .cbco-menu__foot { font-size: 13px; line-height: 1.45; color: var(--menu-navy-soft); }
.cbco-menu .cbco-menu__legend { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.6; color: var(--menu-navy-soft); margin-top: 4px; }
.cbco-menu .cbco-menu__legend:first-child { margin-top: 0; }
.cbco-menu a.cbco-menu__print { flex: 0 0 auto; font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--menu-ember-deep); text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }
.cbco-menu a.cbco-menu__print:hover, .cbco-menu a.cbco-menu__print:focus-visible { color: var(--menu-navy); }

/* two columns of sections when the drop-down is at least ~600px wide inside: desktop with the
 * tap card beside it from ~1200px, and the stacked layout from ~760px (the page stacks at 960px).
 * Note: the brief's rule is two columns from a 760px viewport; the panel's width is measured instead (accepted at integration, 2026-10-13) because at 960–1200px the menus sit beside the tap card in a ~520–650px panel, too narrow for two columns.
 * The divider is the design's own column rule (design-components.md §2: right column
 * border-left 1px rgba(0,45,92,.14)). */
@container cbco-menu (min-width: 600px) {
	.cbco-menu .cbco-menu__cols { columns: 2; column-gap: 36px; column-rule: 1px solid var(--menu-rule-col); }
}
@supports not (container-type: inline-size) {
	@media (min-width: 761px) and (max-width: 960px), (min-width: 1200px) {
		.cbco-menu .cbco-menu__cols { columns: 2; column-gap: 36px; column-rule: 1px solid var(--menu-rule-col); }
	}
}

/* phones: a touch smaller, still one column */
@container cbco-menu (max-width: 420px) {
	.cbco-menu .cbco-menu__name { font-size: 15px; }
	.cbco-menu .cbco-menu__desc { font-size: 13.5px; }
	.cbco-menu h3.cbco-menu__h { font-size: 24px; }
	.cbco-menu .cbco-menu__end { flex-direction: column; align-items: flex-start; }
	.cbco-menu .cbco-menu__end-txt { flex: 0 0 auto; } /* stacked, the 260px basis would be a height: a gap above the print link */
}