/**
 * HomeBlesh v2.4.1: hero slider polish.
 * The 3 overlapping feature cards were removed, so the slider stands alone.
 * These rules override the base .hb-hero rules in main.css.
 * Brand colors only: green, leaf, green, orange, green, ink, soft, white.
 */

.hb-hero {
	margin-bottom: 0;
}

/* Stronger shade so the headline and excerpt stay readable over bright photos. */
.hb-slide-shade {
	background: linear-gradient(to top, rgba(10, 10, 22, 0.86) 0%, rgba(10, 10, 22, 0.38) 52%, rgba(10, 10, 22, 0.10) 100%);
}

/* Brand gradient accent bar along the bottom edge of each slide. */
.hb-slide::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	background: linear-gradient(90deg, #07563d, #0b6b4c, #1d6fb8);
	z-index: 3;
	pointer-events: none;
}

/* Slow Ken Burns zoom on the active slide image only. */
.hb-slide.is-active .hb-slide-bg img {
	animation: hb-hero-kenburns 22s ease-in-out infinite alternate;
	will-change: transform;
}

@keyframes hb-hero-kenburns {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(1.09);
	}
}

/* Refined headline and excerpt: tighter leading, soft shadow for contrast. */
.hb-slide-title {
	line-height: 1.12;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);
}

.hb-slide-excerpt {
	line-height: 1.65;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* Tactile CTA: shine sweep plus glow on hover and keyboard focus. */
.hb-slide-cta .hb-btn {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 10px 24px rgba(46, 125, 91, 0.4);
}

.hb-slide-cta .hb-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -80%;
	width: 50%;
	height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
	transform: skewX(-20deg);
	opacity: 0;
	pointer-events: none;
	transition: left 0.6s ease, opacity 0.3s ease;
}

.hb-slide-cta .hb-btn:hover,
.hb-slide-cta .hb-btn:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 32px rgba(46, 125, 91, 0.5), 0 0 0 3px rgba(255, 255, 255, 0.22);
}

.hb-slide-cta .hb-btn:hover::after,
.hb-slide-cta .hb-btn:focus-visible::after {
	left: 130%;
	opacity: 1;
}

.hb-slide-cta .hb-btn:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Polished arrows: frosted background, green glow on hover and focus. */
.hb-hero-prev,
.hb-hero-next {
	background: rgba(12, 12, 22, 0.35);
	backdrop-filter: blur(4px);
	-webkit-tap-highlight-color: transparent;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.hb-hero-prev:hover,
.hb-hero-next:hover,
.hb-hero-prev:focus-visible,
.hb-hero-next:focus-visible {
	background: var(--hb-primary);
	border-color: var(--hb-primary);
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 10px 26px rgba(7, 86, 61, 0.55);
}

.hb-hero-prev:focus-visible,
.hb-hero-next:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

/* Dots sit just above the bottom edge now that the cards are gone. */
.hb-hero-dots {
	bottom: 26px;
}

.hb-hero-dots button {
	min-width: 10px;
	min-height: 10px;
	-webkit-tap-highlight-color: transparent;
}

.hb-hero-dots button.is-active {
	width: 28px;
	border-radius: 999px;
	transform: none;
}

.hb-hero-dots button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}

@media (max-width: 860px) {
	.hb-hero-prev,
	.hb-hero-next {
		width: 46px;
		height: 46px;
		/* Darker frost so the white chevron keeps a 3:1 non-text
		   ratio even over a near-white photo (0.35 alpha measured
		   2.32:1 over white; 0.55 alpha measures 4.31:1). */
		background: rgba(12, 12, 22, 0.55);
	}
}

