/* ==========================================================================
   Brunch & Brew — shared chrome
   Header, nav, footer, page-fade overlay, and the responsive rules every
   source page carried identically in its <helmet> block.

   Per-page values (body background, .bb-h1/.bb-h2 sizes) are NOT here —
   they differ page to page and live in assets/css/pages/<slug>.css.
   ========================================================================== */

html { overflow-x: hidden; }

a { color: #E47245; }
a:hover { color: #C4552B; }

/* --------------------------------------------------------------------------
   Screen wrapper
   The source's data-screen-label div. Font and colour are identical on all
   eight pages; the background is NOT (Home #DCD5C6, the rest #DFD6C8), so
   each page's CSS sets its own .bb-screen background explicitly.
   -------------------------------------------------------------------------- */
.bb-screen {
	font-family: 'Neutra Text', 'Futura', 'Century Gothic', sans-serif;
	color: #231F20;
}

/* --------------------------------------------------------------------------
   Page-fade overlay
   The source paints a tan sheet over first paint and fades it on load.
   -------------------------------------------------------------------------- */
.bb-page-fade {
	position: fixed;
	inset: 0;
	background: #DED7CA;
	z-index: 999999;
	pointer-events: none;
	opacity: 1;
	transition: opacity .6s ease;
}

.bb-page-fade.is-done { opacity: 0; }

/* --------------------------------------------------------------------------
   Header
   Scroll state was inline styles set from JS; it is a class now.
   -------------------------------------------------------------------------- */
.bb-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 60;
	background: transparent;
	border-bottom: 1.5px solid transparent;
	transition: background 200ms cubic-bezier(.22, .61, .36, 1), border-color 200ms cubic-bezier(.22, .61, .36, 1);
}

.bb-header.is-stuck {
	background: #DFD6C8;
	border-bottom-color: #231F20;
}

.bb-header__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 10px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
}

.bb-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	align-self: flex-start;
	margin-top: 22px;
	transition: margin-top 200ms cubic-bezier(.22, .61, .36, 1);
}

.bb-header.is-stuck .bb-header__logo {
	align-self: center;
	margin-top: 0;
}

.bb-header__logo img {
	height: 58px;
	width: auto;
	display: block;
}

.bb-nav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 22px;
}

.bb-nav__link {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
	text-decoration: none;
	white-space: nowrap;
}

