/*
	Theme Name: Hello Elementor Child
	Theme URI: https://rosieogradys.com
	Description: Child theme of Hello Elementor for the Rosie O'Grady's website. All custom CSS and PHP for the site lives here.
	Author: Mark Griffin
	Author URI: https://markjgriffin.ie
	Template: hello-elementor
	Version: 1.2.12
	Text Domain: hello-elementor-child
	License: GNU General Public License v2 or later
*/

/* =========================================================================
   Rosie O'Grady's, Connemara. Only what no Elementor control or global
   class can reach. Everything else lives in Site Settings, Elementor
   variables and the atomic global classes. Each block names the static
   selector it mirrors (Claude Design System/connemara-site/css/site.css).
   ========================================================================= */

/* html: scroll-padding under the 76px sticky header, scrollbar colours,
   form accent colour. Mirrors `html { ... }`. */
html {
	scroll-padding-top: 92px;
	scrollbar-color: #22382C #0C1614;
	accent-color: #E4B85C;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* body: font smoothing and caret. Colours and fonts come from the kit.
   Mirrors `body { ... }`. */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	caret-color: #E4B85C;
}

/* Below 1024px the fixed booking bar needs room at the bottom of the page.
   Mirrors `@media (max-width: 1024px) { body { padding-bottom } }`. */
@media (max-width: 1024px) {
	body {
		padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
	}
}

