/*
Neslo Tours and Safaris — site-wide background video system
Ported from the Lumoni Spa & Wellness theme (assets/css/main.css, the
.site-bg-video-wrap / .glass rules) and re-tuned to Neslo's gold/ivory
palette instead of Lumoni's green/cream one. Loads on every page — see
inc/chanua-enqueue.php.
*/

/* ---------- Body background swap ----------
   An opaque body background paints over a fixed, negative z-index layer,
   so it must go transparent whenever the site-wide background is active. */
body.has-bg-video {
	background: transparent;
}

/* ---------- Fixed background video/image (covers nav through footer) ----
   Lazy-loaded: the video has no <source> until JS attaches it (skipped
   entirely for prefers-reduced-motion / Data Saver). The poster shows
   immediately; the video crossfades in once .is-ready is added by JS on
   "playing" — not "canplay", which can fire before autoplay is actually
   resolved and would reveal a frozen first frame instead. */
.site-bg-video-wrap {
	position: fixed;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: var(--cs-champagne, #f4ead1);
	/* position:fixed + a negative z-index is unreliable on mobile Safari/
	   Chrome without its own compositing layer — the element can get
	   flattened out and end up invisible behind the page's base
	   background. Forcing a dedicated GPU layer fixes that on mobile
	   without changing anything on desktop. */
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}
.site-bg-video,
.site-bg-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	/* intentionally no filter/blur here — the footage stays sharp */
}
.site-bg-video {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	z-index: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.site-bg-video-poster { z-index: 1; opacity: 1; transition: opacity 0.4s ease; }
.site-bg-video-wrap.is-ready .site-bg-video { opacity: 1; }
.site-bg-video-wrap.is-ready .site-bg-video-poster { opacity: 0; }

.site-bg-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.site-bg-overlay--none   { background: transparent; }
.site-bg-overlay--light  { background: rgba(36,29,15,0.18); }  /* --cs-ink at low alpha */
.site-bg-overlay--medium { background: rgba(36,29,15,0.36); }
.site-bg-overlay--dark   { background: rgba(36,29,15,0.55); }

/* Video plays at all screen sizes, including mobile — this class (name
   kept for parity with the Lumoni source) applies only when the visitor
   has prefers-reduced-motion or Data Saver on. JS skips the video
   entirely in either case and the poster stays up as a still frame. */
.site-bg-video-wrap.is-mobile .site-bg-video { opacity: 0; }
.site-bg-video-wrap.is-mobile .site-bg-video-poster { opacity: 1; }

/* ---------- Glass utility ----------
   Translucent ivory panel + hairline gold-tinted border + real backdrop
   blur, so content sitting on top of the moving background stays legible
   without hiding it completely. */
.cs-glass {
	position: relative;
	background: rgba(255,255,255,0.72);
	-webkit-backdrop-filter: blur(18px) saturate(1.15);
	backdrop-filter: blur(18px) saturate(1.15);
	border: 1px solid rgba(201,162,39,0.22);
	box-shadow: 0 8px 30px rgba(36,29,15,0.12);
}
.cs-glass--dark {
	background: rgba(36,29,15,0.55);
	-webkit-backdrop-filter: blur(18px) saturate(1.1);
	backdrop-filter: blur(18px) saturate(1.1);
	border: 1px solid rgba(240,225,190,0.18);
	box-shadow: 0 8px 30px rgba(15,12,6,0.25);
	color: #f4ead1;
}
.cs-glass--dark .cs-footer__tag,
.cs-glass--dark .cs-nav__word,
.cs-glass--dark a { color: inherit; }

/* Engines without backdrop-filter (older Safari/iOS) get a much more
   opaque surface instead — less pretty, still legible, the right trade. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.cs-glass { background: rgba(255,255,255,0.94); }
	.cs-glass--dark { background: rgba(36,29,15,0.92); }
}

/* ---------- Interior page shell ----------
   Used by page.php / single.php / archive.php / index.php — the generic
   templates that previously had no styling of their own to sit on top of
   a background video. */
.cs-generic-page {
	min-height: 60vh;
	padding-top: clamp(120px, 14vw, 160px);
	padding-bottom: clamp(70px, 9vw, 110px);
}
.cs-page-header {
	max-width: 760px;
	margin: 0 auto clamp(36px, 5vw, 56px);
	text-align: center;
}
.cs-page-header .cs-kick { justify-content: center; }
.cs-generic-page__card {
	max-width: 900px;
	margin: 0 auto;
	padding: clamp(28px, 4vw, 48px);
	border-radius: 6px;
}
body:not(.has-bg-video) .cs-generic-page { background: var(--cs-ivory, #fbf6ea); }
body.has-bg-video .cs-generic-page__card,
body.has-bg-video .cs-footer { color: var(--cs-ink); }
body.has-bg-video .cs-generic-page__card.cs-glass { color: var(--cs-ink); }

/* Archive listing cards reuse the same glass treatment individually. */
.cs-archive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px; max-width: var(--cs-max, 1320px); margin: 0 auto; }
.cs-archive-card { padding: 22px; border-radius: 6px; }
.cs-archive-card h2 { font-family: var(--cs-display); font-size: 1.25rem; font-weight: 500; margin: 0 0 8px; }
.cs-archive-card p { color: var(--cs-ink-soft); font-size: .95rem; line-height: 1.6; }
body:not(.has-bg-video) .cs-archive-card { background: #fff; border: 1px solid var(--cs-hair); }

/* ---------- Site footer ----------
   Neslo previously had no persistent footer at all. */
.cs-footer { background: var(--cs-champagne, #f4ead1); color: var(--cs-ink); padding: clamp(46px, 6vw, 70px) 0 0; }
.cs-footer__in { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(30px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 56px); }
.cs-footer__brand .cs-nav__mark { color: var(--cs-gold-deep, #a3771f); margin-bottom: 12px; }
.cs-footer__tag { color: var(--cs-ink-soft); font-size: .92rem; max-width: 32ch; }
.cs-footer__col h4 { font-family: var(--cs-display); font-weight: 500; font-size: 1rem; margin: 0 0 14px; }
.cs-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.cs-footer__col a { font-size: .92rem; opacity: .82; transition: opacity .25s ease; }
.cs-footer__col a:hover { opacity: 1; }
.cs-footer__bottom { border-top: 1px solid var(--cs-hair); padding: 18px 0; }
.cs-footer__bottom p { margin: 0; font-size: .8rem; color: var(--cs-ink-faint); text-align: center; }
body.has-bg-video .cs-footer.cs-glass--dark .cs-footer__bottom { border-top-color: rgba(240,225,190,0.18); }
body.has-bg-video .cs-footer.cs-glass--dark .cs-footer__bottom p { color: rgba(240,225,190,0.6); }
body.has-bg-video .cs-footer.cs-glass--dark .cs-footer__tag { color: rgba(240,225,190,0.75); }

@media (max-width: 720px) {
	.cs-footer__in { grid-template-columns: 1fr; }
}

/* ---------- Interior-page nav (no scroll-triggered JS there) ----------
   .cs-nav.is-scrolled is rendered server-side on every non-front-page
   view (see template-parts/chanua-nav.php) since chanua-scroll.js — the
   only thing that otherwise toggles that class — is scoped to the front
   page only. The working mobile-menu dropdown (burger → panel) now lives
   entirely in chanua-home.css since that stylesheet loads site-wide;
   an older, conflicting copy of those same rules used to live here too
   and fought with it at the same specificity — removed. */