/*
Theme Name: Bonnie Rogues
Theme URI: https://neoshospitality.co.uk
Author: NEOS Hospitality
Description: Custom block theme for Neos Websites
Version: 1.0
Requires at least: 6.3
*/

/* =========================
 Foundation: tokens + type helpers
 (safe in Gutenberg; doesn't fight core)
========================= */

/**
 * TODO: Add "font-display: swap;""
 */
:root{
	--light					: #ffffff;
	--grey-light			: #f2f4e2;
	--grey-medium			: #dcdcdc;
	--brand-dark			: #021c24;
	--brand-light			: #f49b2d;

	--width-max-constraint	: 1920px;
	--width-constrained		: 1200px;

	/* Defined in theme.json */
	--font-ui				: var(--wp--preset--font-family--ui);
	--font-hero				: var(--wp--preset--font-family--hero);
	--font-accent			: var(--wp--preset--font-family--accent);

	--lh-heading			: 1.6;
	--lh-body				: 1.45;
	--lh-hero				: 1.05;

	--wp-admin-bar-height	: 0px;

	--header-topbar-h		: 32px;

	--logo-h				: 58.39px;
	--logo-w				: 115.85px;

	--icon-book-w			: 26.25px;
	--icon-book-h			: 30px;

	--icon-burger			: 30px;

	--icon-locations-w		: 22.56px;
	--icon-locations-h		: 30px;

	--header-rule			: 4px dotted #021c24;

	--mega-bg				: var(--brand-light);
	--mega-text				: var(--brand-dark);
	--mega-shadow			: 0 24px 60px rgba(0,0,0,.25);
	--mega-radius			: 0;

	--drawer-bg				: var(--brand-dark);
	--drawer-pad-x			: 36px;
	--drawer-pad-top		: 37px;
	--drawer-pad-bottom		: 47.85px;
	--drawer-line			: rgba(255,255,255,.18);
	--drawer-text			: rgba(255,255,255,.92);
	--drawer-muted			: rgba(255,255,255,.75);

	/* component tokens */
	--benefits-radius		: 14px;
	--benefits-pad			: 22px;
	--benefits-gap			: 18px;

	--benefits-bg			: var(--brand-dark);
	--benefits-fg			: var(--light);

	--benefits-form-border	: 2px solid var(--brand-light);
	--benefits-form-radius	: 10px;

	--benefits-panel-max	: 520px;

	--promo-radius			: 18px;
	--promo-gap				: 18px;
	--promo-card-min-h		: 240px;

	--event-gap				: 18px;
	--event-radius			: 14px;
	--event-shadow			: 0 10px 26px rgba(0,0,0,.18);
	--event-border			: 1px solid rgba(2,28,36,.10);
	--event-scrim			: linear-gradient(to bottom, rgba(0,0,0,0) 35%, rgba(0,0,0,.58) 100%);

	--occ-max				: 1100px;
	--occ-gap				: 22px;
	--occ-radius			: 14px;
	--occ-border			: 1px solid rgba(2,28,36,.10);
	--occ-shadow			: 0 12px 28px rgba(0,0,0,.10);

	--svg-icon-chevron-right: url("data:image/svg+xml;utf8,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8 5l8 7-8 7' fill='black'/></svg>");

	/* Headlines */
	--headline-size-1small	: 70px;
	--headline-size-1lrg	: 60px;
	--headline-lh-1			: 1;
	--headline-size-2small	: 50px;
	--headline-size-2lrg	: 60px;
	--headline-size-3small	: 30px;
	--headline-size-3lrg	: 60px;

	/* KP Headline - scalable on device width */
    --heading-size-l: clamp(20px, calc(1rem + 8vw), 120px);
    --heading-size-m: clamp(20px, calc(1rem + 3vw), 60px);
    --heading-size-s: clamp(20px, calc(1rem + 1.5vw), 40px);
    --heading-size-xs: clamp(20px, calc(1rem + 1vw), 30px);	

	--paragraph-font-size: 20px;
	--paragraph-font-weight: 400;

	/* KP Border Radius */
	--component-border-radius: 25px;
	--image-border-radius: 15px;
	--button-border-radius: 5px;
	--border-border-radius: 15px;
}

* {
	box-sizing:border-box;
}

/* Keep global touches minimal (Gutenberg-friendly) */
body {

	/* Base font styling*/
	font-family: var(--font-hero);
	font-size: var(--paragraph-font-size);
	font-weight: var(--paragraph-font-weight);
	line-height: var(--lh-body);

	color					: var(--brand-dark);
	background-color		: var(--grey-light);
	background-image		: var(--page-bg);
	background-size			: cover;
	background-position		: center;
	background-repeat		: no-repeat;
	background-attachment	: fixed;
	padding					: 0;
	margin					: 0;
	min-height				: 100vh;
}
body.home {
	background-image		: var(--home-bg);
}
body.admin-bar {
	--wp-admin-bar-height	: 32px;
}

html, body{
	overflow-x				: hidden;
}

body.scroll-locked {
	position				: fixed;
	top						: var( --scroll-lock-offset );
	left					: 0;
	right					: 0;
	width					: 100%;
}

h1,h2,h3,h4,h5,h6{
	font-family				: var(--font-accent);
}

p { 
	font-size: var(--paragraph-font-size);
	font-weight: var(--paragraph-font-weight);
	line-height: var(--lh-body);
}

strong {
	font-weight: 600;
}

li {
    padding-bottom: 10px;
}

#main {
	min-height:50vh;
}

.is-layout-constrained {
	max-width				: var(--width-constrained);
	margin					: 0 auto;
	padding					: 0 15px;
}

/* --------------------------------------------------
	TYPE MAP
-------------------------------------------------- */

/* Base Families */
.type-ui { font-family: var(--font-hero); }
.type-hero { font-family: var(--font-hero); }
.type-accent { font-family: var(--font-accent); }

/* UI Scale */
.type-ui.heading-xl { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing:-1.6px; }
.type-ui.heading-l { font-size: 30px; font-weight: 700; line-height: var(--lh-heading); text-transform: uppercase; letter-spacing:-1.6px; }
.type-ui.body-m { font-size: 18px; line-height: var(--lh-body); letter-spacing:-1.6px; }

/* Hero Scale */
.type-hero.hero-xxl { font-size: clamp(120px, 12vw, 180px); line-height: var(--lh-hero); letter-spacing: -0.03em; }
.type-hero.hero-xl { font-size: clamp(56px, 8vw, 80px); line-height: 1; letter-spacing: -0.02em; }
.type-hero.hero-l { font-size: clamp(48px, 6vw, 65px); line-height: 1; letter-spacing: -0.03em; }
.type-hero.hero-m { font-size: clamp(40px, 5vw, 60px); line-height: 1; letter-spacing: -0.02em; }

/* Accent */
.type-hero.accent-s { font-size: 22px; line-height: 1.35; }


/* --------------------------------------------------
	SITE HEADER
-------------------------------------------------- */

header.site-header{
	/* Sticky header shell */
	position			: sticky;
	top					: 0;
	z-index				: 50;
	background			: none;
}
.site-header{
	/* Header must define a stacking context above the page */
	position			: sticky;
	top					: 0;
	z-index				: 1000;
	background			: var(--wp--preset--color--grey-light);
}
.site-header .site-header {
	border-bottom		: none;
}

