/*
Theme Name: Bread and Roses
Theme URI:
Author: Big Orange
Description: Custom block theme for The Bread and Roses, Clapham — a pub built around live music, theatre and comedy.
Version: 0.8.7
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: Proprietary
Text Domain: bread-roses
*/

/* Home hero: a content-width column inside the full-bleed cover, with the
   white headline panel left-aligned to match the page's content edge. */
/* Band-align every hero cover's content so the panel lines up with the page
   content (and the logo). Covers need contentPosition horizontally-centred for
   this to take effect; the panel itself stays left within the band. */
.wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--content-size, 1440px);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--40, 40px);
	box-sizing: border-box;
}
.br-hero-col { width: 100%; }
.br-hero-panel {
	max-width: 560px;
	margin-right: auto;
}
/* Events & Catering hero panel is wider so "EVENTS & CATERING" fits on one line (Figma 742px). */
.br-hero-panel.br-hero-panel--wide {
	max-width: 760px;
}
/* Home hero panel sits tighter than the rest so it covers less of the photo. */
.br-hero-panel.br-hero-panel--compact {
	max-width: 460px;
}
/* Thin divider rule inside a white hero panel (between the title and buttons). */
.br-panel-rule {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--black, #0c0a0a);
	margin: var(--wp--preset--spacing--20, 16px) 0;
	opacity: 1;
}

/* Connected hero: the white title/buttons panel sits flush to the bottom of the
   hero photo (per Figma), and when the next section leads with a white-box
   header it joins directly beneath the panel with no black gap — so the page
   name, its buttons and the section tag below read as one connected column. */
.br-hero-cover { padding-bottom: 0 !important; }
.br-hero-cover .wp-block-cover__inner-container { margin-top: auto; }
.br-hero-cover + .wp-block-group:has(> .br-section-head) {
	padding-top: 0 !important;
}

/* Menus page: a styled menu (name + price rows) on the light card. */
.br-menu__item {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin: 0;
	padding: 8px 0 4px;
	border-bottom: 1px solid #ececec;
}
.br-menu__name {
	font-weight: 600;
}
/* Column-measure header above a price list (the wine measures). */
.br-menu__head {
	border-bottom: 0;
	padding-bottom: 0;
}
.br-menu__head .br-menu__price {
	font-family: inherit;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--grey-dark, #6b6b6b);
}

