/* =========================================================================
   WordPress bridge
   site.css is the HTML build's stylesheet, unchanged. This file only maps
   the markup WordPress, JetThemeCore, JetEngine and JetMenu add onto the
   design's own classes.
   ========================================================================= */

/* --- JetThemeCore wrappers ------------------------------------------------
   The header/footer templates arrive inside two levels of wrappers. Taking
   them out of the box tree keeps the sticky header sticky (a sticky element
   only sticks inside its parent) and the page flow identical to the HTML. */
.jet-theme-core-document,
.jet-theme-core-document__inner,
.jet-theme-core-location,
.jet-theme-core-location__inner { display: contents; }

/* --- JetEngine dynamic fields and links -----------------------------------
   Same idea: the value lands where the block sits, without three divs. */
.jet-listing-dynamic-field-block,
.jet-listing-dynamic-field,
.jet-listing-dynamic-field__inline-wrap,
.jet-listing-dynamic-link-block,
.jet-listing-dynamic-link { display: contents; }
.jet-listing-dynamic-field__content { flex: none; max-width: none; }   /* JetEngine sets flex: 1 */

/* --- Core blocks ---------------------------------------------------------- */
.wp-block-image { margin: 0; }
.wp-block-image figcaption { margin: 0; }
.wp-block-quote { margin: 0; }
.wp-block-quote p:last-child { margin-bottom: 0; }
.wp-block-list.ribbon,
.wp-block-list.offer__times { margin-top: 0; }