/* --------------------------------------------------
	LOCATIONS SELECTOR
-------------------------------------------------- */

.locations-mega{
	/* The mega panel sits *below* the header bar, but above the rest of the page */
	position			: absolute;
	left				: 0;
	right				: 0;
	top					: 100%;
	/* directly under the header */
	width				: 100%;
	z-index				: 1100;
	min-height			: 100vh;

	background			: var(--brand-light);
	color				: var(--brand-dark);

	/* closed by default */
	opacity				: 0;
	transform			: translateY(-8px);
	pointer-events		: none;

	/* keep it from affecting layout when closed */
	max-height			: 0;
	overflow			: clip;

	transition			: opacity 160ms ease, transform 180ms ease, max-height 220ms ease;
}

html[data-locations-state="open"] .locations-mega{
	opacity				: 1;
	transform			: translateY(-78px);
	pointer-events		: auto;
	max-height			: fit-content;
}

.locations-mega .mega-inner{
	width				: min(1200px, calc(100% - 72px));
	margin				: 0 auto;
	padding				: 28px 0 34px;
}


/* --------------------------------------------------
	OPENING HOURS
-------------------------------------------------- */

.opening-hours{
	height				: var(--header-topbar-h);
	display				: flex;
	align-items			: center;
	border-bottom		: var(--header-rule);
	background			: var(--grey-light);
	z-index				: 1103;
	position			: relative;
}

/* Mobile summary only */
.opening-hours__summary{
	display				: flex;
	gap					: 6px;
	align-items			: center;
	justify-content		: center;
	width				: 100%;
	margin				: 0;
	font-family			: var(--font-ui);
	font-size			: 13px;
	line-height			: 1;
	color				: var(--brand-dark);
	font-weight			: 700;
}
.opening-hours__promotions {
	align-items			: flex-start;
	position			: absolute;
	left				: 0;
	top					: 36px;

	line-height			: 1.5em;
	padding				: 15px 15px 15px 15px;

	background-color	: white;
	/*background-image	: var(--page-bg);*/
	background-size		: contain;
	background-repeat	: no-repeat;
	background-position	: right center;

	color				: var(--brand-dark);
	border-width		: 0 1px 1px 1px;
	border-color		: var(--brand-dark);
	border-style		: solid;

	display				: flex;
	white-space			: nowrap;
	flex-direction		: column;
	gap					: 15px;

	/* hidden state */
	opacity				: 0;
	transform			: translateY(-6px);
	visibility			: hidden;
	pointer-events		: none;

	transition:
		opacity 0.22s cubic-bezier(.22,.61,.36,1),
		transform 0.22s cubic-bezier(.22,.61,.36,1);
}

.oh.is-today:hover .opening-hours__promotions {
	opacity: 1;
	transform: translateY(-4px);
	visibility: visible;
	pointer-events: auto;

	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0s;
}
.opening-hours__promotions:before{
	content:"";
	display:block;
	position:absolute;
	left:0;
	top:-42px;
	height:42px;
	z-index:1;
	width:100%;
	background:transparent;
	opacity:1;
}
.oh dl{position:relative;}
.oh dt,
.oh dd{z-index:2;}

.opening-hours__promotions span {
	display:block;
}
.opening-hours__promotions a {
	text-decoration:underline;
	margin-right:3px;
	text-align:left;
}
.opening-hours__promotions a:hover {
	color:var(--brand-dark);
}
/* Desktop full schedule hidden on mobile */
.opening-hours__full{ display:none; }

/* Main header bar */
.header-bar{
	display					: grid;
	grid-template-columns	: 1fr auto 1fr;
	align-items				: center;
	padding					: 10px 0;
	max-width				: 1686px;
	margin					: 0 auto;
	background				: none;
	z-index					: 1102;
	position				: relative;
}

.header-left,
.header-right{
	display:flex;
	align-items:center;
	min-width: 0;
}
.header-left{ justify-content:flex-start; }
.header-right{ justify-content:flex-end; }
.header-right .btn-primary{display:none;}

/* Brand logo */
.brand a{
	display:flex;
	align-items:center;
	justify-content:center;
	text-decoration:none;
}
.brand-logo{
	width: var(--logo-w);
	height: var(--logo-h);
	display:block;
}
.brand-name{
	position:absolute;
	width:1px;
	height:1px;
	margin:-1px;
	padding:0;
	overflow:hidden;
	clip:rect(0,0,0,0);
	white-space:nowrap;
	border:0;
}

/* Mobile: Book control (icon + label under) */
.header-book{
	display:inline-flex;
	flex-direction: column;
	align-items:center;
	justify-content:center;
	gap: 4px;
	text-decoration:none;
	color: var(--brand-dark);
	min-width: 56px;
}
.header-book__icon{
	width: var(--icon-book-w);
	height: var(--icon-book-h);
	display:block;
}
html[data-locations-state="open"] .header-book__icon path{
	fill:var(--brand-dark) !important
}
.header-book__label{
	font-size: 12px;
	line-height: 1;
	font-family: var(--font-ui);
	font-weight: 700;
}

/* Mobile burger button sizing */
.icon-btn{
	width: 44px;
	height: 44px;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	/*border-radius: 999px;*/
	/*border: 1px solid rgba(2,28,36,.18);*/
	background: transparent;
	color: var(--brand-light);
	border:0;
}
.icon-btn .icon{
	width: var(--icon-burger);
	height: var(--icon-burger);
	display:block;
}
#menuToggle {
	width:30px;
	height:auto;
	margin-right:15px;
	flex-direction:column;
	cursor:pointer;
}
#menuToggle .sr-only {
	font-size: 12px;
	line-height: 1;
	font-family: var(--font-ui);
	font-weight: 700;
	color:var(--brand-dark);
}
#locationsToggle {
	cursor:pointer;
}
#locationsToggle .label-close {
	display:none;
}
html[data-locations-state="open"] #locationsToggle .label-open {
	display:none;
}
html[data-locations-state="open"] #locationsToggle .label-close {
	display:block;
}
/*#locationsMega {
	display:none;
}*/


/* Hide/show helpers (mobile-first) */
.mobile-only{ display:inline-flex; }
.desktop-only{ display:none; }
.mobile-promo-carousel {
	position: relative;
	overflow: hidden;
}

.mobile-promo-track {
	position: relative;
}

.mobile-promo-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 240ms ease;
}

.mobile-promo-slide.is-active {
	position: relative;
	opacity: 1;
}

.carousel-prev,
.carousel-next {
	position: absolute;
	bottom: 26px;
	right: 36px;
	background: rgba(0,0,0,.6);
	color: white;
	border: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	cursor: pointer;
}
.carousel-prev span,
.carousel-next span {
	position:relative;
	top:-3px;
}

.menu-separator{
	width:100%;
	display:block;
	background: linear-gradient(
		to bottom,
		rgba(2,28,36,0) 0%,
		rgba(2,28,36,0) 51%,
		rgba(2,28,36,1) 52%,
		rgba(2,28,36,0) 100%
	);
	transform:translateY(-15px);
}
.menu-separator img {
	display:block;
	width:100%;
}

.carousel-prev {
	right: 74px;
}
.mobile-promo-slide {
	transform: translateY(6px);
	opacity: 0;
	transition: opacity 220ms ease, transform 220ms ease;
}