@media (max-width: 640px) {
	/* Stronger shade behind the centered text block on small
	   screens, where the title wraps to more lines. At the old
	   52 percent stop (0.38 alpha) white text over a near-white
	   photo measured 2.55:1; at the new 45 percent stop (0.62
	   alpha) it measures 5.60:1, and the solid white excerpt
	   below replaces the 0.85 alpha white that measured 2.26:1. */
	.hb-slide-shade {
		background: linear-gradient(to top, rgba(10, 10, 22, 0.88) 0%, rgba(10, 10, 22, 0.62) 45%, rgba(10, 10, 22, 0.34) 70%, rgba(10, 10, 22, 0.12) 100%);
	}

	.hb-slide-title {
		font-size: clamp(26px, 8vw, 34px);
		line-height: 1.15;
		overflow-wrap: break-word;
	}

	.hb-slide-excerpt {
		color: #ffffff;
		overflow-wrap: break-word;
	}

	.hb-hero-dots {
		bottom: 22px;
		gap: 2px;
	}

	/* Dot hit box grows to 24px (28px on the active dot) while the
	   visible dot stays 10px (22px pill when active), drawn by the
	   pseudo-element on a transparent button. The slider can show
	   up to 10 dots: 9 x 24 + 28 + 9 x 2 gap = 262px, which fits
	   the 272px slide width at a 320px viewport; a 32px box would
	   need 338px and clip the end dots. */
	.hb-hero-dots button {
		position: relative;
		width: 24px;
		height: 24px;
		min-width: 24px;
		min-height: 24px;
		background: transparent;
	}

	.hb-hero-dots button::before {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		width: 10px;
		height: 10px;
		border-radius: 999px;
		transform: translate(-50%, -50%);
		background: rgba(255, 255, 255, 0.45);
	}

	.hb-hero-dots button.is-active {
		width: 28px;
	}

	.hb-hero-dots button.is-active::before {
		width: 22px;
		background: #ffffff;
	}

	.hb-slide-cta .hb-btn {
		min-height: 48px;
		padding: 14px 32px;
		width: 100%;
		max-width: 320px;
		/* Darker brand green on mobile: white text on the base
		   #1d6fb8 measured 3.61:1; on #3563e8 it is 5.12:1. */
		background: #3563e8;
	}
}

/* Reduced motion: no zoom, no shine, no transforms. */
@media (prefers-reduced-motion: reduce) {
	.hb-slide.is-active .hb-slide-bg img {
		animation: none;
	}

	.hb-slide-cta .hb-btn,
	.hb-slide-cta .hb-btn::after {
		transition: none;
	}

	.hb-slide-cta .hb-btn:hover,
	.hb-slide-cta .hb-btn:focus-visible {
		transform: none;
	}

	.hb-slide-cta .hb-btn::after {
		display: none;
	}

	/* Arrows keep only their resting centering transform. */
	.hb-hero-prev:hover,
	.hb-hero-next:hover,
	.hb-hero-prev:focus-visible,
	.hb-hero-next:focus-visible {
		transform: translateY(-50%);
	}

	.hb-hero-dots button {
		transition: none;
	}
}

/* ============ Dark mode (v2.4.5) ============ */
/* The slide shade is already dark in light mode; in dark mode it is
   deepened slightly so the headline stays readable over bright photos
   against the dark page around the slider. */
.hb-dark .hb-slide-shade {
	background: linear-gradient(to top, rgba(8, 8, 14, 0.92) 0%, rgba(8, 8, 14, 0.48) 52%, rgba(8, 8, 14, 0.16) 100%);
}

/* Headline and excerpt: explicit light colors so they never inherit
   a dark ink color from the page theme in dark mode. */
.hb-dark .hb-slide-title {
	color: #f4f4fa;
	text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6);
}

.hb-dark .hb-slide-excerpt {
	color: #ececf4;
	text-shadow: 0 1px 14px rgba(0, 0, 0, 0.6);
}

