/* ==========================================================================
   Shack the Halls — accessibility runtime helpers (WCAG 2.2 AA)
   Things theme.json can't express: skip link, focus visibility,
   reduced-motion, minimum target sizes, new-tab cues, video controls.
   ========================================================================== */

/* --- Full-bleed bands meet flush (no inter-section gap) ------------------ */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}
/* Post-content uses constrained layout with --wp--style--block-gap (1.5rem),
   which paints cream slivers between full-bleed bands. Kill the gap on the
   page-content container — sections set their own internal padding. */
.wp-block-post-content {
	--wp--style--block-gap: 0px;
	gap: 0;
}
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* --- Footer columns: WP's style engine strips clamp() padding from block
   JSON, so the gutters live here instead. ------------------------------- */
.sth-footer .wp-block-column {
	padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
}

/* --- Skip link (2.4.1 Bypass Blocks) ------------------------------------ */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--navy, #142645);
	color: var(--wp--preset--color--white, #fff);
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 700;
	text-decoration: underline;
	border-radius: 0 0 6px 0;
}
.skip-link:focus {
	left: 0;
}

/* --- Visible focus (2.4.7) + not obscured (2.4.11/2.4.12, new in 2.2) ---- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #142645);
	outline-offset: 2px;
	border-radius: 2px;
}
/* Keep a sticky header from covering the focused element. */
html {
	scroll-padding-top: 6rem;
}

/* --- Minimum target size (2.5.8, new in 2.2): 24x24 floor, 44 preferred -- */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-social-link a,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* --- Links that open a new tab get a visible + textual cue --------------- */
a[target="_blank"]::after {
	content: " \2197"; /* ↗ */
	font-size: 0.85em;
	line-height: 1;
}
a[target="_blank"] .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

/* --- Transparent header on ALL pages (WCAG 2.2 AA compliant) ------------
   Gradient overlay buys ≥60% darkening at the top, so even the brightest
   possible image/video pixel leaves white/cream text at ≥4.72:1 against
   the effective background. Belt-and-suspenders text-shadow on every
   header text element handles edge cases. */
