/*
 * Companion stylesheet for The Stag & Hounds block theme.
 * theme.json carries the design tokens (colour, type, spacing); this file
 * only covers what block supports/theme.json can't express: sticky/blur,
 * hover states, the horizontal-scrolling nav, the scroll-reveal animation
 * and the homepage ticker marquee.
 */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Header */

/* The header template part wraps both the top bar (.site-header: logo +
   "Book a table") and the row below it (.site-nav: links/hamburger + phone)
   in one outer <header>. Previously only .site-header itself was sticky, so
   once you scrolled past it the nav row — including the mobile hamburger —
   scrolled away with the page and became unreachable. Sticking the shared
   outer wrapper instead keeps both rows pinned together, on every device. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
}

.site-header {
	background: rgba(16, 24, 13, 0.92) !important;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--custom--line--on-dark);
}

/* Horizontal inset comes from the constrained layout's root padding; adding it
   here too would double it and knock the header out of line with the nav. */
.site-header__inner {
	padding: 12px 0;
	max-width: var(--wp--style--global--content-size);
	margin: 0 auto;
	width: 100%;
	gap: 16px;
}

.site-header__brand {
	min-width: 0;
	flex: 1 1 auto;
}

.site-header__brand .wp-block-site-title a {
	color: var(--wp--preset--color--cream);
	font-size: clamp(14px, 2.8vw, 17px);
	line-height: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.book-a-table-button .wp-block-button__link {
	font-size: clamp(12px, 2.6vw, 13px) !important;
	padding: 11px 18px !important;
}

.book-a-table-button .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cream) !important;
	color: var(--wp--preset--color--forest) !important;
}

/* Button hover states, site-wide.
 *
 * Core's own hover rule (`:root :where(.wp-element-button:hover, ...)`) sets
 * background/color with no !important, wrapped in :where() so it carries
 * almost no specificity. It loses outright to:
 *   - the has-X-background-color preset classes, which core itself marks
 *     !important — so a solid button's background never visibly changed;
 *   - the outline style's own `:not(.has-background)` rules, which reach
 *     three classes of specificity — so an outline button's background and
 *     text colour never visibly changed either.
 * Net effect: no wp:button anywhere on the site had a working hover state.
 * Restated here with matching specificity/!important, using the exact
 * hover colours from the HTML design for each colour combination in use. */

.wp-block-button__link.has-ink-background-color:hover {
	background-color: var(--wp--preset--color--claret) !important;
}

.wp-block-button__link.has-gold-background-color:hover {
	background-color: var(--wp--preset--color--cream) !important;
}

.wp-block-button__link.has-claret-background-color:hover {
	background-color: var(--wp--preset--color--ink) !important;
}

/* is-style-outline can land on the link itself or (as it does here, since
   this markup wraps the class on the parent) on the wrapping .wp-block-button
   with the link as its direct child — core's own CSS covers both shapes, so
   this override has to as well. */
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: rgba(242, 237, 225, 0.12) !important;
}

/* Nav row */

.site-nav {
	border-bottom: 1px solid var(--wp--custom--line--on-dark);
}

/* Above 1024px the links and phone share one row, scrolling sideways if
   they outgrow it. Below it the links collapse into the hamburger overlay
   and the phone stays put beside it. (The Navigation block's own overlay
   breakpoint is hard-coded at 600px in WP core — see the override further
   down that extends it through tablet widths too. Leaving the switch at
   600px meant tablets got the horizontal-scroll row with no visual hint
   that it scrolled: the phone number and "Find Us" could end up scrolled
   fully out of view with nothing on screen suggesting they existed. That
   was reported as "trouble with mobile navigation".) */
.site-nav__inner {
	min-width: 0;
	gap: 26px !important;
}

@media (min-width: 1024px) {
	.site-nav__inner {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.site-nav__inner::-webkit-scrollbar {
		display: none;
	}
}

.site-nav__links {
	flex-wrap: nowrap !important;
	flex: 0 0 auto;
	gap: 26px !important;
}

.site-nav__links .wp-block-navigation-item {
	flex: 0 0 auto;
}

.site-nav__links a.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--cream);
	white-space: nowrap;
	padding: 13px 0 !important;
}

@media (hover: hover) {
	.site-nav__links a.wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--gold);
	}
}

.site-nav__links .current-menu-item > a.wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

/* Hamburger toggle (under 1024px) */

