/* Order Food & Beer Online page (page-order.php / cbco-order-page.php), 2026-09-30.
 * Loads on top of cbco-location.css: the hero, facts strip, cards, buttons and
 * sections are the location page's; this file adds what is specific to ordering —
 * the three location cards with live status and the ordering links, the numbered
 * "how it works" steps with the good-to-know card, and the navy closing card. */

.cbco-loc h1.cbco-op__h1 { max-width: 13ch; }
.cbco-op img.cbco-loc__hero-img { object-position: 62% 50%; }
/* room above the eyebrow and below the buttons, as on the events page; Salient's container rule zeroes the template padding */
.cbco-op .cbco-loc__hero-in, body .container-wrap.cbco-op .cbco-loc__hero-in { padding-top: 96px !important; padding-bottom: 96px !important; min-height: 600px; }
@media (max-width: 760px) {
	.cbco-op .cbco-loc__hero-in, body .container-wrap.cbco-op .cbco-loc__hero-in { padding-top: 64px !important; padding-bottom: 56px !important; }
	.cbco-op img.cbco-loc__hero-img { object-position: 50% 30%; }
}
.cbco-loc__fact small { display: block; font-size: 13px; color: var(--lp-muted); }

/* ---------- the three location cards ---------- */
.cbco-op__locs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: stretch; }
.cbco-op__loc { border-radius: 14px; }
.cbco-op__loc:hover { transform: none; box-shadow: 0 14px 30px rgba(1, 32, 127, .1); }
.cbco-op__loc.is-open { border-color: color-mix(in srgb, var(--acc) 45%, var(--lp-line)); }
.cbco-op__ph { position: relative; aspect-ratio: 16 / 10; }
.cbco-op__ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--acc, var(--lp-navy)) 45%, transparent) 0%, transparent 50%); pointer-events: none; }
.cbco-op__state { position: absolute; z-index: 1; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--lp-muted); border-radius: 999px; padding: 6px 12px 6px 10px; font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 500; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.cbco-op__state::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #9aa0b8; }
.cbco-op__state.is-open { color: var(--lp-navy); }
.cbco-op__state.is-open::before { background: #2fb968; box-shadow: 0 0 0 3px rgba(47, 185, 104, .22); }
.cbco-op__body { padding: 20px 22px 22px; gap: 8px; }
.cbco-op__loc h3 { font-size: 27px; font-weight: 700; color: var(--lp-navy); }
.cbco-op__hours { font-family: 'Oswald', Arial, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .02em; color: var(--lp-ink); }
.cbco-op__hours em { font-style: normal; color: var(--lp-muted); font-weight: 400; }
.cbco-op__hours i, .cbco-op .cbco-op__hours button.cbco-op__sp-btn { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-style: normal; font-family: inherit; font-weight: 500; line-height: 1.4; margin: 0 0 0 6px; background: var(--lp-ember-deep); color: #fff; border: 0; border-radius: 999px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; vertical-align: 2px; }
.cbco-op .cbco-op__hours button.cbco-op__sp-btn { cursor: pointer; transition: background .15s ease, transform .15s ease; }
.cbco-op .cbco-op__hours button.cbco-op__sp-btn:hover, .cbco-op .cbco-op__hours button.cbco-op__sp-btn:focus-visible { background: var(--lp-navy); transform: translateY(-1px); outline: none; }
.cbco-op .cbco-op__hours button.cbco-op__sp-btn:focus-visible { box-shadow: 0 0 0 3px rgba(1, 32, 127, .25); }
.cbco-op .cbco-op__hours button.cbco-op__sp-btn svg { flex: 0 0 auto; }

/* the "special hours" window — a native <dialog>, so it sits above the card's overflow:hidden and locks the page while open */
.cbco-op dialog.cbco-op__sp { margin: auto; padding: 0; border: 0; border-radius: 16px; width: min(460px, calc(100vw - 32px)); max-width: none; background: #fff; color: var(--lp-ink); font-family: 'Open Sans', Arial, sans-serif; font-size: 16px; line-height: 1.55; box-shadow: 0 30px 80px rgba(var(--lp-shade), .35); }
.cbco-op dialog.cbco-op__sp::backdrop { background: rgba(1, 15, 82, .6); backdrop-filter: blur(2px); }
.cbco-op dialog.cbco-op__sp[open] { animation: cbco-op-sp-in .22s ease-out; }
@keyframes cbco-op-sp-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cbco-op__sp-in { position: relative; padding: 28px 28px 26px; border-top: 6px solid var(--acc, var(--lp-ember)); border-radius: 16px 16px 0 0; }
.cbco-op__sp-in .cbco-loc__eyebrow { display: block; color: var(--lp-ember-deep); padding-right: 44px; /* clear the × button */ }
.cbco-op dialog.cbco-op__sp h3 { font-family: 'Oswald', Arial, sans-serif; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 26px; line-height: 1.15; margin: 6px 36px 16px 0; color: var(--lp-navy); }
.cbco-op dialog.cbco-op__sp p { margin: 0 0 20px; color: var(--lp-muted); font-size: 15px; }
.cbco-op__sp-hrs { display: grid; gap: 8px; margin: 0 0 18px; padding: 14px 16px; background: var(--lp-paper); border: 1px solid var(--lp-line); border-radius: 10px; }
.cbco-op__sp-hrs div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.cbco-op__sp-hrs dt { margin: 0; font-family: 'Oswald', Arial, sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--lp-muted); }
.cbco-op__sp-hrs dd { margin: 0; font-family: 'Oswald', Arial, sans-serif; font-weight: 500; font-size: 17px; color: var(--lp-ink); white-space: nowrap; }
.cbco-op__sp-hrs div:first-child dd { color: var(--lp-ember-deep); }
.cbco-op__sp-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.cbco-op__sp-in form { position: absolute; top: 14px; right: 14px; margin: 0; }
.cbco-op .cbco-op__sp-x { width: 34px; height: 34px; border: 0; border-radius: 50%; background: var(--lp-paper); color: var(--lp-ink); font-size: 24px; line-height: 1; cursor: pointer; padding: 0; display: grid; place-items: center; font-family: Arial, sans-serif; transition: background .15s ease; }
.cbco-op .cbco-op__sp-x:hover, .cbco-op .cbco-op__sp-x:focus-visible { background: var(--lp-navy); color: #fff; outline: none; }
@media (max-width: 480px) {
	.cbco-op__sp-in { padding: 22px 20px 20px; }
	.cbco-op dialog.cbco-op__sp h3 { font-size: 22px; }
	.cbco-op__sp-hrs div { flex-direction: column; gap: 2px; }
}
.cbco-op__loc p.cbco-loc__card-text { font-size: 15px; }
.cbco-op__acts { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.cbco-loc a.cbco-op__order { justify-content: center; width: 100%; font-size: 15px; padding: .85em 1.4em; }
.cbco-op__apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cbco-op__apps > span { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 500; color: var(--lp-muted); margin-right: 2px; }
.cbco-op__foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--lp-line); display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--lp-muted); }
.cbco-op__foot a { white-space: nowrap; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cbco-loc a.cbco-op__more { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 500; color: var(--lp-ember-deep); text-decoration: none; white-space: nowrap; }
.cbco-loc a.cbco-op__more:hover { color: var(--lp-navy); text-decoration: underline; text-underline-offset: 3px; }
/* the same row across all three cards shares one height (bar, photo, area, name, hours, blurb, buttons, foot),
   so the ember Order buttons and the address lines sit level whatever the text length (Joanna, 2026-09-30) */
@supports (grid-template-rows: subgrid) {
	.cbco-op__loc { display: grid; grid-template-rows: subgrid; grid-row: span 8; row-gap: 0; }
	.cbco-op__body { display: grid; grid-template-rows: subgrid; grid-row: span 6; row-gap: 8px; align-content: start; }
	.cbco-op__body > * { align-self: start; }
	.cbco-op__body > .cbco-op__foot { margin-top: 0; align-self: end; }
}
@media (max-width: 960px) { .cbco-op__locs { grid-template-columns: 1fr; max-width: 560px; } }

/* ---------- how it works: numbered steps + the good-to-know card ---------- */
.cbco-op__how { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 48px; align-items: start; }
.cbco-loc ol.cbco-op__steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; counter-reset: none; }
.cbco-loc ol.cbco-op__steps li { display: grid; grid-template-columns: 64px 1fr; gap: 18px; padding: 22px 0; border-top: 1px solid var(--lp-line); margin: 0; }
.cbco-loc ol.cbco-op__steps li:last-child { border-bottom: 1px solid var(--lp-line); }
.cbco-loc ol.cbco-op__steps b { font-family: 'Oswald', Arial, sans-serif; font-size: 48px; line-height: .9; font-weight: 700; color: var(--lp-ember); font-variant-numeric: tabular-nums; }
.cbco-loc ol.cbco-op__steps h3 { font-size: 22px; color: var(--lp-navy); margin-bottom: 6px; }
.cbco-loc ol.cbco-op__steps p { font-size: 15.5px; color: var(--lp-muted); max-width: 52ch; }
.cbco-op__know { background: var(--lp-cream); border-radius: 14px; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; position: sticky; top: 110px; }
.cbco-op__know h3 { font-size: 13px; letter-spacing: .14em; font-weight: 500; color: var(--lp-ember-deep); }
.cbco-loc .cbco-op__know ul { display: grid; gap: 12px; font-size: 15px; }
.cbco-loc .cbco-op__know li { padding-left: 24px; position: relative; }
.cbco-loc .cbco-op__know li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; border-top: 3px solid var(--lp-ember); }
@media (max-width: 860px) {
	.cbco-op__how { grid-template-columns: 1fr; gap: 28px; }
	.cbco-op__know { position: static; }
	.cbco-loc ol.cbco-op__steps li { grid-template-columns: 44px 1fr; gap: 12px; padding: 18px 0; }
	.cbco-loc ol.cbco-op__steps b { font-size: 36px; }
}

/* ---------- closing duo: the Beer Finder card in navy (ember stays the ordering colour) ---------- */
.cbco-loc .cbco-op__find { background: var(--lp-navy); }
.cbco-loc .cbco-op__find p { color: var(--lp-on-dark-text); }
.cbco-loc .cbco-op__find .cbco-loc__eyebrow { color: var(--lp-on-dark-accent); }
.cbco-loc .cbco-op__find a.cbco-loc__btn--white { color: var(--lp-navy); }
.cbco-loc .cbco-op__find a.cbco-loc__btn--ghostw:hover { color: var(--lp-navy); }