/* ============================================
   CALL ME — global styles for hand-authored
   template parts (things theme.json/block
   supports can't express: fixed nav, hero
   layout, custom button variants).
   ============================================ */

:root {
	/* Inset that keeps content at the 1280px container width on wide
	   viewports while never dropping below a 24px gutter on narrow ones. */
	--grid-inset: max(24px, calc((100% - 1280px) / 2));
}

/* Smooth-scroll for in-page anchor links (nav → sections). scroll-margin-top
   offsets the fixed header so anchored sections aren't hidden behind it. */
html {
	scroll-behavior: smooth;
}
[id="about"],
[id="cocktails"],
[id="gallery"],
[id="events"],
[id="menu"],
[id="reserve"] {
	scroll-margin-top: 90px;
}
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--dark);
	padding: 12px 20px;
}
.skip-link:focus {
	left: 0;
}

/* ---------- Nav ---------- */
.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding: 20px clamp(20px, 4vw, 50px) 21px;
	background: rgba(15, 11, 9, 0.6);
	border-bottom: 1px solid rgba(244, 237, 225, 0.08);
	transition: background 0.3s ease;
}
/* backdrop-filter lives on a pseudo-element rather than .site-nav itself:
   filter/backdrop-filter on an element makes it a containing block for its
   fixed-position descendants, which broke the full-screen mobile nav overlay
   (it got clipped to the nav bar's own height instead of the viewport). */
.site-nav::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	backdrop-filter: blur(7px);
	pointer-events: none;
}
.site-nav.is-scrolled {
	background: rgba(15, 11, 9, 0.92);
}

.site-nav__logo img {
	width: 68px;
	height: auto;
}

@media (max-width: 600px) {
	.site-nav__logo img {
		width: 45px;
	}
	.nav-reserve .wp-block-button__link {
		padding: 13px 27px;
		font-size: 9px;
		letter-spacing: 1.3px;
	}
	/* Swap the hamburger and Reserve button: CTA sits next to the logo,
	   the menu toggle moves to the outer edge. */
	.site-nav__logo {
		order: 1;
	}
	.nav-reserve {
		order: 2;
	}
	.site-nav .wp-block-navigation {
		order: 3;
	}
}

.site-nav .wp-block-navigation {
	--wp--style--root--padding-top: 0;
}
.site-nav .wp-block-navigation a.wp-block-navigation-item__content {
	font-size: 13px;
	letter-spacing: 1.04px;
	text-transform: uppercase;
	color: var(--wp--preset--color--cream-2);
}
.site-nav .wp-block-navigation a.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--gold);
}

/* ---------- Mobile nav overlay ---------- */
.site-nav .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--cream-2);
}
.site-nav .wp-block-navigation__responsive-container-open:hover {
	color: var(--wp--preset--color--gold);
}
.wp-block-navigation__responsive-container.is-menu-open {
	top: var(--site-nav-h, 90px);
	bottom: auto;
	height: auto;
	max-height: calc(100vh - var(--site-nav-h, 90px));
	background: rgba(15, 11, 9, 0.97) !important;
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(201, 161, 95, 0.25);
	box-shadow: 0 24px 40px -12px rgba(0, 0, 0, 0.55);
	overflow-y: auto;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 14px;
	right: clamp(20px, 4vw, 50px);
	color: var(--wp--preset--color--cream-2);
	background: transparent;
	padding: 8px;
	transition: color 0.25s ease, transform 0.35s ease;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 18px;
	height: 18px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--gold);
	transform: rotate(90deg);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: block;
	padding: 6px 24px;
}
/* Core navigation-block CSS sets its own padding-top (calc(24px + 2rem)) at
   equal-or-higher specificity; match it (plus one ancestor class) so ours wins. */
.site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 6px;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: stretch;
	width: 100%;
	gap: 0;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	border-bottom: 1px solid rgba(244, 237, 225, 0.1);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content {
	display: block;
	padding: 8px 4px;
	text-align: center;
	font-family: var(--wp--preset--font-family--font-serif);
	font-size: clamp(14px, 4vw, 16px);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--cream-2);
	transition: color 0.25s ease;
}
.site-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:hover,
.site-nav .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--gold);
	outline: none;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
	padding: 19px 41px;
	font-size: 13px;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	border-radius: 1px;
	transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	white-space: nowrap;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

.btn-gold .wp-block-button__link {
	background: var(--wp--preset--color--gold);
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--cream-2);
}
.btn-gold .wp-block-button__link:hover {
	background: #b58e4f;
	border-color: #b58e4f;
}