/* WP core hard-codes its overlay/inline switch at 600px (see
   wp-includes/blocks/navigation/style.css) with no setting to change it.
   Re-assert the hamburger through tablet widths too, so there's no gap
   where the nav silently becomes an undiscoverable horizontal-scroll row
   (see the note on .site-nav__inner above). Selectors mirror core's own
   exactly, scoped to this nav, so specificity ties resolve to whichever
   loads last — this stylesheet is enqueued after core's, but !important
   removes any doubt given how load-bearing this fix is. */
@media (min-width: 600px) and (max-width: 1023px) {
	.site-nav__links .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.site-nav__links .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}
}

.site-nav__links .wp-block-navigation__responsive-container-open,
.site-nav__links .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--cream);
	padding: 13px 0;
}

.site-nav__links .wp-block-navigation__responsive-container-open:hover,
.site-nav__links .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--gold);
}

/* Open overlay: stack the links large and centred, in the pub's type */
.site-nav__links .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px 20px 48px;
}

/* .site-nav__links carries !important gap (above, for the desktop inline
   row) — and WP core duplicates that className onto the overlay's own inner
   <ul class="wp-block-navigation__container">, so that same rule leaked
   into the mobile overlay too. Match it with !important to actually win. */
.site-nav__links .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__container {
	gap: 18px !important;
}

.site-nav__links .wp-block-navigation__responsive-container.is-menu-open
	a.wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: 22px;
	letter-spacing: 0.012em;
	text-transform: none;
	padding: 8px 0 !important;
}

.site-nav__phone {
	flex: 0 0 auto;
	margin: 0 0 0 auto !important;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px;
	letter-spacing: 0.1em;
}

.site-nav__phone a {
	color: var(--wp--preset--color--gold);
}

@media (hover: hover) {
	.site-nav__phone a:hover {
		color: var(--wp--preset--color--cream);
	}
}

/* Footer */

/* The divider that separates the footer from the page content above it. The
   design carries this on every page's footer section; without it the footer
   and a dark final section read as one continuous block. */
.site-footer {
	border-top: 1px solid var(--wp--custom--line--on-dark);
}

.site-footer__columns {
	padding-top: 56px;
	gap: 32px !important;
	flex-wrap: wrap !important;
}

.site-footer__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--custom--ink--on-dark-label);
	margin-bottom: 14px !important;
}

.site-footer__link,
.site-footer__caption {
	font-size: 15px;
	margin: 0 0 9px !important;
}

.site-footer__link a {
	color: var(--wp--custom--ink--on-dark);
}

@media (hover: hover) {
	.site-footer__link a:hover {
		color: var(--wp--preset--color--gold);
	}
}

.site-footer__caption {
	color: var(--wp--custom--ink--on-dark-label);
	font-size: 14px;
}

.site-footer__wordmark {
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: clamp(26px, 6.6vw, 96px);
	line-height: 1.3;
	letter-spacing: 0.012em;
	color: var(--wp--custom--ink--wordmark);
	white-space: nowrap;
	overflow: hidden;
	padding: 44px 0 20px !important;
	/* Auto side margins keep the wordmark on the same 1200px grid as the
	   footer columns and the legal line; a flat `margin: 0` would pin it to
	   the footer's outer padding edge instead, starting it further left than
	   everything above and below it. */
	margin: 0 auto !important;
}

.site-footer__bottom {
	border-top: 1px solid var(--wp--custom--line--on-dark);
	padding: 18px 0 30px !important;
	gap: 16px !important;
}

.site-footer__legal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--wp--custom--ink--on-dark-legal);
	margin: 0 !important;
}

/* Scroll-reveal animation */