.mobile-promo-slide.is-active {
	transform: translateY(0);
	opacity: 1;
}
/* overlay */
/*.drawer-overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.55);
	z-index: 80;
	opacity: 0;
	transition: opacity 220ms ease;
}
html.drawer-open .drawer-overlay{
	opacity: 1;
}*/

/* drawer shell */
.drawer{
	position: fixed;
	top: var(--header-h);
	right: 0;
	width: 100vw;
	max-width: 100vw;
	z-index: 90;

	/* use dvh when supported (prevents mobile browser chrome issues) */
	height: calc(100vh - var(--header-h));
}
.menu-promotion {
	margin:-38px -36px 10px;
}

.menu .mobile-promo-card {
	display: block;
	position: relative;
	border-radius: 0;
	overflow: hidden;
	background: var(--brand-dark);
	color: var(--light);
	text-decoration: none;
	padding:0;
}
.mobile-promo-card:before {
	content: "";
	display: block;
	position: absolute;
	left: 18px;
	top: 18px;
	right: 18px;
	bottom: 18px;
	border-radius: 12px;
	border: 1px solid var(--brand-light);
	z-index: 2;
	box-shadow: 0 0 40px 17px black;
}
.mobile-promo-card img {
	width: 100%;
	height: auto;
	display: block;
}

.mobile-promo-card__content {
	position: absolute;
	left: 19px;
	right: 19px;
	bottom: 19px;
	line-height:16px;
	padding: 8px 16px 16px 16px;
	background: linear-gradient(to top, rgba(0,0,0,.6), transparent);
	backdrop-filter: blur(5px) saturate(130%);
	-webkit-backdrop-filter: blur(5px) saturate(130%);
	border-radius: 0 0 12px 12px;
}
.mobile-promo-card__content strong {
	font-size:16px;
	color:var(--brand-light);
}
.mobile-promo-card__content span {
	font-size:16px;
	color:var(--light);
}

.drawer{
	transform: translateX(100%);
	transition: transform 260ms ease;
	will-change: transform;
}
html.drawer-open .drawer{ transform: translateX(0); }

/* inner panel: the ONLY scroll container */
.drawer-inner {
	background-image: var(--mm-bg);
	background-color: var(--drawer-bg);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height:100%;
}

/* top row */
.drawer-top{
	display:flex;
	align-items:center;
	justify-content: space-between;
	padding: 14px var(--drawer-pad-x);
	border-bottom: 1px solid var(--drawer-line);
}

.drawer-top strong{
	font-family: var(--font-ui);
	font-weight: 700;
	letter-spacing: 0;
}

/* main scroll region */
.drawer-nav{
	flex: 1 1 auto;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	height:100%;
	padding:
		var(--drawer-pad-top)
		var(--drawer-pad-x)
		var(--drawer-pad-bottom)
		var(--drawer-pad-x);
	background: rgba(2,28,36,0.97);
}

/* menu list */
.menu{
	list-style:none;
	margin:0;
	padding:0;
	display:flex;
	flex-direction: column;
	/*gap: 18px;*/
}

/* section headers (e.g. Book a table, What’s on, Locations) */
.menu .section-title,
.submenu > summary{
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 30px;
	line-height: 42px;
	color: var(--brand-light);

	display:flex;
	align-items:center;
	justify-content: space-between;

	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	list-style: none;
}
.submenu > summary svg {
	fill: var(--brand-light);
	height: 42px;
	transition:all 0.2s ease;
}
.submenu > summary::-webkit-details-marker{ display:none; }
.submenu > summary::after{
	content:"";
	position:absolute;
	right: 14px;
	top: 50%;
	width: 30px;
	height: 30px;

	background: url('/wp-content/themes/bonnierogues/assets/images/chevron.svg') no-repeat center / contain;

	transform: translateY(-50%) rotate(0deg);
	transition: transform 160ms ease;
}

.submenu[open] > summary::after{
	transform: translateY(-50%) rotate(90deg);
}
.submenu[open] > summary svg {
	transform:rotate(90deg);
}
/* links inside */
.menu a{
	display:flex;
	align-items:center;
	justify-content: space-between;
	text-decoration:none;
	color: var(--drawer-text);

	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.4;

	padding: 6px 0;
}
.menu a:hover{ text-decoration: none; color: #fff; }

/* submenu children */
.submenu ul{
	list-style:none;
	margin: 10px 0 0;
	padding: 0 0 0 0;
	display:flex;
	flex-direction: column;
	gap: 10px;
}
.submenu ul a{
	font-weight: 600;
	color: var(--drawer-muted);
}

/* dividers between sections (add <hr class="drawer-divider"> if you want) */
.drawer-divider{
	height: 1px;
	border: 0;
	background: rgba(244,155,45,.45);
	margin: 16px 0;
}

/* bottom area (ideal place for socials + CTA) */
.drawer-bottom{
	border-top: 1px solid var(--drawer-line);
	padding: 16px var(--drawer-pad-x) 18px;
}

/* close button */
.drawer-top .icon-btn{
	background: transparent;
	border: 1px solid rgba(255,255,255,.22);
	color: rgba(255,255,255,.92);
}

/* Mobile drawer section dividers (1px brand-light) */
.menu .menu-section{
	/*padding-bottom: 14px;*/                /* breathing room above the line */
	border-bottom: 1px solid var(--brand-light);
}

.menu .menu-section + .menu-section{
	/*margin-top: 18px;*/                    /* breathing room below the line */
}

/* =========================
	 Mobile Drawer: menu styling (spec-based)
========================= */

/* Drawer surfaces */

/* Top bar */
.drawer-top{
	padding: 32px 36px 0; /* top=32 per spec, sides=36 */
	display:none;
}
.drawer-top strong{
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 30px;
	line-height: 42px;
	color: var(--brand-light);
}

/* Close button */
.drawer-top .icon-btn{
	background: transparent;
	border: 0;
	padding: 10px;
	color: var(--brand-light);
	display:none;
}

/* Scroll area (locks to viewport minus header via your JS var) */
.drawer{
	top: var(--header-h);
	height: calc(100vh - var(--header-h));
}

/* Links + section look */
.menu a,
.submenu > summary{
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 30px;
	line-height: 42px;
	color: var(--brand-light);

	background: transparent;
	border: 0;
	padding: 14px 0;
	border-radius: 0;

	display:flex;
	align-items:center;
	justify-content: space-between;
	text-decoration:none;
	position:relative;
}
.submenu > summary:after{
	position:absolute;
	right:0;
	top:50%;
	transform:translateY(-50%);
	background-image:var(--light-chevron);
}

/* 1px orange divider between sections */
.menu .menu-section{
	border-bottom: 1px solid var(--brand-light);
}

/* Submenu children */
.submenu ul{
	margin: 10px 0 0;
	padding: 0 0 10px;
	list-style:none;
}
.submenu ul a{
	font-size		: 24px;
	line-height		: 2;
	font-weight		: 400;
	color			: var(--light);
	padding			: 8px 0 8px 20px;
}
.submenu ul li:last-child{
	padding-bottom	: 24px;
}

/* Bottom CTA */
.drawer-bottom{
	padding: 0 36px 24px;
}
.drawer-bottom .btn{
	width: 100%;
	justify-content: center;
	border-radius: 999px;
}
.drawer-bottom .btn-primary{
	background: var(--brand-light);
	border-color: var(--brand-light);
	color: var(--brand-dark);
}

.br-cta-panel{
	background: var(--wp--preset--color--grey-light);
	padding: 22px 0;
}

.br-cta-panel__inner{
	width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
}

.br-cta-panel__cols{
	background: var(--wp--preset--color--light);
	border-radius: 22px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr; /* mobile stack */
}

.br-cta-panel__content{
	padding: 22px 20px;
	color: var(--wp--preset--color--brand-dark);
	font-family: var(--wp--preset--font-family--halyard);
}

.br-cta-panel__title{
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 30px;
	line-height: 42px;
	color: var(--wp--preset--color--brand-light);
}

.br-cta-panel__lead{
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 700;
}

.br-cta-panel__body{
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 400;
	max-width: 62ch;
}

.br-cta-panel__actions{
	display:flex;
	gap: 12px;
	flex-wrap: wrap;
}


.br-cta-panel__art{
	min-height: 220px;
	background: var(--wp--preset--color--light);
}

.br-cta-panel__art img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position: center;
}

