/*
 * Site header — Option C "Locations up front" (cbco-nav.php).
 * Navy "Today" strip + white bar (logo · menu · Order / Beer Finder), fixed at
 * the top; the strip slides away once you scroll. Below 1100px (Salient's own
 * header breakpoint) = Option A: logo + Menu, no strip, full-screen list menu.
 * Ids (#cbco-nav) are used for resets because Salient styles bare buttons/lists.
 */

body.cbco-nav-on {
	--cbco-nav-strip: 40px;
	--cbco-nav-bar: 84px;
	--cbco-nav-ab: 0px;
}
body.cbco-nav-on.admin-bar { --cbco-nav-ab: 32px; }
@media (max-width: 782px) { body.cbco-nav-on.admin-bar { --cbco-nav-ab: 46px; } }
@media (max-width: 1099px) { body.cbco-nav-on { --cbco-nav-strip: 0px; --cbco-nav-bar: 66px; } } /* phones = Option A: no navy strip */

/* Salient's header, spacer and slide-out menu stay in the page, hidden. */
body.cbco-nav-on #header-outer,
body.cbco-nav-on #header-space,
body.cbco-nav-on #slide-out-widget-area,
body.cbco-nav-on #slide-out-widget-area-bg,
body.cbco-nav-on #mobile-menu { display: none !important; }
html:has(body.cbco-nav-on) { scroll-padding-top: calc(var(--cbco-nav-bar) + 16px); }

.cbco-nav-space { height: calc(var(--cbco-nav-strip) + var(--cbco-nav-bar)); }

#cbco-nav {
	--n-navy: #01207f; --n-deep: #010f52; --n-ember: #fa7500; --n-ember-deep: #b85600;
	--n-ink: #1c1f2a; --n-muted: #5f6472; --n-line: #dcd7c9; --n-paper: #f8f5ee;
	--n-open: #2e9e5b; --n-open-on-dark: #5fd08a;
	--n-lss: #b53a15;
	position: fixed; left: 0; right: 0; top: var(--cbco-nav-ab); z-index: 9998;
	font-family: 'Open Sans', Arial, sans-serif; color: var(--n-ink);
	transition: top .22s ease;
	-webkit-font-smoothing: antialiased;
}
#cbco-nav.is-condensed { top: calc(var(--cbco-nav-ab) - var(--cbco-nav-strip)); }
#cbco-nav *, #cbco-nav *::before, #cbco-nav *::after { box-sizing: border-box; }
#cbco-nav ul { list-style: none; margin: 0; padding: 0; }
#cbco-nav li { margin: 0; padding: 0; list-style: none; }
#cbco-nav li::before { content: none; }
#cbco-nav a { text-decoration: none; }
#cbco-nav button {
	all: unset; box-sizing: border-box; cursor: pointer;
	font-family: inherit; color: inherit; -webkit-tap-highlight-color: transparent;
}
/* Salient's rounded-button style forces border-radius: 200px on every button */
#cbco-nav button:focus-visible, #cbco-nav a:focus-visible { outline: 3px solid var(--n-ember); outline-offset: 2px; border-radius: 4px; }
#cbco-nav img { display: block; max-width: 100%; }
.cbco-nav__icon { flex: none; }

/* ---------- status dot ---------- */
.cbco-nav__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; border: 1.5px solid currentColor; opacity: .75; }
.cbco-nav__status { display: inline-flex; align-items: center; gap: 7px; }
.cbco-nav__status.is-open .cbco-nav__dot, .cbco-nav__dot.is-open { background: var(--n-open); border-color: var(--n-open); opacity: 1; }

