/* =============================================================
   @font-face Declarations
   ============================================================= */

@font-face {
	font-family: "paragon-regular";
	src: url("../fonts/paragon-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "forevs-light";
	src: url("../fonts/forevs-light.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "forevs-thin-italic";
	src: url("../fonts/forevs-thin-italic.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "linlibertine-m";
	src: url("../fonts/linlibertine-m.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* =============================================================
   Design Tokens
   ============================================================= */

:root {
	/* Colours */
	--color-primary:         #1d5068;
	--color-primary-dark:    #163d50;
	--color-accent:          #9d633f;
	--color-sand-accent:     #c0aa8e;
	--color-bg:              #ffffff;
	--color-bg-dark:         #1d5068;
	--color-heading:         #174B5D;
	--color-body:            #174B5D;
	--color-muted:           #6b7280;
	--color-border:          #e1e1e1;
	--color-footer-bg:       #163d50;
	--color-footer-bg-deep:  #0f2d3d;  /* Tier 3 below tier-2 partnership row */
	--color-button-bg:       #97bbd6;  /* Book-Now CTA pill — matches live */
	--color-text:            #000000;  /* High-contrast button text on light bg */
	--color-error:           #c8553d;  /* Form validation / inline error message */

	/* Typography */
	--font-display:  "paragon-regular", Georgia, serif;
	--font-heading:  "forevs-light", Helvetica, sans-serif;
	--font-accent:   "forevs-thin-italic", Georgia, serif;
	--font-body:     "linlibertine-m", Georgia, serif;

	/* Header */
	--header-height:     90px;
	--header-transition: 0.3s ease;

	/* Section rhythm */
	--section-padding: 40px;
}

/* =============================================================
   Base
   ============================================================= */

*, *::before, *::after {
	box-sizing: border-box;
}

body {
	font-family: var(--font-body);
	line-height: 1.4;
	color: var(--color-body);
	background-color: var(--color-bg);
	margin: 0;
}

/* Swallow the few pixels of horizontal overflow that `align: full` blocks
   produce when they use `width: 100vw` on a page with a vertical scrollbar.
   `clip` (not `hidden`) avoids creating a scroll container, so sticky
   positioning on descendants still works. */
.wp-site-blocks {
	overflow-x: clip;
}

img {
	max-width: 100%;
	height: auto;
}

/* =============================================================
   Typography
   ----------------------------------------------------------------
   H1–H4 typography is owned by theme.json (styles.elements.h1…h4).
   Don't redeclare heading styles here — it would override theme.json
   and break the FSE workflow. Put exceptions on a class instead.
   H5/H6 stay here because theme.json doesn't define them.
   ============================================================= */

h5,
h6 {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-heading);
}

/* Inline accent span inside any heading.
   Wrap a fragment in <span> to render it in the italic accent face
   without uppercase — e.g. "<h2>An <span>aromatic</span> feast</h2>".
   Lives here (not theme.json) because it's a descendant selector;
   theme.json's element model doesn't reach into children. */
h1 span,
h2 span,
h3 span,
h4 span,
h5 span,
h6 span {
	font-family: var(--font-accent);
	text-transform: none;
	font-size: inherit;
	font-style: normal;
	color: inherit !important;
}

/* Tagline heading variation (block style: "Tagline (display serif)").
   Registered for core/heading in functions.php. Switches any heading
   level to paragon-regular sentence case — used for the homepage
   hero sub-tagline where the default forevs-light uppercase would
   feel too shouty.
   Beats theme.json element styles via class specificity. */
.wp-block-heading.is-style-tagline {
	font-family: var(--font-display);
	font-size: 28px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.2;
}

p {
	font-family: var(--font-body);
	line-height: 1.4;
}

a {
	color: var(--color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--color-accent);
}

/* =============================================================
   Image curve masks (clip-path)
   ----------------------------------------------------------------
   Block styles registered via register_block_style() in functions.php.
   When an editor picks "Curve …" from the Styles panel, the wrapping
   figure gets .is-style-layla-curve-* and the inner <img> is clipped
   via CSS clip-path with a polygon.

   Four variants:
     layla-curve-left          — curve cuts left edge,  natural ratio
     layla-curve-right         — curve cuts right edge, natural ratio
     layla-curve-left-tall     — curve cuts left edge,  forced 3:4 portrait
     layla-curve-right-tall    — curve cuts right edge, forced 3:4 portrait

   The standard variants let the image render at whatever ratio the
   source provides. The tall variants force a 3:4 portrait ratio with
   object-fit: cover, so any landscape source gets cropped into a
   taller card-style frame. Use them where the design calls for
   uniformly tall images regardless of source (e.g. promo cards).

   Why clip-path: polygon() and not mask-image with an SVG data URL?
   `mask-image` rasterises the SVG to a bitmap at the element's pixel
   size and uses the bitmap's alpha channel as a mask — inherently
   prone to edge aliasing. clip-path does *vector* clipping, so the
   browser antialiases the edge geometrically. Same shape, cleaner edge.

   The polygon coordinates are percentages, so they stretch to fit any
   aspect ratio just like mask-image with preserveAspectRatio='none' did.

   The 80 sample points were traced from the alpha channel of live's
   curve PNGs (Layla-Website-Assets_DESK-ABOUT-SHAPE-{LEFT,RIGHT}.webp,
   624×602). The point density preserves the organic asymmetry of the
   hand-drawn original — top and bottom corners are inset differently,
   mid-edge bulges to 100%.

   Aspect-ratio note: percentages stretch the curve to the container,
   so tall containers compress horizontal curve-features and wide ones
   stretch them. Same trade-off as live's PNG approach. */

.wp-block-image.is-style-layla-curve-left img,
.wp-block-image.is-style-layla-curve-right img,
.wp-block-image.is-style-layla-curve-left-tall img,
.wp-block-image.is-style-layla-curve-right-tall img {
	display: block;
}

/* Curve on LEFT edge of image (image sits on right side of layout) —
   shared between the natural-ratio and tall variants. */
.wp-block-image.is-style-layla-curve-left img,
.wp-block-image.is-style-layla-curve-left-tall img {
	-webkit-clip-path: polygon(27.45% 0%, 100% 0%, 100% 100%, 23.76% 100%, 22.95% 98.67%, 21.99% 97.5%, 21.03% 96.17%, 19.9% 95.01%, 18.62% 93.68%, 17.66% 92.51%, 16.37% 91.18%, 15.25% 90.02%, 14.13% 88.69%, 13.16% 87.52%, 12.04% 86.19%, 11.08% 85.02%, 9.95% 83.69%, 9.15% 82.53%, 8.19% 81.2%, 7.38% 80.03%, 6.58% 78.7%, 5.78% 77.54%, 5.14% 76.21%, 4.49% 75.04%, 3.85% 73.71%, 3.37% 72.55%, 2.73% 71.21%, 2.25% 70.05%, 1.93% 68.72%, 1.44% 67.55%, 1.12% 66.22%, 0.8% 65.06%, 0.64% 63.73%, 0.48% 62.56%, 0.32% 61.23%, 0.16% 60.07%, 0% 58.74%, 0% 57.57%, 0% 56.24%, 0% 55.07%, 0.16% 53.74%, 0.16% 52.58%, 0.32% 51.25%, 0.64% 50.08%, 0.8% 48.75%, 1.12% 47.42%, 1.44% 46.26%, 1.93% 44.93%, 2.41% 43.76%, 3.05% 42.43%, 3.53% 41.26%, 4.33% 39.93%, 4.98% 38.77%, 5.78% 37.44%, 6.58% 36.27%, 7.54% 34.94%, 8.51% 33.78%, 9.63% 32.45%, 10.59% 31.28%, 11.72% 29.95%, 12.68% 28.79%, 13.96% 27.45%, 14.93% 26.29%, 16.21% 24.96%, 17.17% 23.79%, 18.3% 22.46%, 19.26% 21.3%, 20.22% 19.97%, 21.03% 18.8%, 21.83% 17.47%, 22.47% 16.31%, 23.27% 14.98%, 23.92% 13.81%, 24.4% 12.48%, 25.04% 11.31%, 25.52% 9.98%, 25.84% 8.82%, 26.32% 7.49%, 26.65% 6.32%, 26.81% 4.99%, 27.13% 3.83%, 27.29% 2.5%, 27.45% 1.33%);
	        clip-path: polygon(27.45% 0%, 100% 0%, 100% 100%, 23.76% 100%, 22.95% 98.67%, 21.99% 97.5%, 21.03% 96.17%, 19.9% 95.01%, 18.62% 93.68%, 17.66% 92.51%, 16.37% 91.18%, 15.25% 90.02%, 14.13% 88.69%, 13.16% 87.52%, 12.04% 86.19%, 11.08% 85.02%, 9.95% 83.69%, 9.15% 82.53%, 8.19% 81.2%, 7.38% 80.03%, 6.58% 78.7%, 5.78% 77.54%, 5.14% 76.21%, 4.49% 75.04%, 3.85% 73.71%, 3.37% 72.55%, 2.73% 71.21%, 2.25% 70.05%, 1.93% 68.72%, 1.44% 67.55%, 1.12% 66.22%, 0.8% 65.06%, 0.64% 63.73%, 0.48% 62.56%, 0.32% 61.23%, 0.16% 60.07%, 0% 58.74%, 0% 57.57%, 0% 56.24%, 0% 55.07%, 0.16% 53.74%, 0.16% 52.58%, 0.32% 51.25%, 0.64% 50.08%, 0.8% 48.75%, 1.12% 47.42%, 1.44% 46.26%, 1.93% 44.93%, 2.41% 43.76%, 3.05% 42.43%, 3.53% 41.26%, 4.33% 39.93%, 4.98% 38.77%, 5.78% 37.44%, 6.58% 36.27%, 7.54% 34.94%, 8.51% 33.78%, 9.63% 32.45%, 10.59% 31.28%, 11.72% 29.95%, 12.68% 28.79%, 13.96% 27.45%, 14.93% 26.29%, 16.21% 24.96%, 17.17% 23.79%, 18.3% 22.46%, 19.26% 21.3%, 20.22% 19.97%, 21.03% 18.8%, 21.83% 17.47%, 22.47% 16.31%, 23.27% 14.98%, 23.92% 13.81%, 24.4% 12.48%, 25.04% 11.31%, 25.52% 9.98%, 25.84% 8.82%, 26.32% 7.49%, 26.65% 6.32%, 26.81% 4.99%, 27.13% 3.83%, 27.29% 2.5%, 27.45% 1.33%);
}

/* Curve on RIGHT edge of image (image sits on left side of layout) —
   shared between the natural-ratio and tall variants. */
.wp-block-image.is-style-layla-curve-right img,
.wp-block-image.is-style-layla-curve-right-tall img {
	-webkit-clip-path: polygon(0% 0%, 76.24% 0%, 77.05% 1.33%, 78.01% 2.5%, 79.13% 3.83%, 80.1% 4.99%, 81.38% 6.32%, 82.5% 7.49%, 83.63% 8.82%, 84.75% 9.98%, 85.87% 11.31%, 87% 12.48%, 88.12% 13.81%, 89.09% 14.98%, 90.05% 16.31%, 90.85% 17.47%, 91.81% 18.8%, 92.62% 19.97%, 93.58% 21.3%, 94.22% 22.46%, 94.86% 23.79%, 95.51% 24.96%, 96.15% 26.29%, 96.79% 27.45%, 97.27% 28.79%, 97.75% 29.95%, 98.07% 31.28%, 98.56% 32.45%, 98.88% 33.78%, 99.2% 34.94%, 99.36% 36.27%, 99.52% 37.44%, 99.68% 38.77%, 99.84% 39.93%, 100% 41.26%, 100% 42.43%, 100% 43.76%, 100% 44.93%, 99.84% 46.26%, 99.68% 47.42%, 99.52% 48.75%, 99.36% 50.08%, 99.2% 51.25%, 98.88% 52.58%, 98.39% 53.74%, 98.07% 55.07%, 97.59% 56.24%, 96.95% 57.57%, 96.31% 58.74%, 95.67% 60.07%, 95.02% 61.23%, 94.06% 62.56%, 93.26% 63.73%, 92.3% 65.06%, 91.49% 66.22%, 90.37% 67.55%, 89.41% 68.72%, 88.28% 70.05%, 87.16% 71.21%, 86.04% 72.55%, 85.07% 73.71%, 83.79% 75.04%, 82.83% 76.21%, 81.7% 77.54%, 80.74% 78.7%, 79.78% 80.03%, 78.97% 81.2%, 78.17% 82.53%, 77.37% 83.69%, 76.73% 85.02%, 76.08% 86.19%, 75.44% 87.52%, 74.96% 88.69%, 74.48% 90.02%, 74.16% 91.18%, 73.68% 92.51%, 73.35% 93.68%, 73.03% 95.01%, 72.87% 96.17%, 72.71% 97.5%, 72.55% 98.67%, 72.39% 100%, 0% 100%);
	        clip-path: polygon(0% 0%, 76.24% 0%, 77.05% 1.33%, 78.01% 2.5%, 79.13% 3.83%, 80.1% 4.99%, 81.38% 6.32%, 82.5% 7.49%, 83.63% 8.82%, 84.75% 9.98%, 85.87% 11.31%, 87% 12.48%, 88.12% 13.81%, 89.09% 14.98%, 90.05% 16.31%, 90.85% 17.47%, 91.81% 18.8%, 92.62% 19.97%, 93.58% 21.3%, 94.22% 22.46%, 94.86% 23.79%, 95.51% 24.96%, 96.15% 26.29%, 96.79% 27.45%, 97.27% 28.79%, 97.75% 29.95%, 98.07% 31.28%, 98.56% 32.45%, 98.88% 33.78%, 99.2% 34.94%, 99.36% 36.27%, 99.52% 37.44%, 99.68% 38.77%, 99.84% 39.93%, 100% 41.26%, 100% 42.43%, 100% 43.76%, 100% 44.93%, 99.84% 46.26%, 99.68% 47.42%, 99.52% 48.75%, 99.36% 50.08%, 99.2% 51.25%, 98.88% 52.58%, 98.39% 53.74%, 98.07% 55.07%, 97.59% 56.24%, 96.95% 57.57%, 96.31% 58.74%, 95.67% 60.07%, 95.02% 61.23%, 94.06% 62.56%, 93.26% 63.73%, 92.3% 65.06%, 91.49% 66.22%, 90.37% 67.55%, 89.41% 68.72%, 88.28% 70.05%, 87.16% 71.21%, 86.04% 72.55%, 85.07% 73.71%, 83.79% 75.04%, 82.83% 76.21%, 81.7% 77.54%, 80.74% 78.7%, 79.78% 80.03%, 78.97% 81.2%, 78.17% 82.53%, 77.37% 83.69%, 76.73% 85.02%, 76.08% 86.19%, 75.44% 87.52%, 74.96% 88.69%, 74.48% 90.02%, 74.16% 91.18%, 73.68% 92.51%, 73.35% 93.68%, 73.03% 95.01%, 72.87% 96.17%, 72.71% 97.5%, 72.55% 98.67%, 72.39% 100%, 0% 100%);
}

/* Tall variants — force a square (1:1) container regardless of the source
   image's natural ratio. The figure gets `aspect-ratio: 1 / 1` so its
   height tracks its width; the inner <img> uses object-fit: cover so it
   fills that frame, cropping centred. The clip-path then masks out the
   curve from the cropped square.

   Why 1:1? Live's /about/ uses 624×602 source PNGs (ratio 1.037:1) for
   its "taller" curve images — essentially square. A pure 1:1 ratio
   matches that look at any container width and avoids hard-coding a
   non-integer ratio.

   For more dramatic portraits, try `4 / 5` (mild) or `3 / 4` (extreme).
   If a specific page needs different dimensions, use the block's
   Dimensions panel to set explicit width/height — those will override
   aspect-ratio here. */
.wp-block-image.is-style-layla-curve-left-tall,
.wp-block-image.is-style-layla-curve-right-tall {
	aspect-ratio: 1 / 1;
	width: 100%;
}

.wp-block-image.is-style-layla-curve-left-tall img,
.wp-block-image.is-style-layla-curve-right-tall img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* =============================================================
   Navigation
   ============================================================= */

.wp-block-navigation,
.wp-block-navigation a,
.wp-block-navigation-item__content {
	font-family: var(--font-display);
	text-transform: uppercase;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 400;
}

/* Book Now CTA pill — matches live site: light blue #97bbd6, 30px radius */
.wp-block-navigation-item.nav-cta .wp-block-navigation-item__content,
.header-cta .wp-block-button__link,
.wp-block-button.is-style-layla-primary .wp-block-button__link {
	background-color: var(--color-button-bg);
	color: var(--color-text);
	padding: 8px 16px 7px;
	border-radius: 30px;
	border: 1px solid var(--color-button-bg);
	font-family: var(--font-display);
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0;
	transition: background-color var(--header-transition);
}

.wp-block-navigation-item.nav-cta .wp-block-navigation-item__content:hover,
.header-cta .wp-block-button__link:hover,
.wp-block-button.is-style-layla-primary .wp-block-button__link:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-bg);
}

/* Intro paragraph — large display-serif text for page intros (add class "food-intro" in editor) */
.food-intro {
	font-family: var(--font-display, "paragon-regular", Georgia, serif);
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-body, #333333);
}

/* All content buttons — minimum width and centred text */
.wp-block-button__link {
	min-width: 190px;
	text-align: center;
	transition: background-color var(--header-transition), border-color var(--header-transition), color var(--header-transition);
}

.wp-block-button__link:hover {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

/* Header nav — hover and current-page (active) states.
   Default link color comes from theme.json (styles.elements.link =
   --color-primary). Hovering to --color-primary therefore produced
   no visible change — hover now goes to --color-accent (gold) so the
   state is actually perceptible. Active stays primary teal underlined. */
.layla-header .wp-block-navigation a:hover,
.layla-header .wp-block-navigation a:focus-visible {
	color: var(--color-accent);
}

.layla-header .wp-block-navigation .current-menu-item > a,
.layla-header .wp-block-navigation [aria-current="page"] {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
	color: var(--color-primary);
}

/* Don't underline the Book Now CTA when it happens to be the current page —
   the pill background already indicates state. */
.layla-header .wp-block-navigation .nav-cta.current-menu-item > a,
.layla-header .wp-block-navigation .nav-cta [aria-current="page"] {
	text-decoration: none;
}

/* =============================================================
   Header
   ============================================================= */

.layla-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--color-bg);
	transition: box-shadow var(--header-transition);
}

.layla-header.is-shrunk {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.layla-header .wp-block-group {
	max-width: none;
}

/* Suppress block gap inside header so it never grows taller than intended */
.layla-header .wp-block-group > *,
.layla-header__inner > * {
	margin-block: 0 !important;
}

.layla-header__inner {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	padding: 0 40px;
	min-height: var(--header-height);
	max-width: 1400px;
	margin: 0 auto;
	transition: min-height var(--header-transition);
}

/* Nav items — padding controls space inside each link;
   gap controls space between items (overrides WP's default 24px flex gap) */
.wp-block-navigation .wp-block-navigation-item__content {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.layla-header .wp-block-navigation__container {
	gap: 12px !important;
}

.layla-header.is-shrunk .layla-header__inner {
	min-height: 70px;
}

.layla-header__logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.layla-header__logo img {
	height: 70px;
	width: auto;
	display: block;
	transition: height var(--header-transition);
}

/* wp:site-logo — override Gutenberg's inline style="width:Xpx" */
.layla-header .wp-block-site-logo {
	width: auto !important;
	margin: 0;
	line-height: 0;
}

.layla-header .wp-block-site-logo img {
	height: 70px !important;
	width: auto !important;
	max-width: none;
	display: block;
	transition: height var(--header-transition);
}

.layla-header.is-shrunk .wp-block-site-logo img,
.layla-header.is-shrunk .layla-header__logo img {
	height: 50px !important;
}

.layla-header__right {
	display: flex;
	align-items: center;
	gap: 8px;
}

@media (max-width: 782px) {
	.layla-header__inner {
		padding: 0 20px;
	}
}

/* Push fixed header below WP admin bar when logged in */
.admin-bar .layla-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .layla-header {
		top: 46px;
	}
}

/* Offset page content for fixed header */
.wp-site-blocks {
	padding-top: var(--header-height);
}

/* =============================================================
   Post content — first-child flush
   ============================================================= */

/* Page hero — wp:cover with useFeaturedImage:true at template level.
   Naturally full-width (no constrained wrapper above it).
   Focal point is set per-page via the Cover block's focal point picker in the editor.
   min-height set on the block; max-height caps it on large screens. */
.wp-site-blocks > .wp-block-cover.page-hero {
	margin-block-start: 0 !important;
	max-height: 550px;
}

/* Breathing room between the page hero and the content below it */
.wp-block-cover.page-hero + main.wp-block-group {
	padding-block-start: 60px;
}

/* No featured image assigned — collapse hero, restore normal top spacing */
.wp-block-cover.page-hero:not(:has(.wp-block-cover__image-background)) {
	display: none;
}
.wp-block-cover.page-hero:not(:has(.wp-block-cover__image-background)) + main.wp-block-group {
	padding-block-start: 0;
}

.wp-site-blocks > main {
	margin-block-start: 0 !important;
}

main.wp-block-group > .wp-block-post-content {
	margin-block-start: 0 !important;
}

.wp-block-post-content > *:first-child {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

/* Pages without a hero get breathing room at the top.
   Scoped to pages where no page-hero image is present — when the template-level
   hero is visible, the 60px padding on main is already sufficient. */
.wp-site-blocks:not(:has(.page-hero .wp-block-cover__image-background)) .wp-block-post-content > *:first-child:not(.wp-block-vl-mosaic-hero):not(.wp-block-vl-hero-slider):not(.wp-block-cover):not(.wp-block-group):not([class*="slider"]):not([class*="hero"]),
.wp-site-blocks:not(:has(.page-hero .wp-block-cover__image-background)) .entry-content > *:first-child:not(.wp-block-vl-mosaic-hero):not(.wp-block-vl-hero-slider):not(.wp-block-cover):not(.wp-block-group):not([class*="slider"]):not([class*="hero"]) {
	margin-block-start: var(--wp--preset--spacing--xl) !important;
}

/* Hero / slider / cover / group — sit flush under header */
.wp-block-post-content > .wp-block-vl-mosaic-hero:first-child,
.entry-content > .wp-block-vl-mosaic-hero:first-child,
.wp-block-post-content > .wp-block-vl-hero-slider:first-child,
.entry-content > .wp-block-vl-hero-slider:first-child,
.wp-block-post-content > .wp-block-cover:first-child,
.entry-content > .wp-block-cover:first-child,
.wp-block-post-content > .wp-block-group:first-child,
.entry-content > .wp-block-group:first-child {
	margin-block-start: 0 !important;
	padding-block-start: 0 !important;
}

/* Breathing room for the first content block AFTER a hero/slider/cover.
   Without this the H1 (or whatever follows) sits 0–24px below the hero,
   which feels cramped.

   --section-padding (40px) is applied as MARGIN here, not padding,
   because the WP-injected block-gap on the parent (is-layout-flow's
   `* + *` margin-block-start) needs to be overridden — margin-block-start
   with !important does that cleanly.

   We ALSO force padding-top: 0 on the same element. This neutralises any
   inline `padding-top` that an editor might have set via the spacing
   control — otherwise it stacks on top of the margin and produces a
   doubled gap (e.g. 40 + 80 = 120px above the title). Pages get the
   same 40px breathing room regardless of accidental customization in
   the editor, which is the whole point of having a standard.

   Excludes .layla-intro (homepage — locked 40px via !important) and
   .layla-section (the explicit opt-out class). If a page genuinely
   needs different top padding, add className: "layla-section" to the
   group and either accept its 40px default OR set inline padding
   knowing this rule won't fight it. */
.wp-block-post-content > .wp-block-vl-mosaic-hero + *:not(.layla-intro):not(.layla-section),
.wp-block-post-content > .wp-block-vl-hero-slider + *:not(.layla-intro):not(.layla-section),
.wp-block-post-content > .wp-block-cover.alignfull + *:not(.layla-intro):not(.layla-section),
.entry-content > .wp-block-vl-mosaic-hero + *:not(.layla-intro):not(.layla-section),
.entry-content > .wp-block-vl-hero-slider + *:not(.layla-intro):not(.layla-section),
.entry-content > .wp-block-cover.alignfull + *:not(.layla-intro):not(.layla-section) {
	margin-block-start: var(--section-padding) !important;
	padding-top: 0 !important;
}

/* =============================================================
   Block overrides
   ============================================================= */

/* Media & Text block — WP core injects padding: 0 8% via an inline <style> block
   after our stylesheet, with specificity (0,2,0). !important is required to win. */
.wp-block-media-text__content {
	padding-inline-start: 0 !important;
}

/* =============================================================
   Section spacing — standardised vertical rhythm
   ----------------------------------------------------------------
   All major page sections should use --section-padding (60px).

   .layla-intro has block-editor inline padding-top/bottom:5rem (80px)
   set via the spacing control — override here so it matches.

   Promotion cards each have padding:60px 0. When stacked in a Query
   Loop, WP's is-layout-flow adds a further 24px margin-block-start
   on each <li>, making the gap between adjacent cards 144px. Fix by
   removing top padding from consecutive cards (gap becomes 84px).
   ============================================================= */

.layla-intro {
	padding-top:    var(--section-padding) !important;
	padding-bottom: var(--section-padding) !important;
}

/* Standard utility class — apply to any section group that needs
   consistent vertical breathing room (e.g. blog section wrapper). */
.layla-section {
	padding-top:    var(--section-padding);
	padding-bottom: var(--section-padding);
}

/* =============================================================
   Footer
   ----------------------------------------------------------------
   Three-tier layout matching the live site:
     Tier 1 — logo | address+badge | nav 2-col | opening hours
     Tier 2 — partnership row (flex line of label + logos)
     Tier 3 — copyright | legal nav | Instagram icon

   Typography decision: live uses the BODY font (linlibertine-m) for
   address/contact/hours/copyright, with the content typed in uppercase.
   The HEADING font (forevs-light) is reserved for the "Opening Hours"
   label and other section headings. We follow the same split here.
   Tier 2/3 use --color-primary-dark to step the section visually.
   ============================================================= */

/* On single blog posts the related-posts section sits flush against the footer.
   Scope the margin reset to .single-post only; all other page types keep the
   default 24px breathing room WP applies to .wp-site-blocks > * children. */
.single-post .wp-site-blocks > footer {
	margin-block-start: 0 !important;
}

.layla-footer {
	background-color: var(--color-footer-bg);
	color: var(--color-bg);
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.layla-footer a {
	color: var(--color-bg);
	opacity: 0.85;
	text-decoration: none;
	transition: opacity var(--header-transition), color var(--header-transition);
}

.layla-footer a:hover {
	opacity: 1;
	color: var(--color-accent);
}

.layla-footer p,
.layla-footer li {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

/* Tier 1 ----------------------------------------------------------- */

.layla-footer__tier1 {
	padding: 60px 40px;
	max-width: 1400px;
	margin: 0 auto;
}

.layla-footer__tier1 > .wp-block-columns {
	align-items: flex-start;
	gap: 40px;
}

/* Footer logo (texture wordmark, ID 1267) — a separate asset from the
   site logo, pre-styled in light-blue distressed watercolour for the
   dark footer background. NO opacity/filter overrides: the SVG ships
   with the intended ghost treatment baked in.
   Live's equivalent renders ~416px wide; we cap at 360px so the
   wordmark feels balanced against the address column to its right. */
.layla-footer__logo-col {
	padding-right: 32px;
}

.layla-footer__logo-col .wp-block-image {
	margin: 0;
	line-height: 0;
}

.layla-footer__logo-col .wp-block-image img,
.layla-footer__logo-col .layla-footer__logo img {
	width: 100% !important;
	max-width: 360px !important;
	height: auto !important;
	display: block;
}

/* Address & contact block — body font, regular tracking, content typed in
   uppercase characters in the template (don't double up text-transform). */
.layla-footer__address {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	margin: 0 0 24px;
}

.layla-footer__address a {
	opacity: 1;
}

/* AGFG award badge */
.layla-footer__agfg {
	margin: 16px 0 0;
}

.layla-footer__agfg img {
	max-width: 300px;
	width: 300px;
	height: auto;
	display: block;
}

/* Nav lists — two side-by-side columns, no bullets, body font uppercase.
   Note: legacy rules for the hand-coded wp:list version. The active
   footer nav now uses wp:navigation — see .layla-footer__nav rules below. */
.layla-footer__nav-grid {
	gap: 24px !important;
	margin: 0;
}

.layla-footer__nav-grid .wp-block-column {
	flex-basis: 50% !important;
}

.layla-footer__nav-list,
.layla-footer .wp-block-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.layla-footer__nav-list li,
.layla-footer .wp-block-list li {
	margin-bottom: 12px;
	font-family: var(--font-body);
	font-size: 14px;
	letter-spacing: 0.03em;
}

.layla-footer__nav-list a {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
}

/* Footer navigation (wp:navigation, ref:6 — same menu as the header).
   Rendered as a vertical <ul>; we use CSS column-count: 2 to split the
   list into two visual columns matching the previous hand-coded layout.
   column-fill: balance distributes items evenly between columns. */
.layla-footer__nav .wp-block-navigation__container {
	display: block !important;
	column-count: 2;
	column-gap: 24px;
	column-fill: balance;
	width: 100%;
	gap: 0 !important;
}

.layla-footer__nav .wp-block-navigation-item {
	display: block;
	break-inside: avoid; /* prevent an item from splitting across columns */
	margin-bottom: 12px;
	width: 100%;
}

/* Override the global nav typography (display font, 15px) and the
   Book Now CTA pill style — footer wants plain body-font links. */
.layla-footer__nav .wp-block-navigation-item__content {
	display: block;
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-transform: uppercase;
	letter-spacing: 0.03em !important;
	color: rgba(255, 255, 255, 0.85) !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.layla-footer__nav .wp-block-navigation-item__content:hover,
.layla-footer__nav .wp-block-navigation-item__content:focus-visible {
	color: var(--color-accent) !important;
}

/* Book Now CTA appears in the same nav menu — strip the pill in footer. */
.layla-footer__nav .nav-cta .wp-block-navigation-item__content {
	background: transparent !important;
	border: 0 !important;
	color: rgba(255, 255, 255, 0.85) !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

.layla-footer__nav .nav-cta .wp-block-navigation-item__content:hover {
	color: var(--color-accent) !important;
}

.layla-footer__hours-heading {
	font-family: var(--font-heading);
	font-weight: 400;
	color: var(--color-bg);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-top: 0;
	margin-bottom: 16px;
}

.layla-footer__hours {
	color: rgba(255, 255, 255, 0.85);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 0.02em;
	margin: 0 0 4px;
}

.layla-footer__hours:last-of-type {
	margin-bottom: 0;
}

/* Visual break between weekday and weekend service hours. */
.layla-footer__hours--break {
	margin-top: 16px;
}

.layla-footer__hours strong {
	font-weight: 400;
	color: var(--color-bg);
}

/* Tier 2 — partnership row -------------------------------------------- */

/* Outer takes full viewport width for the bg colour; inner container
   carries the max-width AND padding so its content edges match Tier 1. */
.layla-footer__tier2 {
	background-color: var(--color-primary-dark);
}

.layla-footer__partnership {
	max-width: 1400px;
	margin: 0 auto;
	padding: 28px 40px;
	gap: 16px !important;
	justify-content: flex-start !important;
}

/* The first item ("Layla operates in partnership with") + Delia logo sit
   close together on the LEFT. The Delia sub-label and partner logos get
   pushed to the RIGHT by margin-left: auto on the sub-label — standard
   flexbox "and the rest" trick. */
.layla-footer__partnership .layla-footer__delia-sub {
	margin-left: auto;
}

.layla-footer__partnership-label {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 0.06em;
	margin: 0;
}

.layla-footer__delia-logo {
	margin: 0;
}

.layla-footer__delia-logo img {
	max-height: 50px;
	width: auto;
	display: block;
	opacity: 0.95;
	transition: opacity var(--header-transition);
}

.layla-footer__delia-logo a:hover img {
	opacity: 1;
}

.layla-footer__delia-sub {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-body);
	font-size: 11px;
	letter-spacing: 0.06em;
	line-height: 1.4;
	margin: 0;
	text-align: right;
}

/* Partner logos (Hostplus, MBB) — white silhouette treatment */
.partner-logo {
	margin: 0;
	opacity: 0.95;
	transition: opacity var(--header-transition);
}

.partner-logo img {
	max-height: 40px;
	width: auto;
	display: block;
}

.partner-logo--mbb img {
	max-height: 44px;
}

.partner-logo:hover {
	opacity: 1;
}

/* Tier 3 — socket / copyright bar -------------------------------------- */

.layla-footer__bottom {
	background-color: var(--color-footer-bg-deep);
	border-top: none;
}

.layla-footer__socket {
	max-width: 1400px;
	margin: 0 auto;
	padding: 14px 40px;
	justify-content: flex-start !important;
	gap: 24px !important;
}

.layla-footer__copyright,
.layla-footer__legal {
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-body);
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 0;
}

/* Push legal links + Instagram together to the right edge.
   !important needed — WP injects .is-layout-flex > :is(*, div) { margin: 0 }
   which sets margin-left: 0 on all flex children and cannot be overridden otherwise. */
.layla-footer__legal {
	margin-left: auto !important;
}

.layla-footer__legal a {
	color: rgba(255, 255, 255, 0.7);
	opacity: 1;
}

.layla-footer__legal a:hover {
	color: var(--color-accent);
}

/* Instagram icon in socket */
.layla-footer__social {
	margin: 0;
	gap: 0 !important;
}

.layla-footer__social .wp-social-link,
.layla-footer__social .wp-block-social-link {
	background: transparent !important;
	padding: 0;
	margin: 0;
	width: 28px;
	height: 28px;
}

.layla-footer__social .wp-social-link a,
.layla-footer__social .wp-block-social-link a {
	color: rgba(255, 255, 255, 0.7);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	transition: color var(--header-transition);
}

.layla-footer__social .wp-social-link a:hover,
.layla-footer__social .wp-block-social-link a:hover {
	color: var(--color-accent);
}

.layla-footer__social svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Mobile -------------------------------------------------------------- */

@media (max-width: 900px) {
	.layla-footer__tier1,
	.layla-footer__tier2,
	.layla-footer__bottom {
		padding-left: 24px;
		padding-right: 24px;
	}

	.layla-footer__tier1 > .wp-block-columns {
		flex-direction: column;
		gap: 32px;
	}

	.layla-footer__tier1 > .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}

	.layla-footer__partnership {
		justify-content: center !important;
		text-align: center;
		gap: 20px !important;
	}

	.layla-footer__delia-sub {
		text-align: center;
	}

	.layla-footer__socket {
		justify-content: center !important;
		text-align: center;
		gap: 12px !important;
	}

	.layla-footer__legal {
		line-height: 2;
	}
}

/* =============================================================
   Blank page template
   No header/footer — 100vh flex container, content centred
   ============================================================= */

.wp-site-blocks:has(.layla-blank-page) {
	padding-top: 0 !important;
}

.layla-blank-page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	width: 100%;
}

/* =============================================================
   Blog / Query Loop Cards
   Matches live site: forevs-light 26px title, linlibertine-m
   12.6px date, paragon-regular 16px Read More with underline
   ============================================================= */

/* Card title — H3 in Post Template.
   Selectors cover both the explicit `.layla-blog-card` class (used
   on hand-built blog cards) AND the bare Query Loop output that
   appears on /spice-journey/ and similar pages, where the post
   template <li>s have only WP's default classes. The Media grid
   has its own rules later in this file and wins via source order. */

/* Suppress WP's default block-gap (~24px) inside blog cards — the
   per-element margins below (title 12/8, date /4, excerpt /12,
   read-more 8/) define the intended rhythm. Without this, every
   child block gets pushed 24px apart and the date floats away from
   the title. Setting the CSS variable cascades into nested layout
   containers (constrained / flow) so it works regardless of the
   wrapping group's layout type.

   Covers two card patterns:
   - .layla-blog-card  — homepage, Spice Journey, related posts
   - .post-card        — archive.html (blog archive)
   Plus a fallback for bare Query Loop output where no wrapper
   class is present at all. */
.layla-blog-card,
.post-card,
.wp-block-query .wp-block-post-template > li {
	--wp--style--block-gap: 0;
}

/* Row gap between cards in any Query Loop grid. WP's default is the
   same 24px block-gap used between flow siblings, which feels too
   tight for image-led cards. 48px row / 32px column matches the
   rhythm used by .layla-media-grid (which sets its own gap and so
   isn't affected by this rule). */
.wp-block-query .wp-block-post-template.is-layout-grid {
	gap: 48px 32px;
}

.layla-blog-card .wp-block-post-title,
.layla-blog-card .wp-block-post-title a,
.layla-blog-card__title,
.layla-blog-card__title a,
.wp-block-query .wp-block-post-template > li > .wp-block-post-title,
.wp-block-query .wp-block-post-template > li > .wp-block-post-title a {
	font-family: var(--font-heading);
	line-height: 1.3;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--color-heading);
	text-decoration: none;
	text-align: center !important;
}

.layla-blog-card .wp-block-post-title,
.layla-blog-card__title,
.post-card .wp-block-post-title,
.wp-block-query .wp-block-post-template > li > .wp-block-post-title {
	/* Date kicker above owns the gap to the title (margin-bottom:10px).
	   Title owns the gap below to the excerpt (margin-bottom:14px).
	   No top margin — prevents brittle margin stacking against the date. */
	margin-top: 0;
	margin-bottom: 14px;
}

.layla-blog-card .wp-block-post-title a:hover,
.layla-blog-card__title a:hover {
	color: var(--color-accent);
}

/* Date kicker — editorial italic accent treatment.
   Copper (--color-accent) in the italic display face, uppercase with
   wide letter-spacing. Reads as a small kicker label above the title
   rather than a generic post date.

   Applied to both card classes (.layla-blog-card on related posts +
   homepage cards, .post-card on the blog archive) so editorial cards
   look consistent across the site. */
.layla-blog-card .wp-block-post-date,
.layla-blog-card .wp-block-post-date time,
.layla-blog-card__date,
.post-card .wp-block-post-date,
.post-card .wp-block-post-date time {
	font-family: var(--font-accent);
	font-size: 13px;
	line-height: 1.3;
	color: var(--color-accent);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: left !important;
}

/* Excerpt — muted body type so it sits quietly under the title. */
.layla-blog-card .wp-block-post-excerpt,
.layla-blog-card .wp-block-post-excerpt p,
.post-card .wp-block-post-excerpt,
.post-card .wp-block-post-excerpt p {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.55;
	color: var(--color-muted);
	margin: 0 !important;
	text-align: center !important;
}

/* "Read article →" — rendered by post-excerpt's moreText on a new
   line below the excerpt. Copper display-font label with a 2px copper
   underline. Shifts to dark teal on card-hover. */
.layla-blog-card .wp-block-post-excerpt__more-link,
.post-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 12px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--color-accent);
	border-bottom: 1px solid var(--color-accent);
	padding-bottom: 4px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

/* Card layout — flex column so card heights stay equal and the
   read-more anchor pins to the bottom regardless of title/excerpt
   length. Without this, a card with a short title sits its read-more
   higher than its neighbours, breaking the rhythm of a multi-card row. */
.layla-blog-card,
.post-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.layla-blog-card .wp-block-post-featured-image,
.post-card .wp-block-post-featured-image {
	overflow: hidden;
	margin-bottom: 0;
}

.layla-blog-card .wp-block-post-featured-image img,
.post-card .wp-block-post-featured-image img {
	transition: transform 0.45s ease;
	will-change: transform;
}

.layla-blog-card:hover .wp-block-post-featured-image img,
.post-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.layla-blog-card:hover .wp-block-post-title a,
.post-card:hover .wp-block-post-title a {
	color: var(--color-accent);
}

.layla-blog-card:hover .wp-block-post-excerpt__more-link,
.post-card:hover .wp-block-post-excerpt__more-link {
	color: var(--color-primary-dark);
	border-bottom-color: var(--color-primary-dark);
}

/* Stretched link — invisible ::after on the title link covers the
   whole card so a single click anywhere navigates to the post. The
   image link and read-more link remain visually present and are
   re-elevated above the overlay so they remain independently
   interactive (right-click, copy link, keyboard focus). */
.layla-blog-card .wp-block-post-title a::after,
.post-card .wp-block-post-title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.layla-blog-card .wp-block-post-featured-image,
.layla-blog-card .wp-block-post-excerpt__more-link,
.post-card .wp-block-post-featured-image,
.post-card .wp-block-post-excerpt__more-link {
	position: relative;
	z-index: 2;
}

/* Excerpt block fills the remaining vertical space and uses flex so
   its inner content (paragraph + more-link) can be split: paragraph
   takes natural height, more-link gets margin-top:auto and sticks to
   the bottom of the card. */
.layla-blog-card .wp-block-post-excerpt,
.post-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.layla-blog-card .wp-block-post-excerpt__more-link,
.post-card .wp-block-post-excerpt__more-link {
	align-self: center;
	margin-top: auto;
	padding-top: 20px;
}

/* Line-clamp the excerpt paragraph to 3 lines so cards with longer
   excerpts don't push the read-more way down. -webkit-line-clamp
   is widely supported and is now standardised as `line-clamp`; we
   ship both for maximum coverage. */
.layla-blog-card .wp-block-post-excerpt p,
.post-card .wp-block-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

/* "Continue on the Spice Journey" — editorial section above the
   footer. White background, decorative wave divider at the top
   replacing the previous 1px copper border.

   Wave is rendered via a ::before pseudo-element that uses the SVG
   as a `mask-image` and gets its colour from `background-color:
   var(--color-sand-accent)` (the lighter tan token, softer than the
   primary copper accent). The mask shape lives in the SVG file and
   the colour stays tokenised in CSS — if --color-sand-accent changes
   later, the wave updates automatically without touching the SVG.

   FULL-VIEWPORT BREAKOUT: The section uses the classic negative-margin
   technique to extend to 100vw regardless of its parent layout context.
   This is belt-and-braces — the template already has align:\"full\", but
   if the wp_template DB row is cached without that attribute (common
   when the Site Editor has ever opened the template), alignfull won't
   render. CSS-side breakout removes that dependency.

   The constrained inner layout (from wp:group's layout attribute) still
   caps the heading and card grid at contentSize, so this only affects
   the section's outer chrome — background, padding, and the wave divider.
   .wp-site-blocks has overflow-x: clip, so the 100vw width doesn't
   produce horizontal scrollbars.

   Padding is asymmetric: bottom needs more room than top because the
   dark teal footer sits flush below (.single-post footer has
   margin-block-start:0) and the visual transition white → dark band
   needs clear breathing space. The top padding also has to clear the
   wave (80px) plus give breathing room before the heading. */
.related-posts {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--color-bg);
	/* Padding-top scales with viewport so the gap between the wave-bottom
	   and the heading stays roughly constant (~80px) regardless of how
	   tall the wave renders. The 5vw component matches the wave's natural
	   aspect-ratio-derived height (≈ 100vw / 19.7). */
	padding-top: calc(5vw + 80px) !important;
	padding-bottom: 140px !important;
}