/* ::selection and ::-webkit-scrollbar. */
::selection { background: #E4B85C; color: #0C1614; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background: #0C1614; }
::-webkit-scrollbar-thumb { background: #22382C; border: 3px solid #0C1614; border-radius: 8px; }

/* :focus-visible ring in Clare Slate bright. Mirrors `:focus-visible`.
   The second selector out-ranks Hello's reset (`a:focus-visible` gives a
   black ring with a white halo) and Elementor's `.e-paragraph-link-base`
   and `.e-paragraph-base a` resets, which otherwise leave links in
   paragraphs with no visible focus at all. */
:focus-visible,
.elementor :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #B5CBCE;
	outline-offset: 3px;
	border-radius: 2px;
	box-shadow: none;
}

/* Links written inline in paragraph copy. Elementor's `.e-paragraph-base a`
   unsets colour and underline, so they read as plain text. Mirrors `a` and
   `.relief a`. Paragraphs that are links themselves (.e-paragraph-link-base)
   keep their class styling. */
.elementor .e-paragraph-base a:not([class]) {
	color: #93AEB2;
	text-decoration-line: underline;
	text-decoration-color: rgba(147, 174, 178, 0.4);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color 220ms cubic-bezier(0.16, 1, 0.3, 1), text-decoration-color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.elementor .e-paragraph-base a:not([class]):hover {
	color: #B5CBCE;
	text-decoration-color: currentColor;
}
.elementor .relief .e-paragraph-base a:not([class]) {
	color: #3E5A5E;
	text-decoration-color: rgba(62, 90, 94, 0.4);
}
.elementor .relief .e-paragraph-base a:not([class]):hover {
	color: #0C1614;
}
/* On the limestone relief sections the slate ring is 1.5:1; use slate on light. */
.elementor .relief :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: #3E5A5E;
}
@media (forced-colors: active) {
	:focus-visible { outline: 2px solid CanvasText; }
}

/* Keyframes referenced by the `skel` (shimmer) and `marquee-edge` (bulbs)
   global classes. Keyframes cannot live inside a class block. */
@keyframes rog-shimmer {
	from { background-position: 200% 0; }
	to { background-position: -40% 0; }
}
@keyframes rog-bulbs {
	50% { background-position-x: 11px; }
}

/* The hero photograph settles from 1.06 to rest on first paint: the one
   authored motion. Mirrors `.hero__media img` + `body.is-ready`. */
.elementor .hero-img {
	animation: rog-settle 2.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes rog-settle {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

/* Hero slideshows (pages.py slides()): Home (#hero-slides) and Bar
   (#bar-slides) with five photographs on a 35s loop, Private Events
   (#events-slides) with eight on a 56s loop. 7s each, crossfading over 1.5s.
   The first stays put underneath, so the hero is never empty on load; each
   of the others fades in over it and holds until the next is fully in, and
   the last fades out to show the first again. CSS only. Each id's delays
   and keyframes assume its slide count. */
#hero-slides .hero-img,
#bar-slides .hero-img,
#events-slides .hero-img {
	position: absolute;
	inset: 0;
}
#hero-slides .hero-img:not(:first-child),
#bar-slides .hero-img:not(:first-child) {
	opacity: 0;
	animation: rog-slide 35s ease-in-out infinite;
}
#hero-slides .hero-img:nth-child(2), #bar-slides .hero-img:nth-child(2) { animation-delay: 7s; }
#hero-slides .hero-img:nth-child(3), #bar-slides .hero-img:nth-child(3) { animation-delay: 14s; }
#hero-slides .hero-img:nth-child(4), #bar-slides .hero-img:nth-child(4) { animation-delay: 21s; }
#hero-slides .hero-img:last-child,
#bar-slides .hero-img:last-child {
	animation-name: rog-slide-last;
	animation-delay: 28s;
}
#events-slides .hero-img:not(:first-child) {
	opacity: 0;
	animation: rog-slide8 56s ease-in-out infinite;
}
#events-slides .hero-img:nth-child(2) { animation-delay: 7s; }
#events-slides .hero-img:nth-child(3) { animation-delay: 14s; }
#events-slides .hero-img:nth-child(4) { animation-delay: 21s; }
#events-slides .hero-img:nth-child(5) { animation-delay: 28s; }
#events-slides .hero-img:nth-child(6) { animation-delay: 35s; }
#events-slides .hero-img:nth-child(7) { animation-delay: 42s; }
#events-slides .hero-img:last-child {
	animation-name: rog-slide8-last;
	animation-delay: 49s;
}
@keyframes rog-slide8 {
	0% { opacity: 0; }
	2.7%, 15.2% { opacity: 1; }
	15.3%, 100% { opacity: 0; }
}
@keyframes rog-slide8-last {
	0% { opacity: 0; }
	2.7%, 12.5% { opacity: 1; }
	15.2%, 100% { opacity: 0; }
}
/* Neon sign left of centre: keep it in frame on narrow screens. */
#hero-slides .hero-img:first-child { object-position: 30% 50%; }
@keyframes rog-slide {
	0% { opacity: 0; }
	4.3%, 24.3% { opacity: 1; }
	24.4%, 100% { opacity: 0; }
}
@keyframes rog-slide-last {
	0% { opacity: 0; }
	4.3%, 20% { opacity: 1; }
	24.3%, 100% { opacity: 0; }
}

/* Room pages show only what the venue has sent (loops.py, 2026-10-21): the
   gallery section goes when the room has no gallery (a display condition
   cannot test the ACF gallery array), and a layout tab's plans-and-photos
   grid goes when none of its figures is set. */
#space-gallery:not(:has(.e-gallery-item)),
.elementor .layout-media:not(:has(.layout-fig)) {
	display: none;
}

/* Reduced motion: no settle, no bulbs, no shimmer, no lifts.
   Mirrors `@media (prefers-reduced-motion: reduce)`. */
@media (prefers-reduced-motion: reduce) {
	.elementor .hero-img { animation: none; }
	#hero-slides .hero-img:not(:first-child),
	#bar-slides .hero-img:not(:first-child),
	#events-slides .hero-img:not(:first-child) { display: none; }
	.elementor .marquee-edge { animation: none; }
	.elementor .skel { animation: none; }
	.elementor .hero-video { display: none; }
	.elementor * { transition-duration: 0.01ms !important; }
}

