/**
 * ASD Costa Rica — Hero slider styles.
 * Overrides on top of Swiper's default styles to match ASD brand palette.
 */

/* Offset the fixed .site-header (160px brand + 64px nav = 224px) for any
   Elementor page wrapped by front-page.php / page.php. Defined here so this
   file alone carries the layout fix, independent of theme.css. */
.elementor-full-width {
	margin-top: 224px;
	transition: margin-top 0.35s cubic-bezier(.4,0,.2,1);
}

.header-scrolled .elementor-full-width {
	margin-top: 64px;
}

.asd-hero-slider {
	width: 100%;
	overflow: hidden;
	position: relative;
	z-index: 0;
}

/* ── Inner Elementor pages — constrain content width ──────────────────────────
   When an Elementor page is NOT the home, every top-level container that ISN'T
   the page banner gets a max-width so paragraphs don't span the full viewport.
   The banner keeps its full-width gradient because we exclude #asdcr-page-banner. */
body.elementor-page:not(.home) main#main > .elementor-full-width > .elementor > [data-element_type="container"]:not(#asdcr-page-banner) {
	max-width: 1140px;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Make all slides equal-height (height of the tallest one) so transitions
   don't jump. flex-direction:row on the wrapper does this automatically;
   we just ensure each slide stretches its inner Elementor container full height. */
.asd-hero-slider .swiper-slide {
	height: auto;
	display: flex;
}

.asd-hero-slider .swiper-slide > [data-element_type="container"] {
	width: 100%;
	flex: 1 1 auto;
}

/* Navigation arrows — ASD amber on transparent disc */
.asd-hero-slider .swiper-button-prev,
.asd-hero-slider .swiper-button-next {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	border: 1px solid rgba(255, 255, 255, 0.35);
	transition: background 0.2s ease, transform 0.2s ease;
	top: 50%;
	margin-top: -24px;
}

.asd-hero-slider .swiper-button-prev:hover,
.asd-hero-slider .swiper-button-next:hover {
	background: rgba(232, 160, 32, 0.85);
	transform: scale(1.05);
}

.asd-hero-slider .swiper-button-prev::after,
.asd-hero-slider .swiper-button-next::after {
	font-size: 18px;
	color: #fff;
	font-weight: 800;
}

.asd-hero-slider .swiper-button-prev {
	left: 24px;
}

.asd-hero-slider .swiper-button-next {
	right: 24px;
}

@media (max-width: 767px) {
	.asd-hero-slider .swiper-button-prev,
	.asd-hero-slider .swiper-button-next {
		width: 36px;
		height: 36px;
		margin-top: -18px;
	}
	.asd-hero-slider .swiper-button-prev { left: 10px; }
	.asd-hero-slider .swiper-button-next { right: 10px; }
	.asd-hero-slider .swiper-button-prev::after,
	.asd-hero-slider .swiper-button-next::after {
		font-size: 14px;
	}
}

/* Pagination dots */
.asd-hero-slider .swiper-pagination {
	bottom: 28px;
}

.asd-hero-slider .swiper-pagination-bullet {
	width: 12px;
	height: 12px;
	background: rgba(255, 255, 255, 0.5);
	opacity: 1;
	transition: background 0.2s ease, transform 0.2s ease;
}

.asd-hero-slider .swiper-pagination-bullet-active {
	background: #e8a020;
	transform: scale(1.2);
}