/*
 * WildfireAction.org offline export — custom overrides that replace pieces
 * originally powered by Elementor PRO widgets that can never load in this
 * offline copy (their JS chunk is proprietary, not publicly distributable).
 * Pure CSS/HTML — no JS, works fully offline, always renders.
 */

/* --- Partner logos: auto-scrolling strip (replaces the PRO media-carousel) --- */
.wfa-marquee {
	overflow: hidden;
	width: 100%;
	padding: 12px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}

.wfa-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	gap: 32px;
	animation: wfa-marquee-scroll var(--wfa-speed, 40s) linear infinite;
}

.wfa-marquee:hover .wfa-marquee-track {
	animation-play-state: paused;
}

@keyframes wfa-marquee-scroll {
	from {
		transform: translateX(0);
	}
	to {
		/* track content is duplicated once, so -50% is exactly one full loop */
		transform: translateX(-50%);
	}
}

.wfa-logo-item {
	flex: 0 0 auto;
	width: 130px;
	height: 68px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.85;
	transition: opacity 0.2s ease;
}

.wfa-logo-item:hover {
	opacity: 1;
}

@media (max-width: 1024px) {
	.wfa-logo-item {
		width: 105px;
		height: 56px;
	}
}

@media (max-width: 480px) {
	.wfa-marquee-track {
		gap: 20px;
	}
	.wfa-logo-item {
		width: 88px;
		height: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wfa-marquee-track {
		animation: none;
	}
	.wfa-marquee {
		overflow-x: auto;
	}
}

/* --- "Updates and impact" post cards: strip the card box, show photo + text only --- */
.elementor-widget-posts .elementor-post__card {
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.elementor-widget-posts .elementor-post__card:hover {
	box-shadow: none;
}

.elementor-widget-posts .elementor-post__badge {
	display: none;
}

/* The exported markup is missing Elementor's "elementor-has-item-ratio" class,
   so the thumbnail <img> stays position:static instead of filling the
   padding-bottom aspect-ratio box — leaving an empty gap (looked like a gray
   stripe) below each photo. Force the image to fill the box directly. */
.elementor-widget-posts .elementor-post__thumbnail {
	position: relative;
	overflow: hidden;
}

.elementor-widget-posts .elementor-post__thumbnail img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Plain-code video replacements (no Elementor/webpack chunk involved) --- */

/* Section background video: a real <iframe> embedded directly in the HTML.
   Sections can be full-bleed (hero) or a narrower boxed width, so a fixed
   vw/vh trick can't cover both — js/wfa-bg-video.js measures each section's
   actual box and sets width/height in pixels here to crop-cover it exactly. */
.wfa-bg-iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* Inline video widget: click-to-play thumbnail (lite embed), swapped for a
   real iframe on click/keypress by js/wfa-lite-video.js. */
.wfa-lite-yt-wrap {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
	background: #000;
}

.wfa-lite-yt-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wfa-lite-yt {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-color: #000;
	cursor: pointer;
}

.wfa-lite-yt-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 68px;
	height: 48px;
	background: rgba(0, 0, 0, 0.75);
	border-radius: 12px;
	transform: translate(-50%, -50%);
	transition: background-color 0.15s ease;
}

.wfa-lite-yt-play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 56%;
	border-style: solid;
	border-width: 10px 0 10px 18px;
	border-color: transparent transparent transparent #fff;
	transform: translate(-50%, -50%);
}

.wfa-lite-yt:hover .wfa-lite-yt-play,
.wfa-lite-yt:focus-visible .wfa-lite-yt-play {
	background-color: #c00;
}