/* ---------- navy strip ---------- */
.cbco-nav__strip { height: var(--cbco-nav-strip); background: var(--n-navy); color: #e6e9f5; font-size: 13px; line-height: 1; }
.cbco-nav__strip-inner { height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 36px; display: flex; align-items: center; gap: 26px; }
.cbco-nav__strip-label { font-family: Oswald, sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #ffb469; }
#cbco-nav .cbco-nav__strip-list { display: flex; gap: 26px; flex: 1; min-width: 0; }
#cbco-nav .cbco-nav__strip-list a { color: #e6e9f5; white-space: nowrap; }
#cbco-nav .cbco-nav__strip-list a:hover .cbco-nav__strip-name { text-decoration: underline; text-underline-offset: 3px; }
.cbco-nav__strip-name { font-weight: 600; color: #fff; }
.cbco-nav__strip .cbco-nav__status.is-open .cbco-nav__dot { background: var(--n-open-on-dark); border-color: var(--n-open-on-dark); }
.cbco-nav__strip .cbco-nav__dot { color: #c9d0f0; }
#cbco-nav .cbco-nav__strip-more { display: inline-flex; align-items: center; gap: 6px; color: #ffb469; font-weight: 600; white-space: nowrap; }
#cbco-nav .cbco-nav__strip-more:hover { color: #fff; }
.cbco-nav__strip-more .cbco-nav__icon { width: 15px; height: 15px; }

/* ---------- white bar ---------- */
.cbco-nav__bar { position: relative; height: var(--cbco-nav-bar); background: #fff; border-bottom: 1px solid var(--n-line); box-shadow: 0 6px 20px rgba(1, 15, 82, .06); }
.cbco-nav__bar-inner { height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 36px; display: flex; align-items: center; gap: 44px; }
#cbco-nav .cbco-nav__logo { flex: none; display: block; }
#cbco-nav .cbco-nav__logo img { height: 50px; width: auto; }

.cbco-nav__menu { flex: 1; min-width: 0; height: 100%; }
#cbco-nav .cbco-nav__top { display: flex; gap: 30px; height: 100%; }
.cbco-nav__item { display: flex; align-items: center; height: 100%; }
#cbco-nav .cbco-nav__label {
	display: inline-flex; align-items: center; gap: 4px; height: 100%;
	font-family: Oswald, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--n-ink); border-bottom: 3px solid transparent; border-top: 3px solid transparent; transition: color .15s, border-color .15s;
}
/* the labels are buttons, so Salient's 200px radius bent the underline into an arc */
#cbco-nav .cbco-nav__label { border-radius: 0 !important; }
#cbco-nav .cbco-nav__label:focus-visible { outline-offset: -3px; }
#cbco-nav .cbco-nav__toggle:not(.cbco-nav__label) { display: inline-flex; align-items: center; height: 36px; padding: 0 2px; color: var(--n-muted); }
.cbco-nav__item .cbco-nav__icon--chev { width: 15px; height: 15px; transition: transform .15s; color: var(--n-muted); }
#cbco-nav .cbco-nav__item.is-open .cbco-nav__label,
#cbco-nav .cbco-nav__item:hover .cbco-nav__label,
#cbco-nav .cbco-nav__item.is-current .cbco-nav__label { color: var(--n-navy); }
#cbco-nav .cbco-nav__item.is-open .cbco-nav__label { border-bottom-color: var(--n-ember); }
.cbco-nav__item.is-open .cbco-nav__icon--chev { transform: rotate(180deg); color: var(--n-navy); }

.cbco-nav__buttons { display: flex; gap: 10px; flex: none; }
#cbco-nav .cbco-nav__btn {
	display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 999px;
	font-family: Oswald, sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
	border: 2px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
#cbco-nav .cbco-nav__btn--order { background: var(--n-ember); border-color: var(--n-ember); color: var(--n-ink); }
#cbco-nav .cbco-nav__btn--order:hover { background: var(--n-ember-deep); border-color: var(--n-ember-deep); color: #fff; }
#cbco-nav .cbco-nav__btn--finder { background: var(--n-navy); border-color: var(--n-navy); color: #fff; }
#cbco-nav .cbco-nav__btn--finder:hover { background: var(--n-deep); border-color: var(--n-deep); color: #fff; }
#cbco-nav .cbco-nav__burger { display: none; }

/* ---------- dropdown panels ---------- */
.cbco-nav__panel {
	position: absolute; left: 0; right: 0; top: 100%;
	background: #fff; border-top: 1px solid var(--n-line);
	box-shadow: 0 22px 44px rgba(1, 15, 82, .18);
}
.cbco-nav__panel[hidden] { display: none; }
.cbco-nav__panel-inner {
	max-width: 1600px; margin: 0 auto; padding: 30px 36px 34px;
	display: grid; grid-template-columns: repeat(var(--cbco-nav-cols, 3), minmax(0, 1fr)); gap: 24px;
}

/* text links: photo + title + one-liner */
/* every menu spreads across the full bar like Visit; photos match the Visit card height so 3-item menus don't get huge */
.cbco-nav__panel:not(.cbco-nav__panel--locations) .cbco-nav__panel-inner { gap: 28px; }
#cbco-nav .cbco-nav__link { display: flex; flex-direction: column; gap: 6px; color: var(--n-ink); }
#cbco-nav .cbco-nav__link-photo { display: block; height: clamp(130px, 13vw, 210px); border-radius: 8px; overflow: hidden; background: #e9e5da; margin-bottom: 8px; }
#cbco-nav .cbco-nav__link-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease, opacity .3s ease; }
.cbco-nav__link-title { font-family: Oswald, sans-serif; font-weight: 500; font-size: 21px; line-height: 1.15; text-transform: uppercase; color: var(--n-navy); }
.cbco-nav__link-desc { font-size: 14px; line-height: 1.45; color: var(--n-muted); }
#cbco-nav .cbco-nav__link:hover .cbco-nav__link-photo img { transform: scale(1.04); }
#cbco-nav .cbco-nav__link:hover .cbco-nav__link-title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* deferred photos fade in once loaded */
#cbco-nav img[data-src] { opacity: 0; }

/* location cards */
.cbco-nav__card { display: flex; flex-direction: column; border: 1px solid var(--n-line); border-radius: 10px; overflow: hidden; background: #fff; }
#cbco-nav .cbco-nav__card-photo { display: block; aspect-ratio: 16 / 7; background: #e9e5da; overflow: hidden; }
#cbco-nav .cbco-nav__card-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
#cbco-nav .cbco-nav__card:hover .cbco-nav__card-photo img { transform: scale(1.03); }
.cbco-nav__card-body { display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 18px; }
.cbco-nav__card-area { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--n-muted); }
#cbco-nav .cbco-nav__card-name { font-family: Oswald, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.1; text-transform: uppercase; color: var(--n-navy); }
#cbco-nav .cbco-nav__card-name:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.cbco-nav__card .cbco-nav__status { font-size: 14px; font-weight: 600; color: var(--n-ink); }
.cbco-nav__card .cbco-nav__status.is-closed { color: var(--n-muted); }
.cbco-nav__card-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
#cbco-nav .cbco-nav__card-links a { font-family: Oswald, sans-serif; font-weight: 500; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; color: var(--n-navy); padding: 4px 0; }
#cbco-nav .cbco-nav__card-links a:hover { color: var(--n-ember-deep); }
/* Long Story Short keeps its own red (style guide: LSS is red, not navy) */
.cbco-nav__card--lss { background: #fbf7f1; border-color: #e8dccf; }
#cbco-nav .cbco-nav__card--lss .cbco-nav__card-name,
#cbco-nav .cbco-nav__card--lss .cbco-nav__card-links a { color: var(--n-lss); }

/* the phone drawer is phone-only */
#cbco-nav .cbco-nav__drawer { display: none; }

/* ---------- tighter desktop ---------- */
@media (max-width: 1360px) {
	.cbco-nav__bar-inner { gap: 32px; }
	#cbco-nav .cbco-nav__top { gap: 22px; }
	#cbco-nav .cbco-nav__label { font-size: 15px; }
	#cbco-nav .cbco-nav__btn { padding: 0 18px; }
	#cbco-nav .cbco-nav__logo img { height: 44px; }
}
@media (max-width: 1240px) {
	#cbco-nav .cbco-nav__strip-more { display: none; }
	.cbco-nav__strip-inner, .cbco-nav__bar-inner, .cbco-nav__panel-inner { padding-left: 24px; padding-right: 24px; }
}

/* ---------- phones + tablets ---------- */
@media (max-width: 1099px) {
	#cbco-nav .cbco-nav__strip { display: none; }
	.cbco-nav__strip-inner { padding: 0 16px; }

	.cbco-nav__bar-inner { padding: 0 8px 0 16px; gap: 12px; justify-content: space-between; }
	#cbco-nav .cbco-nav__logo img { height: 40px; }
	.cbco-nav__menu, .cbco-nav__bar .cbco-nav__buttons { display: none; }
	#cbco-nav .cbco-nav__burger {
		display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 10px;
		font-family: Oswald, sans-serif; font-weight: 500; font-size: 17px; letter-spacing: .06em; text-transform: uppercase; color: var(--n-navy);
	}
	.cbco-nav__burger .cbco-nav__icon { width: 24px; height: 24px; }

	/* full-screen menu */
	#cbco-nav .cbco-nav__drawer {
		display: flex; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; top: var(--cbco-nav-ab);
		z-index: 10000; background: #fff; overscroll-behavior: contain;
	}
	#cbco-nav .cbco-nav__drawer[hidden] { display: none; }
	.cbco-nav__drawer-head { flex: none; height: var(--cbco-nav-bar); display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 16px; border-bottom: 1px solid var(--n-line); }
	#cbco-nav .cbco-nav__close { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--n-navy); }
	.cbco-nav__close .cbco-nav__icon { width: 26px; height: 26px; }
	.cbco-nav__drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 0 12px; }

	#cbco-nav .cbco-nav__acc { margin: 0 20px; }
	#cbco-nav .cbco-nav__acc > li { border-bottom: 1px solid var(--n-line); }
	#cbco-nav .cbco-nav__acc-btn {
		display: flex; width: 100%; align-items: center; justify-content: space-between; min-height: 58px;
		font-family: Oswald, sans-serif; font-weight: 500; font-size: 24px; text-transform: uppercase; color: var(--n-navy);
	}
	.cbco-nav__acc-btn .cbco-nav__icon { width: 20px; height: 20px; transition: transform .15s; }
	#cbco-nav .cbco-nav__acc-btn[aria-expanded="true"] { color: var(--n-ember-deep); }
	.cbco-nav__acc-btn[aria-expanded="true"] .cbco-nav__icon { transform: rotate(180deg); }
	#cbco-nav .cbco-nav__acc-list { padding: 0 0 14px 2px; }
	#cbco-nav .cbco-nav__acc-list a { display: flex; align-items: center; gap: 14px; padding: 8px 0; color: var(--n-ink); }
	#cbco-nav .cbco-nav__acc-photo { flex: none; width: 60px; height: 60px; border-radius: 8px; overflow: hidden; background: #e9e5da; }
	#cbco-nav .cbco-nav__acc-photo img { width: 100%; height: 100%; object-fit: cover; transition: opacity .3s ease; }
	.cbco-nav__acc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
	.cbco-nav__acc-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
	.cbco-nav__acc-desc { font-size: 13px; line-height: 1.4; color: var(--n-muted); }

	.cbco-nav__drawer-foot { flex: none; display: flex; flex-direction: column; gap: 12px; padding: 16px 20px calc(14px + env(safe-area-inset-bottom)); background: var(--n-paper); border-top: 1px solid var(--n-line); }
	.cbco-nav__drawer-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	#cbco-nav .cbco-nav__drawer-foot .cbco-nav__btn { min-height: 48px; font-size: 15px; }
	/* Option A: Order is the navy outline on phones */
	#cbco-nav .cbco-nav__drawer-foot .cbco-nav__btn--order { background: transparent; border-color: var(--n-navy); color: var(--n-navy); }
	.cbco-nav__drawer-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
	.cbco-nav__opennow { font-size: 13px; color: var(--n-muted); }
	.cbco-nav__social { display: flex; gap: 4px; flex: none; }
	#cbco-nav .cbco-nav__social a { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--n-navy); }
	.cbco-nav__acc-desc.cbco-nav__status { display: flex; gap: 6px; }
	.cbco-nav__acc-desc .cbco-nav__dot { width: 7px; height: 7px; }
	body.cbco-nav-open { overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
	#cbco-nav, #cbco-nav * { transition: none !important; }
}