.wp-site-blocks {
	position: relative;
}
.wp-site-blocks > .wp-block-template-part:first-of-type {
	position: absolute;
	top: 0; left: 0; right: 0;
	z-index: 50;
}
.sth-header {
	background: linear-gradient(180deg, rgba(0,0,0,0.60) 0%, rgba(0,0,0,0) 100%) !important;
	background-color: transparent !important;
}
/* Nav links + site title turn cream-white with a dark text-shadow */
.sth-header .wp-block-site-title a,
.sth-header .wp-block-navigation a:not(.wp-element-button),
.sth-header .wp-block-navigation .wp-block-navigation-item__content {
	color: #F2E8D5;
	text-shadow: 0 1px 3px rgba(0,0,0,0.65);
}
.sth-header .wp-block-navigation a:hover:not(.wp-element-button),
.sth-header .wp-block-navigation a:focus-visible:not(.wp-element-button) {
	color: var(--wp--preset--color--gold, #C8A24B);
}
/* Reservations pill button stays solid — its own bg covers contrast. */
.sth-header .wp-block-button__link {
	box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}

/* --- Mobile overlay menu (hamburger) ------------------------------------
   WP's open overlay defaults to a white background, but the header nav links
   are cream/gold (styled for the transparent dark header) — so they were
   nearly invisible and crammed right. Give the overlay a solid brand panel
   with large, centred, legible links and a visible close control. */
.wp-block-navigation__responsive-container.is-menu-open {
	background-color: var( --wp--preset--color--deep-red, #942143 ) !important;
	padding: clamp( 6rem, 20vw, 9rem ) 1.5rem 2.5rem !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100% !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	flex-direction: column;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.25rem;
	width: 100% !important;
}
.sth-header .wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	color: #F2E8D5 !important;
	text-shadow: none !important;
	font-size: 1.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-align: center;
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
}
.sth-header .wp-block-navigation__responsive-container.is-menu-open a:hover,
.sth-header .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
	color: var( --wp--preset--color--gold, #C8A24B ) !important;
}
/* Reservations CTA inside the overlay (hidden in the bar, where the pill shows). */
.sth-header .wp-block-navigation-item.sth-nav-reservations { display: none !important; }
.wp-block-navigation__responsive-container.is-menu-open .sth-nav-reservations {
	display: block !important;
	margin-top: 1.25rem;
}
.wp-block-navigation__responsive-container.is-menu-open .sth-nav-reservations a {
	background-color: var( --wp--preset--color--cream, #F2E8D5 ) !important;
	color: var( --wp--preset--color--deep-red, #942143 ) !important;
	border-radius: 999px;
	padding: 0.85rem 2rem !important;
	width: auto;
}
/* Visible close (X) control on the brand panel. */
.wp-block-navigation__responsive-container-close {
	color: #F2E8D5 !important;
	top: 1.25rem;
	right: 1.25rem;
	width: 44px;
	height: 44px;
}
.wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
	fill: currentColor;
}

/* Push the first content section below the absolute header on interior
   pages whose hero is a group/image (Home's hero is a Cover w/ 92vh and
   bottom-positioned content so it doesn't need this push).
   Also fills the viewport so the hero feels equally weighted to the
   home video hero. */
.wp-block-post-content > .alignfull:first-child:not(.wp-block-cover):not(.wp-block-image) {
	padding-top: max(10rem, clamp(9rem, 11vw, 12rem)) !important;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: stretch;
}
/* Inner columns expand to fill the hero height */
.wp-block-post-content > .alignfull:first-child > .wp-block-columns {
	flex: 1;
}
.wp-block-post-content > figure.alignfull:first-child {
	margin-top: 0;
}

/* The form group is a flex-child of the hero — without an explicit width
   it shrinks to content (~318px). Force it to fill its max-width. */
.sth-form-on-red {
	width: 100%;
}

/* --- Gravity Form on a red hero (Event Space, Contact-over-red) --------
   Body copy already introduces the form, so the form's description and
   title are hidden to avoid duplication. */
.sth-form-on-red .sth-gform_wrapper .gform_heading,
.sth-form-on-red .sth-gform_wrapper .gform_title,
.sth-form-on-red .sth-gform_wrapper .gform_description {
	display: none;
}

.sth-form-on-red .sth-gform_wrapper .gfield_label {
	color: #F2E8D5 !important;          /* cream labels — 6.76:1 on deep red */
	text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.sth-form-on-red .sth-gform_wrapper .gfield_required {
	color: #ffffff !important;
}
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="text"],
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="email"],
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="tel"],
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="number"],
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="date"],
.sth-form-on-red .sth-gform_wrapper .ginput_container input[type="time"],
.sth-form-on-red .sth-gform_wrapper .ginput_container select,
.sth-form-on-red .sth-gform_wrapper .ginput_container textarea {
	background-color: #F2E8D5;            /* cream input fields */
	color: #141414 !important;            /* ink text */
	border-color: rgba(0,0,0,0.18);
}
.sth-form-on-red .sth-gform_wrapper :is(input, select, textarea):focus-visible {
	outline-color: #F2E8D5 !important;
	box-shadow: 0 0 0 2px var(--wp--preset--color--gold, #C8A24B);
}
.sth-form-on-red .sth-gform_wrapper .gfield_description,
.sth-form-on-red .sth-gform_wrapper .gfield_instruction {
	color: #F2E8D5 !important;
}
.sth-form-on-red .sth-gform_wrapper .gform_button {
	/* Override to cream-on-deep-red for the red bg */
	--gf-local-bg-color: #F2E8D5;
	--gf-local-color: #942143;
	background-color: #F2E8D5 !important;
	color: #942143 !important;
}
.sth-form-on-red .sth-gform_wrapper .gform_button:hover,
.sth-form-on-red .sth-gform_wrapper .gform_button:focus-visible {
	background-color: var(--wp--preset--color--green, #145E14) !important;
	color: #F2E8D5 !important;
}

/* --- Contact Santa illustration — fills right column, bottom-aligned ---- */
.sth-contact-santa {
	margin: 0 !important;
	align-self: end;
}
.sth-contact-santa img {
	width: 100% !important;
	height: auto !important;
	display: block;
	max-height: 80vh;
	object-fit: contain;
	object-position: bottom right;
}

/* --- Menu listing on the Menus page (2-col responsive grid) ------------- */
.sth-menu {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2.5rem, 6vw, 4rem);
	max-width: 1100px;
	margin: 0 auto;
}
@media (min-width: 782px) {
	.sth-menu { grid-template-columns: 1fr 1fr; }
}
.sth-menu__section { margin: 0; padding: 0; }
.sth-menu__section + .sth-menu__section { margin-top: 0; }
.sth-menu__heading {
	font-family: var(--wp--preset--font-family--display, sans-serif);
	font-size: clamp(1.5rem, 2.5vw, 1.9rem);
	color: var(--wp--preset--color--deep-red, #942143);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 0.35rem;
}
.sth-menu__sub {
	text-align: center;
	font-size: 0.85rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green, #145E14);
	font-weight: 700;
	margin: 0 0 1.5rem;
}
.sth-menu__items { list-style: none; padding: 0; margin: 0; }
.sth-menu__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.85rem 0;
	border-bottom: 1px dashed rgba(20,20,20,0.2);
}
.sth-menu__item:last-child { border-bottom: none; }
.sth-menu__row {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}
.sth-menu__name {
	font-weight: 700;
	color: var(--wp--preset--color--ink, #141414);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: 1.05rem;
}
.sth-menu__leader {
	flex: 1;
	min-width: 1.5rem;
	border-bottom: 2px dotted rgba(20,20,20,0.35);
	margin-bottom: 0.35rem;
}
.sth-menu__price {
	font-weight: 700;
	color: var(--wp--preset--color--deep-red, #942143);
	white-space: nowrap;
	font-size: 1.05rem;
}
.sth-menu__desc {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.45;
	color: rgba(20,20,20,0.85);
}
.sth-menu__note {
	font-style: italic;
	font-size: 0.9rem;
	color: rgba(20,20,20,0.65);
	text-align: center;
	margin-top: 2rem;
}

/* --- Text-over-image safety: subtle dark shadow on text inside Cover
   blocks guarantees AA contrast even on the brightest possible pixels of a
   photographic background (defense-in-depth against JPG/anti-alias edges). */
.wp-block-cover .wp-block-cover__inner-container :where(p, h2, h3, h4, h5, h6) {
	text-shadow: 0 1px 2px rgba(0,0,0,0.65);
}
/* On the home hero we want the lower-left copy crisp without a heavy shadow */
.sth-hero-copy :where(p, h1, h2, h3) {
	text-shadow: 0 1px 2px rgba(0,0,0,0.45);
}

/* --- 50/50 split text columns — generous, inspo-matched air -------------- */
.sth-split-copy {
	padding: clamp(5rem, 11vw, 9rem) clamp(2rem, 6vw, 6rem) !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.sth-split-copy > * {
	max-width: 38rem;   /* readable measure inside the half */
}
.sth-split-copy h2 {
	line-height: 1.1;
	margin-bottom: 0.25rem;
}
.sth-split-copy p {
	line-height: 1.65;
}

/* --- Utility/prose pages (Privacy, Accessibility…) -----------------------
   Pages with no full-bleed sections get a centered readable column and
   restored prose rhythm (the site-wide zero block-gap is for full-bleed
   band layouts, not flowing text). */
main .wp-block-post-title {
	padding: clamp(9rem, 12vw, 11rem) 1.5rem 0;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(2.25rem, 4vw, 3rem);
	color: var(--wp--preset--color--deep-red, #942143);
}
.wp-block-post-content:not(:has(> .alignfull)) {
	max-width: 720px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 1.5rem 1.5rem clamp(4rem, 8vw, 6rem);
}
.wp-block-post-content:not(:has(> .alignfull)) > * + * {
	margin-block-start: 1.1rem;
}
.wp-block-post-content:not(:has(> .alignfull)) h2 {
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--deep-red, #942143);
	margin-block-start: 3.5rem;
	padding-top: 1.5rem;
	border-top: 1px dashed rgba(148, 33, 67, 0.25);
}
.wp-block-post-content:not(:has(> .alignfull)) ul {
	padding-left: 1.25rem;
}
.wp-block-post-content:not(:has(> .alignfull)) li + li {
	margin-block-start: 0.5rem;
}

/* --- Footer legal links row ---------------------------------------------- */
.sth-footer-legal a {
	color: #F2E8D5;
	text-decoration: underline;
}
.sth-footer-legal a:hover,
.sth-footer-legal a:focus-visible {
	color: var(--wp--preset--color--gold, #C8A24B);
}

/* --- 50/50 split sections — image/video column acts as the column bg ----- */
.sth-split-bg.wp-block-cover {
	width: 100%;
	height: 100%;
	min-height: 420px;       /* mobile fallback height */
	border-radius: 0;
}
@media (min-width: 782px) {
	.sth-split-bg.wp-block-cover {
		min-height: 100%;
		height: 100%;
	}
}

/* --- Atomicdust offset hero: lower-left copy block ----------------------- */
.sth-hero-copy {
	max-width: 34rem;
	text-align: left;
}
.sth-hero-copy > * { text-align: left; }
@media (max-width: 600px) {
	.sth-hero-copy { max-width: 100%; }
}

/* --- Accessible carousel (manual, no auto-rotate → 2.2.2 satisfied) ------ */
.sth-carousel {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 12px;
	overflow: hidden;
	background: rgba(0,0,0,0.18);
}
/* Hero variant — full-bleed right, square corners, fills column height */
.sth-carousel--hero {
	border-radius: 0;
}
.sth-carousel--hero .sth-carousel__viewport {
	aspect-ratio: auto;
	height: 100%;
	min-height: clamp(380px, 50vw, 640px);
}
.sth-carousel--bleed {
	border-radius: 0;
	background: #000;
	/* Escape root padding to truly span viewport edge-to-edge */
	margin-left: calc(-1 * var(--wp--style--root--padding-left, 1.25rem));
	margin-right: calc(-1 * var(--wp--style--root--padding-right, 1.25rem));
	width: auto;
}
.sth-carousel__viewport {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 2;
}
.sth-carousel--bleed .sth-carousel__viewport {
	aspect-ratio: auto;
	height: clamp(320px, 50vw, 640px);
}
.sth-carousel__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.sth-carousel__slide.is-current {
	opacity: 1;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.sth-carousel__slide { transition: none; }
}
.sth-carousel__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sth-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;          /* sit above slides */
	width: 52px;
	height: 52px;
	border-radius: 999px;
	/* White ring + double shadow so the control is visible against ANY image —
	   non-text contrast (1.4.11). The outer halo gives separation from dark
	   image regions where rgba black bg would otherwise disappear. */
	border: 3px solid #fff;
	background: rgba(0,0,0,0.82);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow:
		0 0 0 1px rgba(0,0,0,0.5),
		0 4px 14px rgba(0,0,0,0.55);
}
.sth-carousel__btn:hover,
.sth-carousel__btn:focus-visible {
	background: #000;
	color: var(--wp--preset--color--gold, #C8A24B);
	border-color: var(--wp--preset--color--gold, #C8A24B);
}
.sth-carousel--bleed .sth-carousel__btn--prev { left: 1.25rem; }
.sth-carousel--bleed .sth-carousel__btn--next { right: 1.25rem; }
.sth-carousel__btn--prev { left: 0.75rem; }
.sth-carousel__btn--next { right: 0.75rem; }
.sth-carousel__dots {
	position: absolute;
	bottom: 0.75rem;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 0.45rem;
}
.sth-carousel__dot {
	width: 24px;
	height: 24px;
	min-width: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sth-carousel__dot::before {
	content: "";
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 999px;
	background: rgba(255,255,255,0.55);
	border: 2px solid rgba(0,0,0,0.4);
	box-sizing: content-box;
}
.sth-carousel__dot[aria-current="true"]::before {
	background: #fff;
	border-color: rgba(0,0,0,0.7);
	width: 12px;
	height: 12px;
}
.sth-carousel__live {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Play/pause toggle (2.2.2) — sits opposite the dots */
.sth-carousel__controls {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 4;
}
.sth-carousel--bleed .sth-carousel__controls {
	right: 1.25rem;
	bottom: 1.25rem;
}
.sth-carousel__toggle {
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border-radius: 999px;
	border: 2px solid #fff;
	background: rgba(0,0,0,0.78);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(0,0,0,0.45);
}
.sth-carousel__toggle:hover,
.sth-carousel__toggle:focus-visible {
	background: #000;
	color: var(--wp--preset--color--gold, #C8A24B);
	border-color: var(--wp--preset--color--gold, #C8A24B);
}

/* --- Gravity Forms branding + a11y ------------------------------------- */
.sth-gform_wrapper {
	--sth-form-radius: 6px;
	--sth-form-ink: #141414;
	--sth-form-border: #94214340;
	max-width: 100%;     /* fills parent group — parent decides the width */
	margin: 0 auto;
	color: var(--sth-form-ink);
}
.sth-gform_wrapper .gfield_label {
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	margin-bottom: 0.6rem;
	color: var(--sth-form-ink);
}
.sth-gform_wrapper .gfield_required {
	color: var(--wp--preset--color--deep-red, #942143);
	margin-left: 0.25rem;
}
.sth-gform_wrapper .ginput_container input[type="text"],
.sth-gform_wrapper .ginput_container input[type="email"],
.sth-gform_wrapper .ginput_container input[type="tel"],
.sth-gform_wrapper .ginput_container input[type="number"],
.sth-gform_wrapper .ginput_container input[type="date"],
.sth-gform_wrapper .ginput_container input[type="time"],
.sth-gform_wrapper .ginput_container select,
.sth-gform_wrapper .ginput_container textarea {
	width: 100%;
	min-height: 48px;            /* 2.5.8 target size */
	padding: 0.7rem 0.85rem;
	border: 2px solid var(--sth-form-border);
	border-radius: var(--sth-form-radius);
	background: #fff;
	color: var(--sth-form-ink);
	font-family: var(--wp--preset--font-family--body, system-ui);
	font-size: 1rem;
	box-sizing: border-box;
}
.sth-gform_wrapper :is(input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--navy, #142645);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--navy, #142645);
}
.sth-gform_wrapper .gfield_error :is(input, select, textarea) {
	border-color: var(--wp--preset--color--deep-red, #942143);
}
.sth-gform_wrapper .validation_message,
.sth-gform_wrapper .gfield_validation_message,
.sth-gform_wrapper .gform_submission_error {
	color: var(--wp--preset--color--deep-red, #942143);
	font-weight: 700;
	font-size: 0.9rem;
	margin-top: 0.35rem;
}
.sth-gform_wrapper .gform_footer {
	margin-top: 2.25rem;
	display: flex;
	justify-content: center;
}
.sth-gform_wrapper .gform_button {
	padding-left: 3rem !important;
	padding-right: 3rem !important;
}
.sth-gform_wrapper .gform_button {
	/* Override GF Orbital theme variables — works with their system rather than fighting it */
	--gf-local-bg-color: var(--wp--preset--color--green, #145E14);
	--gf-local-color: var(--wp--preset--color--cream, #F2E8D5);
	--gf-local-border-color: var(--wp--preset--color--green, #145E14);
	--gf-local-bg-color-hover: var(--wp--preset--color--navy, #142645);
	--gf-local-color-hover: #ffffff;
	--gf-local-border-color-hover: var(--wp--preset--color--navy, #142645);
	--gf-local-radius: 999px;
	min-height: 48px;
	padding: 0.85rem 1.75rem;
	background-color: var(--wp--preset--color--green, #145E14) !important;
	color: var(--wp--preset--color--cream, #F2E8D5) !important;
	border: 0;
	border-radius: 999px;
	font-family: inherit;
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.sth-gform_wrapper .gform_button:hover,
.sth-gform_wrapper .gform_button:focus-visible {
	background-color: var(--wp--preset--color--navy, #142645) !important;
	color: #ffffff !important;
}
.sth-gform_wrapper .gform_confirmation_message {
	padding: 1.25rem 1.5rem;
	background: var(--wp--preset--color--cream, #F2E8D5);
	border: 2px solid var(--wp--preset--color--deep-red, #942143);
	border-radius: var(--sth-form-radius);
	color: var(--sth-form-ink);
}
/* Two-column grid on wider viewports — small fields don't waste a full row */
@media (min-width: 720px) {
	.sth-gform_wrapper .gform_fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.75rem 2rem;
	}
	.sth-gform_wrapper .gfield--width-full,
	.sth-gform_wrapper #field_1_1,
	.sth-gform_wrapper #field_1_2 {
		grid-column: 1 / -1;
	}
}

/* Screen-reader-only utility */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	word-wrap: normal !important;
}

/* --- Background video: never autoplay-trap; respect motion preference ---- */
.sth-video-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}
.sth-hero__inner { position: relative; z-index: 2; }
.sth-hero__overlay { position: absolute; inset: 0; z-index: 1; background: rgba(20, 38, 69, 0.45); }

/* Pause/play control for the looping hero video (2.2.2 Pause, Stop, Hide) */
/* Hero cover: a solid dark fallback behind the video/poster. The gold eyebrow
   and white headline therefore resolve their contrast against navy (≥4.5:1),
   never the page's cream — and text stays legible if the video or poster ever
   fails to load. Invisible in normal rendering (video + gradient sit on top). */
.wp-block-post-content > .wp-block-cover:first-child,
.wp-block-cover.sth-hero {
	background-color: var( --wp--preset--color--navy, #0B1428 );
}

.sth-video-toggle {
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 3;
	min-width: 44px;
	min-height: 44px;
	border-radius: 999px;
	border: 2px solid #fff;
	background: rgba(20, 38, 69, 0.8);
	color: #fff;
	cursor: pointer;
	font-size: 1.1rem;
}

/* --- Mobile / tablet-portrait: keep the transparent overlay header short ---
   The header is position:absolute and interior heroes clear it with top
   padding (~9–10rem). On small screens the 320px logo forces the nav to wrap,
   making the header taller than that padding — which let it overlap the hero
   eyebrow. Capping the logo and tightening the bar keeps the header height
   safely under the clearance on every page. */
@media (max-width: 781px) {
	.sth-header .custom-logo {
		width: 140px !important;
		height: auto !important;
	}
	.sth-header {
		padding-top: 0.75rem !important;
		padding-bottom: 0.75rem !important;
	}
	/* Single header stripe: logo left, hamburger + Reservations right, all on
	   one line aligned with the logo. */
	.sth-header > .wp-block-group {
		flex-wrap: nowrap !important;
		align-items: center !important;
		gap: 0.5rem;
	}
	.sth-header > .wp-block-group > .wp-block-group {
		flex: 0 0 auto;
		justify-content: flex-end;
		align-items: center;
		flex-wrap: nowrap;
		gap: 0.55rem;
		/* Reservations pill first, hamburger on the far right. */
		flex-direction: row-reverse;
	}
	/* Compact Reservations pill so logo + hamburger + CTA fit one row. */
	.sth-header .wp-block-button__link {
		font-size: 0.78rem;
		padding: 0.6rem 1rem;
		white-space: nowrap;
		letter-spacing: 0.04em;
	}
	/* WP only swaps to the hamburger below 600px, but our single-stripe header
	   styling runs to 781px — so 600–781px showed the inline nav AND the
	   hamburger at once (overlapping). Hide the inline nav across the whole
	   range so it's hamburger-only here; the overlay still shows when opened. */
	.sth-header .wp-block-navigation__responsive-container:not( .is-menu-open ) {
		display: none !important;
	}

	/* Hamburger toggle = a legible circular button (visible over video AND the
	   red interior header). Matches the Reservations pill's colour family. */
	.sth-header .wp-block-navigation__responsive-container-open {
		flex: 0 0 auto;
		width: 44px;
		height: 44px;
		padding: 0;
		border-radius: 999px;
		background-color: var( --wp--preset--color--deep-red, #942143 );
		border: 2px solid #F2E8D5;
		box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.35 );
		color: #F2E8D5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.sth-header .wp-block-navigation__responsive-container-open svg {
		width: 20px;
		height: 20px;
		fill: currentColor;
	}
	.sth-header .wp-block-navigation__responsive-container-close {
		color: #F2E8D5;
	}

	/* Split-section image/video columns carry an inline min-height:100% so they
	   match the text column's height in the desktop row. When the columns stack
	   on mobile that 100% collapses to ~0 (a thin sliver). Force a real band
	   height so the image/video reads as a proper section. */
	.sth-split-bg.wp-block-cover {
		min-height: 56vh !important;
	}

	/* Split sections alternate (text-left / media-left) for desktop variety.
	   When media is the FIRST column, stacking on mobile drops the heading
	   below its media and butts two media bands together. Reverse those so
	   every section reads heading → media in source order. */
	.wp-block-columns:has( > .wp-block-column:first-child .sth-split-bg ) {
		flex-direction: column-reverse;
	}

	/* The display sizes are fixed rem (huge = 5.5rem/88px) and overflow narrow
	   screens — a single long word like "MERRIER" widened the page and pushed
	   the right-aligned header off-screen. Scale them fluidly on mobile. */
	.has-huge-font-size {
		font-size: clamp( 2.75rem, 12vw, 5.5rem ) !important;
		line-height: 1.05;
	}
	.has-xx-large-font-size {
		font-size: clamp( 2rem, 9vw, 3.5rem ) !important;
	}
	h1, h2, h3,
	.has-huge-font-size,
	.has-xx-large-font-size {
		overflow-wrap: break-word;
	}
}

/* Safety net: never allow a stray wide element to create horizontal scroll. */
html, body { overflow-x: hidden; }

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	/* Don't autoplay motion-heavy video when the user asked for less motion. */
	.sth-video-bg { display: none; }
	.sth-hero { background-size: cover; background-position: center; }
}