.related-posts::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	/* Aspect-ratio matches the SVG viewBox (3840 / 195 ≈ 19.7:1). With
	   width set by left:0; right:0 to 100%, height auto-calculates to
	   preserve the wave's natural proportions at every viewport width.
	   This eliminates two issues from the previous fixed-height approach:

	   1. Aspect mismatch fading: at fixed heights that didn't match the
	      SVG's native ratio, the browser had to compress the path
	      horizontally, and edge curves rasterised with near-zero alpha
	      — the wave appeared to clip short of viewport edges.

	   2. Cross-viewport inconsistency: a fixed 100px height looked
	      proportionally right on 1920px screens but visually thin on 4K
	      displays and oversized on smaller viewports. With aspect-ratio,
	      the wave scales proportionally so it looks the same everywhere.

	   Wave rendered height = 100vw / 19.7 ≈ 5vw at every viewport. */
	aspect-ratio: 3840 / 195;
	background-color: var(--color-sand-accent);
	-webkit-mask-image: url('../img/wave-divider.svg');
	        mask-image: url('../img/wave-divider.svg');
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	pointer-events: none;
}

.related-posts__heading {
	letter-spacing: 0.04em;
	margin-bottom: 56px !important;
}

/* Mobile — stack cards vertically below 900px. 2-up would orphan the
   third card in a 3-post related-posts grid; 1-up gives every card
   full width and clean rhythm down the page. */