.br-cta-panel{
	background: var(--wp--preset--color--grey-light);
	padding: 22px 0;
}

.br-cta-panel__inner{
	width: min(1200px, calc(100% - 32px));
	margin-inline: auto;
}

.br-cta-panel__cols{
	background: var(--wp--preset--color--light);
	border-radius: 22px;
	overflow: hidden;
	display: grid;
	grid-template-columns: 1fr; /* mobile stack */
}

.br-cta-panel__content{
	padding: 22px 20px;
	color: var(--wp--preset--color--brand-dark);
	font-family: var(--wp--preset--font-family--halyard);
}

.br-cta-panel__title{
	margin: 0 0 12px;
	font-weight: 700;
	font-size: 30px;
	line-height: 42px;
	color: var(--wp--preset--color--brand-light);
}

.br-cta-panel__lead{
	margin: 0 0 12px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 700;
}

.br-cta-panel__body{
	margin: 0 0 18px;
	font-size: 18px;
	line-height: 1.45;
	font-weight: 400;
	max-width: 62ch;
}

.br-cta-panel__actions{
	display:flex;
	gap: 12px;
	flex-wrap: wrap;
}

.br-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding: 12px 18px;
	font-weight: 700;
	text-decoration:none;
	white-space: nowrap;
}

.br-btn--dark{
	background: var(--wp--preset--color--brand-dark);
	color: var(--wp--preset--color--light);
	border-radius: 8px;
}

.br-cta-panel__art{
	min-height: 220px;
	background: var(--wp--preset--color--light);
}

.br-cta-panel__art img{
	width:100%;
	height:100%;
	display:block;
	object-fit: cover;
	object-position: center;
}

/* =========================
	 BENEFITS (collage + CF7 panel)
	 Mobile-first, desktop at >= 920px
	 Uses palette vars:
	 --light, --grey-light, --brand-dark, --brand-light
========================= */

/* outer section */
.benefits{
	padding: 22px 0;
	background: transparent; /* keep section neutral; card provides the look */
}

/* main card wrapper (matches the screenshot: one rounded card) */
.benefits__inner{
	width: min(var(--width-max-constraint), calc(100% - 32px));
	margin: 0 auto;

	background: var(--benefits-bg);
	color: var(--benefits-fg);

	border-radius: 12px;
	overflow: hidden; /* ensures collage corners clip */
	display: grid;
	gap: 0;

	/* Mobile: single column, focus on content */
	grid-template-columns: 1fr;
}

/* collages are decorative framing; hide on mobile like the design tendency */
.benefits__collage{
	display: none;
}

/* centre panel */
.benefits__panel{
	padding: var(--benefits-pad);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 16px;
}

/* optional emblem slot (if you add it later) */
.benefits__emblem{
	width: 64px;
	height: 64px;
	margin: 2px auto 6px;
}

/* header */
.benefits__header h2{
	margin: 0 0 6px;
	font-family: var(--font-hero);
	font-weight: 400;
	line-height: var(--lh-hero);
	letter-spacing: -0.02em;
	font-size: clamp(34px, 7vw, 54px);
	color: var(--light);
}

.benefits__header p{
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: var(--lh-body);
	color: rgba(255,255,255,.86);
}

/* form wrapper */
.benefits__form{
	width: 100%;
	max-width: var(--benefits-panel-max);
	background: var(--light);
	border: var(--benefits-form-border);
	border-radius: var(--benefits-form-radius);
	padding: 18px 16px;
	text-align: left;
	color: var(--brand-dark);
}

/* -------------------------
	 CF7 normalisation (scoped)
-------------------------- */
.benefits__form .wpcf7{
	margin: 0;
}

.benefits__form .wpcf7 form{
	margin: 0;
}

.benefits__form .wpcf7 p{
	margin: 0 0 12px;
}

.benefits__form label{
	display: block;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	line-height: 1.25;
	color: var(--brand-dark);
}

.benefits__form .wpcf7-form-control-wrap{
	display: block;
	margin-top: 6px;
}

/* inputs as “underline” fields like the design */
.benefits__form input[type="text"],
.benefits__form input[type="email"],
.benefits__form input[type="tel"],
.benefits__form input[type="date"],
.benefits__form input[type="number"],
.benefits__form select,
.benefits__form textarea{
	width: 100%;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.3;
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid rgba(2,28,36,.25);
	background: transparent;
	color: var(--brand-dark);
	border-radius: 0;
	outline: none;
}

.benefits__form textarea{
	min-height: 92px;
	resize: vertical;
}

/* focus */
.benefits__form input:focus,
.benefits__form select:focus,
.benefits__form textarea:focus{
	border-bottom-color: var(--brand-light);
	box-shadow: 0 2px 0 0 var(--brand-light);
}

/* validation messages */
.benefits__form .wpcf7-not-valid-tip{
	font-size: 12px;
	margin-top: 6px;
	color: #b00020;
}
.benefits__form .wpcf7-response-output{
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 13px;
}

/* submit row: right aligned “SEND” button */
.benefits__form .wpcf7-submit{
	appearance: none;
	border: 0;
	border-radius: 6px;
	background: var(--brand-light);
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 800;
	letter-spacing: .02em;
	padding: 10px 16px;
	cursor: pointer;
}

.benefits__form .wpcf7-submit:hover{
	filter: brightness(0.98);
}

.benefits__form .wpcf7-submit:focus-visible{
	outline: 3px solid rgba(2,28,36,.35);
	outline-offset: 2px;
}

/* CF7 often wraps submit in <p> - align it */
.benefits__form p:has(.wpcf7-submit){
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	margin-top: 6px;
}


/* =========================
	 VENUES (3 orange cards)
========================= */

.venues{
	padding: 26px 0;
}

/* grid: 1-up on small screens, grows to 2/3 as space allows */
.venues__grid{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: 1fr;
}

