/* =============================================================================
   STAYHUB GUEST, BASE
   Design tokens, typography, chrome (header + enriched footer), buttons,
   fields, and the shared section devices from the adopted Figma styleguide.

   Figma direction, applied:
     cream / off-white page base            Stone #F2F0EB, Off White #F7F5F0
     deep maroon display serif headings     The Seasons on Dark Orange #5C0E07
     coral accent bands                     #EB7B5C
     light orange warm section blocks       #FAE4D3
     acid pill CTAs with dark text          #D8DB42 on #2B2118
     Matter for body / UI                   18px, #4D4D4D on light

   Fiona's Figma comments carried in here:
     #189  text over images stays readable without a heavy dark overlay
     #190  the page base is cream, not white
     #191  one corner-radius device. ROUND 2 REVISION: the top-right plus
           bottom-left device is no longer applied everywhere. Held to at most
           one use per page, on that page's lead image, and calibrated to the
           owner site (thestayhub.co.nz) where it appears once per page. Every
           other surface takes a quiet 12px card radius, and only the primary
           CTAs keep the pill.
   ============================================================================= */

/* ------------------------------------------------------------------ fonts */

@font-face {
	font-family: "The Seasons";
	src: url("../fonts/the-seasons-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Matter";
	src: url("../fonts/matter-regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Matter";
	src: url("../fonts/matter-semibold.otf") format("opentype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif";
	src: url("../fonts/source-serif-regular.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* ----------------------------------------------------------------- tokens */

:root {
	/* Brand palette, guest (orange) world only. No teal anywhere. */
	--maroon:        #5C0E07;   /* Dark Orange: display headings, dark pills, footer */
	--maroon-deep:   #3F0904;
	--coral:         #EB7B5C;   /* accent bands, List Your Property pill */
	--coral-soft:    #F4A98F;
	--lorange:       #FAE4D3;   /* warm section blocks */
	--lorange-deep:  #F6D6BE;
	--acid:          #D8DB42;   /* primary CTAs */
	--acid-deep:     #C6C931;
	--cream:         #F7F5F0;   /* page base (#190) */
	--stone:         #F2F0EB;   /* alternating band */
	--white:         #FFFFFF;
	--ink:           #4D4D4D;   /* body copy */
	--ink-soft:      #6E6A64;
	--offblack:      #16120D;
	--cta-ink:       #2B2118;   /* dark text on acid */
	--line:          #E3DED4;

	/* ------------------------------------------------- a note on the names
	   ROUND 3 BUG FIX, and the reason half of Fiona's "things are touching"
	   notes existed at all.

	   Elementor blanks `--gap` on every `.elementor-section` and `.e-con`. Our
	   grids all said `gap: var(--gap-row) var(--gap)`, and because a shorthand
	   containing an unresolvable var() is thrown away WHOLE at computed-value
	   time, those grids fell back to `gap: normal`, which is zero. Every card
	   grid on the site was rendering with no gutter in either direction: the
	   Get inspired tiles, the Featured cards, the stay types, the reviews, the
	   travel guides, the activity cards and the destination cards. It looked
	   like a design decision. It was a variable-name collision.

	   So the tokens that share a name with something a page builder is likely
	   to set are namespaced: --sh-gap, --sh-gap-row, --sh-display, --sh-body.
	   --sh-display and --sh-body are renamed pre-emptively for the same reason:
	   Elementor's flexbox Container sets --display, and --body is the kind of
	   name any plugin might take. If you add a token here, do not give it a
	   name a page builder would plausibly want. */

	/* Type */
	--sh-display: "The Seasons", "Source Serif", Georgia, "Times New Roman", serif;
	--sh-body: "Matter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	/* The owner site sets its display serif at 0.9. 0.96 keeps that tightness
	   without clipping the descenders in The Seasons at our larger sizes. */
	--lh-display: 0.96;

	/* --------------------------------------------------------------- radii
	   Round 2. Calibrated against the owner site, thestayhub.co.nz, where the
	   measured values are 12px on cards and images, 3px on buttons, circles on
	   icon controls, and the big sculpted corner used once on a page as a
	   flourish. The guest site follows that, with one exception carried over
	   from the adopted Figma: the primary CTAs stay pills.

	   Everything is a plain, four-corner radius. The old top-right plus
	   bottom-left device is no longer a global rule, only --r-hero below. */
	--r-card: 12px;    /* cards, images, tiles, panels, warm blocks, inputs */
	--r-ctl:  4px;     /* small controls: chips, badges, date boxes, notices */
	--r-btn:  4px;     /* secondary and ghost buttons */
	--r-pill: 999px;   /* PRIMARY CTAs ONLY: acid and coral buttons */

	/* The sculpted corner: the brand's signature device.
	   ROUND 3: bigger and more generous (fix 1). It still appears once per page
	   as the page's lead flourish (the home hero, the listing gallery, the Find
	   your ideal stay image), and it is now unmistakably a shape rather than a
	   rounded corner. */
	--r-hero: 180px;
	/* The same rounded-corner device at tile scale. --r-hero is sized for a
	   full-width band and swamps a three-across tile, so the shape gets its
	   own token rather than a magic number at the call site. */
	--r-tile: clamp(44px, 7vw, 92px);
	/* ROUND 4, fix 1: the home hero's own sweep, kept separate from --r-hero so
	   the listing gallery and the Find your ideal stay image are not dragged
	   along with it. Measured off the Figma reference image at about 250px in a
	   1372px frame; 230px is the top of the range Fiona's round 4 note asks for
	   and it holds the same proportion once the site's own margins are in. */
	--r-hero-sweep: 230px;
	/* The smaller version of the same device, used for the hover corner that
	   grows on a property or guide card's image (fixes 5 and 8). */
	--r-hover: 56px;

	/* ------------------------------------------------------------- spacing
	   One scale, used everywhere. --section-y is applied to BOTH sides of a
	   section, so two stacked sections give 112px of air between their
	   content, which is the desktop rhythm we are aiming at. Bands get the
	   same figure as their own internal breathing room. */
	--space-3xs: 4px;
	--space-2xs: 8px;
	--space-xs:  12px;
	--space-sm:  16px;
	--space-md:  24px;
	--space-lg:  32px;
	--space-xl:  44px;
	--space-2xl: 56px;
	--space-3xl: 72px;

	/* ROUND 3: the whole page breathes more. Every "more padding" note in the
	   round (fixes 4, 5, 6, 7, 8, 13, 18) is a move on this one scale rather
	   than a per-section patch, so the rhythm stays even everywhere. */
	--section-y:  72px;  /* per side, so 144px between stacked sections */
	--head-gap:   48px;  /* heading block to the content under it */
	--sh-gap:     32px;  /* card-grid column gutter */
	--sh-gap-row: 48px;  /* card-grid row gutter, where names sit under images */

	/* ------------------------------------------------------------- surfaces
	   ROUND 5, fix 3: "we don't really use outline". A card, panel or box sits
	   on the page by its own white (or warm) surface and a soft shadow, never
	   by a stroke. Strokes stay only where they mean "this is a control you can
	   use": fields, date boxes, calendar days, the outline buttons. These two
	   shadows are the whole vocabulary, resting and lifted. */
	--sh-shadow-card: 0 1px 2px rgba(22,18,13,.05), 0 8px 24px rgba(22,18,13,.07);
	--sh-shadow-lift: 0 14px 32px rgba(22,18,13,.14);

	--wrap: 1240px;
	--wrap-pad: 28px;
	/* The wide container (/rentals/ only, where a map and a two-up card column
	   sit side by side) still needs a margin off the window edge, or the page
	   title ends up hard against the glass on a laptop. */
	--wrap-pad-wide: clamp(20px, 4vw, 60px);
}

/* Opt-in shape helpers for Elementor sections the team builds themselves. */
.sh-corner      { border-radius: var(--r-card); overflow: hidden; }
.sh-corner-sm   { border-radius: var(--r-ctl); overflow: hidden; }
/* Reach for this only if the page has no hero image of its own. */
.sh-corner-hero { border-radius: var(--r-card) var(--r-hero) var(--r-card) var(--r-card); overflow: hidden; }

/* ------------------------------------------------------------------ reset */

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

html { -webkit-text-size-adjust: 100%; }

/* Smooth anchor scrolling, but only for people who have not asked for less
   motion. Applied to the element rather than the root so an ordinary wheel or
   scrollbar drag is never animated. */
@media (prefers-reduced-motion: no-preference) {
	html:focus-within { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--cream);
	color: var(--ink);
	font-family: var(--sh-body);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

/* THE hidden ATTRIBUTE ACTUALLY HIDES THINGS.
   ------------------------------------------
   The browser's own `[hidden] { display: none }` lives in the user-agent
   stylesheet, and ANY author rule that sets `display` beats it outright,
   whatever the specificity. So a component with `display: flex` on it, such as
   .sh-activity, stayed fully visible after chrome.js had set `item.hidden =
   true` on it.

   That is the whole reason the category chips and "Show more" on the Things to
   do destination pages looked broken (Fiona, 30 Sep 2026). The filtering was
   working the entire time: 62 of the 74 cards on /things-to-do/city-fringe/
   carried the hidden attribute after a chip click, and every one of them was
   still on screen. Nothing in the JavaScript was wrong.

   !important is correct here and not a shortcut: the point of this rule is to
   be unbeatable by any component that happens to set its own display, which is
   exactly what the user-agent rule failed to do. */
[hidden] { display: none !important; }

a { color: var(--maroon); text-decoration: none; }
a:hover { text-decoration: underline; }

button { font: inherit; cursor: pointer; }

:focus-visible {
	outline: 3px solid var(--maroon);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 999;
	background: var(--maroon); color: #fff; padding: 12px 20px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* -------------------------------------------------------------- typography */

/* Display scale, matched to the owner site: The Seasons at ~50 to 52px for a
   section heading, dropping in even steps, on a tight 0.94 line-height so a
   two-line heading reads as one block. Maroon on light throughout. */
h1, h2, h3, h4 {
	font-family: var(--sh-display);
	color: var(--maroon);
	font-weight: 400;
	line-height: var(--lh-display);
	letter-spacing: -0.01em;
	margin: 0 0 0.44em;
}

/* Sized so a section heading reaches the owner site's ~52px by the time the
   window is a normal desktop, then steps down evenly: 52 / 32 / 22. */
h1 { font-size: clamp(2.5rem, 4.6vw, 3.6rem); }   /* 40 to 57.6px */
h2 { font-size: clamp(2.1rem, 4vw, 3.25rem); }    /* 33.6 to 52px  */
h3 { font-size: clamp(1.5rem, 2.5vw, 2rem); }     /* 24 to 32px    */
h4 { font-size: 1.375rem; line-height: 1.12; }    /* 22px          */

/* Elementor's frontend carries `.elementor-widget-heading
   .elementor-heading-title { line-height: 1 }`, which is (0,2,0) and beats a
   bare h1 selector, so a heading the team types in the builder came out looser
   than the identical heading rendered by the plugin. One display scale, both
   ways round. */
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title { line-height: var(--lh-display); }
.elementor-widget-heading h4.elementor-heading-title { line-height: 1.12; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.sh-eyebrow {
	font-family: var(--sh-body);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--coral);
	margin: 0 0 14px;
}

.sh-lede { font-size: 1.18rem; color: var(--ink); max-width: 62ch; }
.sh-muted { color: var(--ink-soft); }
.sh-center { text-align: center; }
.sh-center .sh-lede { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ layout */

.sh-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.sh-wrap-narrow { max-width: 860px; }
/* ROUND 4, fix 1, AND THE ONE PLACE THE HERO DOES NOT COPY THE REFERENCE.
   The Figma frame puts the heading, the search bar and all three tagline lines
   about 4.4% in from the window edge, which on a 1372px screen is 60px. The
   site's 1240px wrap puts them at 94px on the same screen, and the gap grows
   with the window: on a 1920px monitor it is 60px against 368px.

   Built both ways and kept the wrap, because the alternative breaks a rule this
   site already agreed to. "ONE left edge per page" is the note directly below
   this one, and it exists because a heading sitting 18px off the grid beneath
   it was a thing Fiona picked up in an earlier round. A hero on a 4.4% margin
   over a page on a 1240px wrap is that same fault, 34px of it, at the top of
   the home page and again on The Stayhub Difference.

   So the hero wrap is the site wrap, and this class only carries what the hero
   and the tagline genuinely share. Every element the round 4 note actually
   names (the continuous bar, the acid pill at its end, the sweep, the light
   orange band, the bolder third line) matches the reference exactly. If Fiona
   would rather have the wider margin and let the sections below sit in from it,
   it is one rule: give .sh-hero .sh-wrap and .sh-hero-tagline .sh-wrap a
   max-width of 1560px and padding of 0 clamp(20px, 4.4vw, 64px). */

/* Section rhythm. Every major section carries the SAME padding on both sides,
   so the gap between any two of them is a consistent 2 x --section-y and no
   page has to special-case its neighbours. Nothing else may add section-level
   margin on top of this: see .sh-section > :first-child below, which collapses
   the double padding that a stacked heading or band used to create. */
.sh-section { padding: var(--section-y) 0; }
.sh-section-tight { padding: calc(var(--section-y) * 0.7) 0; }
/* First page section under the header, where there is no section above to
   share the rhythm with. */
.sh-section-top { padding-top: var(--space-2xl); }
.sh-section > .sh-wrap > :first-child,
.sh-section > .sh-wrap > .sh-section-head:first-child { margin-top: 0; }
.sh-section > .sh-wrap > :last-child { margin-bottom: 0; }

/* ONE left edge per page.
   A band section puts its widgets straight into an Elementor column, and
   Elementor pads that column by 10px. Everything the plugin renders sits
   inside .sh-wrap at var(--wrap-pad) instead, which is 28px. Left alone, a
   heading typed in the builder starts 18px to the left of the grid beneath
   it: on The Stayhub Difference the page title sat outside the trust strip
   under it. Matching the two is what makes every page line up. */
.sh-section > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-left: var(--wrap-pad);
	padding-right: var(--wrap-pad);
}
.sh-band-stone  { background: var(--stone); }
.sh-band-cream  { background: var(--cream); }
.sh-band-warm   { background: var(--lorange); }
.sh-band-white  { background: var(--white); }
.sh-band-maroon { background: var(--maroon); color: #F3E9E3; }
.sh-band-maroon h1, .sh-band-maroon h2, .sh-band-maroon h3 { color: var(--lorange); }
.sh-band-coral  { background: var(--coral); color: var(--offblack); }
.sh-band-coral h2, .sh-band-coral h3 { color: var(--maroon-deep); }

/* Two prose bands of the same colour running together are one passage of copy,
   not two sections, so the seam between them collapses. Without this, a page
   built from several bands, such as The Stayhub Difference, pays the full
   section rhythm twice at every paragraph break and drifts apart. */
.sh-band-cream + .sh-band-cream,
.sh-band-stone + .sh-band-stone,
.sh-band-warm  + .sh-band-warm,
.sh-band-white + .sh-band-white { padding-top: 0; }

.sh-block-warm {
	background: var(--lorange);
	border-radius: var(--r-card);
	padding: var(--space-2xl) var(--space-xl);
}

/* The heading block. The heading's own bottom margin is dropped here, so the
   gap between a heading and its lede is one deliberate 12px rather than the
   heading margin plus the lede margin stacked, which is what made "Get
   inspired" and "Featured properties" read as two disconnected pieces. */
.sh-section-head { margin-bottom: var(--head-gap); }
.sh-section-head > :last-child { margin-bottom: 0; }
.sh-section-head h1,
.sh-section-head h2,
.sh-section-head h3 { margin-bottom: 0; }
.sh-section-head .sh-lede { margin-top: var(--space-xs); }
.sh-head-row {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: var(--space-md); flex-wrap: wrap;
}
.sh-head-row > div > :last-child { margin-bottom: 0; }

.sh-link-arrow {
	font-family: var(--sh-body);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--maroon);
	white-space: nowrap;
	border-bottom: 2px solid var(--coral);
	padding-bottom: 2px;
}
.sh-link-arrow:hover { text-decoration: none; border-bottom-color: var(--maroon); }

/* ----------------------------------------------------------------- buttons */

/* Round 2: the pill is reserved for the PRIMARY calls to action, which is the
   one shape the adopted Figma is emphatic about. Everything else takes the
   owner site's near-square button. Acid is the primary CTA everywhere (Search,
   All Properties, BOOK NOW, Confirm booking) and coral is List Your Property,
   so the pill is granted by those two variants rather than by a separate class
   nobody would remember to add. */
.sh-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	font-family: var(--sh-body); font-weight: 600; font-size: 1rem;
	padding: 15px 32px;
	border: 2px solid transparent;
	border-radius: var(--r-btn);
	cursor: pointer;
	text-align: center;
	transition: background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.sh-btn:hover { text-decoration: none; }
.sh-btn:active { transform: translateY(1px); }

.sh-btn-acid,
.sh-btn-coral { border-radius: var(--r-pill); }

.sh-btn-acid { background: var(--acid); color: var(--cta-ink); border-color: var(--acid); }
.sh-btn-acid:hover { background: var(--acid-deep); border-color: var(--acid-deep); }
.sh-btn-acid[disabled] { background: #E6E6C9; border-color: #E6E6C9; color: #8C8C7A; cursor: not-allowed; }

.sh-btn-maroon { background: var(--maroon); color: #FFF6F1; border-color: var(--maroon); }
.sh-btn-maroon:hover { background: var(--maroon-deep); border-color: var(--maroon-deep); }

.sh-btn-coral { background: var(--coral); color: var(--maroon-deep); border-color: var(--coral); }
.sh-btn-coral:hover { background: var(--coral-soft); border-color: var(--coral-soft); }

.sh-btn-ghost { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.sh-btn-ghost:hover { background: var(--maroon); color: #FFF6F1; }

.sh-btn-block { display: flex; width: 100%; }

/* ------------------------------------------------------------------ fields */

/* Dark rounded form fields, per the styleguide. */
.sh-field label,
.sh-input-group label {
	display: block;
	font-family: var(--sh-body);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-bottom: 7px;
}

/* An input with no type attribute IS a text input, and this list used to miss
   those: the checkout's name fields had no type, so they alone kept the
   browser's default square box while every field around them was branded.
   Matching on "not one of the controls that must keep its own look" catches
   them, and catches the next field somebody adds without thinking about it. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="range"]):not([type="color"]):not([type="image"]):not([type="hidden"]),
select, textarea {
	width: 100%;
	font-family: var(--sh-body);
	font-size: 1rem;
	color: var(--offblack);
	background: var(--white);
	border: 1.5px solid var(--line);
	border-radius: var(--r-card);
	padding: 13px 20px;
	appearance: none;
	-webkit-appearance: none;
	transition: border-color .16s ease, box-shadow .16s ease;
}
textarea { border-radius: var(--r-card); resize: vertical; }
input:focus, select:focus, textarea:focus {
	border-color: var(--maroon);
	box-shadow: 0 0 0 3px rgba(92, 14, 7, .12);
	outline: none;
}

select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C0E07' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12px 8px;
	padding-right: 44px;
}

/* Dark variant used inside the hero search card and the coral sign-up band.
   Note: background-COLOR, never the `background` shorthand. The shorthand
   resets background-size and background-position, which blows the chevron up
   to the full height of the field. */
.sh-fields-dark input, .sh-fields-dark select {
	background-color: #2A211C;
	border-color: #2A211C;
	color: #F6EFE9;
}
.sh-fields-dark input::placeholder { color: #B6A99F; }
.sh-fields-dark input[type="date"] { color-scheme: dark; }
.sh-fields-dark select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23F6EFE9' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
	background-size: 12px 8px;
}
/* The field INPUTS go dark, but the labels sit on whatever the surrounding
   block is. In the hero that block is the cream search card, so the labels
   stay dark and only invert on a genuinely dark or coral band. */
.sh-band-maroon .sh-fields-dark label,
.sh-signup .sh-fields-dark label { color: rgba(255,255,255,.9); }

/* ------------------------------------------------- light fields (round 3)
   Fix 2 and fix 10. Two light variants replace the dark maroon fields:

     .sh-fields-light  white, card radius. The hero search, per the Figma.
     .sh-fields-warm   light orange #FAE4D3, stadium pill, to match the
                       Subscribe button beside it. The sign-up band.

   TEXT COLOUR IN THE WARM FIELDS IS MAROON, NOT WHITE, and that is a
   deliberate departure from the brief. Fiona asked for white "if contrast
   allows", and it does not: white on #FAE4D3 is about 1.5:1, far under the
   4.5:1 that body text needs, and it would be close to unreadable for anyone
   in daylight on a phone. Maroon #5C0E07 on #FAE4D3 is about 11:1. The
   placeholder is a softened maroon rather than grey, so it still reads as one
   family with the filled value. */
.sh-fields-light input,
.sh-fields-light select,
.sh-fields-light textarea {
	background-color: var(--white);
	border-color: #E6DFD4;
	color: var(--offblack);
}
.sh-fields-light input::placeholder { color: #8C857C; }

.sh-fields-warm input,
.sh-fields-warm select,
.sh-fields-warm textarea {
	background-color: var(--lorange);
	border-color: var(--lorange);
	border-radius: var(--r-pill);
	color: var(--maroon);
	padding-left: 24px;
	padding-right: 24px;
}
.sh-fields-warm input::placeholder { color: rgba(92, 14, 7, .62); }
.sh-fields-warm input:focus,
.sh-fields-warm select:focus,
.sh-fields-warm textarea:focus {
	border-color: var(--maroon);
	background-color: #FDEFE2;
}
.sh-fields-warm select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235C0E07' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 22px center;
	background-size: 12px 8px;
}

.sh-input-group { margin-bottom: 16px; }
.sh-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.sh-note {
	font-size: 0.85rem;
	color: var(--ink-soft);
	margin-top: 10px;
}

.sh-demo-notice {
	display: flex; gap: 12px; align-items: flex-start;
	background: var(--lorange);
	border-left: 4px solid var(--coral);
	border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
	padding: 16px 20px;
	font-size: 0.95rem;
	color: var(--maroon-deep);
	margin-bottom: 24px;
}

/* ------------------------------------------------------------------ header */

.sh-header {
	position: sticky; top: 0; z-index: 60;
	background: var(--cream);
	border-bottom: 1px solid var(--line);
}
.sh-header-inner {
	display: flex; align-items: center; gap: 22px;
	min-height: 84px;
	padding: 12px var(--wrap-pad);
	max-width: var(--wrap); margin: 0 auto; width: 100%;
}

/* ------------------------------------------------------------------- logo
   The real brand asset, straight from brand-assets/logos/Logo/SVG. It is the
   full lockup, mark plus wordmark, so the theme never draws its own and never
   sets a text version beside it. Two supplied colourways, used as supplied:
   Dark Orange on light surfaces, Stone on the maroon footer. Height is the
   only thing set: width follows the file's own 410 x 85 ratio, so the
   proportions cannot drift. No filter, no recolour, no shadow. */
.sh-logo {
	display: inline-flex; align-items: center;
	flex-shrink: 0;
	line-height: 0;
	/* Clear space: the brand rules ask for room around the lockup, so the link
	   carries its own padding rather than relying on the flex gap alone. */
	padding: 4px 2px;
}
.sh-logo:hover { text-decoration: none; }
.sh-logo img {
	display: block;
	height: 34px;
	width: auto;
	max-width: none;
}

.sh-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.sh-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; }
.sh-nav a {
	font-family: var(--sh-body);
	font-size: 0.98rem;
	color: var(--offblack);
	white-space: nowrap;
}
.sh-nav a:hover { color: var(--maroon); text-decoration: none; }

.sh-nav-actions { display: flex; align-items: center; gap: 12px; }
.sh-nav-actions .sh-btn { padding: 11px 22px; font-size: 0.93rem; }
/* `.sh-nav a` is (0,1,1) and a bare `.sh-btn-acid` is only (0,1,0), so the nav
   link colour was quietly overriding both header pills and they came out in
   off-black rather than their own ink. Restated at matching specificity, so
   the header CTAs are the same two buttons as everywhere else on the site. */
.sh-nav-actions a.sh-btn-acid  { color: var(--cta-ink); }
.sh-nav-actions a.sh-btn-coral { color: var(--maroon-deep); }
.sh-nav-actions a.sh-btn-maroon,
.sh-nav-actions a.sh-btn-ghost:hover { color: #FFF6F1; }

.sh-login {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1.5px solid var(--maroon);
	color: var(--maroon);
	flex-shrink: 0;
}
.sh-login:hover { background: var(--maroon); color: #FFF6F1; text-decoration: none; }
.sh-login svg { width: 19px; height: 19px; }

.sh-nav-toggle {
	display: none;
	margin-left: auto;
	width: 46px; height: 46px;
	align-items: center; justify-content: center;
	background: var(--maroon); color: #FFF6F1;
	border: none; border-radius: var(--r-ctl);
	font-size: 1.25rem;
}

/* ------------------------------------------------------------------ footer
   ROUND 5, fix 1: the Figma "Sign up & save → footer" block, which supersedes
   round 3's light orange footer. Measured off booking-site-rebuild/examples/
   figma-signup-footer.png, a 1200px export of the 1440px frame. Its margins are
   4.4% of the frame, exactly as in the round 4 hero reference, which is how the
   1440 origin is known. Figures below are "export px (vw) -> 1440 design px".

     coral band           170 (14.2vw) -> 204 tall; 32 padding top and bottom
     heading              The Seasons, 39px (3.25vw) -> 47, WHITE
     fields               3 up, 239 x 48, 12 apart, cream #F2F0EB pills,
                          semibold maroon placeholders at 12px (1vw) -> 14.4
     Subscribe            acid pill under field one, 11 below it, 107 x 47
     stone surface        266 tall; top-right corner a quarter round of 170
                          (14.2vw) -> 204, cut out of the coral behind it
     logo                 311 x 64 (26vw wide) -> 373 x 77
     column headings      Matter semibold 13px -> 15.6, maroon
     links                Matter 13.5px -> 16.2, maroon, 40 apart -> 48
     socials              27px coral circles, 11 apart, white glyphs
     copyright / privacy  Matter 11.5px -> 13.8, 189 apart

   Every size is written as a clamp around its vw figure, so at 1200 the block
   is the export and at 1440 it is the design, and nothing grows past that.
   Horizontally the footer keeps the site's 1240 wrap rather than the frame's
   4.4% margin, the same call round 4 made for the hero ("one left edge per
   page"); the one-line change to take the frame's margin is noted there. */

.sh-footer {
	/* The whole block is coral. The stone surface below the band is what has
	   the rounded corner, so the corner reveals this coral behind it: the band
	   "wraps" the footer without anything overlapping anything. */
	background: var(--coral);
	color: var(--maroon);
	margin-top: 0;
	--sh-foot-r: clamp(72px, 14.2vw, 204px);
}

/* The band. The heading takes the left 32.2% of the content width (where the
   frame's first field starts) and the form the rest. */
.sh-signup-band { padding: clamp(28px, 2.67vw, 38px) 0; }
.sh-signup-inner {
	display: grid;
	grid-template-columns: minmax(0, 32.2%) minmax(0, 1fr);
	align-items: start;
}
/* WHITE, as the frame and the round 5 note ask. Stated plainly because it is
   the one thing here that does not meet contrast: white on #EB7B5C measures
   2.8:1, under the 3:1 AA asks even of large text. It is set in pure white
   rather than the frame's stone #F2F0EB, which would be 2.4:1, and the size
   keeps it well into "large". Maroon (4.9:1) is a one-line swap if needed. */
.sh-signup-title {
	font-size: clamp(2.1rem, 3.25vw, 2.95rem);
	line-height: 1;
	letter-spacing: 0;
	color: #FFFFFF;
	margin: clamp(4px, 0.55vw, 8px) 0 0;
	padding-right: var(--space-md);
}
.sh-signup-form {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(10px, 0.92vw, 13px) clamp(12px, 1vw, 14px);
	align-items: center;
}
.sh-signup-field { min-width: 0; }
.sh-signup-form input {
	height: clamp(48px, 4vw, 58px);
	min-height: 0;
	background-color: var(--stone);
	border: 1.5px solid var(--stone);
	border-radius: var(--r-pill);
	color: var(--maroon);
	font-weight: 600;
	font-size: clamp(12px, 1vw, 14.4px);
	padding: 0 clamp(16px, 1.42vw, 20px);
}
.sh-signup-form input::placeholder { color: var(--maroon); opacity: 1; font-weight: 600; }
.sh-signup-form input:focus {
	border-color: var(--maroon);
	background-color: #FFFFFF;
	box-shadow: 0 0 0 3px rgba(92, 14, 7, .18);
}
.sh-signup-go { grid-column: 1; }
.sh-signup-go .sh-btn {
	height: clamp(47px, 3.92vw, 56px);
	min-height: 0;
	padding: 0 clamp(22px, 1.83vw, 27px);
	font-size: clamp(13.5px, 1.15vw, 16.5px);
}
/* Maroon on coral is 4.9:1, so the small print is maroon, not white. */
.sh-signup-note,
.sh-signup-done {
	grid-column: 2 / -1;
	margin: 0;
	font-size: 0.8rem;
	line-height: 1.4;
	color: var(--maroon-deep);
}
.sh-signup-done { font-size: 0.95rem; font-weight: 600; padding-top: 10px; }

/* The stone surface, and its corner. */
.sh-footer-surface {
	background: var(--stone);
	border-top-right-radius: var(--sh-foot-r);
	padding: clamp(40px, 4.8vw, 70px) 0 clamp(26px, 2.8vw, 40px);
}
.sh-footer-grid {
	display: grid;
	/* The frame's logo plus its Navigate and Get in Touch columns, with the two
	   enriched link columns (Stays, Destinations) between them in the same
	   style. The logo column is twice a link column so the lockup can reach the
	   frame's 311px (26vw) without crowding them. */
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--space-xl) clamp(20px, 2.3vw, 32px);
	align-items: start;
}
.sh-footer-brand .sh-logo { padding: 0; margin: 2px 0 0; }
.sh-footer-brand .sh-logo img {
	width: clamp(200px, 26vw, 373px);
	max-width: 100%;
	height: auto;
}
/* Link pitch: the frame puts its links 40px apart (1200 export), 48 at 1440. */
.sh-footer-col { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 1.6vw, 24px); min-width: 0; }
.sh-footer-links-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 24px) clamp(16px, 2vw, 28px);
	width: 100%;
}
.sh-footer h3 {
	font-family: var(--sh-body);
	font-size: clamp(13px, 1.08vw, 15.6px);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--maroon);
	margin: 0;
}
/* Matter at 13.5px in the 1200 export (1.125vw), 16.2 at 1440, as the frame. */
.sh-footer-col a,
.sh-footer-meta {
	font-size: clamp(13.5px, 1.125vw, 16.2px);
	line-height: 1.4;
	color: var(--maroon);
}
.sh-footer-meta { color: #7C4834; }
.sh-footer a:hover { color: var(--maroon-deep); text-decoration: underline; text-underline-offset: 3px; }

.sh-footer-bottom {
	display: flex; justify-content: space-between; align-items: center;
	gap: var(--space-sm) var(--space-lg); flex-wrap: wrap;
	margin-top: clamp(40px, 4.3vw, 62px);
}
.sh-footer-legal {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px clamp(40px, 9vw, 130px);
	font-size: clamp(13px, 1vw, 14px);
	color: var(--maroon);
}
.sh-footer-legal a { font-size: inherit; }
.sh-socials { display: flex; gap: clamp(10px, 0.92vw, 13px); }
.sh-socials a {
	width: clamp(32px, 2.25vw, 34px); height: clamp(32px, 2.25vw, 34px);
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--coral);
	border-radius: 50%;
	color: #FFFFFF;
	transition: background .16s ease;
}
.sh-socials a:hover { background: var(--maroon); color: #FFFFFF; text-decoration: none; }
.sh-socials svg { width: 54%; height: 54%; }
.sh-footer-proto {
	margin: var(--space-md) 0 0;
	font-size: 0.78rem;
	color: var(--ink-soft);
}

/* Screen-reader-only text. WordPress core themes carry this and Elementor's
   frontend happens to as well, but the theme should not depend on either. */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

/* --------------------------------------------------------- prose (guides) */

.sh-prose { max-width: 72ch; }
.sh-prose h2 { margin-top: 1.5em; }
.sh-prose h3 { margin-top: 1.3em; }
.sh-prose ul, .sh-prose ol { padding-left: 1.2em; }
.sh-prose li { margin-bottom: 0.4em; }

.sh-breadcrumb {
	font-size: 0.88rem;
	color: var(--ink-soft);
	margin-bottom: 22px;
}
.sh-breadcrumb a { color: var(--ink-soft); }

/* --------------------------------------------------------------- utilities */

.sh-page-pad { padding: var(--space-2xl) 0 var(--section-y); }
.sh-empty {
	text-align: center;
	background: var(--white);
	border-radius: var(--r-card);
	box-shadow: var(--sh-shadow-card);
	padding: var(--space-2xl) var(--space-md);
}
.sh-skeleton {
	background: linear-gradient(90deg, #EDE9E1 25%, #F5F2EC 37%, #EDE9E1 63%);
	background-size: 400% 100%;
	animation: sh-shimmer 1.3s ease infinite;
	border-radius: var(--r-card);
}
@keyframes sh-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ================================================================= MOBILE */

/* The spacing scale steps down at each breakpoint from ONE place, so nothing
   downstream has to restate a padding. --r-card and the control radii do not
   change with width: a 12px corner is a 12px corner on a phone (#191). */
@media (max-width: 1080px) {
	:root {
		--section-y: 56px;   /* 112px between sections */
		--head-gap: 40px;
		--sh-gap-row: 40px;
		--r-hero: 132px;
		--r-hero-sweep: 168px;
		--r-hover: 44px;
	}
	/* The logo takes its own row and the four link columns sit under it. */
	.sh-footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
	.sh-footer-brand { grid-column: 1 / -1; }
	.sh-footer-col a, .sh-footer-meta { font-size: 15px; }
	.sh-footer h3 { font-size: 15px; }
	/* The band's heading goes over the fields rather than beside them. */
	.sh-signup-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
	.sh-signup-title { margin-top: 0; }
}

@media (max-width: 900px) {
	.sh-nav {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--cream);
		border-bottom: 1px solid var(--line);
		padding: 12px 20px 22px;
		box-shadow: 0 18px 32px rgba(22,18,13,.10);
	}
	.sh-nav.open { display: flex; }
	.sh-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
	.sh-nav ul li { border-bottom: 1px solid var(--line); }
	.sh-nav ul a { display: block; padding: 15px 4px; font-size: 1.05rem; }
	.sh-nav-actions { flex-direction: column; align-items: stretch; gap: 12px; margin-top: 18px; }
	.sh-nav-actions .sh-btn { width: 100%; padding: 15px 22px; font-size: 1rem; }
	/* Full-width Guest login sits with the secondary controls, so it takes the
	   secondary button shape rather than the primary CTA pill. */
	.sh-login { width: 100%; border-radius: var(--r-btn); gap: 10px; }
	.sh-login::after { content: "Guest login"; font-family: var(--sh-body); font-size: 1rem; font-weight: 600; }
	.sh-nav-toggle { display: inline-flex; }
	.sh-header-inner { position: relative; min-height: 70px; padding: 10px var(--wrap-pad); }
	.sh-logo img { height: 30px; }
}

@media (max-width: 760px) {
	:root {
		--section-y: 40px;   /* 80px between sections */
		--head-gap: 30px;
		--sh-gap: 20px;
		--sh-gap-row: 32px;
		--wrap-pad: 20px;
		--r-hero: 84px;
		--r-hero-sweep: 96px;
		--r-hover: 32px;
	}
	body { font-size: 17px; }
	.sh-block-warm { padding: var(--space-lg) var(--space-md); }
	.sh-form-row { grid-template-columns: 1fr; }
	.sh-head-row { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
	/* On a phone: the band stacks (fields full width, then Subscribe full
	   width, 50px tap targets), the corner comes down to 72px, the link
	   columns go two across, and the bottom row stacks with the socials
	   first under the links. */
	.sh-signup-band { padding: var(--space-xl) 0; }
	.sh-signup-form { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sh-signup-form input { height: 52px; font-size: 16px; }
	.sh-signup-go .sh-btn { width: 100%; height: 52px; font-size: 1rem; }
	.sh-signup-note, .sh-signup-done { grid-column: 1; }
	.sh-footer-surface { padding: var(--space-2xl) 0 var(--space-lg); }
	.sh-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-md); }
	/* Navigate and Get in Touch share the first row (the frame's own two
	   columns), then Stays and Destinations run full width, each with its
	   links two across, so no column sits alone beside an empty half. */
	.sh-footer-col-touch { order: 1; }
	.sh-footer-col-wide  { order: 2; grid-column: 1 / -1; }
	.sh-footer-col-dest  {
		order: 3; grid-column: 1 / -1;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
	}
	.sh-footer-col-dest h3 { grid-column: 1 / -1; }
	.sh-footer-col, .sh-footer-links-2 { gap: 0 var(--space-md); }
	.sh-footer-col a, .sh-footer-meta { font-size: 16px; }
	.sh-footer h3 { font-size: 16px; margin-bottom: 4px; }
	.sh-footer-meta { padding-top: 10px; }
	/* Each link is a 44px row on a phone: comfortable to hit, and the long
	   columns stay the same visual rhythm as the frame. */
	.sh-footer-col a { display: inline-flex; align-items: center; min-height: 44px; padding: 5px 0; }
	.sh-footer-bottom { flex-direction: column-reverse; align-items: flex-start; gap: var(--space-md); }
	.sh-footer-legal { gap: 8px 32px; }
	.sh-socials a { width: 44px; height: 44px; }
	.sh-empty { padding: var(--space-xl) var(--space-md); }
	/* Tap targets stay at or above 44px on every control. */
	.sh-btn { padding: 15px 26px; min-height: 50px; }
	input, select, textarea { min-height: 50px; font-size: 16px; }
}

@media (max-width: 420px) {
	.sh-footer-grid { column-gap: var(--space-sm); }
}