@media (max-width: 900px) {
	.related-posts-query .wp-block-post-template.is-layout-grid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}
}

/* Wave divider scales fluidly via aspect-ratio (see ::before rule above).
   On mobile the only adjustment needed is a tighter padding-top because
   the wave's natural height at small viewports (~16–30px) already feels
   right — just reduces the breathing room above the heading. */
@media (max-width: 600px) {
	.related-posts {
		padding-top: calc(5vw + 60px) !important;
		padding-bottom: 100px !important;
	}

	.related-posts__heading {
		margin-bottom: 36px !important;
	}
}

/* Featured image aspect ratio */
.layla-blog-card .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}


.promotion-item {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
	padding: 60px 0;
	border-bottom: 1px solid var(--color-border);
}

/* Odd items: image right, content left */
.wp-block-post-template > li:nth-child(odd) .promotion-item__media {
	order: 2;
}

.wp-block-post-template > li:nth-child(odd) .promotion-item__content {
	order: 1;
}

.promotion-item__media .wp-block-post-featured-image img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}

.promotion-item__subtitle {
	font-family: var(--font-accent);
	color: var(--color-accent);
	font-size: 20px;
	margin-bottom: 8px;
	margin-top: 0;
}

.promotion-item__content .wp-block-post-title {
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-heading);
	margin-bottom: 20px;
	margin-top: 0;
}