/* A note under a menu heading (sharing offers, tier rules) — no price row. */
.br-menu__note {
	margin: 0 0 12px;
	font-weight: 600;
}
.br-menu__price {
	font-family: var(--wp--preset--font-family--slab, serif);
	color: var(--wp--preset--color--red, #ea1d48);
	white-space: nowrap;
}
.br-menu__desc {
	margin: 2px 0 0;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--grey-dark, #646464);
}
.br-menu__section {
	margin-top: var(--wp--preset--spacing--40, 40px);
}
/* Menus rail: the active item ("Food menu") sits in a white-bordered box (Figma). */
.wp-block-column .wp-block-group:has(> #food-menu) {
	border: 1px solid #ffffff !important;
	padding-left: var(--wp--preset--spacing--20, 16px) !important;
	padding-right: var(--wp--preset--spacing--20, 16px) !important;
}

/* Buttons render in sentence case to match the design (labels are authored in
   sentence case; this overrides the inline uppercase the patterns carried). */
.wp-block-button__link,
.br-form__button {
	text-transform: none !important;
	letter-spacing: 0.01em;
}

/* All buttons turn red (white text) on hover/focus. */
.wp-block-button__link:hover,
.wp-block-button__link:focus,
.br-form__button:hover,
.br-form__button:focus {
	background-color: var(--wp--preset--color--red, #ea1d48) !important;
	border-color: var(--wp--preset--color--red, #ea1d48) !important;
	color: var(--wp--preset--color--white, #ffffff) !important;
}

/* Buttons use Museo Sans w600 (overrides the inline slab the patterns carried). */
.wp-block-button__link {
	font-family: var(--wp--preset--font-family--sans, sans-serif) !important;
	font-weight: 600;
}

/* Trailing arrow on hero and section-action buttons (matches the Figma). */
.br-hero-panel .wp-block-button__link::after,
.br-btn-row .wp-block-button__link::after {
	content: "\00a0\2192";
}

/* Section sub-titles (THIS WEEK / COMING UP): Slab, uppercase, tracked. */
.br-section-title {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400;
}
/* Vertical rule between a section title and its "See full calendar" button. */
.br-title-row { flex-wrap: nowrap; }
.br-title-rule {
	display: inline-block;
	align-self: stretch;
	width: 1px;
	min-height: 44px;
	background: rgba(255, 255, 255, 0.5);
}
.wp-block-separator.br-title-rule {
	flex: 0 0 1px;
	width: 1px !important;
	max-width: 1px !important;
	border: 0;
	margin: 0;
}

/* "Get in touch" social icons: white square boxes. */
.br-social-row .wp-block-social-link { border-radius: 2px; }

/* Keep long-form body copy to a readable measure, left-aligned to the content edge.
   Cards, forms, menu rows, hero panel and centred text are left to their own widths. */
:where(main) > .wp-block-group p:not(.has-text-align-center):not([class*="br-"]):not(.wp-block-post-excerpt) {
	max-width: 46rem;
	margin-left: 0 !important;
	margin-right: auto !important;
}

/* ==========================================================================
   Enquiry forms (reservations / events & catering / artist bookings)
   Dark-first: white text on the black canvas, subtle borders, red submit.
   ========================================================================== */

.br-form {
	max-width: 760px;
	margin-inline: auto;
	background: #111010;
	border: 5px solid var(--wp--preset--color--white, #fff);
	border-radius: 2px;
	padding: 32px;
	box-sizing: border-box;
}

.br-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20, 16px);
}

.br-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20, 16px);
}

.br-form__row .br-form__field {
	flex: 1 1 200px;
	margin: 0;
}

.br-form__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.br-form__field label {
	font-family: var(--wp--preset--font-family--slab, serif);
	font-size: var(--wp--preset--font-size--small, 14px);
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--white, #fff);
}

.br-form__field input,
.br-form__field select,
.br-form__field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	background: var(--wp--preset--color--grey-dark, #646464);
	color: var(--wp--preset--color--white, #fff);
	border: 1px solid var(--wp--preset--color--grey-dark, #646464);
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 16px);
}

.br-form__field input::placeholder,
.br-form__field textarea::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.br-form__field select option {
	color: var(--wp--preset--color--black, #0c0a0a);
}

.br-form__field input:focus,
.br-form__field select:focus,
.br-form__field textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--red, #ea1d48);
	box-shadow: 0 0 0 1px var(--wp--preset--color--red, #ea1d48);
}

/* Visually-hidden honeypot: off-screen but still in the DOM for bots. */
.br-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.br-form__submit {
	margin: var(--wp--preset--spacing--10, 8px) 0 0;
}

.br-form__button {
	display: inline-block;
	padding: 14px 28px;
	background: var(--wp--preset--color--grey-mid, #c8c8c8);
	color: var(--wp--preset--color--black, #0c0a0a);
	border: none;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--small, 14px);
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
	cursor: pointer;
}
.br-form__button::after { content: "\00a0\2192"; }

.br-form__button:hover,
.br-form__button:focus {
	background: var(--wp--preset--color--maroon, #5c0013);
}

.br-form__notice {
	padding: 14px 18px;
	margin: 0 0 var(--wp--preset--spacing--20, 16px);
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small, 14px);
}

.br-form__notice--success {
	background: var(--wp--preset--color--green, #0a3c35);
	color: var(--wp--preset--color--green-light, #c8f6c5);
}

.br-form__notice--error {
	background: var(--wp--preset--color--maroon, #5c0013);
	color: var(--wp--preset--color--white, #fff);
}

/* ==========================================================================
   Event category stickers — colour-coded by taxonomy term slug.
   Used on the What's On archive and single event templates. The term slugs
   come from theme/inc/events.php (Live music, Theatre, Comedy, Live sports,
   Open mic).
   ========================================================================== */

.br-sticker {
	display: inline-block;
	align-self: flex-start;
	width: fit-content;
	max-width: 100%;
	padding: 4px 6px;
	border-radius: 2px;
	border: 0.75px solid transparent;
	font-family: var(--wp--preset--font-family--slab, serif);
	font-size: var(--wp--preset--font-size--x-small, 12px);
	line-height: 1.2;
	background: var(--wp--preset--color--green, #0a3c35);
	color: var(--wp--preset--color--green-light, #c8f6c5);
}

/* The sticker wraps the category as a link; let it inherit the pill colour. */
.br-sticker a { color: inherit; text-decoration: none; }

/* Per the Figma: dark fill, border + text in the lighter partner colour. */
.br-sticker.term-live-music,
.br-sticker.term-live-sports { background: #0a3c35; border-color: #c8f6c5; color: #c8f6c5; }
.br-sticker.term-theatre     { background: #011b54; border-color: #aae4f3; color: #aae4f3; }
.br-sticker.term-open-mic,
.br-sticker.term-pub          { background: #5c0013; border-color: #ea1d48; color: #ea1d48; }
.br-sticker.term-comedy       { background: #444100; border-color: #f2eb61; color: #f2eb61; }

/* What's On category filter: a row of pill links, one per event category,
   colour-coded to match the stickers and the calendar bars. The active one is
   filled; the rest are outlined until hovered. */
.br-cat-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: var(--wp--preset--spacing--40, 40px);
}
.br-cat-filter__btn {
	display: inline-block;
	padding: 10px 20px;
	border: 1px solid #4a4646;
	border-radius: 2px;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	line-height: 1.2;
	color: #ffffff;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.br-cat-filter__btn:hover,
.br-cat-filter__btn:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--wp--preset--color--black, #0c0a0a);
}
.br-cat-filter__btn.is-active {
	background: #ffffff;
	border-color: #ffffff;
	color: var(--wp--preset--color--black, #0c0a0a);
	font-weight: 600;
}
/* Category-coloured borders, matching the stickers. */
.br-cat-filter__btn.term-live-music,
.br-cat-filter__btn.term-live-sports { border-color: #c8f6c5; color: #c8f6c5; }
.br-cat-filter__btn.term-theatre     { border-color: #aae4f3; color: #aae4f3; }
.br-cat-filter__btn.term-open-mic    { border-color: #ea1d48; color: #ea1d48; }
.br-cat-filter__btn.term-comedy      { border-color: #f2eb61; color: #f2eb61; }
.br-cat-filter__btn.term-live-music.is-active,
.br-cat-filter__btn.term-live-sports.is-active { background: #0a3c35; color: #c8f6c5; }
.br-cat-filter__btn.term-theatre.is-active     { background: #011b54; color: #aae4f3; }
.br-cat-filter__btn.term-open-mic.is-active    { background: #5c0013; color: #ea1d48; }
.br-cat-filter__btn.term-comedy.is-active      { background: #444100; color: #f2eb61; }
.br-cat-filter__btn.term-live-music:hover,
.br-cat-filter__btn.term-live-sports:hover     { background: #0a3c35; }
.br-cat-filter__btn.term-theatre:hover         { background: #011b54; }
.br-cat-filter__btn.term-open-mic:hover        { background: #5c0013; }
.br-cat-filter__btn.term-comedy:hover          { background: #444100; }

/* Date badge: month over day, white text on the dark card. */
.br-date-badge {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	line-height: 1;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	color: var(--wp--preset--color--white, #fff);
}
.br-date-badge__month {
	font-size: 20px;
	font-weight: 400;
	text-transform: uppercase;
}
.br-date-badge__day {
	font-size: 32px;
	font-weight: 600;
	line-height: 1;
}
.br-event-date {
	display: block;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--white, #fff);
}
.br-event-time {
	display: block;
	font-size: var(--wp--preset--font-size--small, 14px);
	color: var(--wp--preset--color--grey-mid, #c8c8c8);
}

/* ==========================================================================
   Event cards — "This week" (large feature) and "Coming up" (narrow).
   ========================================================================== */
.br-card {
	border: 1px solid var(--wp--preset--color--white, #fff);
	background: var(--wp--preset--color--black, #0c0a0a);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.br-card .wp-block-post-title,
.br-card .wp-block-post-title a {
	color: var(--wp--preset--color--white, #fff) !important;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 600;
	line-height: 1.15;
	text-decoration: none;
	margin: 0;
}
.br-card .wp-block-post-excerpt,
.br-card .wp-block-post-excerpt p {
	color: var(--wp--preset--color--grey-mid, #c8c8c8);
	font-size: var(--wp--preset--font-size--small, 14px);
	margin: 0;
}
.br-card .wp-block-post-featured-image,
.br-card .wp-block-post-featured-image a {
	margin: 0;
	flex: 0 0 auto;
	aspect-ratio: auto;
	height: auto !important;
	width: 100%;
}
.br-card .wp-block-post-featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: 100%;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center;
	/* WP 6.7+ sizes="auto" reserves a 3000×1500 box and stretches posters. */
	contain-intrinsic-size: none !important;
}

/* CTA + arrow buttons on cards. */
a.br-card__cta,
.br-card__cta a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--black, #0c0a0a) !important;
	padding: 9px 16px;
	border-radius: 2px;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small, 14px);
	text-decoration: none;
	white-space: nowrap;
}
a.br-card__cta::after, .br-card__cta a::after { content: "\00a0\2192"; }
a.br-card__cta:hover, .br-card__cta a:hover { background: var(--wp--preset--color--red, #ea1d48); color: #fff !important; }
a.br-card__arrow, .br-card__arrow a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--black, #0c0a0a) !important;
	border-radius: 2px; text-decoration: none; font-size: 18px; line-height: 1;
}
a.br-card__arrow:hover, .br-card__arrow a:hover { background: var(--wp--preset--color--red, #ea1d48); color: #fff !important; }

/* This week cards need room for date + title + CTA. Never three-across. */
.wp-block-post-template.is-layout-grid:has(.br-card--feature) {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* This week: image on top, info bar below (date badge | info | CTA). */
.br-card--feature .br-card__body {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 18px;
	padding: 20px;
	min-width: 0;
}
.br-card--feature .br-card__date {
	flex: 0 0 auto;
	padding-right: 18px;
	border-right: 1px solid rgba(255, 255, 255, 0.25);
	text-align: center;
}
.br-card--feature .br-card__info {
	flex: 1 1 160px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.br-card--feature .br-card__cta { margin-left: auto; align-self: center; flex: 0 0 auto; }
.br-card--feature .br-card__title,
.br-card--feature .br-card__title a {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Coming up: date + arrow on top, text, image at the bottom. */
.br-card--upcoming .br-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16px 16px 0;
}
.br-card--upcoming .br-card__pad {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px 16px;
}
.br-card--upcoming .wp-block-post-featured-image { margin-top: auto; }

@media (max-width: 1100px) {
	.br-card--feature .br-card__info { flex: 1 1 100%; }
	.br-card--feature .br-card__cta { margin-left: 0; }
}

/* ==========================================================================
   What's On month calendar (bread-roses/event-calendar)
   Mirrors the Figma "Calendar" frame: month header + chevron nav, a Monday-
   first weekday row, and bordered day cells with pill event bars colour-coded
   by event category.
   ========================================================================== */
.br-cal {
	border: 1px solid #ffffff;
	background: var(--wp--preset--color--black, #0c0a0a);
	padding: 30px;
}
.br-cal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.br-cal__title {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 400;
	font-size: 32px;
	line-height: 1.1;
	letter-spacing: 0;
	margin: 0;
	color: #ffffff;
}
.br-cal__nav {
	display: flex;
	gap: 8px;
}
.br-cal__chev {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border: 1px solid #646464;
	border-radius: 4px;
	color: #ffffff;
	background: transparent;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.br-cal__chev:hover {
	background: #ffffff;
	color: var(--wp--preset--color--black, #0c0a0a);
}
.br-cal__chev--next svg {
	transform: scaleX(-1);
}

.br-cal__dows {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
}
.br-cal__dow {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 17px;
	text-align: center;
	color: #ffffff;
	padding: 20px 0;
}

.br-cal__days {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 1px;
	background: #d5d4df;
	border: 1px solid #d5d4df;
}
.br-cal__cell {
	min-height: 85px;
	background: var(--wp--preset--color--black, #0c0a0a);
	padding: 16px 20px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.br-cal__cell--other {
	background: var(--wp--preset--color--grey-dark, #646464);
}
.br-cal__num {
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 400;
	font-size: 14px;
	line-height: 17px;
	color: #a8a8a8;
}
.br-cal__cell--today .br-cal__num {
	color: #ffffff;
	font-weight: 700;
}
.br-cal__bars {
	display: flex;
	gap: 6px;
}
.br-cal__bar {
	flex: 1 1 0;
	min-width: 0;
	height: 21px;
	border-radius: 27px;
	background: #646464;
	display: block;
}
.br-cal__bar.term-live-music,
.br-cal__bar.term-live-sports { background: #0a3c35; }
.br-cal__bar.term-theatre     { background: #011b54; }
.br-cal__bar.term-open-mic,
.br-cal__bar.term-pub          { background: #5c0013; }
.br-cal__bar.term-comedy       { background: #444100; }

/* Visually-hidden labels (used by calendar event bars). */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 781px) {
	.br-cal { padding: 16px; }
	.br-cal__title { font-size: 24px; }
	.br-cal__dow { padding: 10px 0; font-size: 12px; }
	.br-cal__cell { min-height: 64px; padding: 8px; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer text + links: Museo Slab 16px white (per the Figma). */
.br-footer p,
.br-footer__nav a {
	font-family: var(--wp--preset--font-family--slab, serif);
	font-size: var(--wp--preset--font-size--medium, 16px);
}
.br-footer__label {
	color: var(--wp--preset--color--grey-mid, #c8c8c8);
	margin-bottom: 4px;
}
.br-footer__rule {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	margin: var(--wp--preset--spacing--30, 24px) 0;
}
.br-footer__nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.br-footer__nav a {
	color: var(--wp--preset--color--white, #fff);
	text-decoration: none;
}
.br-footer__nav a:hover,
.br-footer__nav a:focus {
	color: var(--wp--preset--color--red, #ea1d48);
}
.br-footer__col {
	border-left: 1px solid rgba(255, 255, 255, 0.25);
	padding-left: var(--wp--preset--spacing--40, 40px);
}
@media (max-width: 781px) {
	.br-footer__col { border-left: 0; padding-left: 0; }
}

/* ==========================================================================
   Section heading in a white box (Food & Drinks, Get in touch, What's on).
   ========================================================================== */
.br-section-head {
	display: inline-block;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--black, #0c0a0a) !important;
	padding: 6px 24px;
	margin: 0 0 var(--wp--preset--spacing--30, 24px);
}

/* Section tag white box: Museo Sans 32px, sits at the section's left edge.
   (Per the Figma the tag sits at the top of its section, flush left — no overlap.) */
.br-section-head {
	font-family: var(--wp--preset--font-family--sans, sans-serif) !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	padding: 16px 24px;
}

/* Hero panel buttons carry a trailing arrow. */
.br-hero-panel .wp-block-button__link::after {
	content: "\00a0\2192";
}

/* Header: full-height nav items; the whole block turns red on hover. */
.br-header {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
.br-header .wp-block-group.is-layout-flex {
	align-items: stretch;
	min-height: 94px;
}
.br-header .br-header-logo {
	align-self: center;
	margin: 0;
}
.br-header .wp-block-navigation { align-items: stretch; }
.br-header .wp-block-navigation__container {
	align-items: stretch;
	height: 94px;
}
.br-header .wp-block-navigation-item {
	display: flex;
	align-items: stretch;
	height: 94px;
}
.br-header .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	padding: 0 24px;
	font-family: var(--wp--preset--font-family--slab, serif);
	font-size: 14px;
	line-height: 1.25;
}
.br-header .wp-block-navigation-item:hover,
.br-header .wp-block-navigation-item:focus-within {
	background: var(--wp--preset--color--red, #ea1d48);
}
.br-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content,
.br-header .wp-block-navigation-item:focus-within > .wp-block-navigation-item__content {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Mobile navigation (Figma mobile_nav / mobile_expanded).
   The hamburger trigger becomes a white "Menu →" pill; the overlay becomes a
   full-width black panel listing each link with a trailing arrow and divider
   rules, topped by a "Close" row. Targeting .is-menu-open keeps these rules
   inert until the responsive overlay is actually shown.
   -------------------------------------------------------------------------- */
.br-header .wp-block-navigation__responsive-container-open {
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--black, #0c0a0a);
	border-radius: 2px;
	padding: 10px 14px;
	gap: 12px;
	align-items: center;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-weight: 600;
	font-size: 14px;
	line-height: 18px;
}
.br-header .wp-block-navigation__responsive-container-open svg { display: none; }
.br-header .wp-block-navigation__responsive-container-open::before { content: "Menu"; }
.br-header .wp-block-navigation__responsive-container-open::after {
	content: "\2192";
	font-size: 16px;
	line-height: 1;
}

.br-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--black, #0c0a0a);
	padding: 20px 20px 40px;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	align-items: stretch;
	justify-content: flex-start;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	height: auto;
	width: 100%;
	gap: 0;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	display: block;
	height: auto;
	width: 100%;
	border-bottom: 1px solid #fff;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover,
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:focus-within {
	background: transparent;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: auto;
	padding: 12px 4px;
	text-align: left;
	font-family: var(--wp--preset--font-family--slab, serif);
	font-weight: 400;
	font-size: 14px;
	color: #fff !important;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
	content: "\2192";
	font-size: 16px;
	margin-left: 16px;
}
.br-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--red, #ea1d48) !important;
}
.br-header .wp-block-navigation__responsive-container-close {
	position: static;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	margin: 0;
	padding: 12px 4px;
	border-bottom: 1px solid #fff;
	color: #fff;
}
.br-header .wp-block-navigation__responsive-container-close::before {
	content: "Close";
	font-family: var(--wp--preset--font-family--slab, serif);
	font-weight: 400;
	font-size: 14px;
}

/* Collapse to the "Menu" overlay below the desktop layout width, not just
   below WordPress's default 600px. The full eight-item bar only fits on a wide
   screen; on tablets it would wrap over the hero, so anything under 1024px gets
   the mobile overlay instead. */
@media (max-width: 1023.98px) {
	.br-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.br-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* ==========================================================================
   Horizontal image carousel (Food & Drinks) — white-framed, scrollable.
   ========================================================================== */
.br-carousel__controls {
	display: flex;
	gap: 12px;
	align-items: center;
	padding-left: var(--wp--preset--spacing--40, 40px);
}
.br-carousel__arrow {
	width: 30px;
	height: 32px;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--black, #0c0a0a);
	border: 0;
	border-radius: 2px;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.br-carousel__arrow:first-child {
	border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.br-carousel__arrow:hover,
.br-carousel__arrow:focus {
	background: var(--wp--preset--color--red, #ea1d48);
	color: #fff;
}
.br-carousel {
	display: flex;
	gap: 20px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: var(--wp--preset--spacing--40, 40px);
	padding: 0 0 4px var(--wp--preset--spacing--40, 40px);
	scrollbar-width: none;
}
.br-carousel::-webkit-scrollbar { display: none; }
.br-carousel__item {
	flex: 0 0 auto;
	width: 325px;
	margin: 0;
	scroll-snap-align: start;
	border: 4px solid var(--wp--preset--color--white, #fff);
}
.br-carousel__item img { display: block; width: 100%; height: 325px; object-fit: cover; }
.wp-block-gallery.br-carousel { flex-wrap: nowrap; }
.wp-block-gallery.br-carousel.has-nested-images figure.wp-block-image {
	flex: 0 0 325px;
	width: 325px;
	margin: 0;
}
.wp-block-gallery.br-carousel.has-nested-images figure.wp-block-image img {
	height: 325px;
	width: 100%;
	object-fit: cover;
}
.wp-site-blocks > .wp-block-post-content { margin-block-start: 0; }
@media (max-width: 600px) {
	.br-carousel__item { width: 78vw; }
	.br-carousel__item img { height: 260px; }
	.wp-block-gallery.br-carousel.has-nested-images figure.wp-block-image { flex-basis: 78vw; width: 78vw; }
	.wp-block-gallery.br-carousel.has-nested-images figure.wp-block-image img { height: 260px; }
}

/* ==========================================================================
   Hero: the cover height is the exact Figma value per page (set as the block's
   minHeight — About/What's On/Menus/Reservations/Artist Bookings/Events &
   Catering/Single event = 480, Home = 720, Gallery = 830). No viewport-scaled
   override, so what renders matches the design; on screens wider than 1440 the
   image crops from the top via object-position rather than growing taller.
   ========================================================================== */
.br-hero-cover .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center center;
}

/* ==========================================================================
   Equal-height event cards. Cards fill their grid cell so a row is uniform;
   the image flexes to fill the bottom and titles/excerpts clamp to a fixed
   number of lines so nothing makes one card taller than its neighbours.
   ========================================================================== */
.br-card { height: 100%; }
.br-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-width: 0;
	overflow-wrap: anywhere;
}
.br-card--upcoming .wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.br-card--upcoming .wp-block-post-featured-image {
	margin-top: auto;
}
.br-card--feature .wp-block-post-featured-image { flex: 0 0 auto; }

/* Event page: show the uploaded poster in full, whatever its ratio. */
.br-event-poster img,
.single-event .wp-block-post-featured-image img {
	width: 100%;
	height: auto !important;
	aspect-ratio: auto !important;
	object-fit: contain !important;
	object-position: center center;
}

/* Event page banner is wide, so it shows the top of the same poster. */
.single-event .wp-block-cover img.wp-block-cover__image-background {
	object-fit: cover;
	object-position: center top;
}

/* ==========================================================================
   Mobile layout: the "Coming up" grid runs two cards wide on phones (per the
   Figma mobile_scroll frame), while the larger "This week" feature cards keep
   stacking one per row.
   ========================================================================== */
@media (max-width: 600px) {
	.wp-block-post-template.is-layout-grid:has(.br-card--feature) {
		grid-template-columns: minmax(0, 1fr) !important;
	}
	.wp-block-post-template.is-layout-grid:has(.br-card--upcoming) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.br-card--upcoming .wp-block-post-excerpt { display: none; }
}

/* ==========================================================================
   Gallery lightbox (assets/js/lightbox.js). Full-screen photo viewer on the
   Gallery page: dark backdrop, letterboxed image, caption from alt text, and
   white controls that turn red on hover to match the carousel arrows.
   ========================================================================== */
.br-gallery img { cursor: zoom-in; }

/* Reservations: the three party spaces. Equal-height crops with the space name
   underneath, so the back room, covered outdoor area and garden read as a set. */
.br-spaces .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}
/* Placeholder tile for a space whose photo has not been supplied yet. */
.br-spaces__pending {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed #4a4646;
	border-radius: 2px;
	color: #6f6a6a;
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
}
.br-spaces__caption {
	margin-top: 12px;
	font-family: var(--wp--preset--font-family--slab, serif);
	color: var(--wp--preset--color--grey-mid, #c8c8c8);
}

.br-lightbox-open { overflow: hidden; }

.br-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 5vw, 64px);
	background: rgba(12, 10, 10, 0.94);
}
.br-lightbox.is-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
	.br-lightbox.is-open { animation: br-lightbox-fade 0.18s ease-out; }
}
@keyframes br-lightbox-fade { from { opacity: 0; } to { opacity: 1; } }

.br-lightbox__figure {
	margin: 0;
	max-width: 100%;
	max-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.br-lightbox__img {
	display: block;
	max-width: 90vw;
	max-height: 82vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border: 4px solid var(--wp--preset--color--white, #fff);
}
.br-lightbox__caption {
	margin: 0;
	color: var(--wp--preset--color--white, #fff);
	font-size: 0.95rem;
	line-height: 1.4;
	text-align: center;
	max-width: 60ch;
}

.br-lightbox__close,
.br-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--white, #fff);
	border: 0;
	cursor: pointer;
	line-height: 1;
}
.br-lightbox__close:hover,
.br-lightbox__close:focus-visible,
.br-lightbox__nav:hover,
.br-lightbox__nav:focus-visible {
	color: var(--wp--preset--color--red, #ea1d48);
}
.br-lightbox__close { top: 16px; right: 20px; font-size: 28px; }
.br-lightbox__nav { top: 50%; transform: translateY(-50%); font-size: 56px; }
.br-lightbox__prev { left: 8px; }
.br-lightbox__next { right: 8px; }

@media (max-width: 600px) {
	.br-lightbox__img { max-width: 94vw; max-height: 74vh; }
	.br-lightbox__nav { font-size: 40px; }
	.br-lightbox__prev { left: 0; }
	.br-lightbox__next { right: 0; }
}