/* Moonlight Companies site overrides (child of Hello Elementor, GPL-3.0-or-later).
   Hand-written CSS loaded on every page after the plugin and theme CSS.
   Sections: home deck, floating images, FAQ, news story, product, header, fonts.
   The relative ../../uploads font URLs are deliberate (local static copy). */


/* ---------- HOME: full-page scroll-snap deck ----------
   On desktop the home page (.elementor-16) is a deck: one 100vh panel per
   top-level section, snapping on scroll. At <=1024px it falls back to normal
   page scroll (see the @media block near the end). The !importants override
   Elementor's per-post panel heights. */
.elementor.elementor-16 {
	height: 100vh !important;
	max-height: 100vh !important;

	overflow-y: auto !important;
	overflow-x: hidden !important;

	scroll-snap-type: y mandatory;

	/* Hide scrollbar */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.elementor.elementor-16::-webkit-scrollbar {
	display: none;
	width: 0;
}

/* Every full-screen section */
.elementor.elementor-16 > .elementor-section,
.elementor.elementor-16 > .e-con {
	width: 100% !important;
	max-width: 100% !important;
	height: 100vh !important;
	min-height: 100vh !important;
	max-height: 100vh !important;

	scroll-snap-align: start;
	scroll-snap-stop: always;

	overflow: hidden;
}

/* Footer: keep it stacked above the preceding content (it sits beside the deck, not inside it) */
footer.elementor-location-footer {
	position: relative;
	z-index: 2;
}


/* Hide scrollbars (all pages) */
html {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

html::-webkit-scrollbar {
	display: none;
}

body {
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body::-webkit-scrollbar {
	display: none;
}


/* ---------- HOME: floating images ----------
   Same gentle bob on all three; the delays keep them out of phase. */
.moonlight-float img {
	animation: moonlightFloat 4s ease-in-out infinite;
}

.moonlight-float-2 img {
	animation: moonlightFloat 4s ease-in-out infinite;
	animation-delay: 1.3s;
}

.moonlight-float-3 img {
	animation: moonlightFloat 4s ease-in-out infinite;
	animation-delay: 2.6s;
}

@keyframes moonlightFloat {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-12px);
	}

	100% {
		transform: translateY(0);
	}
}

/* Home hero "Rock On" scroll caret: gentle 6px bob. Only index.html and home/ render this SVG. */
.e-font-icon-svg.e-fas-caret-down {
	animation: rockOnFloat 2.5s ease-in-out infinite !important;
	will-change: transform;
}

@keyframes rockOnFloat {
	0% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-6px);
	}

	100% {
		transform: translateY(0);
	}
}


/* ---------- FAQ page ---------- */

/* Big Q / A letters in the accordion titles and answer panels */
.QA-letter {
	font-family: 'Komu', sans-serif;
	font-size: 48px;
	line-height: 1em;
	letter-spacing: 0.02em;
	color: #FFF;
	text-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
	margin-right: 10px;
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	.QA-letter {
		font-size: 26px !important;
		margin-right: 5px;
	}
}

/* Laptop */
@media screen and (min-width: 1025px) and (max-width: 1599px) {
	.QA-letter {
		font-size: 32px !important;
		margin-right: 5px;
	}
}

/* Mobile */
@media screen and (max-width: 767px) {
	.QA-letter {
		font-size: 22px !important;
		margin-right: 5px;
	}
}

/* FAQ page accordion: white dividers between items */
.dh-faq .e-n-accordion .e-n-accordion-item {
	border-top: 2px solid #FFF;
	overflow: hidden;
}

.dh-faq .e-n-accordion .e-n-accordion-item:last-child {
	border-bottom: 2px solid #FFF !important;
}


/* ---------- NEWS articles ---------- */

.funnel-text{
	font-family: Funnel Display;
	font-size: 40px;
	line-height: 56px;
	font-weight: 400;
	margin-top: 60px;
	margin-bottom: 60px;
}

/* Laptop */
@media (min-width: 1025px) and (max-width: 1600px) {
	.funnel-text {
		font-size: 24px !important;
		line-height: 1.5em !important;
	}
}