.promotion-item__content .wp-block-post-excerpt p {
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.65;
	color: var(--color-body);
}

.promotion-item__button .wp-block-button__link {
	background-color: var(--color-primary);
	color: var(--color-bg);
	padding: 12px 28px;
	font-family: var(--font-heading);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 13px;
	border-radius: 0;
	transition: background-color var(--header-transition);
}

.promotion-item__button .wp-block-button__link:hover {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-bg);
}

.layla-promotion__content {
	gap: 0;
}

/* Promotion card button — must not be overridden by theme button defaults */
.layla-promotion__btn {
	margin-top: 25px;
	background-color: var(--color-button-bg) !important;
	color: var(--color-text) !important;
	border: 1px solid var(--color-button-bg) !important;
	border-radius: 30px !important;
	font-family: var(--font-display) !important;
	font-size: 15px !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	padding: 10px 20px 8px !important;
}

.layla-promotion__btn:hover {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

@media (max-width: 768px) {
	.promotion-item {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.wp-block-post-template > li:nth-child(odd) .promotion-item__media,
	.wp-block-post-template > li:nth-child(odd) .promotion-item__content {
		order: unset;
	}
}

/* =============================================================
   Tripleseat embed form
   ----------------------------------------------------------------
   Layout overrides for the third-party Tripleseat lead form
   (api.tripleseat.com/v1/leads/ts_script.js). The widget renders
   itself using jQuery UI datepicker + table-based layout, neither
   of which match our design system. Rules below normalise the
   widget to fit the Layla theme.

   All selectors are scoped to .layla-tripleseat-form or
   #tripleseat_embed_form to prevent bleed into other forms on
   the site (search, contact, etc.). Tripleseat injects its own
   <style> tag at runtime with hardcoded widths and black borders —
   most rules below need !important to win the cascade.
   ============================================================= */

/* Container — constrain to comfortable reading width and centre */
.layla-tripleseat-form {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 16px;
}

/* Base form font + colour */
#tripleseat_embed_form {
	font-family: var(--font-body);
	color: var(--color-heading);
}

/* Section headers ("Your Contact Information", etc.)
   Tripleseat outputs these as <h2>. Override the global H2 size
   and add a separator under each section header for visual grouping. */
#tripleseat_embed_form h2 {
	font-family: var(--font-heading);
	font-size: 18px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--color-heading);
	margin: 28px 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-border);
	line-height: 1.2;
}