.btn-ghost-light .wp-block-button__link {
	background: rgba(255, 255, 255, 0.05);
	backdrop-filter: blur(10px);
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--cream-2);
}
.btn-ghost-light .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
}

.btn-ghost-gold .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--gold);
	color: var(--wp--preset--color--cream);
	background: transparent;
}
.btn-ghost-gold .wp-block-button__link:hover {
	background: rgba(201, 161, 95, 0.12);
}

.btn-dark .wp-block-button__link {
	background: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--cream);
}
.btn-dark .wp-block-button__link:hover {
	background: #241d18;
}

.nav-reserve .wp-block-button__link {
	padding: 19px 41px;
}

/* ---------- Hero ---------- */
/* The Cover block's dimRatio:0 sets the gradient overlay span to opacity:0
   (invisible). Force it visible — the scrim's alpha lives in the gradient
   stops themselves (see hero-scrim preset), matching the original .header__scrim. */
.site-hero .wp-block-cover__background {
	opacity: 1 !important;
}
/* The Cover is a row flex; its "bottom left" content position shrink-wraps the
   inner container to content width (~668px) at the left. Make the inner
   container grow to full width (main axis) and keep content at the bottom
   (cross axis = vertical → align-items:flex-end). Then hero text insets to grid. */
.site-hero {
	align-items: flex-end !important;
	/* Remove the Cover block's default horizontal padding (1em = 18px) so the
	   inner container is truly full width and the hero text's grid-inset matches
	   the other sections' left edge exactly (they use the same 1280px grid). */
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* The Cover block's inline min-height:100vh (set via the editor) is a static
   100vh, which on mobile Safari/Chrome is measured with the address bar
   collapsed — taller than what's actually visible, so the hero runs past the
   fold instead of filling the screen. 100dvh tracks the real visible viewport
   as the browser chrome shows/hides. Needs !important to beat the inline style. */
@media (max-width: 600px) {
	.site-hero {
		min-height: 100dvh !important;
	}
}
.site-hero .wp-block-cover__inner-container {
	flex-grow: 1;
	width: 100%;
}
.hero-content {
	position: relative;
	z-index: 1;
	/* Align hero text to the 1280px container grid (matches original .hero). */
	padding: 0 var(--grid-inset) 100px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}
.hero-content__title {
	font-family: var(--wp--preset--font-family--font-serif);
	font-weight: 500;
	font-size: clamp(38px, 6.2vw, 95px);
	line-height: 0.98;
	letter-spacing: -1px;
	color: var(--wp--preset--color--cream-2);
	max-width: 620px;
	margin: 0;
}
.hero-content__subtitle {
	font-family: var(--wp--preset--font-family--font-sans);
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.9px;
	color: var(--wp--preset--color--cream-92, #f4ede1);
}
.hero-content__cta {
	gap: 20px;
	padding-top: 20px;
}

@media (max-width: 860px) {
	.hero-content {
		padding-bottom: 80px;
	}
	.hero-content__cta {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ---------- Back to top ---------- */
.back-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--dark);
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	z-index: 90;
	border: none;
	cursor: pointer;
}
.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	* {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ---------- Shared typography utilities ---------- */
.eyebrow {
	font-family: var(--wp--preset--font-family--font-sans);
	font-size: 13px;
	letter-spacing: 4.55px;
	text-transform: uppercase;
	margin-bottom: 20px;
}
.eyebrow--gold {
	color: var(--wp--preset--color--gold);
}
.eyebrow--clay {
	color: var(--wp--preset--color--clay);
}

.h2 {
	font-family: var(--wp--preset--font-family--font-serif);
	font-weight: 500;
	font-size: clamp(34px, 4vw, 54px);
	line-height: 1.1;
	margin-bottom: 24px;
}
.h2--dark {
	color: #1a1512;
}
.h2--cream {
	color: var(--wp--preset--color--cream-2);
}
.h2--xl {
	font-size: clamp(40px, 6vw, 90px);
	line-height: 1.02;
}

.body {
	font-weight: 300;
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
	max-width: 480px;
}
.body--taupe {
	color: var(--wp--preset--color--taupe);
}
.body--cream {
	color: rgba(244, 237, 225, 0.92);
}
.body--dark {
	color: var(--wp--preset--color--dark);
}

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

.section-head {
	max-width: 1280px;
	margin-inline: auto;
	text-align: center;
	margin-bottom: 50px;
}

/* Full-width sections must abut directly. WordPress' default blockGap adds a
   24px margin-block-start between top-level blocks, which shows as a cream
   (body-background) strip between sections — reads as padding above/below the
   bleed images. Remove it between site-level parts and page sections. */
.wp-site-blocks > *,
.wp-block-post-content > * {
	margin-block-start: 0 !important;
}

/* ---------- Section wrappers ----------
   These groups are align:full (edge-to-edge background). The grid-inset
   padding keeps their inner content aligned to the 1280px container. */
.section-cream,
.section-dark,
.section-maroon {
	padding-block: 120px;
	padding-inline: var(--grid-inset);
}
.section-cream {
	background: var(--wp--preset--color--cream);
}
.section-dark {
	background: var(--wp--preset--color--dark);
}
.section-maroon {
	background: var(--wp--preset--color--maroon);
}

/* ---------- Cocktails layout ---------- */
.cocktails-layout {
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	align-items: stretch;
}
.cocktails-layout__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 630 / 671;
}
.cocktails-layout__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: repeat(3, 1fr);
	gap: 10px;
}
/* These are grid containers, but WordPress' flow blockGap still adds a
   margin-block-start to the 2nd+ children (pushing the cards grid 24px down
   and misaligning it with the photo). Spacing here comes from grid `gap`. */
.cocktails-layout > *,
.cocktails-layout__grid > * {
	margin-block-start: 0 !important;
}
/* The portrait photo + 6-card grid only line up top-and-bottom at the full
   1280px container. Below that the cards wrap to more lines and the grid grows
   taller than the photo's natural height — stretching the photo to match would
   crop the glass heavily. So stack (full-width photo on top, cards below) for
   anything narrower than the full container instead of only below 1024px. */
@media (max-width: 1279px) {
	.cocktails-layout {
		grid-template-columns: 1fr;
	}
	.cocktails-layout__photo img {
		aspect-ratio: 16 / 9;
	}
}
@media (max-width: 860px) {
	.cocktails-layout__grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
	}
}