@keyframes sh-fade-up {
	from {
		opacity: 0;
		transform: translateY(28px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.has-reveal {
	opacity: 0;
}

.has-reveal.sh-in {
	animation: sh-fade-up 0.7s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
	.has-reveal {
		opacity: 1;
		animation: none !important;
	}
}

/* Homepage ticker marquee */

@keyframes sh-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.sh-ticker {
	overflow: hidden;
	background: var(--wp--preset--color--gold);
	border-bottom: 1px solid rgba(16, 24, 13, 0.2);
}

.sh-ticker__track {
	display: flex;
	width: max-content;
	animation: sh-marquee 34s linear infinite;
}

.sh-ticker__set {
	display: flex;
	gap: 44px;
	padding: 13px 22px;
	white-space: nowrap;
	font-family: var(--wp--preset--font-family--cinzel);
	font-size: 16px;
	color: var(--wp--preset--color--forest);
}

@media (prefers-reduced-motion: reduce) {
	.sh-ticker__track {
		animation: none;
		overflow-x: auto;
	}
}

/* Homepage-specific bits that are one-offs, not worth a custom block */

.sah-section {
	padding-top: var( --wp--preset--spacing--90 ) !important;
	padding-bottom: var( --wp--preset--spacing--90 ) !important;
}

/* Editor-canvas-only fix: on the front end, .sah-section is the only
   element with .has-global-padding, so it gets the theme's 20px root
   padding normally. In the classic Page editor, the canvas wraps every
   page in its OWN root container that also carries .has-global-padding —
   and core has a rule that zeroes out padding on a .has-global-padding
   element nested inside another one, to stop the two adding up. That
   rule catches every .sah-section too, so sections look edge-to-edge
   while editing even though the real page never renders that way. This
   restores the padding, scoped to the editor iframe only. */
.editor-styles-wrapper .sah-section.has-global-padding {
	padding-left: var( --wp--style--root--padding-left ) !important;
	padding-right: var( --wp--style--root--padding-right ) !important;
}

.sah-section--no-bottom {
	padding-bottom: 0 !important;
}

.sah-menus-teaser {
	border-top: 1px solid var( --wp--custom--line--on-light-strong );
}

.sah-hero-meta {
	border-bottom: 1px solid var( --wp--custom--line--on-dark );
	padding-top: var( --wp--preset--spacing--40 ) !important;
	padding-bottom: var( --wp--preset--spacing--40 ) !important;
}

/* Keep Address/Contact side by side even on narrow screens, overriding core's
   default of stacking wp:columns below 600px. */
.sah-hero-meta .wp-block-columns {
	flex-wrap: nowrap !important;
}

.sah-hero-meta .wp-block-column {
	flex-basis: 0 !important;
	flex-grow: 1 !important;
}

.sah-hero-meta__label {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--custom--ink--on-dark-label );
	margin: 0 !important;
}

.sah-hero-meta__value {
	font-size: 14.5px;
	color: var( --wp--custom--ink--on-dark );
	margin: 8px 0 0 !important;
	line-height: 1.5;
}

.sah-hero-meta__value a {
	color: var( --wp--custom--ink--on-dark );
}

/* Without this, hover never visibly does anything: this rule's own class
   selector (0,1,1) already beats the sitewide hover rule's specificity
   (zeroed by :where()), so the base colour above wins even while hovering. */
.sah-hero-meta__value a:hover {
	color: var( --wp--preset--color--cream );
}

.sah-eyebrow {
	font-family: var( --wp--preset--font-family--mono );
	font-size: var( --wp--preset--font-size--eyebrow );
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold );
	/* Horizontal margins stay auto so the eyebrow sits on the same
	   constrained grid as the heading beneath it — a flat `margin: 0`
	   pins it to the section's padding edge instead, throwing it out of
	   line with everything else. Vertical margins stay 0; the spacing
	   below comes from the heading's own top margin. */
	margin: 0 auto !important;
}

.sah-eyebrow--light {
	color: var( --wp--custom--ink--on-light-label );
}

.sah-accent {
	color: var( --wp--preset--color--gold );
}

.sah-accent--claret {
	color: var( --wp--preset--color--claret );
}

/* Placeholder boxes for assets not yet supplied by the client (brewery
   video, hillfort photo) — deliberately styled as placeholders, matching
   how the design itself flags them, rather than substituting a mismatched
   real photo. */

.sah-placeholder-box {
	border: 1px solid var( --wp--custom--line--on-dark-strong );
	background-image: repeating-linear-gradient( 135deg, #172213 0 10px, #1c2917 10px 20px );
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 22px;
}

.sah-placeholder-box--light {
	border-color: var( --wp--custom--line--on-light-strong );
	background-image: repeating-linear-gradient( 135deg, #e3dcc8 0 10px, #eae4d4 10px 20px );
}

.sah-placeholder-box__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: flex-start;
}

.sah-placeholder-box__tag {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--gold );
}

.sah-placeholder-box__meta {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 10.5px;
	letter-spacing: 0.14em;
	color: var( --wp--custom--ink--on-dark-label );
}

.sah-placeholder-box__caption {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11.5px;
	line-height: 1.6;
	color: var( --wp--custom--ink--on-dark-label );
}

.sah-placeholder-box--light .sah-placeholder-box__caption {
	color: var( --wp--custom--ink--on-light-fine );
	font-size: 11.5px;
}

.sah-placeholder-box__play {
	align-self: center;
	width: 68px;
	height: 68px;
	border: 1px solid rgba( 242, 237, 225, 0.4 );
	border-radius: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sah-placeholder-box__play::before {
	content: '';
	width: 0;
	height: 0;
	border-left: 17px solid rgba( 242, 237, 225, 0.75 );
	border-top: 11px solid transparent;
	border-bottom: 11px solid transparent;
	margin-left: 5px;
}

.sah-lead {
	font-size: var( --wp--preset--font-size--lead );
	line-height: 1.65;
}

.sah-image-strip img {
	aspect-ratio: 3 / 4;
	object-fit: cover;
	width: 100%;
}

/* Below core's column-stacking breakpoint, show a 2x2 grid instead of four
   full-width rows. */
@media (max-width: 599px) {
	.sah-image-strip {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 12px !important;
	}

	.sah-image-strip .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
	}
}

.sah-fine-print {
	font-size: 13px;
	color: var( --wp--custom--ink--on-light-fine );
}

.sah-map {
	/* 2/3 of the original 16/11 height at the same width (24/11 = (16/11) / (2/3)). */
	aspect-ratio: 24 / 11;
	border: 1px solid var( --wp--custom--line--on-dark );
	overflow: hidden;
}

.sah-map iframe {
	display: block;
	width: 100%;
	height: 100%;
}

/* Find Us page: opening hours table. Built from plain Group/Paragraph
   blocks (not core/table) so the client can edit each cell like any other
   page text, with the grid/column styling done here. */
.sah-hours-table__row {
	display: grid;
	grid-template-columns: 110px 1fr 1fr;
	gap: 8px 16px;
	align-items: baseline;
	padding: 10px 0;
	border-bottom: 1px solid var( --wp--custom--line--on-light );
	/* Each row is its own Group block, so it inherits core's default
	   block-to-block spacing (margin-top) on top of the padding above —
	   doubling the visible gap. Zero it out; the padding alone is the gap. */
	margin-top: 0;
}

.sah-hours-table__row--head {
	border-bottom: 2px solid var( --wp--preset--color--ink );
	padding-bottom: 10px;
}

.sah-hours-table__row--head p {
	margin: 0;
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--custom--ink--on-light-label );
}

