/*
 * Home Suite Hotels — theme.css
 *
 * Intentionally minimal. All visual design is handled in Elementor.
 *
 * IMPORTANT (Elementor v4 / Atomic CSS): do NOT add broad resets here.
 * Avoid selectors like *, html, body, div, section, ul, li, a, button or
 * form elements, and never use `all: reset` or global box-sizing overrides.
 * Such rules conflict with Elementor's scoped, atomic CSS output and with the
 * JetPlugins suite. Keep any rules narrowly scoped to this theme's own
 * classes (e.g. .site-main, .df-credit) only.
 *
 * Performance note: this file must stay tiny — it loads on every page. Any
 * substantial styling belongs in Elementor (which generates per-page CSS),
 * not here.
 *
 * The only rules below are a scoped accessibility utility for the
 * skip-to-content link (visually hidden, but visible on keyboard focus).
 * These target theme-owned classes only — never Elementor or global elements.
 */

/* Visually hidden, but available to screen readers and keyboard users. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

/* Reveal the skip link when it receives keyboard focus. */
.skip-link.screen-reader-text:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	margin: 0;
	padding: 16px 24px;
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 100000;
	display: block;
	background: #fff;
	color: #111;
	font-size: 14px;
	line-height: 1;
	text-decoration: underline;
}

/*
 * Contrast / legibility fallback for sections whose light (cream) text sits on
 * a dark background *image*. Elementor lazy-loads container background images
 * (and JS is delayed until interaction), so without a matching background
 * COLOUR behind the image the text would render on white until the image
 * arrives — illegible, and failing contrast audits (which cannot evaluate
 * image backgrounds). The colour matches the images' dark-green tone; the
 * image simply paints over it once loaded. Homepage "Why Book Direct" and
 * "Book Your Stay" bands. Add each page's equivalent section ids as the same
 * treatment is rolled out site-wide.
 */
.elementor-element-e1b331c,
.elementor-element-a721b80 {
	background-color: #29524b;
}

/*
 * Hero background-colour fallback, SITE-WIDE. Every hero paints its text
 * (cream) over a background IMAGE with a transparent background colour, so
 * until the image arrives the hero is a white void: the cream heading and nav
 * are invisible, then the whole composition "snaps into shape" when the image
 * lands — the FOUC reported on page navigation. The brand green underneath
 * makes the text legible from the very first paint; the image simply fades
 * over it. IDs: property template hero (671f470 — shared by all three
 * property pages), events (464361f), deals (01190be), properties (0f8fc08),
 * suite activities (9174ef8), contact (18164c2), blog (cbfabcc), and the home
 * hero containers per breakpoint (9b6da9f / 9c3b8f0 / f54c772) plus its inner
 * band (1c52d33).
 */
.elementor-element-671f470,
.elementor-element-464361f,
.elementor-element-01190be,
.elementor-element-0f8fc08,
.elementor-element-9174ef8,
.elementor-element-18164c2,
.elementor-element-cbfabcc,
.elementor-element-1c52d33,
.elementor-element-9b6da9f,
.elementor-element-9c3b8f0,
.elementor-element-f54c772 {
	background-color: #29524b;
}

/*
 * Mobile hero LCP image. Injected as a real <img> (see inc/performance.php) so
 * the browser paints it as soon as it decodes rather than after layout settles.
 * It fills the hero container behind the content; the slideshow layer (built on
 * interaction) sits over it showing the identical first image.
 */
.elementor-element-f54c772 {
	position: relative;
}

.hsh-hero-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.elementor-element-f54c772 > :not(.hsh-hero-img) {
	position: relative;
	z-index: 1;
}

/*
 * Home hero H1: the full primary keyword phrase lives in a single <h1> for SEO
 * ("Boutique Hotels in Cape Town & Johannesburg"). Line 1 ("Boutique Hotels")
 * uses the heading's own uppercase Gotham; the geo line "in Cape Town &
 * Johannesburg" is a <span> styled as a serif second line (matches the Figma
 * hero). Font sizes match the previous separate heading at each breakpoint
 * (desktop 48, tablet & mobile 32).
 *
 * IMPORTANT — do NOT target this by a class on the span: Elementor v4's atomic
 * heading (HTML title type) re-renders its markup on the client and STRIPS the
 * class attribute off inline tags, so `.hsh-hero-sub` is gone by the time the
 * browser paints and both lines collapse into the big uppercase H1 (they then
 * overlap). We instead target the span by its position inside the hero heading —
 * the element ids are stable, same convention as the hero image container above.
 * `.hsh-hero-sub` is kept as a harmless secondary selector for any context where
 * the class does survive.
 */