/* First H2 in the form sits flush at the top */
#tripleseat_embed_form tr:first-child h2 {
	margin-top: 0;
}

/* Labels */
#tripleseat_embed_form label {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--color-heading);
	margin-bottom: 6px;
	line-height: 1.4;
}

/* Required asterisk — warmer red, on-brand */
#tripleseat_embed_form label .required {
	color: var(--color-error);
	margin-left: 2px;
}

/* Inline em hint inside labels (e.g. "Nature of this Event" hint) */
#tripleseat_embed_form label em {
	font-style: italic;
	color: var(--color-muted);
	margin-left: 4px;
	font-size: 12px;
}

/* Inputs, selects, textareas — unified treatment */
#tripleseat_embed_form input.text,
#tripleseat_embed_form input[type="text"]:not([type="hidden"]),
#tripleseat_embed_form input[type="email"],
#tripleseat_embed_form input[type="tel"],
#tripleseat_embed_form select,
#tripleseat_embed_form textarea {
	width: 100% !important;
	min-height: 44px !important;
	padding: 8px 12px !important;
	font-family: var(--font-body) !important;
	font-size: 14px !important;
	color: var(--color-heading) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	background-color: var(--color-bg) !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#tripleseat_embed_form textarea {
	min-height: 96px !important;
	padding: 12px !important;
	line-height: 1.5;
	resize: vertical;
}