/* ---------- Menu section ---------- */
.menu-layout {
	max-width: 1280px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 70px;
	flex-wrap: wrap;
}
.menu-layout__photo {
	flex: 0 0 auto;
	width: 223px;
	aspect-ratio: 223 / 330;
}
.menu-layout__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	border-radius: 2px;
}
.menu-layout__text {
	flex: 1 1 420px;
	max-width: 516px;
}
/* Desktop: the book photo matches the text column height exactly — top aligns
   with the eyebrow, bottom aligns with the button. Stretch it to the text
   height (removing WordPress' blockGap margin so both columns share a top),
   with a width that keeps the container aspect close to the book's (minimal
   object-fit crop). */
@media (min-width: 861px) {
	.menu-layout {
		align-items: stretch;
	}
	.menu-layout > * {
		margin-block-start: 0 !important;
	}
	.menu-layout__photo {
		width: 280px;
		aspect-ratio: auto;
	}
	/* The bigger book (280px) is naturally taller than the text content, so it
	   drives the row height. Make the text a flex column and push the button to
	   the bottom so it lines up with the book's bottom edge (eyebrow already
	   lines up with the book's top). */
	.menu-layout__text {
		display: flex;
		flex-direction: column;
	}
	.menu-layout__text .wp-block-buttons {
		margin-top: auto;
	}
}
@media (max-width: 860px) {
	.menu-layout {
		flex-direction: column;
		text-align: center;
	}
	.menu-layout__text {
		text-align: left;
		/* .menu-layout__text's flex-basis (420px) sizes width in the desktop
		   row layout, but .menu-layout switches to flex-direction:column here,
		   turning that same basis into a minimum height and padding the
		   section with empty space below the button. Let height be content-sized. */
		flex: 1 1 auto;
	}
}

/* ---------- Media bleed (About / Events) ---------- */
/* In the desktop bleed layout the image is pinned to the right 50% of the
   section. The content column is a fixed 535px, so between 1025px and the point
   where the viewport half exceeds it, the text slides under the image. Cap the
   content to keep a gutter from the image's edge. Extra class (.media-bleed)
   raises specificity above the block's own 535px rule. */
@media (min-width: 1025px) {
	.wp-block-callme-media-bleed.media-bleed .media-bleed__content {
		max-width: min(535px, calc(50vw - 96px));
	}
}
/* Stacked layout (image on top): the content column keeps a 535px cap on
   desktop for line length, but below the bleed breakpoint that leaves the whole
   right half empty. Let text, event list, and buttons use the full width. */
@media (max-width: 1024px) {
	.wp-block-callme-media-bleed.media-bleed .media-bleed__content {
		max-width: 100%;
	}
}

/* ---------- Events list wrapper ---------- */
.events-list {
	margin-top: 16px;
}