/* Header scrolled state. The header root is a classic container (only it has
   Sticky + Effects Offset); Elementor adds .elementor-sticky--effects after
   24px of scroll. Both header templates give the container the CSS ID
   site-header; template 540 is the transparent hero variant. Mirrors
   `.site-header.is-scrolled` and `.has-hero .site-header.is-scrolled`. */
#site-header.elementor-sticky--effects {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.elementor-540 #site-header.elementor-sticky--effects {
	background-color: rgba(12, 22, 20, 0.86);
	border-bottom-color: rgba(119, 144, 94, 0.7);
}

/* Griff's menu plugin on the Menus page, dressed as the printed-menu passage.
   The plugin's classic layout (two columns per category) renders the sheet;
   these rules restyle its markup. Mirrors `.menu-section__head`, `.menu-cols`
   and `.menu-item*` in site.css (DESIGN.md "Menu item"): serif dish name,
   dotted lichen leader, gold price, stone description. Each section shows a
   single sheet tab, so the plugin's one-button tab bar is hidden. */
.elementor .cmgs-wrapper .cmgs-tablist:has(> .cmgs-tab:only-child) {
	display: none;
}
.elementor .cmgs-wrapper .cmgs-classic-grid:where(:not(.cmgs-classic-single-col)) {
	grid-template-columns: 1fr 1fr;
	gap: 0 6rem;
}
.elementor .cmgs-wrapper .cmgs-classic-grid > * {
	min-width: 0;
}
.elementor .cmgs-wrapper .cmgs-category {
	margin: 3rem 0 0.5rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px dotted rgba(119, 144, 94, 0.7);
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0.04em;
	color: #F3F2E9;
}
.elementor .cmgs-wrapper .cmgs-category:first-child {
	margin-top: 0;
}
.elementor .cmgs-wrapper .cmgs-classic-col {
	gap: 0;
}
.elementor .cmgs-wrapper .cmgs-classic-item {
	padding: 1rem 0;
	border: 0;
	border-bottom: 1px solid rgba(163, 168, 150, 0.16);
	border-radius: 0;
	background: transparent;
}
.elementor .cmgs-wrapper .cmgs-classic-item:last-child {
	border-bottom: 0;
}
.elementor .cmgs-wrapper .cmgs-classic-head {
	justify-content: flex-start;
	align-items: baseline;
	gap: 0.75rem;
	margin: 0;
}
.elementor .cmgs-wrapper .cmgs-classic-head::after {
	content: "";
	order: 2;
	flex: 1 1 0;
	min-width: 16px;
	border-bottom: 1px dotted rgba(119, 144, 94, 0.7);
	transform: translateY(-5px);
}
.elementor .cmgs-wrapper .cmgs-classic-head:not(:has(.cmgs-classic-price))::after {
	display: none;
}
.elementor .cmgs-wrapper .cmgs-classic-title {
	order: 1;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.15;
	color: #F3F2E9;
}
.elementor .cmgs-wrapper .cmgs-classic-price {
	order: 3;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: #E4B85C;
}
.elementor .cmgs-wrapper .cmgs-classic-line {
	max-width: 54ch;
	margin: 0.35rem 0 0;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #A3A896;
}
.elementor .cmgs-wrapper .cmgs-classic-line.cmgs-notes {
	margin-top: 0.4rem;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	color: #93AB7A;
}
.elementor .cmgs-wrapper .cmgs-empty {
	padding: 2rem 0;
	text-align: left;
	font-style: normal;
	color: #A3A896;
}
/* On the limestone relief, or wherever the shortcode asks for theme="light":
   the on-light steps. Mirrors `.relief .menu-item*`. */
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-category {
	border-bottom-color: rgba(74, 98, 54, 0.6);
	color: #0C1614;
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-item {
	border-bottom-color: rgba(12, 22, 20, 0.14);
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-head::after {
	border-bottom-color: rgba(74, 98, 54, 0.6);
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-title {
	color: #0C1614;
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-price {
	color: #7C5A14;
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-line,
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-empty {
	color: #5E6358;
}
.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-line.cmgs-notes {
	color: #4A6236;
}
@media (max-width: 1024px) {
	.elementor .cmgs-wrapper .cmgs-classic-grid {
		grid-template-columns: 1fr;
	}
	/* One column: the second half of a category follows the first with no gap. */
	.elementor .cmgs-wrapper .cmgs-classic-col + .cmgs-classic-col .cmgs-classic-item:first-child {
		border-top: 1px solid rgba(163, 168, 150, 0.16);
	}
	.elementor :is(.relief .cmgs-wrapper, .cmgs-wrapper.cmgs-theme-light) .cmgs-classic-col + .cmgs-classic-col .cmgs-classic-item:first-child {
		border-top-color: rgba(12, 22, 20, 0.14);
	}
}
@media (max-width: 560px) {
	.elementor .cmgs-wrapper .cmgs-classic-title,
	.elementor .cmgs-wrapper .cmgs-classic-price {
		font-size: 1.25rem;
	}
}

/* Seasonal promo on Home (2026-10-06): the section shows only while the occasions Loop Grid has an
   item, i.e. a published occasion is inside its promo weeks (inc/occasions.php). */
#this-season:not(:has(.e-loop-item)) {
	display: none;
}

/* Occasion pages: the post content arrives as plain paragraphs with no margins of their own. */
.single-occasion .elementor-widget-theme-post-content p + p {
	margin-block-start: 1em;
}

/* Private events enquiries (2026-10-12): the Perfect Venue form, inline under #enquire and in the
   site-wide dialog (inc/enquiry.php, assets/enquiry.js). The form is an iframe with dark text on a
   transparent page, so it sits on a cream panel inside the moss frame. */
.pv-form {
	background: var(--limestone-cream, #F3F2E9);
	border-radius: 6px;
	padding: 16px 8px;
	min-height: 120px;
}
.pv-form iframe {
	display: block;
	width: 100%;
	border: 0;
}
.pv-form-fallback {
	margin: 0;
	padding: 24px 16px;
	text-align: center;
	color: #3E5A5E;
	font-size: 0.9375rem;
}
/* Scoped to outrank the kit's link hover colour, which is unreadable on cream. */
.pv-form .pv-form-fallback a,
.pv-form .pv-form-fallback a:hover,
.pv-form .pv-form-fallback a:focus-visible {
	color: #0C1614;
}

.enquiry-dialog {
	width: min(720px, calc(100vw - 32px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	padding: 0;
	overflow: auto;
	overscroll-behavior: contain;
	background: var(--connemara-moss, #16281F);
	color: var(--limestone-cream, #F3F2E9);
	border: 1px solid var(--hairline-strong, rgba(163, 168, 150, 0.28));
	border-top: 3px solid var(--clare-slate, #93AEB2);
	border-radius: 10px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
.enquiry-dialog:focus {
	outline: none;
}
/* enquiry.js moves focus to #enquire when a link jumps to the inline form (tabindex -1). The frame is
   not a control, so it gets no ring; the form's own fields show theirs. */
#enquire[tabindex="-1"]:focus {
	outline: none;
}
.enquiry-dialog::backdrop {
	background: rgba(12, 22, 20, 0.78);
}
html:has(.enquiry-dialog[open]) {
	overflow: hidden;
}
.enquiry-dialog-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	background: var(--connemara-moss, #16281F);
	border-bottom: 1px solid var(--hairline-strong, rgba(163, 168, 150, 0.28));
}
.enquiry-dialog-label {
	margin: 0 0 4px;
	font-family: var(--font-sans, "Hanken Grotesk"), sans-serif;
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--clare-slate, #93AEB2);
}
.enquiry-dialog-title {
	margin: 0;
	font-family: var(--font-display, "DM Serif Display"), Georgia, serif;
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.18;
	color: var(--limestone-cream, #F3F2E9);
}
/* Scoped under the dialog to outrank the kit's `.elementor-kit-7 button` (gold fill, padding). */
.enquiry-dialog .enquiry-dialog-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	color: var(--limestone-cream, #F3F2E9);
	border: 1px solid var(--hairline-strong, rgba(163, 168, 150, 0.28));
	border-radius: 6px;
	cursor: pointer;
}
.enquiry-dialog .enquiry-dialog-close:hover,
.enquiry-dialog .enquiry-dialog-close:focus-visible {
	border-color: rgba(243, 242, 233, 0.85);
	background: rgba(243, 242, 233, 0.06);
	color: var(--limestone-cream, #F3F2E9);
}
.enquiry-dialog .enquiry-dialog-close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.85;
	stroke-linecap: round;
}
.enquiry-dialog-body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
}
.enquiry-dialog-note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--sea-stone, #A3A896);
}
@media (max-width: 767px) {
	/* Full screen on phones: a long form in a floating box is hard to fill in. */
	.enquiry-dialog {
		width: 100vw;
		height: 100dvh;
		max-height: none;
		margin: 0;
		border-radius: 0;
		border-left: 0;
		border-right: 0;
		border-bottom: 0;
	}
	.enquiry-dialog-head {
		padding: 16px;
	}
	.enquiry-dialog-title {
		font-size: 1.5rem;
	}
	.enquiry-dialog-body {
		padding: 16px;
	}
}
@media (prefers-reduced-motion: no-preference) {
	.enquiry-dialog[open] {
		animation: rog-enquiry-in 220ms ease-out;
	}
}
@keyframes rog-enquiry-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

/* Table reservations (2026-10-12): OpenTable's widget, rendered into the page (iframe=false) by
   inc/reservations.php. OpenTable sets its colours as --otkit-* variables, some inline on
   #ot-reservation-widget, hence !important on those. Controls follow the site's .field-input and
   .btn-reserve; the booking itself opens in OpenTable's own overlay. */
.ot-widget {
	min-height: 120px;
}
.ot-widget-fallback {
	margin: 0;
	padding: 24px 16px;
	border: 1px dashed var(--hairline-strong, rgba(163, 168, 150, 0.28));
	border-radius: 6px;
	text-align: center;
	color: var(--sea-stone, #A3A896);
	font-size: 0.9375rem;
}
.ot-widget #ot-reservation-widget {
	--otkit-color-background: #101E18 !important;
	--otkit-color-background-default: #101E18 !important;
	--otkit-color-background-alt: #16281F !important;
	--otkit-color-foreground: #F3F2E9 !important;
	--otkit-color-foreground-default: #F3F2E9 !important;
	--otkit-color-foreground-disabled-alt: rgba(163, 168, 150, 0.5) !important;
	--otkit-color-border-default: rgba(163, 168, 150, 0.28) !important;
	--otkit-color-border-alt: rgba(243, 242, 233, 0.62) !important;
	--otkit-color-border-divider: rgba(163, 168, 150, 0.28) !important;
	--otkit-color-background-inactive: rgba(163, 168, 150, 0.5) !important;
	--otkit-color-background-action: #E4B85C !important;
	--otkit-color-background-action-alt: #E4B85C !important;
	--otkit-color-background-action-hover: var(--gorse-gold-bright) !important;
	--otkit-color-background-action-alt-hover: var(--gorse-gold-bright) !important;
	--otkit-color-background-action-pressed: var(--gorse-gold-press) !important;
	--otkit-color-background-action-focused: var(--gorse-gold-bright) !important;
	--otkit-color-foreground-action: #E4B85C !important;
	--otkit-color-foreground-on-action: #0C1614 !important;
	font-family: var(--font-sans, "Hanken Grotesk"), system-ui, sans-serif;
	color: #F3F2E9;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
}
/* The frame already carries the "Reserve a Table" title. */
.ot-widget #ot-reservation-widget .ot-title {
	display: none;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	/* OpenTable's narrow "standard" layout paints the whole form. */
	background: transparent;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector {
	float: none;
	width: auto;
	height: 50px;
	margin: 0;
	background: #101E18;
	border: 1px solid rgba(163, 168, 150, 0.28);
	border-radius: 6px;
	transition: border-color 160ms ease;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector:hover {
	border-color: rgba(243, 242, 233, 0.62);
}
/* Same focus as .field-input: slate ring, lifted background. */
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector:focus-within {
	border-color: #B5CBCE;
	box-shadow: 0 0 0 2px #B5CBCE;
	background: #16281F;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector select option {
	background: #16281F;
	color: #F3F2E9;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector:hover .ot-dtp-picker-selector-link {
	outline: none;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector-link {
	padding: 0 12px 0 16px;
	color: #F3F2E9;
	font-size: 1.0625rem;
	text-decoration: none;
}
.ot-widget #ot-reservation-widget .ot-dropdown-content {
	gap: 10px;
}
/* Icons and chevrons in the slate of the site's own select arrows. */
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector-link .icon svg,
.ot-widget #ot-reservation-widget .ot-dtp-picker-selector-link .icon svg path {
	fill: #93AEB2;
}
/* Party size and date share a row; time takes the second; the button runs full width. */
.ot-widget #ot-reservation-widget .ot-time-picker {
	grid-column: 1 / -1;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-button {
	grid-column: 1 / -1;
	float: none;
	width: 100%;
	min-height: 56px;
	height: auto;
	margin: 8px 0 0;
	padding: 16px 32px;
	background: #E4B85C;
	color: #0C1614;
	border: 1px solid transparent;
	border-radius: 6px;
	box-shadow: 0 6px 24px -8px rgba(228, 184, 92, 0.45);
	font-family: var(--font-sans, "Hanken Grotesk"), system-ui, sans-serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 160ms ease, transform 160ms ease;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-button:hover {
	background: var(--gorse-gold-bright);
	transform: translateY(-1px);
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-button:active {
	background: var(--gorse-gold-press);
	transform: none;
}
.ot-widget #ot-reservation-widget .ot-dtp-picker-button:focus-visible {
	outline: 2px solid #F3F2E9;
	outline-offset: 3px;
}
/* The kit's `.elementor-kit-7 button` (gold fill, padding, radius) lands on the calendar's day and
   month buttons. Undo only what OpenTable's own rules leave unset. */
.ot-widget .ot-dtp-picker button,
.ot-widget .ot-dtp-picker button:hover,
.ot-widget .ot-dtp-picker button:focus {
	min-height: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	font-family: inherit;
	font-weight: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.ot-widget .ot-dtp-picker .picker__day {
	border-radius: 0;
}
.ot-widget .ot-dtp-picker .picker__nav svg {
	fill: currentColor;
}
/* The frame clips its children for the rounded corners; the calendar has to float out of it. */
.frame:has(.ot-widget) {
	overflow: visible;
}
/* Date calendar: a popover under the date field, the field's width. */
.ot-widget #ot-reservation-widget .wide-calendar.picker {
	top: calc(100% + 8px);
	left: 0;
	width: 100%;
	background: transparent;
}
.ot-widget #ot-reservation-widget .wide-calendar.picker::before,
.ot-widget #ot-reservation-widget .wide-calendar.picker::after {
	display: none;
}
.ot-widget #ot-reservation-widget .wide-calendar .picker__holder {
	width: 100%;
	left: 0;
	border-radius: 6px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
}
@media (max-width: 560px) {
	.ot-widget #ot-reservation-widget .ot-dtp-picker-form {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (prefers-reduced-motion: reduce) {
	.ot-widget #ot-reservation-widget .ot-dtp-picker-button:hover {
		transform: none;
	}
}

/* Room floor plans (2026-10-21): [rog_floor_plan] (inc/floor-plans.php) in the Layouts section of the
   room templates. The frame mirrors the `plan-frame` class (4:3, moss deep, plan on cream); the whole
   plan is the link into Elementor's lightbox, where the zoom control reads the measurements. */
.rog-floor-plan {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.rog-floor-plan-frame {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--hairline, rgba(163, 168, 150, 0.16));
	border-radius: 10px;
	/* White, not the plan-frame cream: the plans are drawn on white and letterbox slightly at 4:3. */
	background: #FFFFFF;
	box-shadow: 0 8px 24px -8px rgba(6, 14, 12, 0.55);
	cursor: zoom-in;
}
/* Scoped to outrank the kit's `.elementor-kit-7 a` underline. */
.rog-floor-plan a.rog-floor-plan-frame {
	text-decoration: none;
}
.rog-floor-plan-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.rog-floor-plan-frame:focus-visible {
	outline: 2px solid #B5CBCE;
	outline-offset: 3px;
}
/* "View full size": a moss tag on the plan's corner, the same affordance on touch and pointer. Top right,
   the one corner that carries no measurements on any of the four plans. */
.rog-floor-plan-zoom {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	padding: 8px 14px;
	border-radius: 6px;
	background: rgba(16, 30, 24, 0.9);
	color: #F3F2E9;
	font-family: "Hanken Grotesk", sans-serif;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.2;
	transition: background-color 220ms ease;
}
.rog-floor-plan-frame:hover .rog-floor-plan-zoom,
.rog-floor-plan-frame:focus-visible .rog-floor-plan-zoom {
	background: #22382C;
}
/* Scoped under the block to outrank the kit's link colours. */
.rog-floor-plan a.rog-floor-plan-pdf {
	display: inline-flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-self: flex-start;
	min-height: 44px;
	padding-block: 10px;
	color: #B5CBCE;
	font-weight: 600;
	text-decoration: none;
}
/* Only the words are underlined; the file type and size read as a quiet note beside them. */
.rog-floor-plan a.rog-floor-plan-pdf > span:first-child {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.rog-floor-plan a.rog-floor-plan-pdf:hover {
	color: #D2E1E3;
}
.rog-floor-plan .rog-floor-plan-meta {
	color: #A3A896;
	font-size: 0.875rem;
	font-weight: 400;
}
/* On phones the plan is too small for an overlay to miss the measurements: the tag becomes a strip under it. */
@media (max-width: 560px) {
	.rog-floor-plan-frame {
		aspect-ratio: auto;
	}
	.rog-floor-plan-frame img {
		height: auto;
	}
	.rog-floor-plan-zoom {
		position: static;
		display: block;
		border-radius: 0;
		text-align: center;
		padding-block: 12px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.rog-floor-plan-zoom {
		transition: none;
	}
}

/* Legal pages (2026-10-21): the old site's terms, privacy and accessibility text, ported as one
   text-editor block (pages.py legal_page()). Long-form reading measure comes from `wrap-text`; this
   sets the rhythm the kit's display headings and zero paragraph margins don't give running text. */
.rog-prose {
	font-size: 1rem;
	line-height: 1.7;
	color: var(--limestone-cream, #F3F2E9);
}
.rog-prose > * + * {
	margin-top: 1em;
}
.rog-prose p,
.rog-prose ul,
.rog-prose ol {
	margin-bottom: 0;
}
.rog-prose h2,
.rog-prose h3,
.rog-prose h4 {
	margin: 2.2em 0 0;
	line-height: 1.2;
	scroll-margin-top: 96px;
}
.rog-prose h2 {
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
}
.rog-prose h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
}
.rog-prose h2 + *,
.rog-prose h3 + * {
	margin-top: 0.6em;
}
.rog-prose > :first-child {
	margin-top: 0;
}
.rog-prose ul,
.rog-prose ol {
	padding-left: 1.4em;
}
.rog-prose li + li {
	margin-top: 0.5em;
}
.rog-prose a {
	overflow-wrap: anywhere;
}