.bb-nav__link:hover { color: #231F20; }

/* Current page marker. */
.bb-nav__link.is-active {
	border-bottom: 2px solid #E47245;
	padding-bottom: 3px;
}

/* Contact Us -> Careers dropdown.
   The source opened this from onMouseEnter/onMouseLeave handlers; CSS :hover
   reproduces it with no script and behaves the same on touch (tap opens). */
.bb-navdrop {
	position: relative;
	display: flex;
	align-items: center;
}

.bb-navdrop__menu {
	position: absolute;
	top: 100%;
	left: -14px;
	padding-top: 12px;
	display: none;
}

.bb-navdrop:hover .bb-navdrop__menu,
.bb-navdrop:focus-within .bb-navdrop__menu { display: block; }

.bb-navdrop__panel {
	background: #231F20;
	border: 1.5px solid #231F20;
	border-radius: 8px;
	box-shadow: 0 8px 22px rgba(35, 31, 32, .18);
	padding: 8px;
}

.bb-navdrop__link {
	display: block;
	padding: 10px 18px;
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #DFD6C8;
	text-decoration: none;
	white-space: nowrap;
}

.bb-navdrop__link:hover { color: #DFD6C8; }

.bb-header__phone {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: .04em;
	color: #231F20;
	text-decoration: none;
	white-space: nowrap;
}

.bb-header__phone:hover { color: #231F20; }

/* Only the non-Home pages wrap phone + Order Now in their own flex row.
   On Home both sit inside .bb-nav, which changes how they behave under the
   900px rule below. That difference is as authored — see README. */
.bb-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.bb-footer {
	background: #C8C89A;
	color: #231F20;
	border-top: 4px solid #231F20;
}

/* Locations lifts the footer above its map section. */
.bb-footer--layered {
	position: relative;
	z-index: 1;
}

.bb-footer__inner {
	max-width: 1240px;
	margin: 0 auto;
	padding: 72px 24px 40px;
}

.bb-footer__grid {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 44px;
	align-items: center;
}

/* Column headings. Menu.dc.html authors these two at 15px, not 14px — its
   page CSS raises them; everywhere else they are the standard label. */
.bb-footer__coltitle {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: #231F20;
	margin-bottom: 16px;
}

.bb-footer__hourslabel {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 14px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
	margin: 24px 0 16px;
}

.bb-footer__addr {
	display: block;
	font-size: 16px;
	line-height: 1.7;
	margin: 0 0 12px;
	color: #231F20;
	text-decoration: none;
}

.bb-footer__line {
	display: block;
	font-size: 16px;
	color: #231F20;
	text-decoration: none;
}

.bb-footer__line--gap { margin-bottom: 6px; }

.bb-footer__addr:hover,
.bb-footer__line:hover { color: #231F20; }

.bb-footer__hours {
	display: flex;
	justify-content: space-between;
	font-size: 16px;
	padding: 4px 0;
	max-width: 220px;
}

.bb-footer__hoursval { font-weight: 700; }

.bb-footer__center {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* The lockup links home, like the header logo. The ANCHOR carries the width:
   inside a column flex container an auto-width anchor would be sized by the
   image, and the image's own min(100%, ...) would then be resolving against a
   box its own content defined. */
.bb-footer__lockuplink {
	display: block;
	width: min(100%, 300px);
}

.bb-footer__lockuplink:focus-visible {
	outline: 2px solid #E47245;
	outline-offset: 4px;
}

.bb-footer__lockup {
	width: 100%;
	height: auto;
	display: block;
}

.bb-footer__social {
	display: flex;
	gap: 12px;
	margin-top: 24px;
}

.bb-footer__explore {
	display: flex;
	justify-content: flex-end;
	align-self: flex-start;
}

.bb-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.bb-footer__links a {
	font-size: 16px;
	color: #231F20;
	text-decoration: none;
}

.bb-footer__links a:hover { color: #231F20; }

.bb-footer__bottom {
	margin-top: 48px;
	padding-top: 24px;
	border-top: 2px dotted #231F20;
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

/* 11px is the one sanctioned exception to the client's 14px font floor. */
.bb-footer__copy {
	font-family: 'Neutraface Condensed Titling', sans-serif;
	font-size: 11px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: #231F20;
}

/* --------------------------------------------------------------------------
   Shared responsive rules
   These four appeared verbatim in every page's helmet block. Page-specific
   entries from those blocks (.bb-h1, .bb-h2, .bb-hero, .bb-ig, .bb-cols)
   stay in their own page CSS because the values differ page to page.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.bb-split,
	.bb-g2,
	.bb-g3,
	.bb-g4 { grid-template-columns: 1fr !important; }

	.bb-hide-sm { display: none !important; }
}

/* ==========================================================================
   Responsive chrome
   --------------------------------------------------------------------------
   The design source turned .bb-nav into a horizontally scrolling row below
   900px. That is replaced here by a real slide-out menu, per the responsive
   brief. Breakpoints, in order:

     <= 1200px  desktop links out, burger in; phone + Order Now stay in the bar
     <= 860px   phone leaves the bar (it is in the menu's footer regardless)
     <= 560px   Order Now leaves the bar too; burger only
     <= 400px   the menu panel goes full width
   ========================================================================== */

.bb-burger { display: none; }

@media (max-width: 1200px) {
	.bb-nav { display: none; }

	.bb-header__actions {
		margin-left: auto;
		gap: 14px;
	}

	.bb-burger {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 46px;
		height: 46px;
		padding: 0 10px;
		background: transparent;
		border: 2px solid #231F20;
		border-radius: 999px;
		cursor: pointer;
		flex: none;
		order: 3;
	}

	.bb-burger__bar {
		display: block;
		/* BugHerd #8: "are the bars supposed to be different heights?" - on
		   Android, not iPhone. They were 2.5px. The button's content box is
		   46px, so 3 bars + 2 gaps came to 17.5px and centred at 14.25px,
		   putting every bar on a FRACTIONAL pixel (14.25 / 21.75 / 29.25). At
		   a fractional device-pixel ratio each one rounds independently, so
		   they render at different thicknesses; iPhone's DPR happened to land
		   them evenly, which is why it only showed on one device.
		   At 2px the stack is 16px and centres at a whole 15px, so all three
		   sit on integer boundaries and round identically at any DPR. */
		height: 2px;
		width: 100%;
		background: #231F20;
		border-radius: 2px;
	}

	.bb-burger:hover { background: #E47245; }
	.bb-burger:hover .bb-burger__bar { background: #FBF8F1; }
	.bb-burger:focus-visible { outline: 3px solid #E47245; outline-offset: 3px; }
}

/* Phone goes first when the bar tightens. */
@media (max-width: 860px) {
	.bb-header__phone { display: none; }
}

/* Then Order Now. Both still live in the menu's footer. */
@media (max-width: 560px) {
	.bb-header__order { display: none; }
	.bb-header__logo img { height: 46px; }
	.bb-header__inner { padding: 10px 16px; }
}

/* --------------------------------------------------------------------------
   Slide-out menu
   -------------------------------------------------------------------------- */
.bb-mobile {
	position: fixed;
	inset: 0;
	z-index: 200;
}

.bb-mobile[hidden] { display: none !important; }

.bb-mobile__scrim {
	position: absolute;
	inset: 0;
	background: rgba(35, 31, 32, .55);
	opacity: 0;
	transition: opacity 260ms cubic-bezier(.22, .61, .36, 1);
}

.bb-mobile.is-open .bb-mobile__scrim { opacity: 1; }

.bb-mobile__panel,
.bb-mobile__panel * {
	/* The design system's base.css is deliberately not loaded, so the site runs
	   on content-box. Without this the panel's padding added to width:100% and
	   pushed its text off the left edge below 400px. Scoped, never global -
	   a global box-sizing would move the whole design. */
	box-sizing: border-box;
}

.bb-mobile__panel {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(420px, 88vw);
	background: #DFD6C8;
	border-left: 2px solid #231F20;
	box-shadow: -18px 0 40px rgba(35, 31, 32, .18);
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 26px 28px 32px;
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	transition: transform 320ms cubic-bezier(.22, .61, .36, 1);
}

.bb-mobile.is-open .bb-mobile__panel { transform: translateX(0); }

.bb-mobile__close {
	align-self: flex-end;
	width: 44px;
	height: 44px;
	background: transparent;
	border: 2px solid #231F20;
	border-radius: 999px;
	cursor: pointer;
	display: grid;
	place-content: center;
	flex: none;
	margin-bottom: 10px;
}

.bb-mobile__closebar {
	grid-area: 1 / 1;
	display: block;
	width: 20px;
	height: 2.5px;
	background: #231F20;
	border-radius: 2px;
}

.bb-mobile__closebar:first-child { transform: rotate(45deg); }
.bb-mobile__closebar:last-child { transform: rotate(-45deg); }

.bb-mobile__close:hover { background: #E47245; }
.bb-mobile__close:hover .bb-mobile__closebar { background: #FBF8F1; }
.bb-mobile__close:focus-visible { outline: 3px solid #E47245; outline-offset: 3px; }

.bb-mobile__links {
	display: flex;
	flex-direction: column;
}

.bb-mobile__link {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 26px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #231F20;
	text-decoration: none;
	padding: 13px 0;
	border-bottom: 1.5px dotted #231F20;
}

.bb-mobile__link:hover { color: #E47245; }

.bb-mobile__link.is-active {
	color: #E47245;
}

/* Careers sits under Contact Us in the desktop dropdown; keep that hierarchy. */
.bb-mobile__link--sub {
	font-size: 20px;
	padding-left: 18px;
}

.bb-mobile__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 26px;
	margin-top: auto;
	/* 40px strip + 26px of air before the phone number. */
	padding-top: 66px;
	position: relative;
}

/* A run of the brand x-mark separating the links from phone + Order Now,
   echoing the marquee and the section rules rather than a plain border. */
/* The Featured Menu's own two-row x pattern, used as a MASK so it can be
   painted orange: the source PNG's pixels are brand tan (220,185,157), which
   is all but invisible on this panel's tan ground. Masking keeps the authored
   spacing and gives it contrast. */
.bb-mobile__foot::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 40px;
	background: #E47245;
	-webkit-mask-image: url("../images/pattern-x-ink.png");
	mask-image: url("../images/pattern-x-ink.png");
	-webkit-mask-size: auto 100%;
	mask-size: auto 100%;
	-webkit-mask-repeat: repeat-x;
	mask-repeat: repeat-x;
	-webkit-mask-position: left center;
	mask-position: left center;
}

.bb-mobile__phone {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 30px;
	letter-spacing: .04em;
	color: #231F20;
	text-decoration: none;
}

.bb-mobile__phone:hover { color: #E47245; }

/* Full-width panel on the smallest screens, per the brief. */
@media (max-width: 400px) {
	.bb-mobile__panel {
		width: 100%;
		border-left: 0;
		padding: 22px 20px 28px;
	}

	.bb-mobile__link { font-size: 23px; }
	.bb-mobile__phone { font-size: 27px; }
}

/* The scrim is decorative; the panel still animates for everyone else. */
@media (prefers-reduced-motion: reduce) {
	.bb-mobile__panel,
	.bb-mobile__scrim { transition: none; }
}

/* Body scroll lock while the menu is open. */
body.bb-menu-open { overflow: hidden; }

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bb-page-fade { transition: none; }

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* --------------------------------------------------------------------------
   Fallback template (index.php / page.php)
   Not part of the approved design — it exists so a non-page URL renders
   inside the chrome rather than unstyled.
   -------------------------------------------------------------------------- */
.bb-fallback { background: #DFD6C8; }

.bb-fallback__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 200px 24px 96px;
	min-height: 60vh;
}

.bb-fallback__title {
	font-family: 'Neutraface Condensed', sans-serif;
	font-weight: 700;
	font-size: 44px;
	line-height: 1.1;
	text-transform: uppercase;
	margin: 0 0 22px;
}

/* ==========================================================================
   Footer — responsive
   --------------------------------------------------------------------------
   Desktop is 1fr auto 1fr with the Explore column hard right, which gets tight
   before the layout actually breaks. Below 1500px the outer columns are given
   more room and Explore is pulled left off the edge; at 900px (the same point
   the page columns stack) the whole footer becomes one centred stack.
   ========================================================================== */

/* Explore keeps its right alignment; it just needs enough column to stop
   "Coffee Roasting" and "Contact Us" wrapping onto two lines. */
.bb-footer__links a { white-space: nowrap; }

@media (max-width: 1500px) {
	.bb-footer__grid {
		grid-template-columns: 1fr auto minmax(160px, .9fr);
		gap: 32px;
	}
}

@media (max-width: 1100px) {
	.bb-footer__grid { gap: 26px; }
	.bb-footer__lockuplink { width: min(100%, 250px); }
}

/* One centred column, in the order: lockup + social, location, hours,
   explore, rule, Order Now, copyright. */
@media (max-width: 900px) {
	.bb-footer__inner { padding: 56px 24px 36px; }

	.bb-footer__grid {
		grid-template-columns: 1fr !important;
		justify-items: center;
		text-align: center;
		gap: 36px;
	}

	/* The lockup + social column is authored second; it leads on mobile. */
	.bb-footer__center { order: 1; }
	.bb-footer__grid > div:first-child { order: 2; }
	.bb-footer__explore { order: 3; }

	.bb-footer__coltitle,
	.bb-footer__hourslabel { text-align: center; }

	.bb-footer__addr,
	.bb-footer__line { text-align: center; }

	/* Hours rows are a space-between pair on desktop; centre the pair and let
	   the two halves sit together rather than pinned to opposite edges. */
	.bb-footer__hours {
		justify-content: center;
		gap: 10px;
		max-width: none;
	}

	.bb-footer__explore {
		justify-content: center;
		align-self: auto;
		padding-left: 0;
		width: 100%;
	}

	.bb-footer__links { align-items: center; }

	.bb-footer__bottom {
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
		gap: 18px;
		margin-top: 36px;
	}

	/* Order Now above the copyright, both centred. */
	.bb-footer__bottom .bb-btn { order: 1; }
	.bb-footer__copy { order: 2; }
}

@media (max-width: 400px) {
	.bb-footer__inner { padding: 44px 16px 30px; }
	.bb-footer__grid { gap: 30px; }
}