/* Menu pages (includes/menu.php), Phase 2. Brand kit v1.3: purple #463769, gold #E6D782
   (only on purple/teal, teal text on it), teal #143232, cream #F6F1E4; Staatliches titles,
   Roboto Condensed text. Prices are numbers only. */
.brc-menu {
	--p:#463769;
	--g:#e6d782;
	--t:#143232;
	--c:#f6f1e4;
	--line:#e2d9c2;
	--muted:#5b6767;
	--top:0px;

	background:var(--c);
	color:var(--t);
	font-family:"Roboto Condensed","Arial Narrow",Arial,sans-serif;
	font-size:17px;
	line-height:1.5;
	margin:0 calc(50% - 50vw);
	width:100vw;
}

.brc-menu * {
	box-sizing:border-box;
}

.brc-menu__wrap {
	max-width:1100px;
	margin:0 auto;
	padding:0 16px;
}

.brc-menu h1,.brc-menu h2,.brc-menu h3 {
	font-family:Staatliches,"Arial Narrow",sans-serif;
	font-weight:400;
	letter-spacing:.01em;
	text-transform:uppercase;
	margin:0;
}

.brc-menu p {
	margin:0;
}

/* Title + switch, over the tab's photo (Phase 4h): purple on the left, the photo shows on the right. */
.brc-menu__head {
	position:relative;
	overflow:hidden;
	background:var(--p);
	color:#fff;
	padding:22px 0 16px;
}

.brc-menu__head-img {
	position:absolute;
	top:0;
	right:0;
	width:100%;
	height:100%;
	object-fit:cover;
}

.brc-menu__head::after {
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg, var(--p) 0%, rgb(70 55 105 / .9) 45%, rgb(70 55 105 / .45) 100%);
}

.brc-menu__head > .brc-menu__wrap {
	position:relative;
	z-index:1;
}

.brc-menu__eye {
	font-size:12.5px;
	font-weight:700;
	letter-spacing:.2em;
	text-transform:uppercase;
	color:var(--g);
}

/* Same hero type as the other pages (gift cards, catering, groups): gold eyebrow, white title. */
.brc-menu .brc-menu__title {
	color:#fff;
	font-size:clamp(46px, 11vw, 84px);
	line-height:.92;
	margin-top:8px;
}

/* Four tabs since the wine list (2026-10-05): one row on a 360 px phone, widths follow the words. */
.brc-menu__switch {
	display:flex;
	gap:4px;
	background:rgb(0 0 0 / .22);
	border-radius:6px;
	padding:4px;
	margin-top:16px;
	max-width:520px;
}

.brc-menu__switch a {
	display:flex;
	flex:1 1 auto;
	text-align:center;
	line-height:1.15;
	align-items:center;
	justify-content:center;
	min-height:44px;
	min-width:44px;
	padding:0 clamp(4px, 1.5vw, 10px);
	border-radius:4px;
	color:#fff;
	font-weight:700;
	font-size:clamp(11.5px, 3.3vw, 13.5px);
	letter-spacing:clamp(.04em, .6vw, .12em);
	text-transform:uppercase;
	text-decoration:none;
}

.brc-menu__switch a:hover {
	color:var(--g);
}

.brc-menu__switch a[aria-current="page"] {
	background:var(--g);
	color:var(--t);
}

/* Sticky chips */
.brc-menu__chips {
	position:sticky;
	top:var(--top);
	z-index:20;
	background:var(--p);
	padding:10px 0;
	box-shadow:0 6px 10px -8px rgb(0 0 0 / .45);
}

.brc-menu__chips-in {
	display:flex;
	gap:6px;
	overflow-x:auto;
	scrollbar-width:none;
	-webkit-overflow-scrolling:touch;
}

.brc-menu__chips-in::-webkit-scrollbar {
	display:none;
}

.brc-menu .brc-menu__chips a {
	flex:none;
	display:flex;
	align-items:center;
	min-height:44px; /* tap target (QA 2026-10-05) */
	padding:0 14px;
	border:1px solid rgb(255 255 255 / .6);
	border-radius:999px;
	color:#fff;
	font-weight:700;
	font-size:12.5px;
	letter-spacing:.1em;
	text-transform:uppercase;
	text-decoration:none;
	white-space:nowrap;
}

.brc-menu .brc-menu__chips a:hover {
	border-color:var(--g);
	color:var(--g);
}

