/*
	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.5
	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); }
}

/* 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; }
	.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; }
}