.venue-card{
	display: block;
	background: var(--brand-light); /* #f49b2d */
/*	border-radius: 12px;*/
/*	padding: 22px 18px 20px;*/
	text-decoration: none;
	color: var(--brand-dark); /* #021c24 */
	min-height: 260px;

	/* card feel */
/*	box-shadow: 0 10px 24px rgba(0,0,0,.08);*/
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.venue-card:hover{
	/*transform: translateY(-2px);*/
	/*box-shadow: 0 14px 30px rgba(0,0,0,.12);*/
	/*text-decoration: none;*/
}

.venue-card:focus-visible{
	outline: 3px solid rgba(2,28,36,.35);
	outline-offset: 3px;
}

.venue-card__figure{
	margin: 0;
	display: grid;
	place-items: center;
	gap: 12px;
	text-align: center;
}

.venue-card__emblem{
	width: min(220px, 70%);
	height: auto;
	display: block;
}

.venue-card__caption{
	display: grid;
	place-items: center;
	gap: 14px;
	padding-top: 2px;
}

/* city name uses your hero font */
.venue-card__name{
	font-family: var(--font-hero);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.02em;
	font-size: clamp(34px, 4vw, 48px);
}

/* button style in the screenshot */
.venue-card__cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 14px;
	border-radius: 8px;
	background: var(--brand-dark); /* deep blue */
	color: var(--light);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .02em;
	text-transform: uppercase;
	line-height: 1;
}

/* =========================
	 PROMO GRID (Home promos)
	 - Mobile-first stacked
	 - Desktop @ 920px: 2-col with wide + half
	 - Hover zoom on devices that actually hover
========================= */

/* Section wrapper */
.promo-grid{
	padding: 22px 0 30px;
}

/* Intro */
.promo-grid__intro{
	text-align: center;
	padding: 0 0 16px;
	max-width: 70ch;
	margin: 0 auto;
}

.promo-grid__intro h2{
	margin: 0 0 8px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 22px;           /* mobile */
	line-height: 1.2;
	color: var(--brand-dark);
	letter-spacing: -0.01em;
}

.promo-grid__standfirst{
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.35;
	color: rgba(2,28,36,.78);
}

/* List layout */
.promo-grid__list{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	grid-template-columns: 1fr; /* mobile stack */
	gap: var(--promo-gap);
}

/* Card shell */
.promo-card{
	border-radius: var(--promo-radius);
	overflow: hidden;
	background: #000; /* in case image is slow */
	position: relative;
}

/* Full-card link */
.promo-card__link{
	display: block;
	position: relative;
	text-decoration: none;
	color: inherit;
	min-height: var(--promo-card-min-h);
	border-radius: var(--promo-radius);
	overflow: hidden;
}

/* Media fills the card */
.promo-card__media{
	margin: 0;
	position: absolute;
	inset: 0;
	z-index: 0;
}

/* Image cover */
.promo-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1);
	transition: transform 320ms ease;
	will-change: transform;
}

/* Dark scrim for readability */
.promo-card__link::after{
	content:"";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,.30) 0%,
		rgba(0,0,0,.35) 45%,
		rgba(0,0,0,.55) 100%
	);
	pointer-events: none;
}

/* Content overlay */
.promo-card__content{
	position: relative;
	z-index: 2;
	height: 100%;
	min-height: var(--promo-card-min-h);
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
}

/* Typography (uses your fonts) */
.promo-card__title{
	margin: 0;
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: 38px; /* mobile */
	line-height: 1.0;
	letter-spacing: -0.02em;
	color: var(--light);
	text-shadow: 0 8px 24px rgba(0,0,0,.45);
}

.promo-card__meta{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.3;
	color: rgba(255,255,255,.92);
	text-transform: none;
}

/* CTA pill */
.promo-card__cta{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--brand-light);
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	box-shadow: 0 12px 28px rgba(0,0,0,.35);
}

/* Focus ring for keyboard */
.promo-card__link:focus-visible{
	outline: 3px solid var(--brand-light);
	outline-offset: 3px;
}


/* =========================
	 EVENT TILES (What's on)
	 Mobile-first, desktop @ 920px
========================= */

.event-tiles{
	background: var(--grey-light);
	color: var(--brand-dark);
	padding: 34px 0 42px;
}

.event-tiles__intro{
	text-align: center;
	padding: 0 16px 18px;
}

.event-tiles__intro h2{
	margin: 0;
	font-family: var(--font-hero);
	font-size: 60px;            /* matches your hero-m */
	line-height: var(--lh-hero);
	letter-spacing: -0.02em;
	color: var(--brand-dark);
}

.event-tiles__grid{
	width: min(980px, calc(100% - 32px));
	margin: 0 auto;
	padding: 0;
	list-style: none;

	display: grid;
	grid-template-columns: 1fr;
	gap: var(--event-gap);
}

/* ---- Flip Card Core ---- */

.flip-card{
	position: relative;
	border-radius: var(--event-radius);
	overflow: hidden;
	box-shadow: var(--event-shadow);
	background: #000; /* fallback behind images */
	border: var(--event-border);

	/* Keeps the tiles visually square like the designs */
	aspect-ratio: 1 / 1;
}

.flip-card__inner{
	position: absolute;
	inset: 0;
}

/* Click/tap target (JS toggles .is-flipped) */
.flip-card__toggle{
	position: absolute;
	inset: 0;
	z-index: 5;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
}

/* Faces stack */
.flip-card__face{
	position: absolute;
	inset: 0;
	display: block;

	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}

.flip-card__face--front{
	opacity: 1;
	pointer-events: auto;
}

.flip-card__media{
	margin: 0;
	position: absolute;
	inset: 0;
}

.flip-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 320ms ease;
	will-change: transform;
}

/* Front overlay */
.flip-card__front-overlay{
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	text-align: center;

	color: #fff;
	z-index: 2;
}

.flip-card__front-overlay::before{
	content: "";
	position: absolute;
	inset: 0;
	background: var(--event-scrim);
	z-index: -1;
}

.flip-card__title{
	margin: 0;
	font-family: var(--font-hero);
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.02em;
	text-shadow: 0 6px 18px rgba(0,0,0,.35);
}

/* Back face */
.flip-card__face--back{
	background: var(--brand-dark);
	color: var(--light);
}

.flip-card__back-content{
	height: 100%;
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
	text-align: center;
}

.flip-card__back-content .flip-card__title{
	color: var(--light);
	font-size: 34px;
	text-shadow: none;
}

.flip-card__desc{
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: var(--lh-body);
	color: rgba(255,255,255,.88);
}

.flip-card__meta{
	margin: 0;
	font-family: var(--font-ui);
	font-size: 14px;
	color: rgba(255,255,255,.78);
}

.flip-card__actions{
	margin: 6px 0 0;
	display: flex;
	gap: 10px;
	justify-content: center;
	flex-wrap: wrap;
}

/* Your existing .btn styles will apply; this just tightens inside cards */
.flip-card__actions .btn{
	box-shadow: none;
}

/* text-front variant (dark panel on front) */
.flip-card--text-front{
	background: var(--brand-dark);
}

.flip-card--text-front .flip-card__face--front{
	background: var(--brand-dark);
}

.flip-card__panel{
	height: 100%;
	padding: 22px 18px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	text-align: center;
}

.flip-card--text-front .flip-card__title{
	color: var(--light);
	font-size: 34px;
	text-shadow: none;
}

.flip-card--text-front .flip-card__desc{
	color: rgba(255,255,255,.86);
}

/* “From £XXpp” styling */
.flip-card--text-front .flip-card__meta strong{
	color: var(--brand-light);
}

/* ---- Flip behaviour (hover/focus + JS class) ---- */