.brc-menu .brc-menu__chips a.is-on {
	background:var(--g);
	border-color:var(--g);
	color:var(--t);
}

/* Categories */
.brc-menu__body {
	padding-bottom:40px;
}

.brc-menu__cat {
	padding-top:26px;
	scroll-margin-top:calc(var(--top) + 64px);
}

.brc-menu__cat-h {
	display:flex;
	align-items:center;
	gap:8px;
	color:var(--p);
	font-size:34px;
	line-height:1;
}

.brc-menu__group {
	scroll-margin-top:calc(var(--top) + 64px);
}

.brc-menu__group + .brc-menu__group {
	margin-top:36px;
}

.brc-menu__group-h {
	padding:22px 0 8px;
	border-bottom:3px solid var(--g);
	color:var(--p);
	font-size:42px;
	line-height:1;
}

.brc-menu .brc-menu__cat-h--sub {
	font-size:26px;
}

.brc-menu__star {
	width:16px;
	height:16px;
	flex:none;
	fill:var(--g);
}

.brc-menu__intro,.brc-menu__note {
	font-size:14.5px;
	color:var(--muted);
	margin-top:6px!important;
}

.brc-menu__note {
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	font-size:12.5px;
}

.brc-menu__photo {
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:3/1;
	object-fit:cover;
	border-radius:6px;
	margin-top:12px;
	background:var(--line);
}

.brc-menu__list {
	list-style:none;
	margin:0;
	padding:0;
}

.brc-menu__item {
	display:grid;
	grid-template-columns:1fr auto;
	gap:3px 14px;
	padding:14px 0;
	border-bottom:1px solid var(--line);
	margin:0;
}

.brc-menu__item:last-child {
	border-bottom:0;
}

.brc-menu__name {
	font-weight:700;
	font-size:16px;
	letter-spacing:.04em;
	text-transform:uppercase;
	color:var(--t);
	overflow-wrap:anywhere;
}

.brc-menu__price {
	font-weight:700;
	font-size:17px;
	color:var(--p);
	text-align:right;
	white-space:nowrap;
}

.brc-menu__price small {
	display:block;
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--muted);
}

.brc-menu__desc {
	grid-column:1/-1;
	font-size:15px;
	line-height:1.45;
	color:#2b4040;
}

.brc-menu__courses {
	grid-column:1/-1;
	margin:4px 0 0;
	padding:0;
	list-style:none;
	font-size:15px;
	line-height:1.5;
	color:#2b4040;
}

.brc-menu__courses li {
	margin:0;
	padding-left:14px;
	position:relative;
}

.brc-menu__courses li::before {
	content:"";
	position:absolute;
	left:0;
	top:.65em;
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--g);
}

.brc-menu__extra {
	grid-column:1/-1;
	font-size:14px;
	color:var(--muted);
}

.brc-menu__extra b {
	color:var(--p);
}

.brc-menu__al {
	grid-column:1/-1;
	display:flex;
	flex-wrap:wrap;
	gap:4px 12px;
	margin-top:2px!important;
}

.brc-menu__al>span {
	display:inline-flex;
	align-items:center;
	gap:4px;
	font-size:12.5px;
	color:var(--muted);
}

.brc-menu__al svg {
	width:16px;
	height:16px;
	color:var(--t);
	fill:none;
	stroke:currentcolor;
	stroke-width:1.75;
	stroke-linecap:round;
	stroke-linejoin:round;
}

/* Wine list: 3 price columns */
.brc-menu__cols,.brc-menu__list--cols .brc-menu__item {
	grid-template-columns:1fr repeat(3,44px);
}

.brc-menu__cols {
	display:grid;
	gap:0 8px;
	margin-top:10px;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	text-align:right;
}

.brc-menu__list--cols .brc-menu__item {
	gap:3px 8px;
}

.brc-menu__prices {
	display:contents;
}

.brc-menu__prices>span {
	font-weight:700;
	color:var(--p);
	text-align:right;
}

.brc-menu__list--cols .brc-menu__desc {
	grid-column:1/2;
}

/* Dishes with a photo (lunch): thumbnail on the left, text beside it. */
.brc-menu .brc-menu__item--ph {
	grid-template-columns:88px 1fr auto;
	column-gap:14px;
	align-items:start;
}