.sah-hours-table__day {
	margin: 0;
	font-weight: 600;
}

.sah-hours-table__drinks,
.sah-hours-table__food {
	margin: 0;
	font-size: 15px;
	color: var( --wp--custom--ink--on-light-muted );
}

/* Below tablet, three columns of full time ranges get cramped — stack each
   day into its own block instead, with small inline labels replacing the
   (now hidden) header row. */
@media ( max-width: 599px ) {
	.sah-hours-table__row {
		display: block;
		padding: 12px 0;
	}

	.sah-hours-table__row--head {
		display: none;
	}

	.sah-hours-table__day {
		font-family: var( --wp--preset--font-family--cinzel );
		font-size: 16px;
		margin-bottom: 6px;
	}

	.sah-hours-table__drinks,
	.sah-hours-table__food {
		margin-top: 3px;
	}

	.sah-hours-table__drinks::before,
	.sah-hours-table__food::before {
		font-family: var( --wp--preset--font-family--mono );
		font-size: 10px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var( --wp--custom--ink--on-light-label );
	}

	.sah-hours-table__drinks::before {
		content: 'Drinks — ';
	}

	.sah-hours-table__food::before {
		content: 'Food — ';
	}
}

/* Find Us page: Google review testimonials */
.sah-review__quote {
	font-family: var( --wp--preset--font-family--cinzel );
	font-size: 17px;
	line-height: 1.5;
	color: var( --wp--custom--ink--on-light-card );
	margin: 0;
}

.sah-review__author {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--custom--ink--on-light-label );
	margin: 14px 0 0;
}

/* Story pages: reading column + pull-quotes */

.sah-reading-column {
	max-width: var( --wp--custom--measure--read );
	margin-left: auto;
	margin-right: auto;
}

.sah-reading-column > .wp-block-image {
	margin-bottom: 34px;
}

.sah-reading-column > .wp-block-image img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	display: block;
}

.sah-reading-column h2 {
	margin-top: 44px;
	margin-bottom: 16px;
}