/* Accent bar: brand gradient stays unchanged in dark mode. */
.hb-dark .hb-slide::after {
	background: linear-gradient(90deg, #07563d, #0b6b4c, #1d6fb8);
}

/* CTA button: brand glow deepened for dark, focus ring stays white
   for contrast against the photo. Text color is left to the base
   .hb-btn rule (white on brand) and is not overridden here. */
.hb-dark .hb-slide-cta .hb-btn {
	box-shadow: 0 10px 24px rgba(46, 125, 91, 0.5);
}

.hb-dark .hb-slide-cta .hb-btn:hover,
.hb-dark .hb-slide-cta .hb-btn:focus-visible {
	box-shadow: 0 14px 32px rgba(46, 125, 91, 0.6), 0 0 0 3px rgba(255, 255, 255, 0.28);
}

.hb-dark .hb-slide-cta .hb-btn:focus-visible {
	outline-color: #ffffff;
}

/* Arrows: darker frosted surface, light icon color, green hover stays. */
.hb-dark .hb-hero-prev,
.hb-dark .hb-hero-next {
	background: rgba(27, 27, 38, 0.6);
	border-color: #2a2a3a;
	color: #ececf4;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.hb-dark .hb-hero-prev:hover,
.hb-dark .hb-hero-next:hover,
.hb-dark .hb-hero-prev:focus-visible,
.hb-dark .hb-hero-next:focus-visible {
	background: var(--hb-primary);
	border-color: var(--hb-primary);
	color: #ffffff;
	box-shadow: 0 10px 26px rgba(7, 86, 61, 0.6);
}

.hb-dark .hb-hero-prev:focus-visible,
.hb-dark .hb-hero-next:focus-visible {
	outline-color: #ffffff;
}

/* Dots: dim white when inactive, brand green when active, so they
   stay visible over the darkened slide shade. */
.hb-dark .hb-hero-dots button {
	background: rgba(255, 255, 255, 0.45);
	border-color: transparent;
}

.hb-dark .hb-hero-dots button.is-active {
	background: #07563d;
}

.hb-dark .hb-hero-dots button:focus-visible {
	outline-color: #ffffff;
}

/* ============ Dark mode on mobile (v2.4.8) ============ */
@media (max-width: 640px) {
	/* Same shade strengthening as light mode: at the 45 percent
	   stop (0.68 alpha) the #f4f4fa title measures 6.56:1 and the
	   #ececf4 excerpt 6.12:1 over a near-white photo. */
	.hb-dark .hb-slide-shade {
		background: linear-gradient(to top, rgba(8, 8, 14, 0.94) 0%, rgba(8, 8, 14, 0.68) 45%, rgba(8, 8, 14, 0.40) 70%, rgba(8, 8, 14, 0.18) 100%);
	}

	.hb-dark .hb-hero-prev,
	.hb-dark .hb-hero-next {
		background: rgba(27, 27, 38, 0.75);
	}

	.hb-dark .hb-slide-cta .hb-btn {
		background: #3563e8;
	}

	/* The enlarged mobile hit box is transparent; the visible dot
	   moves to the pseudo-element in both modes. */
	.hb-dark .hb-hero-dots button {
		background: transparent;
	}

	.hb-dark .hb-hero-dots button::before {
		background: rgba(255, 255, 255, 0.45);
	}

	.hb-dark .hb-hero-dots button.is-active::before {
		background: #07563d;
	}
}

/* v2.5.0 audit fix: hero pause/play control (WCAG 2.2.2). Frosted
   circular button in the bottom-right corner, matching the arrows. */
.hb-hero-pause {
	position: absolute;
	right: 26px;
	bottom: 20px;
	z-index: 6;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(12, 12, 22, 0.35);
	backdrop-filter: blur(4px);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
	-webkit-tap-highlight-color: transparent;
	transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.hb-hero-pause:hover,
.hb-hero-pause:focus-visible {
	background: var(--hb-primary);
	border-color: var(--hb-primary);
	transform: scale(1.08);
	box-shadow: 0 10px 26px rgba(7, 86, 61, 0.55);
}
.hb-hero-pause:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 3px;
}
.hb-hero-pause svg {
	width: 20px;
	height: 20px;
}
.hb-hero-pause [hidden] {
	display: none;
}
@media (max-width: 640px) {
	.hb-hero-pause {
		right: 14px;
		bottom: 14px;
	}
}