/* Keyboard: focus within shows back */
.flip-card:focus-within .flip-card__face--front{
	opacity: 0;
	pointer-events: none;
}
.flip-card:focus-within .flip-card__face--back{
	opacity: 1;
	pointer-events: auto;
}

/* JS toggled open state */
.flip-card.is-flipped .flip-card__face--front{
	opacity: 0;
	pointer-events: none;
}
.flip-card.is-flipped .flip-card__face--back{
	opacity: 1;
	pointer-events: auto;
}

/* =========================
	 OCCASIONS (Cards)
	 Mobile-first, desktop @ 920px
========================= */

/* Section wrapper */
.occasion-cards{
	background: var(--grey-light);
	color: var(--brand-dark);
	padding: 34px 0 52px;
}

/* Intro */
.occasion-cards__intro{
	text-align: center;
	padding: 0 16px 22px;
}

.occasion-cards__kicker{
	margin: 0 0 6px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--brand-light);
}

.occasion-cards__intro h1{
	margin: 0;
	font-family: var(--font-hero);
	font-size: 60px;
	line-height: var(--lh-hero);
	letter-spacing: -0.02em;
	color: var(--brand-dark);
}

.occasion-cards__lede{
	margin: 8px 0 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: var(--lh-body);
	color: rgba(2,28,36,.85);
	font-weight: 600;
}

/* List layout */
.occasion-cards__list{
	list-style: none;
	padding: 0;
	margin: 0 auto;
	width: min(var(--occ-max), calc(100% - 32px));

	display: grid;
	gap: var(--occ-gap);
}

/* Card */
.occasion-card{
	background: var(--light);
	border: var(--occ-border);
	border-radius: var(--occ-radius);
	overflow: hidden;
	box-shadow: var(--occ-shadow);

	display: grid;
	grid-template-columns: 1fr; /* mobile stack */
}

/* Media */
.occasion-card__media{
	position: relative;
	background: rgba(2,28,36,.06);
	aspect-ratio: 4 / 3; /* nice mobile shape */
}

.occasion-card__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Content panel */
.occasion-card__content{
	padding: 18px 16px 20px;
	text-align: center;
}

/* Header (mark + title) */
.occasion-card__header{
	display: grid;
	justify-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.occasion-card__mark{
	margin: 0;
	width: 44px;
	height: 44px;
}

.occasion-card__mark img{
	width: 100%;
	height: 100%;
	display: block;
}

/* Title */
.occasion-card__title{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.2;
	color: var(--brand-dark);
}

/* Copy */
.occasion-card__copy{
	margin: 0;
}

.occasion-card__copy p{
	margin: 0 0 10px;
	font-family: var(--font-ui);
	font-size: 14px;
	line-height: 1.55;
	color: rgba(2,28,36,.84);
}

.occasion-card__copy p:last-child{
	margin-bottom: 0;
}

/* Actions */
.occasion-card__actions{
	margin: 14px 0 0;
	display: flex;
	justify-content: center;
}

/* Ensure button looks consistent if your base .btn exists */
.occasion-card__actions .btn{
	text-decoration: none;
}


/* =========================
	 Block Covers
========================= */
.wp-block-cover h1.wp-block-heading {
	font-size:38px;
	width:100%;
	max-width:100%;
	padding:0;
	margin:0 auto !important;
}

/* =========================
	 Standfirst panel
========================= */

.standfirst{
	padding: 0 16px;
}

.standfirst__header{
	margin: -18px auto 18px;
	max-width: 980px;
	background: #fff;
	border-radius: 18px;
	padding: 18px 18px 16px;
	text-align: center;
	box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.standfirst__header h2{
	margin: 0 0 10px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.25;
	color: var(--brand-dark);
}

.standfirst__copy{
	margin: 0 0 14px;
	font-family: var(--font-ui);
	font-size: 12px;
	line-height: 1.35;
	color: rgba(2,28,36,.86);
}

.standfirst__actions{
	margin: 0;
	display: flex;
	justify-content: center;
}

/* =========================
	 Quick tiles + menu links
========================= */

.quick-tiles{
	padding: 0 16px 22px;
}

.quick-tiles__list{
	margin: 0 auto 14px;
	padding: 0;
	list-style: none;
	max-width: 980px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.quick-tile{
	position: relative;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	background: #111;
	aspect-ratio: 1 / 1;
}

.quick-tile__media{
	position: absolute;
	inset: 0;
}
.quick-tile__media img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.quick-tile::after{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%);
}

.quick-tile__label{
	position: absolute;
	left: 14px;
	bottom: 12px;
	z-index: 2;
	color: #fff;
	font-family: var(--font-hero);
	font-size: 18px;
	line-height: 1;
	letter-spacing: -0.01em;
}

.menu-links{
	max-width: 980px;
	margin: 0 auto;
}

.menu-links__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 14px;
	justify-content: center;
}

.menu-links__link{
	font-family: var(--font-ui);
	font-size: 12px;
	line-height: 1.2;
	color: var(--brand-dark);
	text-decoration: underline;
	text-underline-offset: 2px;
}


/* =========================
	 Icon stats (3-up highlights)
========================= */

.icon-stats{
	padding: 0 16px 22px;
}

.icon-stats__inner{
	max-width: 980px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	padding: 14px 14px;
	border: 2px solid var(--brand-light);
}

.icon-stats__list{
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.icon-stats__item{
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: center;
	gap: 10px;
}

.icon-stats__icon{
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--brand-dark);
}

.icon-stats__icon svg{
	width: 100%;
	height: 100%;
	display: block;
}

.icon-stats__text{
	margin: 0;
	font-family: var(--font-ui);
	color: var(--brand-dark);
	line-height: 1.25;
}

.icon-stats__strong{
	font-weight: 700;
	font-size: 14px;
}

.icon-stats__label{
	font-size: 12px;
}


/* =========================================================
	 BLOCK: Contact hub (Questions? + map + enquiries + promos)
	 Mobile-first. Desktop layout at min-width:920px.
	 Assumes your root tokens exist:
	 --brand-dark, --brand-light, --grey-light, --light, --font-ui, --font-hero
========================================================= */

.contact-hub{
	padding: 34px 0 46px;
}

.contact-hub .container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
}

/* Intro */
.contact-hub__intro{
	text-align: center;
	margin: 0 auto 18px;
	max-width: 760px;
}

.contact-hub__kicker{
	margin: 0 0 6px;
	color: var(--brand-light);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
}