/* ---------- Reserve section ---------- */
.reserve-layout {
	max-width: 1280px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 48px;
}
.reserve-layout__text {
	grid-column: 1 / span 4;
}
.reserve-layout__form {
	grid-column: 7 / span 6;
}
.reserve-info {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	list-style: none;
	padding: 0;
}
.reserve-info li {
	position: relative;
	padding-left: 20px;
	font-size: 18px;
	font-weight: 300;
	color: rgba(244, 237, 225, 0.92);
	line-height: 1.6;
}
.reserve-info li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.65em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: rgba(244, 237, 225, 0.92);
}
@media (max-width: 1024px) {
	.reserve-layout {
		grid-template-columns: 1fr;
	}
	.reserve-layout__text,
	.reserve-layout__form {
		grid-column: auto;
	}
	/* Stretch the form to the full column width instead of the 616px desktop cap. */
	.reserve-layout__form .wpforms-container {
		max-width: 100% !important;
	}
}
/* Tablet: the 12-column grid's empty 5–6 spacer columns leave a huge dead gap
   and squeeze the text column. Collapse to a compact 2-column layout (small
   gap, wider text) until the full 1280px container restores the designed grid. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.reserve-layout {
		grid-template-columns: 1fr 1.3fr;
		gap: 44px;
	}
	.reserve-layout__text {
		grid-column: 1;
	}
	.reserve-layout__form {
		grid-column: 2;
	}
}

/* WPForms styling to match the flush gold-underline design */
.reserve-layout__form .wpforms-container {
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	padding: 50px !important;
	max-width: 616px;
	margin: 0 !important;
}
.reserve-layout__form .wpforms-field {
	padding: 0 0 20px !important;
}
/* Lay Guests / Date / Time on one row (design shows 3 columns).
   The field container is made a flex-wrap row; normal fields keep full width,
   fields 3/4/5 take a third each and sit together. Form ID 76. */
.reserve-layout__form .wpforms-field-container {
	display: flex;
	flex-wrap: wrap;
	column-gap: 14px;
}
.reserve-layout__form .wpforms-field {
	width: 100%;
}
.reserve-layout__form #wpforms-76-field_3-container,
.reserve-layout__form #wpforms-76-field_4-container,
.reserve-layout__form #wpforms-76-field_5-container {
	width: calc((100% - 28px) / 3);
}
@media (max-width: 560px) {
	.reserve-layout__form #wpforms-76-field_3-container,
	.reserve-layout__form #wpforms-76-field_4-container,
	.reserve-layout__form #wpforms-76-field_5-container {
		width: 100%;
	}
}
.reserve-layout__form .wpforms-field-label {
	font-size: 12px !important;
	letter-spacing: 1.65px;
	text-transform: uppercase;
	color: #fff !important;
	/* Match the original .field { gap: 8px } label-to-input spacing. */
	margin-bottom: 8px !important;
}
.reserve-layout__form input:not([type="checkbox"]):not([type="radio"]),
.reserve-layout__form select,
.reserve-layout__form textarea {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--wp--preset--color--gold) !important;
	color: #fff !important;
	font-size: 15px !important;
	padding: 13px 13px 13px 0 !important;
	border-radius: 0 !important;
	/* WPForms "medium" field size caps inputs at max-width:60% — force full
	   width so Name/Phone/Message span the whole field. */
	width: 100% !important;
	max-width: 100% !important;
}
.reserve-layout__form textarea {
	border-bottom: 1px solid var(--wp--preset--color--gold) !important;
}
/* WPForms forces a fixed 43px height on inputs/selects; with 26px padding that
   leaves too little for the line-height and clips descenders (e.g. "2 Guests").
   Let them grow to fit content + padding instead. */
.reserve-layout__form input:not([type="checkbox"]):not([type="radio"]),
.reserve-layout__form select {
	height: auto !important;
	min-height: 0 !important;
}
/* WPForms modern mode colours placeholders with --wpforms-field-text-color
   (dark); force the design's light placeholder. */
.reserve-layout__form input::placeholder,
.reserve-layout__form textarea::placeholder {
	color: rgba(255, 255, 255, 0.35) !important;
	opacity: 1 !important;
}
/* Native date/time pickers (Date/Time fields upgraded in JS) on the dark form:
   light text and an inverted (visible) picker icon. */