/* Tablet: 768px - 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
	.funnel-text {
		font-size: 21px !important;
		line-height: 1.5em !important;
		margin-top: 40px;
		margin-bottom: 40px;
	}
}

/* Mobile: 0px - 767px */
@media (max-width: 767px) {
	.funnel-text {
		font-size: 17px !important;
		line-height: 1.5em !important;
		margin-top: 30px;
		margin-bottom: 30px;
	}
}



/* ---------- NEWS listing ---------- */

/* Shown by js/news-filter.js when a category has no stories */
.news-filter-empty {
	color: #FFF;
	text-align: center;
	padding: 40px 0;
}

/* ---------- PRODUCT page: image sizing at 500px - 750px ---------- */
@media (min-width: 500px) and (max-width: 750px) {
	.elementor-459 .elementor-element.elementor-element-40d07fc img {
		width: 50%;
	}

	.elementor-459 .elementor-element.elementor-element-153de01 {
		top: 220px;
	}
}


/* ---------- Header ---------- */

.attachment-full.size-full.wp-image-830 {
	transition: opacity 0.5s ease, transform 0.5s ease !important;
}

header.elementor-location-header,
.elementor-location-header {
	transition:
		transform 0.4s ease,
		opacity 0.4s ease !important;
}


/* ---------- HOME: deck tweaks ---------- */

/* Tighter grid gaps on phones (393px is the iPhone 14 Pro width) */
@media (max-width: 767px) {
	.elementor-16 .elementor-element-5b76f49 {
		row-gap: 40px !important;
		column-gap: 20px !important;
	}
}

@media (max-width: 393px) {
	.elementor-16 .elementor-element-5b76f49 {
		row-gap: 20px !important;
		column-gap: 20px !important;
	}
}

@media (max-width: 1024px) {
	/* Normal page scroll, no full height deck */
	.elementor.elementor-16 {
		height: auto !important;
		max-height: none !important;
		overflow-y: visible !important;
		scroll-snap-type: none !important;
	}

	.elementor.elementor-16 > .elementor-section,
	.elementor.elementor-16 > .e-con {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
		scroll-snap-align: none !important;
		scroll-snap-stop: normal !important;
		overflow: visible;

		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
}


/* ---------- HOME: hero video poster ----------
   The video's true first frame (Moonlight-Hero-Poster-1920.webp, 640w on phones) sits behind the video, so
   nothing jumps when it starts and it stays visible when the video is skipped (Save-Data, reduced motion).
   post-16.css paints it on the container for the pre-JS paint and for phones/tablets; above 1024px the deck
   script makes the panel background transparent, so it is also set on the video's own container, which
   it never touches. Same crop as the video (cover, centred). Both pages preload the two sizes. */
.elementor-16 .elementor-element-7157684 > .elementor-background-video-container {
	background: url("../../uploads/2026/09/Moonlight-Hero-Poster-1920.webp") 50% 50% / cover no-repeat;
}

@media (max-width: 767px) {
	.elementor-16 .elementor-element.elementor-element-7157684:not(.elementor-motion-effects-element-type-background),
	.elementor-16 .elementor-element.elementor-element-7157684 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
		background-image: url("../../uploads/2026/09/Moonlight-Hero-Poster-640.webp");
	}

	.elementor-16 .elementor-element-7157684 > .elementor-background-video-container {
		background-image: url("../../uploads/2026/09/Moonlight-Hero-Poster-640.webp");
	}
}


/* ---------- Cloud overlays on phones ----------
   The soft cloud layers (::before of the Elementor containers listed below) are 1920-2250px wide in post-*.css.
   Phones get 828w (480w for 1x screens) of the same image, scaled by the same background-size, so nothing moves.
   The two containers whose background-size is "auto" (natural size, repeated) keep the full-size box. */