.contact-hub__intro h2{
	margin: 0 0 6px;
	color: var(--brand-dark);
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: clamp(44px, 7vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.contact-hub__lede{
	margin: 0 auto;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.45;
	max-width: 640px;
}

/* Map */
.contact-hub__map{
	margin: 18px 0 22px;
}

.contact-hub__mapframe{
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 8px 26px rgba(2,28,36,.12);
}

.contact-hub__iframe{
	display: block;
	width: 100%;
	height: 280px; /* mobile */
	border: 0;
}

.contact-hub__mapmeta{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 14px;
	padding: 10px 2px 0;
}

.contact-hub__address{
	margin: 0;
	font-style: normal;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.4;
}

/* Directions button wrapper only (you said button styles later) */
.contact-hub__directions{
	margin: 0;
	display: flex;
	justify-content: flex-end;
}

/* Lower area: form + promos */
.contact-hub__lower{
	display: grid;
	gap: 16px;
}

/* Panels */
.contact-hub__panel{
	position: relative;
	border-radius: 16px;
	overflow: hidden;
}

.contact-hub__panelhead{
	padding: 18px 18px 10px;
}

.contact-hub__panelhead h3{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.2;
	color: var(--brand-dark);
}

/* Form panel (white with orange stroke) */
.contact-hub__panel--form{
	background: #fff;
	border: 2px solid var(--brand-light);
}

.contact-hub__form{
	padding: 0 18px 18px;
}

/* If CF7 adds its own margins, tame them */
.contact-hub__form :is(p, .wpcf7-form-control-wrap){
	margin: 0;
}

/* Stack (join + lost) */
.contact-hub__stack{
	display: grid;
	gap: 16px;
}

/* Join panel (orange) */
.contact-hub__panel--join{
	background: var(--brand-light);
}

.contact-hub__panel--join .contact-hub__panelhead h3{
	color: var(--brand-dark);
}

.contact-hub__copy{
	padding: 0 18px 12px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 1.55;
	max-width: 560px;
}

.contact-hub__copy p{
	margin: 0 0 10px;
}

.contact-hub__actions{
	padding: 0 18px 18px;
	margin: 0;
}

/* Illustration on join panel */
.contact-hub__art{
	position: absolute;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	margin: 0;
	opacity: .95;
	pointer-events: none;
}

.contact-hub__art img{
	display: block;
	width: 110px;
	height: auto;
}

/* Lost property panel (dark) */
.contact-hub__panel--lost{
	background: var(--brand-dark);
	border: 2px solid var(--brand-light);
}

.contact-hub__panel--lost .contact-hub__panelhead{
	padding-bottom: 6px;
}

.contact-hub__panel--lost .contact-hub__panelhead h3{
	color: #fff;
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: 34px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.contact-hub__panel--lost .contact-hub__actions{
	padding-top: 0;
}

/* Utility */
.sr-only{
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================================================
	 Desktop (>= 920px)
========================================================= */



/* =========================================================
	 BLOCK: Themed brunches grid (intro + 3x2 cards)
	 Uses existing theme tokens.
	 Mobile-first, then desktop at min-width: 920px.
========================================================= */

.themed-grid{
	padding: 34px 0 46px;
}

.themed-grid .container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
}

/* Intro */
.themed-grid__intro{
	text-align: center;
	margin: 0 auto 18px;
	max-width: 860px;
}

.themed-grid__intro h2{
	margin: 0 0 8px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.25;
}

.themed-grid__intro p{
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	opacity: .95;
}

/* Grid */
.themed-grid__list{
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

/* Card */
.theme-card{
	height: 100%;
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(2,28,36,.14);
	display: flex;
	flex-direction: column;
}

/* Media */
.theme-card__media{
	margin: 0;
	position: relative;
	overflow: hidden;
}

.theme-card__media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transform: scale(1);
	transition: transform .35s ease;
}

/* Body */
.theme-card__body{
	padding: 14px 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.theme-card__title{
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.theme-card__copy{
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.55;
	opacity: .95;
}

/* Actions wrapper (button styles later; we just layout nicely) */
.theme-card__actions{
	margin: 10px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Link hit-area + focus */
.theme-card a{
	text-decoration: none;
}

.theme-card a:focus-visible{
	outline: 2px solid var(--brand-light);
	outline-offset: 3px;
	border-radius: 10px;
}
/* =========================================================
	 BLOCK: Content slot (generic container + optional modules)
	 Mobile-first, then desktop at min-width: 920px.
	 Uses existing theme tokens:
	 --brand-dark, --brand-light, --grey-light, --grey-medium, --light
	 --font-ui, --font-hero
========================================================= */

/* ---------- Content slot container ---------- */
.content-slot{
	padding: 34px 0 56px;
}

.content-slot .container{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
}

/* Let Gutenberg blocks look tidy if dropped inside */
.content-slot :where(p){
	margin: 0 0 12px;
}

.content-slot :where(h2, h3){
	margin: 0 0 10px;
}

/* Optional intro (sr-only title already) */
.content-slot__intro{
	margin: 0 0 18px;
}

/* ---------- Shared panel styling for modules ---------- */
.content-slot :where(.menu-highlights, .diary, .what-you-get, .gallery, .testimonials, .faqs){
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(2,28,36,.12);
	padding: 18px;
	margin: 0 0 16px;
}

.content-slot :where(.menu-highlights__header, .diary__header, .what-you-get__header, .gallery__header, .testimonials__header, .faqs__header){
	text-align: center;
	margin: 0 0 14px;
}

.content-slot :where(.menu-highlights__header h2, .diary__header h2, .what-you-get__header h2, .gallery__header h2, .testimonials__header h2, .faqs__header h2){
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.25;
}

.content-slot :where(.menu-highlights__header p, .diary__header p){
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.5;
	opacity: .95;
}

/* Actions layout only (button styles later) */
.content-slot :where(.menu-highlights__actions, .diary__actions, .what-you-get__actions, .gallery__actions){
	margin: 14px 0 0;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
}

/* ---------- Menu highlights ---------- */
.menu-highlights__list{
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.menu-highlight{
	border: 1px solid rgba(2,28,36,.10);
	border-radius: 14px;
	padding: 14px;
	background: var(--grey-light);
}

.menu-highlight__title{
	margin: 0 0 6px;
	color: var(--brand-dark);
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: 24px;
	line-height: 1.05;
	letter-spacing: -0.01em;
}

.menu-highlight__copy{
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.55;
	opacity: .95;
}

/* ---------- Diary / schedule ---------- */
.diary__list{
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	border: 1px solid rgba(2,28,36,.10);
	border-radius: 14px;
	overflow: hidden;
}

.diary__row{
	display: grid;
	grid-template-columns: 1fr;
	gap: 4px;
	padding: 12px 14px;
	background: #fff;
}

.diary__row + .diary__row{
	border-top: 1px solid rgba(2,28,36,.10);
}

.diary__day{
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.diary__detail{
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.35;
}

.diary__time{
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.35;
	opacity: .9;
}

/* ---------- What you get (two columns on desktop) ---------- */
.what-you-get__cols{
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 14px 0 0;
}

.what-you-get__col{
	border: 1px solid rgba(2,28,36,.10);
	border-radius: 14px;
	padding: 14px;
	background: var(--grey-light);
}

.what-you-get__col h3{
	margin: 0 0 10px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 800;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .03em;
}

.what-you-get__col ul{
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 8px;
}

.what-you-get__col li{
	position: relative;
	padding-left: 18px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	line-height: 1.55;
}

.what-you-get__col li::before{
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: var(--brand-light);
}

/* ---------- Gallery ---------- */
.gallery__grid{
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

.gallery__grid img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(2,28,36,.12);
	transform: scale(1);
	transition: transform .35s ease;
}

/* ---------- Testimonials ---------- */
.testimonials__list{
	list-style: none;
	padding: 0;
	margin: 14px 0 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.testimonial{
	border: 1px solid rgba(2,28,36,.10);
	border-radius: 14px;
	padding: 14px;
	background: var(--grey-light);
}

.testimonial blockquote{
	margin: 0;
}

.testimonial blockquote p{
	margin: 0 0 10px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	line-height: 1.6;
}

.testimonial blockquote footer{
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	opacity: .9;
}

/* ---------- FAQs (details/summary) ---------- */
.faqs__items{
	margin: 14px 0 0;
	display: grid;
	gap: 10px;
}

.faqs__items details{
	border: 1px solid rgba(2,28,36,.10);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}

.faqs__items summary{
	cursor: pointer;
	padding: 14px;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 800;
	line-height: 1.25;
}

.faqs__items summary::-webkit-details-marker{
	display: none;
}

/* Orange chevron indicator (CSS only) */
.faqs__items summary::after{
	content: "";
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--brand-light);
	border-bottom: 2px solid var(--brand-light);
	transform: rotate(45deg);
	transition: transform .2s ease;
}

.faqs__items details[open] summary{
	background: var(--grey-light);
}

.faqs__items details[open] summary::after{
	transform: rotate(-135deg);
}

.faqs__items details > div{
	padding: 0 14px 14px;
}

.faqs__items details > div p{
	margin: 0;
	color: var(--brand-dark);
	font-family: var(--font-ui);
	font-weight: 600;
	line-height: 1.6;
	opacity: .95;
}

/* Focus-visible for summaries */
.faqs__items summary:focus-visible{
	outline: 2px solid var(--brand-light);
	outline-offset: 3px;
	border-radius: 10px;
}

/* =========================================================
	 BLOCK: Join our Bonnie family
	 Mobile-first, then desktop at min-width: 920px
========================================================= */

.join{
	padding: 18px 0;
}

.join__inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;

	background: var(--brand-light);
	border-radius: 16px;
	overflow: hidden;

	box-shadow: 0 10px 30px rgba(2,28,36,.12);
}

/* Mobile: stacked */
.join__copy{
	padding: 18px 18px 16px;
	color: var(--brand-dark);
}

.join__title{
	margin: 0 0 10px;
	font-family: var(--font-hero);
	font-weight: 400;
	font-size: 40px;          /* maps to your heading-xl vibe */
	line-height: 1;
	letter-spacing: -0.02em;
}

.join__text p{
	margin: 0 0 12px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 14px;
	line-height: 1.7;
}

.join__text p:last-child{
	margin-bottom: 0;
}

.join__cta{
	margin: 14px 0 0;
}

/* Until button styles exist, give a safe, on-brand default */
.join__cta a{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 44px;
	padding: 0 18px;

	border-radius: 10px;
	border: 1px solid rgba(2,28,36,.18);
	background: var(--brand-dark);
	color: #fff;

	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
}

.join__cta a:focus-visible{
	outline: 2px solid var(--brand-dark);
	outline-offset: 3px;
}

.join__art{
	margin: 0;
	background: var(--brand-light);
}

.join__art img{
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/* =========================================================
	 BLOCK: Themed Bottomless Brunches Grid
	 Mobile-first, desktop >= 920px
========================================================= */

.themed-grid{
	padding: 28px 0 34px;
}

.themed-grid__intro{
	max-width: 1200px;
	margin: 0 auto 18px;
	padding: 0 18px;
	text-align: center;
}

.themed-grid__intro h2{
	margin: 0 0 8px;
	font-family: var(--font-hero);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--brand-dark);
}

.themed-grid__intro p{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	line-height: 1.6;
	color: rgba(2,28,36,.78);
}

/* Grid */
.themed-grid__list{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 18px;
	list-style: none;

	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

/* Card */
.theme-card{
	height: 100%;
	display: flex;
	flex-direction: column;

	background: #fff;
	border-radius: 14px;
	overflow: hidden;

	box-shadow: 0 10px 26px rgba(2,28,36,.10);
}

.theme-card__media{
	margin: 0;
	background: #fff;
}

.theme-card__media img{
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;          /* keeps the tile shape consistent */
	object-fit: cover;
}

.theme-card__body{
	padding: 14px 14px 16px;
	text-align: center;
	color: var(--brand-dark);
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.theme-card__title{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 16px;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.theme-card__copy{
	margin: 0;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	line-height: 1.6;
	color: rgba(2,28,36,.78);
}

/* Actions */
.theme-card__actions{
	margin: 2px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
}

/* Temporary button styling (safe until your real .btn styles land) */
.theme-card__actions a{
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 36px;
	padding: 0 14px;

	border-radius: 9px;
	text-decoration: none;

	font-family: var(--font-ui);
	font-weight: 800;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .02em;
}

/* Primary */
.theme-card__actions a.btn-primary,
.theme-card__actions a[href*="/book/"]{
	background: var(--brand-light);
	color: var(--brand-dark);
	border: 1px solid rgba(2,28,36,.10);
}

/* Secondary */
.theme-card__actions a.btn:not(.btn-primary){
	background: transparent;
	color: var(--brand-dark);
	border: 1px solid rgba(2,28,36,.18);
}



.full-width-height {
	min-height:400px;
}
.squared{
	aspect-ratio: 1 / 1;
}
.portrait {
	aspect-ratio: 2 / 3 !important;
	display:block;
}

.bump {
	padding-top:50px;
	padding-bottom:25px;
}

/* ==============================
	SIMON - inline styling from page
=============================== */

header.site-header,
 {
	background:none !important;
	border-bottom:4px dotted #021c24;
	width:90%;
	margin:0 auto;
}

.header-bar {
	background:none !important;
}

/* Component strokes/borders */
.yellowBorder, .darkBlueBorder, .whiteBorder, .lightGreyBorder {
	border-radius: var(--border-border-radius) !important;
	padding: 15px;
}
.yellowBorder { border:solid 2px #f49b2d; }
.darkBlueBorder { border:solid 2px #021c24; }
.whiteBorder { border:solid 2px #f2f4e2; }
.lightGreyBorder { border:solid 2px #f1f1f1; }

/* Rotations */
.twerk1 { transform: rotate(1.5deg); }
.twerk2 { transform: rotate(-1deg); }
.twerk3 { transform: rotate(-.75deg); }
.twerk4 { transform: rotate(-3.5deg); }

.location {	
	font-size:30px;
}

.videoTitle {
	font-size:80px;
	padding:0;
	margin:0;
}

.calories {
	font-weight:lighter;
	font-style:italic;
}

.foodCategories {
	font-family:inherit;
	font-weight:bolder;
}

.foodIcons {
	float:right;
	padding-left:5px;
}

.food-item-price {
	font-size:24px !important;
}

.quote {
	font-size:50px !important;
	font-style:italic;
}

.makeMeYellow {
	color:#f49b2d;
}

.wp-block-button__link {
	font-size:var(--paragraph-font-size);
}

.smallText
{
	font-size:.9em;
	padding-top:3px;
}

.testimonial
{
	padding:30px 0;
	background:none;
	border-top:dotted 4px #f49b2d;
	border-bottom:dotted 4px #f49b2d;
	border-left:none;
	border-right:none;
	margin:40px 0;
}

.smallPrint
{
	font-size:.75rem;
}

.blueWall {
  background-image: url('https://brkingston.websocial.ai/wp-content/uploads/2026/03/Bonnie-Body-Wall-Blue.jpg');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.dropShadow {
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

.wp-block-accordion-heading__toggle-title
{
	color:#021c24;
	border-bottom:dotted 4px #021c24;
}

.wp-block-separator
{
	border:none;
	border-top:dotted 4px #f49b2d;
	background:none !important;
}

.schema-faq-question { 

}