.sah-pullquote-centered blockquote {
	text-align: center;
	margin: 40px auto !important;
}

.sah-pullquote-text {
	font-family: var( --wp--preset--font-family--cinzel );
	font-size: 21px;
	line-height: 1.5;
	color: var( --wp--preset--color--claret );
	margin-top: 26px !important;
}

.sah-image-pair {
	display: flex;
	gap: 12px;
	margin: 24px 0 0;
}

.sah-image-pair img {
	flex: 1 1 0;
	width: 0;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.sah-more-of-story {
	border-top: 1px solid var( --wp--custom--line--on-light-strong );
	padding-top: var( --wp--preset--spacing--90 ) !important;
	padding-bottom: var( --wp--preset--spacing--90 ) !important;
}

/* Menus page */

/* Converted from a raw wp:html <img> strip to a native wp:columns +
   wp:image layout (see post content) so the client can replace/edit these
   photos from the Media Library. Core's Columns block already gives 4
   equal columns by default; this just restores the original spacing and
   square crop, and collapses to a 2x2 grid on tablet and mobile instead of
   the four narrow columns core would otherwise keep down to 600px. */
.sah-food-strip {
	margin-top: 36px !important;
}

.sah-food-strip .wp-block-image img {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
	display: block;
}

@media ( max-width: 1024px ) {
	.sah-food-strip {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 10px !important;
	}

	.sah-food-strip .wp-block-column {
		flex-basis: auto !important;
		width: auto !important;
	}
}

/* On mobile the surrounding .sah-section padding (56px, from the shared
   large-section spacing token) plus this strip's own 36px top margin left
   a much bigger gap above/below the photos than around any other section —
   noticeably empty space with nothing in it. Tighten both on phones only;
   tablet/desktop keep the original spacing. */
@media ( max-width: 599px ) {
	.sah-section:has( > .sah-food-strip ) {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.sah-food-strip {
		margin-top: 0 !important;
	}
}

.sah-dietary-key {
	font-size: 13.5px;
	line-height: 1.6;
	color: var( --wp--custom--ink--on-dark-label );
	/* Match the 900px column the à la carte sections below it use, instead
	   of its own narrower 44em cap — they read as unrelated widths otherwise. */
	max-width: 900px;
}

/* No divider line between the stacked à la carte sub-sections (Mains,
   Nibbles & Sides, Sandwiches, Puddings & Cheese) — a border read as too
   busy against the list's own row dividers. Separation comes from generous
   top/bottom padding alone (see the block's own spacing, set per-instance in
   the page content) rather than any rule here. */

.sah-quicklinks-band {
	border-bottom: 1px solid var( --wp--custom--line--on-dark );
}

.sah-quicklinks a {
	font-family: var( --wp--preset--font-family--cinzel );
	font-size: 15px;
	color: var( --wp--preset--color--cream );
	padding: 18px 0;
	display: inline-block;
}

.sah-quicklinks a:hover {
	color: var( --wp--preset--color--gold );
}

.sah-quicklinks__note {
	margin-left: auto;
	padding: 18px 0;
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11.5px;
	color: var( --wp--preset--color--gold );
}

/* At the default 20px gap and 15px link size, the three menu names (131 +
   107 + 111px) don't fit next to each other in a phone's ~350px content
   width, so "Wine & Drinks" wrapped onto its own row above the note,
   leaving two short, unevenly-spaced rows. Trim the gap and link size just
   enough that all three sit on one row, then force the note onto its own
   row below (instead of wherever it happens to land) via flex-basis. */
@media ( max-width: 599px ) {
	.sah-quicklinks {
		gap: 10px;
	}

	.sah-quicklinks a {
		font-size: 13.5px;
		padding: 14px 0;
	}

	.sah-quicklinks__note {
		flex-basis: 100%;
		margin-left: 0;
		padding-top: 6px;
	}
}

.sah-wine-image {
	margin-bottom: 30px !important;
}

.sah-wine-image img {
	width: 100%;
	max-width: 480px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.sah-wine-list {
	display: flex;
	flex-wrap: wrap;
	gap: clamp( 28px, 4vw, 56px );
}

.sah-wine-list__column {
	flex: 1 1 220px;
}

.sah-wine-list__title {
	font-family: var( --wp--preset--font-family--cinzel );
	font-size: 18px;
	border-bottom: 1px solid var( --wp--preset--color--ink );
	padding-bottom: 8px;
	margin-bottom: 12px;
}

.sah-wine-list__row {
	display: flex;
	justify-content: space-between;
	font-size: 14.5px;
	padding: 7px 0;
	border-bottom: 1px solid var( --wp--custom--line--on-light );
	margin: 0 !important;
}

.sah-wine-list__row span:last-child {
	color: var( --wp--preset--color--claret );
}

.sah-offer-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sah-offer-card {
	flex: 1 1 280px;
	padding: clamp( 28px, 3.5vw, 44px );
}

.sah-offer-card__label {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.sah-offer-card__title {
	font-family: var( --wp--preset--font-family--cinzel );
	font-size: clamp( 24px, 2.9vw, 34px );
	line-height: 1.02;
	margin-top: 14px;
}

.sah-offer-card__body {
	font-size: 15px;
	line-height: 1.6;
	margin-top: 16px;
}

/* 404 */

.sah-404-body {
	padding-top: 24px !important;
	padding-bottom: 60px !important;
}

.sah-404-links {
	border-top: 1px solid var( --wp--custom--line--on-dark-strong );
	margin-top: 42px !important;
	padding-top: 26px !important;
	gap: 8px 22px !important;
}

.sah-404-links a {
	font-family: var( --wp--preset--font-family--mono );
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--custom--ink--on-dark-muted );
}

.sah-404-links a:hover {
	color: var( --wp--preset--color--gold );
}

.sah-404-phone {
	margin-top: 30px !important;
	font-size: 14px;
	color: var( --wp--custom--ink--on-dark-muted );
}

.sah-404-phone a {
	color: var( --wp--preset--color--gold );
}

.sah-404-phone a:hover {
	color: var( --wp--preset--color--cream );
}

.sah-loyalty-centered .sah-loyalty-grid__item {
	text-align: center;
}

.sah-centered {
	text-align: center;
}

.sah-centered .wp-block-heading,
.sah-centered p {
	margin-left: auto;
	margin-right: auto;
}

/* Generic card / link hover states used across patterns and custom blocks */

.sh-card {
	border: 1px solid var(--wp--custom--line--on-light-strong);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.sh-card:hover,
.sh-card:focus-within {
	border-color: var(--wp--preset--color--claret);
	/* Without this, the card (an <a>) inherits the global link-hover colour
	   (cream) from theme.json, which is invisible against its own cream
	   background — the title appears to vanish. The design's own hover
	   state turns the whole card claret, so make that explicit here. */
	color: var(--wp--preset--color--claret) !important;
}

.sh-card .sh-card__link {
	color: var(--wp--preset--color--claret);
	transition: color 0.2s ease;
}

.sh-card:hover .sh-card__link {
	color: var(--wp--preset--color--claret);
	text-decoration: underline;
}

/* Plain in-copy text links (e.g. "Read the full history →" links added as
   ordinary <a> tags inside a paragraph, with no component class) have the
   same problem as the story cards above: the global link colours are tuned
   for the site's default dark (forest) background, so a plain link inside a
   light (cream/parchment) content section renders gold-on-cream (low
   contrast) and hovers to cream-on-cream (invisible). Give unclassed links
   inside light sections the claret/label-gold pair already used for other
   light-background elements (menu-section "more" links, story cards) instead
   of falling through to the sitewide dark-background defaults. Scoped to
   a:not([class]) so it never touches components that already set their own
   link colour. */
.has-cream-background-color a:where(:not([class])),
.has-parchment-background-color a:where(:not([class])) {
	color: var(--wp--preset--color--claret);
}

.has-cream-background-color a:where(:not([class])):hover,
.has-parchment-background-color a:where(:not([class])):hover {
	color: var(--wp--custom--ink--on-light-label);
}

/* The menu-section block's "more" link sets its own claret/gold colour per
   variant (see src/menu-section/style.scss) but never defined a :hover —
   so it fell through to the same global cream hover and, on the light
   variant (claret-on-cream), went invisible on hover. Hover values below
   match the HTML design's style-hover for this exact link ("The full carte
   →" / "The Sunday menu →" on the homepage menu teaser). */
.sah-menu-section__more:hover {
	color: var(--wp--custom--ink--on-light-label);
	border-bottom-color: var(--wp--custom--ink--on-light-label);
}

.sah-menu-section--dark .sah-menu-section__more:hover {
	color: var(--wp--preset--color--cream);
	border-bottom-color: var(--wp--preset--color--cream);
}