.elementor-element-8d2bd6d h1 span,
.hsh-hero-sub {
	display: block;
	margin-top: 0.18em;
	font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
	font-weight: 400;
	font-style: normal;
	text-transform: none;
	font-size: 48px;
	line-height: 1;
	letter-spacing: normal;
	color: inherit;
}

@media (max-width: 1024px) {
	.elementor-element-8d2bd6d h1 span,
	.hsh-hero-sub {
		font-size: 32px;
	}
}

/*
 * Home hero caps — never wrap on desktop.
 *
 * "BOUTIQUE HOTELS" in Gotham measures exactly the H1's 964px box (zero
 * headroom), and the metric-matched Gotham Fallback face runs ~16px wider.
 * On a first uncached view `font-display: optional` KEEPS the fallback, the
 * caps wrap to two lines, and the deliberately tight desktop line-height
 * (65px on a 96px face — tuned to tuck the serif line under a SINGLE caps
 * line) collapses the two lines into each other. A slightly wider single
 * line during the brief fallback window is imperceptible; an overlap is
 * broken. Desktop only: phones stack the caps on two lines BY DESIGN
 * (44px/44px is safe — uppercase has no descenders).
 */
@media (min-width: 1025px) {
	.elementor-element-8d2bd6d h1 strong,
	.e-122fd20-4c53a0f strong {
		white-space: nowrap;
	}
}

/*
 * Properties page — mobile card stacking.
 *
 * The three property cards (Rosebank / Station House / Sea Point) live in an
 * atomic flex row (.elementor-element-5e95b4f) that was never given a mobile
 * responsive setting, so it stayed `flex-direction: row` on phones: cards 2 and
 * 3 overflowed off-screen to the right and were clipped by `overflow-x: clip`,
 * leaving only the first card visible with a large blank gap. Stack them on
 * phones so all three read in a column (matching how every other property
 * section stacks on mobile).
 */
@media (max-width: 767px) {
	.elementor-element-5e95b4f {
		flex-direction: column !important;
		flex-wrap: wrap !important;
	}

	.elementor-element-5e95b4f > .e-con {
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
	}
}

/*
 * Font-swap (FOUT) guard — metric-matched fallbacks for both brand fonts.
 *
 * Both fonts are self-hosted, preloaded, `font-display: swap` (see
 * inc/performance.php), so they are normally ready at first paint. On a slow
 * first visit a frame or two can still paint in the fallback and then swap; if
 * the fallback occupies a different width, centred text visibly lurches
 * sideways as it re-centres. "Gotham Fallback" (Arial scaled up ~11% per
 * weight) and "Instrument Serif Fallback" (Georgia scaled down to 75.2% —
 * Georgia is a third wider!) are size-adjust faces defined in
 * inc/performance.php that occupy the SAME width as the real fonts, so the
 * swap changes pixels but moves nothing. The `!important` wins on the
 * custom-property definition regardless of source order. The serif variables
 * (--Heading_font and Elementor's secondary/accent globals) are Elementor's
 * own Instrument Serif stacks, re-declared here only to splice the fallback
 * into the chain.
 */
:root {
	--Body_fonts: "Gotham", "Gotham Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	--e-global-typography-primary-font-family: "Gotham", "Gotham Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	--e-global-typography-text-font-family: "Gotham", "Gotham Fallback", Arial, "Helvetica Neue", Helvetica, sans-serif !important;
	--Heading_font: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif !important;
	--e-global-typography-secondary-font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif !important;
	--e-global-typography-accent-font-family: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif !important;
}

/*
 * Home page: the sticky nav slides away while the properties slider section
 * is underneath it (desktop only), so the arched property cards show in full.
 * `hsh-hide-nav` is toggled on <html> by theme.js; the transition lives on the
 * sticky header itself so both hide and reveal animate smoothly.
 */
.elementor-location-header .elementor-sticky--active {
	/* easeOutQuint-style curve: quick start, long gentle settle — reads as
	   "gliding" rather than "snapping" in both directions. !important because
	   Elementor's sticky-effects CSS sets its own `transition: … 0.4s ease`
	   on this element, which would otherwise replace this shorthand entirely;
	   background-color is included to keep that Elementor effect working. */
	transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, background-color 0.4s ease !important;
}

html.hsh-hide-nav .elementor-location-header .elementor-sticky--active {
	transform: translateY(-120%);
	opacity: 0;
}