/* Focus ring — primary teal at low opacity */
#tripleseat_embed_form input:focus,
#tripleseat_embed_form select:focus,
#tripleseat_embed_form textarea:focus {
	outline: none;
	border-color: var(--color-primary) !important;
	box-shadow: 0 0 0 3px rgba(29, 80, 104, 0.15);
}

/* Phone extension stays narrow */
#tripleseat_embed_form #lead_phone_number_extension {
	max-width: 100px;
}

/* Datepicker / timepicker inputs — hide Tripleseat's S3-hosted clock
   and calendar PNG icons. Two reasons:
   1. The icons are dated-looking and don't sit well next to the form's
      otherwise clean field treatment.
   2. Centring text around them required `padding-left: 36px`, which loses
      a CSS specificity battle with our base input rule above (the
      `:not([type="hidden"])` adds 10 specificity), so the icon overlapped
      the placeholder/value text. Killing the icon avoids the fight. */
#tripleseat_embed_form input.hasDatepicker,
#tripleseat_embed_form input.timeselect_input {
	background-image: none !important;
}

/* Start Time / End Time row — Tripleseat's default cell widths are
   uneven (start ~80%, end ~16%). Force 50/50 so both fields sit
   balanced and the row reads as a paired range. */
#tripleseat_embed_form td.cell_start_time,
#tripleseat_embed_form td.cell_end_time {
	width: 50% !important;
}