.brc-menu__thumb {
	grid-row:1 / span 4;
	width:88px;
	height:110px;
	object-fit:cover;
	border-radius:6px;
	background:var(--line);
}

.brc-menu .brc-menu__item--ph .brc-menu__courses,
.brc-menu .brc-menu__item--ph .brc-menu__desc,
.brc-menu .brc-menu__item--ph .brc-menu__extra,
.brc-menu .brc-menu__item--ph .brc-menu__al {
	grid-column:2 / -1;
}

/* Lunch band */
.brc-menu__midi {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:14px;
	align-items:center;
	background:var(--g);
	border-radius:6px;
	padding:16px;
	margin-top:22px;
}

.brc-menu__midi img {
	width:64px;
	height:auto;
}

.brc-menu__midi-t {
	font-family:Staatliches,"Arial Narrow",sans-serif;
	font-size:34px;
	line-height:1;
	color:var(--p);
	text-transform:uppercase;
}

.brc-menu__midi-h {
	font-weight:700;
	font-size:14px;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:var(--t);
	margin-top:4px!important;
}

.brc-menu .screen-reader-text {
	position:absolute;
	width:1px;
	height:1px;
	overflow:hidden;
	clip-path:inset(50%);
	white-space:nowrap;
}

.brc-menu a[href]:focus-visible {
	outline:3px solid var(--g);
	outline-offset:2px;
}


/* The menu pages use the theme's "transparent header" template: its 90 px header
   lies over the page top, so the purple title block starts below it. */
.page-template-page-transparent-header .brc-menu__head {
	padding-top:calc(var(--brc-header-h, 90px) + 16px);
}

@media (width >=850px) {
	.brc-menu__head {
		min-height:340px;
		padding:40px 0 22px;
	}

	.page-template-page-transparent-header .brc-menu__head {
		padding-top:calc(var(--brc-header-h, 90px) + 48px);
	}

	.brc-menu__head-img {
		width:62%;
	}

	.brc-menu__head::after {
		background:linear-gradient(90deg, var(--p) 0, var(--p) 40%, rgb(70 55 105 / .55) 62%, rgb(70 55 105 / .1) 100%);
	}

	.brc-menu__body {
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:0 48px;
		align-items:start;
	}

	.brc-menu__midi {
		grid-column:1/-1;
	}

	.brc-menu__cat-h {
		font-size:40px;
	}
}

@media (prefers-reduced-motion:no-preference) {
	html:has(.brc-menu) {
		scroll-behavior:smooth;
	}
}

/* Full-bleed sections inside the theme's container: clip the scrollbar's extra pixels
   (clip, not hidden, keeps position:sticky working). */
body.brc-menu-page {
	overflow-x:clip;
}

/* A dish without a photo in a section with photos: brand tile (gold badge on purple). */
.brc-menu__thumb--none {
	display:block;
	background:var(--p) url("../img/barranco-circular-badge-gold.webp") center / 56px no-repeat;
}

/* Tap a dish photo: link to the big picture (menu.js opens it over the page). */
.brc-menu .brc-menu__zoom {
	display:block;
	grid-row:1 / span 4;
	line-height:0;
	border-radius:6px;
	cursor:zoom-in;
}

.brc-zoom {
	position:fixed;
	inset:0;
	z-index:100001;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:16px;
	background:rgb(20 16 32 / 0.9);
	cursor:zoom-out;
}

.brc-zoom figure {
	margin:0;
	text-align:center;
}

.brc-zoom img {
	display:block;
	max-width:min(92vw, 640px);
	max-height:78vh;
	max-height:78dvh;
	width:auto;
	height:auto;
	border-radius:8px;
	background:#2a2140 center / cover no-repeat;
}

.brc-zoom figcaption {
	margin-top:12px;
	font-family:Staatliches, "Arial Narrow", sans-serif;
	font-size:24px;
	letter-spacing:0.04em;
	color:#e6d782;
}

.brc-zoom .brc-zoom__x {
	position:absolute;
	top:12px;
	right:12px;
	width:48px;
	height:48px;
	padding:0;
	border:0;
	border-radius:50%;
	background:rgb(255 255 255 / 0.15);
	color:#fff;
	font-size:30px;
	line-height:48px;
	cursor:pointer;
}

/* Very small phones (320 px): the four tabs still fit on one row. */
@media (width < 340px) {
	.brc-menu__switch a {
		font-size:11px;
		letter-spacing:0;
	}
}