@media (max-width: 767px) {
	html .elementor-16 .elementor-element.elementor-element-f69ccfc::before,
	html .elementor-16 .elementor-element.elementor-element-f222687::before,
	html .elementor-16 .elementor-element.elementor-element-8bc1bda::before,
	html .elementor-16 .elementor-element.elementor-element-3917705::before,
	html .elementor-16 .elementor-element.elementor-element-0783e60::before,
	html .elementor-16 .elementor-element.elementor-element-e12d98d::before,
	html .elementor-16 .elementor-element.elementor-element-c516d3e::before,
	html .elementor-1113 .elementor-element.elementor-element-6c75960::before,
	html .elementor-2158 .elementor-element.elementor-element-e0be647::before,
	html .elementor-2158 .elementor-element.elementor-element-25faa78::before,
	html .elementor-459 .elementor-element.elementor-element-d3e01c1::before {
		background-image: url("../../uploads/2026/09/Clouds_A-7-scaled-828w.webp");
	}

	html .elementor-1567 .elementor-element.elementor-element-caabed8::before,
	html .elementor-837 .elementor-element.elementor-element-4c7d213::before {
		background-image: url("../../uploads/2026/09/Clouds_A-2-scaled-828w.webp");
	}

	html .elementor-459 .elementor-element.elementor-element-3a4fd3b::before,
	html .elementor-459 .elementor-element.elementor-element-d27e6c6::before,
	html .elementor-459 .elementor-element.elementor-element-48dd28f::before,
	html .elementor-459 .elementor-element.elementor-element-ca2cce0::before {
		background-image: url("../../uploads/2026/09/cloud-fixed-1-828w.webp");
	}

	/* "auto" size layers keep the 2250px natural box (A-7 is 2250x1266) */
	html .elementor-16 .elementor-element.elementor-element-0783e60::before,
	html .elementor-459 .elementor-element.elementor-element-d3e01c1::before {
		background-size: 2250px 1266px;
	}
}

@media (max-width: 767px) and (max-resolution: 1.5dppx) {
	html .elementor-16 .elementor-element.elementor-element-f69ccfc::before,
	html .elementor-16 .elementor-element.elementor-element-f222687::before,
	html .elementor-16 .elementor-element.elementor-element-8bc1bda::before,
	html .elementor-16 .elementor-element.elementor-element-3917705::before,
	html .elementor-16 .elementor-element.elementor-element-0783e60::before,
	html .elementor-16 .elementor-element.elementor-element-e12d98d::before,
	html .elementor-16 .elementor-element.elementor-element-c516d3e::before,
	html .elementor-1113 .elementor-element.elementor-element-6c75960::before,
	html .elementor-2158 .elementor-element.elementor-element-e0be647::before,
	html .elementor-2158 .elementor-element.elementor-element-25faa78::before,
	html .elementor-459 .elementor-element.elementor-element-d3e01c1::before {
		background-image: url("../../uploads/2026/09/Clouds_A-7-scaled-480w.webp");
	}

	html .elementor-1567 .elementor-element.elementor-element-caabed8::before,
	html .elementor-837 .elementor-element.elementor-element-4c7d213::before {
		background-image: url("../../uploads/2026/09/Clouds_A-2-scaled-480w.webp");
	}

	html .elementor-459 .elementor-element.elementor-element-3a4fd3b::before,
	html .elementor-459 .elementor-element.elementor-element-d27e6c6::before,
	html .elementor-459 .elementor-element.elementor-element-48dd28f::before,
	html .elementor-459 .elementor-element.elementor-element-ca2cce0::before {
		background-image: url("../../uploads/2026/09/cloud-fixed-1-480w.webp");
	}

}


/* ---------- Fonts ----------
   Funnel Display is declared here for every page. Gotham and Komu come from
   the inline custom-fonts <style> and the Elementor post CSS. */
@font-face {
    font-family: 'Funnel Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../../uploads/2026/09/FunnelDisplay-Medium.ttf') format('truetype');
}

@font-face {
    font-family: 'Funnel Display';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../uploads/2026/09/funnel-display-600.ttf') format('truetype');
}

@font-face {
    font-family: 'Funnel Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../uploads/2026/09/FunnelDisplay-Bold.ttf') format('truetype');
}

.elementor-16 .elementor-widget-heading .elementor-heading-title {
    word-spacing: 4px;
}