/* Table layout — spacing between rows */
#tripleseat_embed_form table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

#tripleseat_embed_form table td {
	padding: 0 8px 16px 0 !important;
	vertical-align: top;
}

#tripleseat_embed_form table td:last-child {
	padding-right: 0 !important;
}

/* Phone extension cell stays narrow */
#tripleseat_embed_form td.extension {
	width: 120px;
}

/* Submit button — matches the brand .layla-promotion__btn:
   light-blue pill, paragon-regular display font, dark-teal hover */
#tripleseat_embed_form .button,
#tripleseat_embed_form input[type="submit"] {
	display: inline-block !important;
	background-color: var(--wp--preset--color--button-bg) !important;
	color: var(--color-text) !important;
	font-family: var(--font-display) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	letter-spacing: 0 !important;
	padding: 12px 32px 10px !important;
	border: 1px solid var(--wp--preset--color--button-bg) !important;
	border-radius: 30px !important;
	min-height: auto !important;
	width: auto !important;
	cursor: pointer;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
	float: left;
}

#tripleseat_embed_form .button:hover,
#tripleseat_embed_form input[type="submit"]:hover {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

/* "Powered by Tripleseat" link — small, muted, sits to the right of submit */
#tripleseat_embed_form #lead_form_submit a {
	font-family: var(--font-body);
	font-size: 11px;
	color: var(--color-muted);
	text-decoration: none;
	margin-top: 16px;
	display: inline-block;
}

#tripleseat_embed_form #lead_form_submit a:hover {
	color: var(--color-heading);
	text-decoration: underline;
}

/* reCAPTCHA spacing */
#tripleseat_embed_form .g-recaptcha {
	margin: 8px 0 16px;
}

/* Submit row — ensure space below the button row */
#tripleseat_embed_form .row_submit td {
	padding-top: 12px !important;
}

/* ==== jQuery UI datepicker widget ==== */
#tripleseat_embed_form .ui-datepicker,
.ui-datepicker {
	font-family: var(--font-body);
	width: 18em !important;
	padding: 12px;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#tripleseat_embed_form .ui-datepicker-header,
.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: 0 !important;
	padding: 0 0 8px;
}

#tripleseat_embed_form .ui-datepicker-title,
.ui-datepicker .ui-datepicker-title {
	color: var(--color-heading);
}

#tripleseat_embed_form .ui-datepicker-title select,
.ui-datepicker .ui-datepicker-title select {
	width: 42% !important;
	display: inline-block !important;
	margin: 0 2px !important;
	min-height: 32px !important;
	padding: 4px 6px !important;
}

#tripleseat_embed_form .ui-state-default,
.ui-datepicker .ui-state-default {
	background: var(--color-bg) !important;
	border: 1px solid transparent !important;
	color: var(--color-heading) !important;
	text-align: center;
}

#tripleseat_embed_form .ui-state-hover,
.ui-datepicker .ui-state-hover {
	background: var(--wp--preset--color--button-bg) !important;
	border-color: var(--wp--preset--color--button-bg) !important;
	color: var(--color-text) !important;
}

#tripleseat_embed_form .ui-state-active,
#tripleseat_embed_form .ui-state-highlight,
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-state-highlight {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

#tripleseat_embed_form .ui-datepicker-buttonpane button,
.ui-datepicker .ui-datepicker-buttonpane button {
	background: transparent !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	padding: 6px 12px !important;
	font-family: var(--font-body) !important;
	font-size: 12px !important;
	cursor: pointer;
	color: var(--color-heading);
}

#tripleseat_embed_form .ui-datepicker-buttonpane button:hover,
.ui-datepicker .ui-datepicker-buttonpane button:hover {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

/* ==== Time picker dropdown ==== */
div.timeselect {
	font-family: var(--font-body) !important;
	border: 1px solid var(--color-border) !important;
	border-radius: 4px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	background: var(--color-bg) !important;
	/* Tripleseat hardcodes width:130px on the dropdown, which truncates
	   option text like "12:30pm (1 hours)" or "11:30pm (12 hours)" —
	   especially noticeable on the End Time field where the full duration
	   suffix is the most useful information. min-width:210px gives every
	   duration label room to render. */
	min-width: 210px !important;
	width: auto !important;
}

div.timeselect a {
	color: var(--color-heading) !important;
	padding: 6px 12px !important;
	height: auto !important;
	line-height: 1.4 !important;
}

div.timeselect a.hover,
div.timeselect a:hover {
	background-color: var(--color-primary) !important;
	color: var(--color-bg) !important;
}

/* Readonly inputs scoped to the Tripleseat form only — the
   original rule was unscoped and would have stripped styling
   from every readonly input site-wide. */
#tripleseat_embed_form input[readonly]:not([type="hidden"]),
#tripleseat_embed_form textarea[readonly] {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	height: auto !important;
}

/* ==== Mobile ==== */
@media (max-width: 600px) {
	#tripleseat_embed_form table,
	#tripleseat_embed_form tbody,
	#tripleseat_embed_form tr,
	#tripleseat_embed_form td {
		display: block !important;
		width: 100% !important;
	}

	#tripleseat_embed_form table td {
		padding: 0 0 16px 0 !important;
	}

	#tripleseat_embed_form td.extension {
		width: 100% !important;
	}
}

/* =============================================================
   Media grid (CPT: media_item) — Query Loop on /media/
   ----------------------------------------------------------------
   Live uses larger forevs-light titles with letter-spacing in the
   media grid. We split the difference at 22px so titles wrap to
   2–3 lines without dominating the page. Publication label uses
   the body font for a cleaner editorial feel.
   ============================================================= */

.layla-media-grid .wp-block-post-template {
	gap: 48px 32px !important;
}

.layla-media-grid .wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	display: block;
	margin-bottom: 16px;
}

.layla-media-grid__publication,
.layla-media-grid .layla-media-grid__publication {
	font-family: var(--font-body);
	font-size: 13px;
	line-height: 1.4;
	color: var(--color-accent);
	margin: 0 0 6px;
	text-transform: none;
	letter-spacing: 0;
}

.layla-media-grid__title,
.layla-media-grid .wp-block-post-title {
	font-family: var(--font-heading);
	line-height: 1.25;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--color-heading);
	margin: 0;
}

.layla-media-grid .wp-block-post-title a {
	color: var(--color-heading);
	text-decoration: none;
	transition: color 0.2s ease;
}

.layla-media-grid .wp-block-post-title a:hover {
	color: var(--color-accent);
}

@media (max-width: 900px) {
	.layla-media-grid .wp-block-post-template {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.layla-media-grid .wp-block-post-template {
		grid-template-columns: 1fr !important;
		gap: 32px !important;
	}
}

/* =============================================================
   Content padding fallback at ~1315px
   ----------------------------------------------------------------
   theme.json sets contentSize: 1310px. When the viewport drops to
   that width or below, constrained content reaches the viewport
   edges with no breathing room. Add horizontal padding to the
   constrained post-content so non-full-width blocks always have
   air around them. Full-bleed blocks (alignfull) escape this via
   their own width:100vw rules, so they're unaffected.
   ============================================================= */

@media (max-width: 1400px) {
	.wp-block-post-content.is-layout-constrained,
	.entry-content.is-layout-constrained,
	main.wp-block-group.is-layout-constrained,
	section.wp-block-group.is-layout-constrained,
	div.wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide):not(.layla-footer__tier1):not(.layla-footer__tier2):not(.layla-footer__bottom):not(.layla-footer__socket):not(.layla-footer__partnership) {
		padding-left: 24px;
		padding-right: 24px;
	}
}

@media (max-width: 600px) {
	.wp-block-post-content.is-layout-constrained,
	.entry-content.is-layout-constrained,
	main.wp-block-group.is-layout-constrained,
	section.wp-block-group.is-layout-constrained,
	div.wp-block-group.is-layout-constrained:not(.alignfull):not(.alignwide):not(.layla-footer__tier1):not(.layla-footer__tier2):not(.layla-footer__bottom):not(.layla-footer__socket):not(.layla-footer__partnership) {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* =============================================================
   Responsive navigation — hamburger at ≤1300px
   ----------------------------------------------------------------
   overlayMenu: "mobile" triggers WP's hamburger only at ≤600px.
   We extend that breakpoint to ≤1300px so the inline nav isn't
   cramped between 600–1300px.
   ============================================================= */

@media (max-width: 1300px) {
	.layla-header .wp-block-navigation:not(.has-modal-open) .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	.layla-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
		align-items: center;
		background: transparent;
		border: 0;
		cursor: pointer;
		color: var(--color-heading);
		padding: 8px;
	}

	.layla-header .wp-block-navigation__responsive-container-open svg {
		width: 28px;
		height: 28px;
		fill: currentColor;
	}

	.layla-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex !important;
	}
}

