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

/*
 * 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 now lives in a single <h1>
 * ("Boutique Hotels in Cape Town & Johannesburg") for SEO. The location is a
 * styled span so it keeps the original serif second-line treatment. Font sizes
 * match the previous separate heading at each breakpoint (desktop 48, tablet &
 * mobile 32); the H1's own uppercase Gotham styling drives the first line.
 */
.hsh-hero-sub {
	display: block;
	margin-top: 0.18em;
	font-family: "Instrument Serif", 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) {
	.hsh-hero-sub {
		font-size: 32px;
	}
}

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