/* =========================================================================
   FAREEDAS Hero Slider
   Reuses the theme's .fareedas-hero* design tokens; adds slide/fade behaviour,
   arrows and dots. Fully responsive.
   ========================================================================= */

.fhs-slider {
	position: relative;
}

/* Consistent, slightly shorter hero height (overrides the theme's 88vh) and
   full-bleed across the viewport regardless of any parent container padding
   (fixes side gaps on smaller devices). body has overflow-x:clip so the
   100vw breakout never creates horizontal scroll. */
.fareedas-hero.fhs-slider {
	height: 78vh;
	min-height: 540px;
	max-height: 820px;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.fhs-track {
	position: relative;
	height: 100%;
	width: 100%;
}

/* Slides stack and cross-fade */
.fhs-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	z-index: 1;
}
.fhs-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

/* The first slide is in flow (keeps layout height before JS runs / no-JS
   fallback) and must fill the slider so its background image isn't clipped. */
.fhs-slider .fhs-slide:first-child {
	position: relative;
	height: 100%;
}

/* Animate the copy in when a slide becomes active */
.fhs-slide .fareedas-hero-copy {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease 0.15s, transform 0.7s ease 0.15s;
}
.fhs-slide.is-active .fareedas-hero-copy {
	opacity: 1;
	transform: translateY(0);
}

/* Buttons: keep labels on one line + a touch more padding */
.fhs-slide .fareedas-hero-actions .fareedas-btn {
	white-space: nowrap;
	padding: 0.95rem 2rem;
}

/* Text alignment options */
.fhs-slide.fhs-align-center .fareedas-hero-inner { justify-content: center; text-align: center; }
.fhs-slide.fhs-align-center .fareedas-hero-copy { margin-inline: auto; }
.fhs-slide.fhs-align-center .fareedas-hero-actions { justify-content: center; }
.fhs-slide.fhs-align-right .fareedas-hero-inner { justify-content: flex-end; text-align: right; }
.fhs-slide.fhs-align-right .fareedas-hero-actions { justify-content: flex-end; }

/* Stronger gradient for centred/right text so copy stays readable */
.fhs-slide.fhs-align-center .fareedas-hero-overlay {
	background: linear-gradient(to top, rgba(26, 30, 46, 0.6), rgba(26, 30, 46, 0.25) 55%, rgba(26, 30, 46, 0.4));
}
.fhs-slide.fhs-align-right .fareedas-hero-overlay {
	background: linear-gradient(to left, rgba(26, 30, 46, 0.55), rgba(26, 30, 46, 0.2) 50%, transparent);
}

/* ---- Arrows ---- */
.fhs-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--fa-fg, #1a1e2e);
	cursor: pointer;
	box-shadow: 0 6px 18px -6px rgba(26, 30, 46, 0.45);
	transition: background 0.2s ease, transform 0.2s ease;
	padding: 12px;
}
.fhs-arrow:hover { background: #fff; }
.fhs-arrow:focus-visible { outline: 2px solid var(--fa-primary, #1e3a8a); outline-offset: 2px; }
.fhs-arrow:active { transform: translateY(-50%) scale(0.94); }

/* Render the arrow icons as background images (reliable inside the flex button). */
.fhs-arrow .fhs-arrow-icon { display: none; }
.fhs-arrow::before {
	content: "";
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.fhs-prev::before { background-image: url(../images/arrow-left.svg); }
.fhs-next::before { background-image: url(../images/arrow-right.svg); }
.fhs-prev { left: 1.5rem; }
.fhs-next { right: 1.5rem; }

/* ---- Dots ---- */
.fhs-dots {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 5;
	display: flex;
	gap: 0.5rem;
}
.fhs-dot {
	height: 8px;
	width: 8px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: width 0.3s ease, background 0.3s ease;
}
.fhs-dot.is-active {
	width: 26px;
	background: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
	.fareedas-hero.fhs-slider { height: 70vh; min-height: 460px; }
	.fhs-arrow { height: 2.5rem; width: 2.5rem; }
	.fhs-prev { left: 0.75rem; }
	.fhs-next { right: 0.75rem; }
}

@media (max-width: 767px) {
	.fareedas-hero.fhs-slider { height: auto; min-height: 0; }
	/* On phones, stack copy below a fixed-ratio image for readability */
	.fhs-slide { min-height: 78vh; }
	.fhs-slide .fareedas-hero-img { object-position: center 18%; }
	.fhs-slide .fareedas-hero-overlay {
		background: linear-gradient(to top, rgba(26, 30, 46, 0.75), rgba(26, 30, 46, 0.25) 60%, rgba(26, 30, 46, 0.35));
	}
	.fhs-slide .fareedas-hero-inner { align-items: flex-end; padding-bottom: 4.5rem; }
	.fhs-slide .fareedas-hero-copy { max-width: 100%; }
	.fhs-slide.fhs-align-right .fareedas-hero-inner,
	.fhs-slide.fhs-align-center .fareedas-hero-inner { justify-content: flex-start; text-align: left; }
	.fhs-slide.fhs-align-right .fareedas-hero-actions,
	.fhs-slide.fhs-align-center .fareedas-hero-actions { justify-content: flex-start; }
	.fhs-arrow { display: none; }
	.fhs-dots { bottom: 1rem; }
	.fareedas-hero-actions .fareedas-btn { flex: 1 1 auto; justify-content: center; }
}

/* Respect reduced motion: no fade/slide animation */
@media (prefers-reduced-motion: reduce) {
	.fhs-slide,
	.fhs-slide .fareedas-hero-copy {
		transition: none;
	}
}