@media (min-width: 1301px) {
	.layla-header .wp-block-navigation__responsive-container-open,
	.layla-header .wp-block-navigation__responsive-container-close {
		display: none !important;
	}

	.layla-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: flex !important;
		position: static !important;
		background: none !important;
		padding: 0 !important;
		width: 100% !important;
		overflow: visible !important;
	}
}

/* =============================================================
   Hamburger drawer — slide-in panel from the right
   ----------------------------------------------------------------
   Ported from mase-theme. The container becomes a transparent
   full-screen backdrop; the dialog panel is the actual drawer.
   ============================================================= */

/* Scroll lock while drawer is open */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
	overflow: hidden;
}

@media (max-width: 1300px) {

	/* Backdrop — WP's responsive-close element styled as a scrim */
	.layla-header .wp-block-navigation__responsive-close {
		position: fixed !important;
		inset: 0 !important;
		background: rgba(0, 0, 0, 0.4) !important;
		z-index: 9998 !important;
	}

	/* Container — transparent full-screen wrapper (not the drawer itself) */
	body .layla-header .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		background: none !important;
		z-index: 9998 !important;
		box-shadow: none !important;
		padding: 0 !important;
		animation: none !important;
		overflow: visible !important;
	}

	/* Dialog panel — the actual slide-in drawer */
	.layla-header .wp-block-navigation__responsive-dialog {
		position: fixed !important;
		top: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		left: auto !important;
		width: 320px !important;
		max-width: 85vw !important;
		height: 100dvh !important;
		background: var(--color-bg) !important;
		z-index: 9999 !important;
		overflow-y: auto !important;
		padding: var(--header-height) 2rem 2rem !important;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15) !important;
		animation: layla-drawer-in 0.25s ease-out !important;
		display: flex !important;
		flex-direction: column !important;
	}

	@keyframes layla-drawer-in {
		from { transform: translateX(100%); }
		to   { transform: translateX(0); }
	}

}

/* Nav items inside the drawer.

   The container <ul> needs explicit width:100% — without it, the flex
   container shrinks to fit-content inside the dialog's flex-column layout
   and stretching items inside a narrow box doesn't expand them across the
   drawer. Items and their inner content also need !important on width and
   margin to defeat core's UA rules. */
.layla-header .is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.layla-header .is-menu-open .wp-block-navigation-item {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--color-border) !important;
}

.layla-header .is-menu-open .wp-block-navigation-item:last-child {
	border-bottom: none !important;
}

/* Drop the divider on the item directly before the Book Now CTA so the
   pill doesn't sit flush against a line — visually separates the text-
   menu group from the action button. */
.layla-header .is-menu-open .wp-block-navigation-item:has(+ .nav-cta) {
	border-bottom: none !important;
}

.layla-header .is-menu-open .wp-block-navigation-item__content {
	display: block !important;
	width: 100% !important;
	font-family: var(--font-heading);
	font-size: 18px !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-heading);
	padding: 16px 0 !important;
	text-align: left;
}

.layla-header .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--color-accent);
}

.layla-header .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.layla-header .is-menu-open [aria-current="page"] {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Book Now CTA — pill style inside the drawer */
.layla-header .is-menu-open .nav-cta {
	border-bottom: none !important;
	margin-top: 36px;
}

.layla-header .is-menu-open .nav-cta .wp-block-navigation-item__content {
	background-color: var(--color-button-bg, #97bbd6);
	color: var(--color-text);
	border-radius: 30px;
	padding: 12px 24px !important;
	justify-content: center !important;
	text-align: center;
	display: inline-flex !important;
	width: auto !important;
	align-self: flex-start;
}

/* Close button — pinned over the header so X appears where hamburger was */
@media (max-width: 1300px) {
	.layla-header .wp-block-navigation__responsive-container-close {
		position: fixed !important;
		top: 0 !important;
		right: 40px !important;
		bottom: auto !important;
		left: auto !important;
		height: var(--header-height) !important;
		margin: 0 !important;
		padding: 8px !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		z-index: 10000 !important;
		color: var(--color-heading) !important;
		background: transparent !important;
		border: 0 !important;
		cursor: pointer;
	}

	.layla-header .wp-block-navigation__responsive-container-close svg {
		width: 28px !important;
		height: 28px !important;
		fill: currentColor !important;
	}

	.admin-bar .layla-header .wp-block-navigation__responsive-container-close {
		top: 32px !important;
	}
}

@media (max-width: 600px) {
	.layla-header .wp-block-navigation__responsive-container-close {
		right: 24px !important;
	}

	.admin-bar .layla-header .wp-block-navigation__responsive-container-close {
		top: 46px !important;
	}

	.layla-header .is-menu-open .wp-block-navigation-item__content {
		font-size: 16px !important;
		padding: 14px 0 !important;
	}
}

/* =============================================================
   Smash Balloon Instagram Feed — constrain to content width.
   ============================================================= */

#sb_instagram {
	max-width: 1310px;
	margin-inline: auto;
}

/* =============================================================
   Newsletter Modal — SevenRooms Subscription Form

   Native <dialog> containing an iframe of the SR-hosted
   subscription page. Triggered from any link ending in
   #newsletter (typically the Mailing List item in the global
   Navigation block).

   Markup: functions.php (wp_footer action)
   Behaviour: assets/js/newsletter-modal.js
   ============================================================= */

/* Scroll lock while the modal is open — JS toggles this class on <html>. */
html.is-newsletter-modal-open,
html.is-newsletter-modal-open body {
	overflow: hidden;
	overscroll-behavior: contain;
}

.layla-newsletter-modal {
	width: min(500px, 94vw);
	/* Dynamic viewport units handle iOS Safari's collapsing URL bar — `vh` is
	   based on the largest viewport state and overflows when the bar reappears.
	   `dvh` tracks the current viewport. Fallback to `vh` for older browsers. */
	height: min(760px, 92vh);
	height: min(760px, 92dvh);
	padding: 0;
	border: none;
	border-radius: 4px;
	background: var(--color-bg);
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
	/* Do NOT set `position: relative` here. The native <dialog>[open] UA
	   stylesheet uses `position: fixed; inset: 0; margin: auto` to centre
	   the dialog in the viewport via the top layer. Overriding with
	   `position: relative` anchors the dialog to its parent (<body>),
	   which renders it at scroll-position 0 — so on mobile, when the user
	   has scrolled down before opening, the dialog appears above the visible
	   area and only the (top-layer) backdrop is visible. The close button
	   inside still gets a positioning ancestor — `position: fixed` qualifies. */
}

.layla-newsletter-modal::backdrop {
	/* --color-primary-dark (#163d50) at ~75% alpha. */
	background: rgba(22, 61, 80, 0.75);
	backdrop-filter: blur(3px);
}

.layla-newsletter-modal__iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.layla-newsletter-modal__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	/* Solid chip so the X stays visible regardless of what colour SR's
	   subscription page shows at the top (mobile collapses the dark
	   header on narrow viewports, exposing a white background under it). */
	background: var(--color-primary-dark);
	color: var(--color-bg);
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.layla-newsletter-modal__close:hover,
.layla-newsletter-modal__close:focus-visible {
	background: var(--color-accent);
	outline: none;
	transform: scale(1.05);
}

/* Mobile: full-screen modal. SR's hosted subscription form needs the full
   viewport on narrow devices — a centred 94vw × 92dvh card leaves the form
   cramped, and any internal scrolling competes with the page beneath.

   Explicit `position: fixed; inset: 0; margin: 0` over-specifies on top of
   the UA stylesheet, defending against any browser quirk that would re-anchor
   the dialog to document flow when the page is scrolled. */
@media (max-width: 600px) {
	.layla-newsletter-modal {
		position: fixed;
		inset: 0;
		margin: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		max-width: 100vw;
		max-height: 100vh;
		max-height: 100dvh;
		border-radius: 0;
		/* Respect iPhone notch / Android gesture bar. */
		padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
		box-sizing: border-box;
	}

	.layla-newsletter-modal__close {
		top: calc(env(safe-area-inset-top) + 8px);
		right: calc(env(safe-area-inset-right) + 8px);
	}
}