/* =========================================================================
   Sahara Dune Camp — Hero & dark-section utilities
   These classes are designed to be applied via Elementor's
   Advanced → CSS Classes field on Heading / Text Editor / Section widgets.
   ========================================================================= */

/* Section wrapper — apply to the hero Section's CSS Classes */
.sdc-hero {
	position: relative;
	color: var(--sdc-cream);
}

/* Cap the hero on extra-tall monitors so the auto-space between the
   headline block and booking widget doesn't grow absurdly large. The
   Elementor `--min-height: 88vh` still controls the floor; this just
   prevents it going taller than ~860px even on 4K screens. */
.sdc-hero {
	max-height: 880px;
}

/* Inner flow: meta sits at the top (after padding), the headline group
   tucks just under it, and the booking section is pushed to the bottom
   via margin-top: auto. Replaces the old `justify-content: space-between`
   which left huge gaps on tall viewports. */
.sdc-hero-mid {
	margin-top: clamp(20px, 4vh, 48px);
}
.sdc-hero-bot {
	margin-top: auto;
}

/* Force section content above the starfield (which sits at z-index:1) */
.sdc-hero > .elementor-container,
.sdc-hero .e-con-inner {
	position: relative;
	z-index: 2;
}

/* --- Typography hooks --- */

/* Top meta row — mono uppercase, small, light on dark */
.sdc-hero-meta {
	font-family: var(--sdc-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sdc-cream);
	opacity: 0.92;
	line-height: 1.6;
}
/* Stars in the meta row — the dune photo's top is warm sand, which lets the
   gold accent blend into the background. Switching to cream + a soft dark
   shadow keeps them readable against any photo while still feeling premium. */
.sdc-hero-meta .sdc-stars {
	color: var(--sdc-cream);
	letter-spacing: 0.05em;
	margin-right: 8px;
	text-shadow: 0 1px 3px rgba(14, 21, 48, 0.55);
}
.sdc-hero-meta .sdc-sep {
	opacity: 0.5;
	margin: 0 14px;
}

/* Eyebrow with a leading horizontal rule ("— A luxury camp in the…") */
.sdc-hero-eyebrow {
	font-family: var(--sdc-mono);
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: inherit;
	opacity: 0.85;
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.sdc-hero-eyebrow::before {
	content: "";
	display: inline-block;
	width: 32px;
	height: 1px;
	background: currentColor;
	flex-shrink: 0;
}

/* Big display headline — Marcellus, tight leading, italic accent goes gold.
   Bumped to a more aggressive clamp so the headline fills more of the hero
   vertically; combined with `.sdc-hero-bot { margin-top: auto }` this
   eats the empty space between the subtitle and the booking widget.

   Elementor's heading widget wraps the real H1 in .elementor-heading-title
   and its kit CSS sets font-family/font-weight directly on that inner
   element with specificity (0,2,0). Wrapper-level rules can lose the
   cascade. Chain `.elementor-widget-heading.sdc-hero-headline` (0,3,0)
   so our typography always wins — same pattern as .sdc-section-headline. */
.sdc-hero-headline,
.sdc-hero-headline .elementor-heading-title,
.elementor-widget-heading.sdc-hero-headline .elementor-heading-title {
	font-family: var(--sdc-serif);
	font-size: clamp(64px, 11vw, 168px);
	line-height: 0.94;
	letter-spacing: -0.025em;
	font-weight: 400;
	max-width: 12ch;
	color: inherit;
	margin: 0;
}
.sdc-hero-headline em,
.sdc-hero-headline .elementor-heading-title em,
.elementor-widget-heading.sdc-hero-headline .elementor-heading-title em {
	font-style: italic;
	/* Terra (brand red-orange) reads strongly against the warm dune photo.
	   Was --sdc-gold but that blended into the sand tones. */
	color: var(--sdc-terra);
	font-weight: inherit;
}

/* Sub-paragraph under the headline */
.sdc-hero-sub {
	font-family: var(--sdc-sans);
	font-size: clamp(16px, 1.4vw, 19px);
	max-width: 540px;
	line-height: 1.55;
	opacity: 0.94;
	color: inherit;
}

/* "Find your dates" small eyebrow above the booking widget. Bumped up the
   opacity + a soft shadow so it stays readable against the warm dune photo
   (was 0.8 cream which faded into the gold tones). */
.sdc-hero-find-dates {
	font-family: var(--sdc-mono);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--sdc-cream);
	opacity: 1;
	text-shadow: 0 1px 3px rgba(14, 21, 48, 0.55);
}

/* Generic italic-gold accent for any display heading on dark sections (CTA, etc) */
.sdc-display--accent em {
	font-style: italic;
	color: var(--sdc-gold);
	font-weight: inherit;
}

/* --- Fade-up entry animation — apply via CSS Classes on widgets --- */
@keyframes sdc-fade-up {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}
.sdc-fade-up      { animation: sdc-fade-up 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sdc-fade-up--d1  { animation-delay: 0.08s; }
.sdc-fade-up--d2  { animation-delay: 0.18s; }
.sdc-fade-up--d3  { animation-delay: 0.28s; }
.sdc-fade-up--d4  { animation-delay: 0.38s; }

/* --- Starfield overlay --- */
.sdc-starfield {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 1;
}
.sdc-starfield span {
	position: absolute;
	width: var(--sdc-star-size, 1.2px);
	height: var(--sdc-star-size, 1.2px);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
	opacity: 0.2;
	animation: sdc-twinkle var(--sdc-star-dur, 3s) ease-in-out var(--sdc-star-delay, 0s) infinite;
}
@keyframes sdc-twinkle {
	0%, 100% { opacity: 0.2; }
	50%      { opacity: 1; }
}