/* --- Hero -------------------------------------------------------------- */
figure.hero__bg { position: absolute; inset: 0; z-index: -2; margin: 0; }
figure.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 56%; }
.hero__foot p { margin: 0; }
.hero__foot strong { font-weight: 500; color: #e9bf83; letter-spacing: .14em; text-transform: uppercase; font-size: 10.5px; margin-right: 7px; }
.hero__foot em { font-style: normal; }

/* --- Cards: the photo is a figure (Image block) rather than a bare img --- */
.card > figure.card__img { flex: none; }
.card > figure.card__img img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* --- Menu tile: the two columns and their JetEngine lists ----------------- */
.menus__head .menus__range { margin: 0; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.menus .arrow { display: inline-block; margin-top: 18px; }

.dishes .jet-listing-grid__items { display: block; width: auto; margin: 0; }
.dishes .jet-listing-grid__item { width: auto; max-width: none; padding: 0; flex: none; }
.dish { display: flex; align-items: baseline; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; font-weight: 500; }
.dish__text { flex: 1; }
.dish__desc .jet-listing-dynamic-field__content { display: block; font-size: 13.5px; font-weight: 400; line-height: 1.5; color: var(--ink-2); margin-top: 3px; }
.dish__price .jet-listing-dynamic-field__content { flex: none; font-weight: 500; color: var(--claret); }
.dish__price .jet-listing-dynamic-field__content::before { content: "£"; font-size: .72em; vertical-align: .1em; margin-right: 1px; }
@media (max-width: 640px) { .dish { gap: 12px; } }

/* --- Reviews: each JetEngine item is a tile in the section's grid --------- */
.reviews-list,
.reviews-list .jet-listing-grid,
.reviews-list .jet-listing-grid__items,
.reviews-list .jet-listing-grid__item { display: contents; }
#reviews .jet-listing-grid__item:nth-child(1) > .review { grid-column: 1 / 5;  grid-row: 2 / 3; }
#reviews .jet-listing-grid__item:nth-child(2) > .review { grid-column: 5 / 9;  grid-row: 2 / 3; }
#reviews .jet-listing-grid__item:nth-child(3) > .review { grid-column: 9 / 13; grid-row: 2 / 3; }
.review__quote .jet-listing-dynamic-field__content { display: block; margin: 0 0 18px; font-size: 17px; font-style: italic; line-height: 1.6; }
.review { min-height: 240px; }   /* as the HTML's figure.review, which picked up the photo-tile minimum */
.review__by { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.review__source .jet-listing-dynamic-field__content::before { content: ", "; }
@media (max-width: 1024px) {
	#reviews .jet-listing-grid__item > .review { grid-column: auto !important; grid-row: auto !important; }
	/* An odd review at the end spans the row, as the photos and cards do. */
	#reviews .jet-listing-grid__item:last-child:nth-child(odd) > .review { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
	#reviews .jet-listing-grid__item > .review { grid-column: 1 / -1 !important; }
}

/* --- Header: JetMenu inside the design's nav ------------------------------ */
.hdr__nav .jet-mega-menu-toggle,
.mnav .jet-mega-menu-toggle,
.ftr .jet-mega-menu-toggle { display: none !important; }

.hdr__nav .jet-mega-menu,
.hdr__nav .jet-mega-menu-container { display: block; background: none; padding: 0; }
.hdr__nav .jet-mega-menu-list { display: flex; align-items: center; gap: 20px; margin: 0; padding: 0; list-style: none; background: none; }
.hdr__nav .jet-mega-menu-item { position: relative; display: flex; align-items: center; }
.hdr__nav .jet-mega-menu-item__inner { display: flex; align-items: center; gap: 6px; padding: 0; background: none; }
.hdr__nav .jet-mega-menu-item__link--top-level {
	padding: 0 0 3px; background: none;
	white-space: nowrap; text-decoration: none; font-size: 12px; font-weight: 500; letter-spacing: .11em; text-transform: uppercase;
	color: var(--ink-2); border-bottom: 1px solid transparent;
}
.hdr__nav .jet-mega-menu-item__link--top-level:hover,
.hdr__nav .jet-mega-current-menu-item > .jet-mega-menu-item__inner > .jet-mega-menu-item__link--top-level { color: var(--ink); border-bottom-color: var(--claret); }
.hdr__nav .jet-mega-menu-item__title,
.hdr__nav .jet-mega-menu-item__label { font: inherit; color: inherit; padding: 0; }
/* The chevron on items with a dropdown, drawn like the HTML build's. */
.hdr__nav .jet-mega-menu-item-has-children > .jet-mega-menu-item__inner::after {
	content: ""; width: 6px; height: 6px; margin-top: -3px;
	border-right: 1.5px solid var(--ink-2); border-bottom: 1.5px solid var(--ink-2);
	transform: rotate(45deg); transition: transform .25s var(--ease);
}
.hdr__nav .jet-mega-menu-item-has-children:hover > .jet-mega-menu-item__inner::after,
.hdr__nav .jet-mega-menu-item-has-children:focus-within > .jet-mega-menu-item__inner::after { transform: rotate(225deg); margin-top: 3px; }
.hdr__nav .jet-mega-menu-item__dropdown { display: none; }   /* JetMenu's own arrow icon */

/* Dropdown panel */
.hdr__nav .jet-mega-menu-sub-menu {
	display: block !important; position: absolute; top: 100%; left: -16px; z-index: 90;
	min-width: 230px; width: max-content; margin: 0; padding: 8px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(28,33,24,.28);
	opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .2s;
}
.hdr__nav .jet-mega-menu-sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.hdr__nav .jet-mega-menu-item-has-children:hover > .jet-mega-menu-sub-menu,
.hdr__nav .jet-mega-menu-item-has-children:focus-within > .jet-mega-menu-sub-menu {
	opacity: 1; visibility: visible; transform: translateY(12px); pointer-events: auto;
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s;
}
.hdr__nav .jet-mega-menu-sub-menu__list { margin: 0; padding: 0; list-style: none; background: none; box-shadow: none; border: 0; }
.hdr__nav .jet-mega-menu-item--sub-level { display: block; }
.hdr__nav .jet-mega-menu-item--sub-level .jet-mega-menu-item__inner { display: block; padding: 0; }
.hdr__nav .jet-mega-menu-item__link--sub-level {
	display: block; padding: 10px 14px; border: 0; border-radius: 9px; background: none;
	font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink); text-decoration: none;
}
.hdr__nav .jet-mega-menu-item__link--sub-level:hover,
.hdr__nav .jet-mega-menu-item__link--sub-level:focus-visible { background: var(--sand); color: var(--claret); }
.hdr__nav .jet-mega-menu-item__desc { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }

/* --- Mobile menu panel ---------------------------------------------------- */
.mnav .jet-mega-menu,
.mnav .jet-mega-menu-container { display: block; background: none; padding: 0; }
.mnav .jet-mega-menu-list,
.mnav .jet-mega-menu-sub-menu__list { display: block; margin: 0; padding: 0; list-style: none; background: none; box-shadow: none; border: 0; }
.mnav .jet-mega-menu-list { max-width: var(--content); margin-inline: auto; }
.mnav .jet-mega-menu-item,
.mnav .jet-mega-menu-item__inner { display: block; padding: 0; background: none; }
.mnav .jet-mega-menu-item__dropdown,
.mnav .jet-mega-menu-item__desc { display: none; }
.mnav .jet-mega-menu-sub-menu { display: block !important; position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; background: none; padding: 0; min-width: 0; width: auto; }
.mnav .jet-mega-menu-item__link--top-level {
	display: block; padding: 15px 0; border-bottom: 1px solid var(--line); background: none;
	font-family: var(--display); font-size: 22px; text-decoration: none; color: var(--ink);
}
.mnav .jet-mega-menu-item__link--sub-level {
	display: block; padding: 11px 0 11px 18px; border-bottom: 1px solid var(--line); background: none;
	font-size: 15px; text-decoration: none; color: var(--ink-2);
}
.mnav .jet-mega-menu-item__title,
.mnav .jet-mega-menu-item__label { font: inherit; color: inherit; padding: 0; }

/* --- Footer ---------------------------------------------------------------- */
.ftr__grid > div > img { display: block; }
.ftr__meta .jet-listing-dynamic-field__content { display: block; margin: 0 0 1.1em; }
.ftr__fine .jet-listing-dynamic-field__content { margin-top: 14px; }
.ftr__social .jet-listing-dynamic-link__link { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--line); line-height: 1.6; }
.ftr__social .jet-listing-dynamic-link__link:hover { color: var(--claret); border-bottom-color: currentColor; }
.ftr .jet-mega-menu,
.ftr .jet-mega-menu-container { display: block; background: none; padding: 0; }
.ftr .jet-mega-menu-list { display: block; margin: 0 0 1.8rem; padding: 0; list-style: none; background: none; }
.ftr .jet-mega-menu-item { display: block; margin-bottom: 8px; }
.ftr .jet-mega-menu-item__inner { display: block; padding: 0; background: none; }
.ftr .jet-mega-menu-item__link { padding: 0; background: none; text-decoration: none; color: var(--ink-2); font-size: 14px; }
.ftr .jet-mega-menu-item__link:hover { color: var(--claret); }
.ftr .jet-mega-menu-item__title,
.ftr .jet-mega-menu-item__label { font: inherit; color: inherit; padding: 0; }

/* --- JetMenu specificity ----------------------------------------------------
   JetMenu's own stylesheet uses long selectors (and its inline style options)
   for padding, positioning and the show/hide of sub-menus. These win over it
   where it matters, so the menus look like the HTML build's. */
.hdr__nav .jet-mega-menu .jet-mega-menu-item__inner,
.mnav .jet-mega-menu .jet-mega-menu-item__inner,
.ftr .jet-mega-menu .jet-mega-menu-item__inner { padding: 0 !important; background: none !important; }
.hdr__nav .jet-mega-menu .jet-mega-menu-item__inner { display: flex !important; }
.hdr__nav .jet-mega-menu .jet-mega-menu-item--sub-level .jet-mega-menu-item__inner { display: block !important; }
.hdr__nav .jet-mega-menu .jet-mega-menu-item__title,
.mnav .jet-mega-menu .jet-mega-menu-item__title,
.ftr .jet-mega-menu .jet-mega-menu-item__title { display: block; }

.mnav .jet-mega-menu .jet-mega-menu-sub-menu {
	position: static !important; visibility: visible !important; opacity: 1 !important;
	transform: none !important; pointer-events: auto !important; width: auto !important;
}
.mnav .jet-mega-menu .jet-mega-menu-sub-menu__list { visibility: visible !important; }

/* "Home" is in the menu for the phone panel only. */
.hdr__nav .mnav-only { display: none !important; }

/* Desktop bar: beat JetMenu's horizontal-layout rules (three classes deep). */
.hdr__nav .jet-mega-menu.jet-mega-menu--layout-horizontal .jet-mega-menu-list { align-items: center; gap: 20px; flex-flow: nowrap; background: none; }
.hdr__nav .jet-mega-menu.jet-mega-menu--layout-horizontal .jet-mega-menu-sub-menu {
	top: 100%; left: -16px; right: auto; min-width: 230px; width: max-content; margin: 0; padding: 8px;
	background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
	box-shadow: 0 18px 40px -18px rgba(28,33,24,.28);
}
.hdr__nav .jet-mega-menu.jet-mega-menu--layout-horizontal .jet-mega-menu-sub-menu__list { background: none; border: 0; box-shadow: none; padding: 0; gap: 0; }

/* Footer "Explore" list: same rhythm as the HTML's plain list (inline links in
   body-size list items, 8px apart, 1.8rem before "Sister pub"). */
.ftr .jet-mega-menu { margin: 0 0 1.8rem; }
.ftr .jet-mega-menu.jet-mega-menu--layout-vertical .jet-mega-menu-list { display: block; margin: 0; gap: 0; }
.ftr .jet-mega-menu,
.ftr .jet-mega-menu .jet-mega-menu-container,
.ftr .jet-mega-menu .jet-mega-menu-list { font-size: inherit; line-height: inherit; }
.ftr .jet-mega-menu .jet-mega-menu-item { font-size: inherit; line-height: inherit; margin: 0 0 8px; }
.ftr .jet-mega-menu .jet-mega-menu-item__link,
.ftr .jet-mega-menu .jet-mega-menu-item__title,
.ftr .jet-mega-menu .jet-mega-menu-item__label { display: inline; font-size: 14px; line-height: inherit; }

/* Review byline: name and source on one line, after the stars; quote marks
   round the review text (the client types the words only). */
.review__name .jet-listing-dynamic-field__content,
.review__source .jet-listing-dynamic-field__content { display: inline; }
.review__quote .jet-listing-dynamic-field__content::before { content: "“"; }
.review__quote .jet-listing-dynamic-field__content::after { content: "”"; }

/* =========================================================================
   Inner pages
   ========================================================================= */

/* Hero photo focus, set per page with a class on the Image block. */
figure.hero__bg.pos-45 img { object-position: center 45%; }

/* --- Menu lists (JetEngine "Menu row" listing inside .mlist) --------------
   Same layout as the HTML's ul.mlist > li. The listing wrappers become plain
   blocks so CSS columns (Mains, Also available) flow item by item. */
.mlist .jet-listing-grid,
.mlist .jet-listing-grid__items { display: block; width: auto; margin: 0; }
.mlist .jet-listing-grid__item { width: auto; max-width: none; padding: 0; break-inside: avoid; }
.mitem { display: flex; align-items: baseline; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.mitem__text { flex: 1; font-size: 16px; font-weight: 500; }
.mitem__name .jet-listing-dynamic-field__content,
.mitem__diet .jet-listing-dynamic-field__content { display: inline; }
.mitem__desc .jet-listing-dynamic-field__content { display: block; font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--ink-2); margin-top: 4px; }
.mitem__price .jet-listing-dynamic-field__content { font-weight: 500; color: var(--claret); white-space: nowrap; }
.mitem__price .jet-listing-dynamic-field__content::before { content: "£"; font-size: .78em; margin-right: 1px; }
.mlist--tight .mitem { padding: 9px 0; }
.mlist--tight .mitem__text { font-size: 14.5px; font-weight: 400; }
.t-nibbles .mitem__desc .jet-listing-dynamic-field__content,
.t-puddings .mitem__desc .jet-listing-dynamic-field__content { font-size: 13.5px; }
@media (max-width: 640px) {
	.mlist .mitem__text { font-size: 15.5px; }   /* the wine lists too, as in the HTML */
}

/* Wine columns: each column is a Group block. */
.wines__col > .menu-h--sub { margin-top: 0; }

/* Offer tiles are synced patterns shared with the home page; on Menus they
   sit in the intro row (the HTML's .t-mi-offer-a / -b). */
#intro .t-offer-a { grid-column: 5 / 9;  grid-row: 1 / 2; }
#intro .t-offer-b { grid-column: 9 / 13; grid-row: 1 / 2; }

/* --- Christmas page --------------------------------------------------------- */
figure.hero__bg.pos-55 img { object-position: center 55%; }
/* The two prices are paragraphs in a Group (the HTML has spans in one p). */
.xmas-price p { margin: 0; }
/* Two-column lists start flush with the heading, as .mlist--cols li:first-child. */
.mlist--cols .jet-listing-grid__item:first-child .mitem { padding-top: 0; }

/* --- What's on ----------------------------------------------------------------- */
figure.hero__bg.pos-40 img { object-position: center 40%; }
figure.tile.pos-30 > img { object-position: center 30%; }

/* Christmas dates: a List block, the label in bold on its own line. */
.xmas-dates li { font-size: 17px; color: #fff; }
.xmas-dates strong { display: block; font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #f0c3a8; margin-bottom: 3px; }

/* "Coming up": JetEngine Events. Each item is a tile in the section grid,
   placed like the HTML's quiz / music / brewery tiles; extra events flow on. */
.events-list,
.events-list .jet-listing-grid,
.events-list .jet-listing-grid__items,
.events-list .jet-listing-grid__item { display: contents; }
#coming-up .jet-listing-grid__item:nth-child(1) > .event { grid-column: 5 / 8;   grid-row: 1 / 2; }
#coming-up .jet-listing-grid__item:nth-child(2) > .event { grid-column: 8 / 11;  grid-row: 1 / 2; }
#coming-up .jet-listing-grid__item:nth-child(3) > .event { grid-column: 11 / 13; grid-row: 1 / 2; }
#coming-up .jet-listing-grid__item:nth-child(n+4) > .event { grid-column: span 4; }
.event .event__when .jet-listing-dynamic-field__content { margin: 0 0 12px; font-size: 11px; }   /* beats .event p:not(.event__when), which the inner <p> would match */
.event__title .jet-listing-dynamic-field__content { margin: 0 0 .5em; }
/* The link's wrappers step aside so the <a class="arrow"> is the tile's own
   flex item and drops to the bottom (.event .arrow { margin-top: auto }). */
.event__link .jet-listing-dynamic-field__content { display: contents; }
.event .wp-block-list.offer__times { margin-top: 4px; }
@media (max-width: 1024px) {
	#coming-up .jet-listing-grid__item > .event { grid-column: auto !important; grid-row: auto !important; }
	#coming-up .jet-listing-grid__item:last-child:nth-child(odd) > .event { grid-column: 1 / -1 !important; }
}
@media (max-width: 640px) {
	#coming-up .jet-listing-grid__item > .event { grid-column: 1 / -1 !important; }
}

/* Contact links are Button blocks (contact__big); the wrapper is dropped. */

/* --- Our story ------------------------------------------------------------------- */
figure.hero__bg.pos-30 img { object-position: center 30%; }

/* --- History ----------------------------------------------------------------------- */
figure.tile.pos-40 > img { object-position: center 40%; }
figure.tile.pos-78 > img { object-position: center 78%; }

/* --- Burrough Hill ---------------------------------------------------------------- */
.wp-block-video { margin: 0; }
.wp-block-video figcaption { margin: 0; }

/* --- Find us -------------------------------------------------------------------------- */
figure.hero__bg.pos-50 img { object-position: center 50%; }