.reserve-layout__form input[type="date"]::-webkit-datetime-edit,
.reserve-layout__form input[type="time"]::-webkit-datetime-edit {
	color: #fff;
}
.reserve-layout__form input[type="date"]::-webkit-calendar-picker-indicator,
.reserve-layout__form input[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(0.85);
	opacity: 0.7;
	cursor: pointer;
}
.reserve-layout__form .wpforms-field-checkbox label {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 14px;
}
.reserve-layout__form button[type="submit"] {
	background: var(--wp--preset--color--gold) !important;
	border: 1px solid var(--wp--preset--color--gold) !important;
	color: var(--wp--preset--color--cream) !important;
	padding: 19px 41px !important;
	font-size: 13px !important;
	letter-spacing: 1.95px;
	text-transform: uppercase;
	border-radius: 1px !important;
	/* Centre the label (flex avoids the baseline offset; the small text-indent
	   compensates for the trailing letter-spacing so it reads optically centred). */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-indent: 1.95px;
}
.reserve-layout__form button[type="submit"]:hover {
	background: #b58e4f !important;
	border-color: #b58e4f !important;
}
.reserve-layout__form .wpforms-form-title,
.reserve-layout__form .wpforms-title {
	display: none;
}

/* ---------- Footer ---------- */
.footer-wrap {
	background: var(--wp--preset--color--dark);
	padding: 120px clamp(24px, 4vw, 50px) 0;
}
.footer-top {
	max-width: 1280px;
	margin: 0 auto;
	gap: 32px;
	padding-bottom: 50px;
}
.footer-cols {
	gap: 35px;
	/* WordPress' flex layout defaults to align-items:center, which staggers the
	   column headings by content height. Top-align so all three headings line up. */
	align-items: flex-start;
}
.footer-col h3 {
	font-size: 18px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: var(--wp--preset--color--gold);
	margin-bottom: 19px;
	font-weight: 400;
}
.footer-col p,
.footer-col a {
	font-size: 16px;
	line-height: 1.66;
	color: rgba(244, 237, 225, 0.75);
	font-weight: 300;
	margin: 0;
}
.footer-col a {
	display: inline-block;
	transition: color 0.2s ease;
}
.footer-col p + p a {
	margin-top: 8px;
}
.footer-col a:hover {
	color: var(--wp--preset--color--gold);
}

.footer-logo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin: 0;
}
.footer-logo a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.footer-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 360px;
	max-width: 100%;
}
/* Remove WordPress' blockGap margin (24px) between the WhatsApp button and the
   social row so only the flex gap (10px) applies — tight, even spacing. */
.footer-actions > * {
	margin-block-start: 0 !important;
}
.footer-actions .wp-block-buttons {
	width: 100%;
}
.footer-actions .wp-block-button {
	flex: 1;
	width: 100%;
}
.footer-actions .wp-block-button__link {
	width: 100%;
	text-align: center;
}
.footer-social {
	display: flex;
	gap: 10px;
}

.footer-bottom {
	max-width: 1280px;
	margin: 0 auto;
	gap: 20px;
	padding: 40px 0;
	border-top: 1px solid rgba(201, 161, 95, 0.5);
}
.footer-privacy a {
	font-size: 14px;
	color: rgba(244, 237, 225, 0.4);
	transition: color 0.2s ease;
	margin: 0;
}
.footer-privacy a:hover {
	color: var(--wp--preset--color--gold);
}
.footer-copyright {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
	color: rgba(244, 237, 225, 0.4);
	white-space: nowrap;
	margin: 0;
}
.footer-coma {
	height: 14px;
	width: auto;
	opacity: 0.7;
	display: inline-block;
}
.footer-tripadvisor img {
	height: 34px;
	width: auto;
}

.header-logo-sub {
    font-size: 16px;
    line-height: 17px;
}

@media (max-width: 1024px) {
	.footer-top {
		justify-content: center;
		text-align: center;
	}
	.footer-cols {
		justify-content: center;
	}
	.footer-actions {
		margin: 0 auto;
	}
}

@media (max-width: 768px) {

.header-logo-sub {
    font-size: 12px;
    line-height: 14px;
}

.nav-reserve .wp-block-button__link {
    padding: 12px 16px !important;
}

    .site-nav__logo img {
        width: 38px !important;
    }
    
    .site-header-wrp {
    	    gap: 12px !important;
    }

}

@media (max-width: 560px) {
	.footer-actions {
		width: 100%;
	}
	.footer-bottom {
		flex-direction: column;
		text-align: center;
	}
	.footer-copyright {
		white-space: normal;
		flex-wrap: wrap;
		justify-content: center;
	}
}
/* Section hidden via editor toggle — remove class in wp-admin to bring back */
.is-hidden-section {
	display: none !important;
}

/* Halve the gap only between the gallery section and the menu section
   (their adjacent padding-block edges), leaving all other section spacing untouched. */
#gallery.section-cream {
	padding-block-end: 60px;
}
#menu.section-cream {
	padding-block-start: 60px;
}