/**
 * Hero Slider front-end styles.
 *
 * Mobile-first: base rules target < 768px, then progressively enhanced
 * at the 768px (tablet) and 1024px (desktop) breakpoints.
 *
 * Class names use an `.hrsldr-` prefix (instead of the more generic
 * `.hs-`/`.hero-slider` used in earlier phases) specifically to reduce
 * the odds of colliding with a theme's or Elementor's own class of the
 * same name — a plausible cause of the "button unclickable" / stray
 * overlay symptoms seen on live installs, alongside the specificity and
 * z-index fixes already in place below.
 *
 * Layout note: `.hrsldr-arrow-left` / `.hrsldr-arrow-right` are always
 * `position: absolute` against `.hrsldr-widget` (which is
 * `position: relative`), at every breakpoint. Their exact `top` and
 * `left`/`right` offsets are driven entirely by Slider Settings —
 * independently for Mobile, Tablet, and Desktop — rather than computed
 * from content width, so they can be pixel-tuned to match a specific
 * design exactly.
 *
 * Phase 10: every property with a matching Slider Settings field reads
 * from a `--hs-*` custom property (with the original Phase 5 value kept
 * as the `var()` fallback), so Hero_Slider_Dynamic_CSS can override them
 * from the saved `hero_slider_settings` option. These custom-property
 * *names* are left as `--hs-*` — they're not selectors, so they can't
 * collide with anything else on the page the way a class name can.
 *
 * Reset first: some themes/page builders don't apply a global
 * `box-sizing: border-box` reset, which is the most common cause of an
 * element with `width: 100%` PLUS padding overflowing its parent. This
 * has to be declared before anything else so nothing later in this
 * file (or loaded after it) can out-specificity it for our own markup.
 */

.hrsldr-widget,
.hrsldr-widget * {
	box-sizing: border-box;
}

.hrsldr-widget {
	/* Spacing tokens — scoped to `.hrsldr-widget` (not global :root) so
	   each slider instance on the page can be reskinned independently. */
	--hs-gap-heading-desc: 20px;
	--hs-gap-desc-button: 28px;
	--hs-gap-button-image: 40px;

	/* Default system font stack, overridable via --hs-font-family. Swap
	   the fallback here (and update the font-family rule) if brand
	   fonts are provided later — no other selectors need to change. */
	font-family: var(--hs-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

	position: relative;
	/* Themes commonly add a decorative ::before/::after overlay (a
	   background graphic, gradient, etc.) to whatever section wraps
	   this shortcode, absolutely positioned to cover it — typically at
	   a low z-index (1-5) since it's meant to sit behind real content.
	   Without an explicit z-index of our own, an element with `z-index:
	   auto` stacks *below* any positioned sibling that has a real
	   z-index value, so that decorative layer would silently end up on
	   top of this widget — both visually (a color wash) and functionally
	   (it swallows clicks, since it has no reason to declare
	   pointer-events: none on itself). A modest z-index here is enough
	   to clear that common case without fighting real overlays/modals
	   (which are typically z-index 999+ anyway). */
	z-index: 10;
	/* Hard cap at the actual viewport width, regardless of what any
	   fixed-width ancestor (a common Elementor Section/Column
	   misconfiguration — "Content Width" set to a fixed px value with
	   no responsive override) tries to force this box to be. Without
	   this, our own fluid/mobile-first sizing below is irrelevant: if
	   the parent refuses to shrink, nothing inside can be made to
	   shrink either. This at least stops *this* widget from
	   contributing to the horizontal scroll if that's happening. */
	max-width: 100vw;
	/* Safety net: even with box-sizing correct, some themes/Elementor
	   layouts can still force a child wider than this container (e.g.
	   a large native image dimension before max-width takes effect on
	   first paint) — clip rather than let it bleed into the page.
	   NOTE: if you set a Left/Right Arrow position (below) wider than
	   this widget's actual rendered width, the arrow will be clipped by
	   this — tune the offsets against your real container width. */
	overflow: hidden;
	padding: var(--hs-section-padding-v, 24px) var(--hs-section-padding-h, 12px);
}

/* Arrows ------------------------------------------------------------ */
/* Absolutely positioned at every breakpoint, purely from Slider
   Settings values — independent Mobile/Tablet/Desktop top + left/right
   offsets, with the Mobile values as the base (mobile-first) rule and
   Tablet/Desktop overriding inside their own media queries below. */

.hrsldr-arrow {
	position: absolute;
	top: var(--hs-arrow-left-top-mobile, 20px);
	left: var(--hs-arrow-left-offset-mobile, 12px);
	z-index: 5;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
}

.hrsldr-arrow-right {
	left: auto;
	top: var(--hs-arrow-right-top-mobile, 20px);
	right: var(--hs-arrow-right-offset-mobile, 12px);
}

.hrsldr-arrow img,
.hrsldr-arrow svg {
	/* Mobile gets its own dedicated size; tablet/desktop continue using
	   the general Arrow Size setting (overridden back below at 768px),
	   so anything already configured there keeps working unchanged. */
	width: var(--hs-arrow-size-mobile, 32px);
	height: auto;
	display: block;
}

.hrsldr-arrow:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* These are real <button> elements with no hover rule of their own, so
   a generic theme rule like `button:hover { background-color: ...; }`
   (matching every button on the page) wins by default — there's
   nothing of ours at that specificity to compete with it. Explicitly
   reset what a theme commonly sets on button:hover, at higher
   specificity with !important, the same defensive pattern used for
   .hrsldr-button elsewhere in this file. */
.hrsldr-widget .hrsldr-arrow:hover {
	background-color: transparent !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* Content / slides ---------------------------------------------------- */

.hrsldr-content {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	/* Approximate height of the tallest slide so slides (which are
	   position: absolute) don't collapse the container. Adjust to
	   match real content if slides run noticeably taller/shorter. */
	min-height: 420px;
}

.hrsldr-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	/* Default (Fade). --hs-transition-speed is set in seconds by
	   hero-slider.js from the Transition Speed setting; falls back to
	   0.4s if JS hasn't run yet (e.g. no-JS/first paint). */
	transition: opacity var(--hs-transition-speed, 0.4s) ease;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hrsldr-slide.hrsldr-active {
	opacity: 1;
	visibility: visible;
}

/* Explicit stacking + hit-testing, on top of opacity/visibility above:
   visibility: hidden already removes an inactive slide from hit-testing
   on its own, but that's the *only* thing preventing it from sitting on
   top of the active slide and swallowing clicks — position: absolute
   means every .hrsldr-slide occupies the exact same box, so if anything
   (a theme, Elementor's own animation/reveal CSS, which is known to
   force visibility back to "visible" on nested elements in some
   configurations) ever overrides visibility for an inactive slide,
   there is currently no second line of defense. These two rules add one. */
.hrsldr-slide:not(.hrsldr-active) {
	visibility: hidden;
	pointer-events: none;
	z-index: 1;
}

.hrsldr-slide.hrsldr-active {
	pointer-events: auto;
	z-index: 2;
}

/* Slide Left/Right: hero-slider.js drives the actual transform/opacity
   values inline per-transition (see slideTransition()); this just makes
   sure `transform` transitions too, alongside `opacity`, without
   touching the Fade selector above so the two animation types never
   fight over the same property list. */
.hrsldr-widget[data-animation='slide-left'] .hrsldr-slide,
.hrsldr-widget[data-animation='slide-right'] .hrsldr-slide {
	transition: transform var(--hs-transition-speed, 0.4s) ease, opacity var(--hs-transition-speed, 0.4s) ease;
}

/* None: instant, no visual transition at all. */
.hrsldr-widget[data-animation='none'] .hrsldr-slide {
	transition: none;
}

/* Typography ----------------------------------------------------------- */

.hrsldr-heading {
	margin: 0;
	font-size: var(--hs-heading-font-size-mobile, 24px);
	font-weight: var(--hs-heading-font-weight, 700);
	font-style: var(--hs-heading-font-style, normal);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--hs-heading-color, #ffffff);
	text-align: center;
}

.hrsldr-highlight {
	font-size: inherit;
	font-family: var(--hs-highlight-font-family, inherit);
	font-weight: var(--hs-highlight-font-weight, 700);
	font-style: var(--hs-highlight-font-style, normal);
	line-height: inherit;
	letter-spacing: inherit;
	color: var(--hs-highlight-color, #2dd4cf);
}

.hrsldr-description {
	margin: var(--hs-gap-heading-desc) auto 0;
	/* Full width of its parent rather than a second, narrower cap of
	   its own. Wraps normally (no forced single line) — a long
	   description should reflow within that width rather than overflow
	   or get clipped by .hrsldr-widget's overflow: hidden. */
	max-width: 100%;
	font-size: var(--hs-description-font-size-mobile, 14px);
	font-weight: var(--hs-description-font-weight, 400);
	line-height: 1.6;
	color: var(--hs-description-color, #a0aec0);
	text-align: center;
}

/* Same theme/Elementor specificity problem as the button below — a
   compound selector like `.entry-content p` outranks our single-class
   `.hrsldr-description` and can silently strip the width/centering.
   Re-assert at higher specificity with !important. Deliberately NOT
   `margin: 0 auto` here (as a flat reset would read) — that would zero
   out the top margin, which is the configurable Gap: Heading to
   Description setting above; only margin-left/right are forced,
   margin-top is left alone. */
.hrsldr-widget .hrsldr-content .hrsldr-description {
	max-width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Button ----------------------------------------------------------------- */

.hrsldr-button {
	margin-top: var(--hs-gap-desc-button);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: var(--hs-button-padding-v, 14px) var(--hs-button-padding-h, 28px);
	border-radius: var(--hs-button-radius, 999px);
	background: var(--hs-button-bg, #ffffff);
	color: var(--hs-button-color, #1a1a1a);
	font-size: var(--hs-button-font-size, 15px);
	font-weight: var(--hs-button-font-weight, 600);
	/* Explicit `none` first so no browser/theme link default (e.g. a
	   theme's global `a { text-decoration: underline }`) can leak
	   through before the variable below applies. */
	text-decoration: none;
	text-decoration: var(--hs-button-text-decoration, none);
	line-height: 1;
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hrsldr-button:hover {
	background: var(--hs-button-hover-bg, #f0f0f0);
	color: var(--hs-button-hover-color, #1a1a1a);
	transform: scale(var(--hs-button-hover-scale, 1.05));
}

.hrsldr-button:hover .hrsldr-btn-icon {
	/* The icon is drawn pointing up-right (~45deg above horizontal) by
	   default; rotating +45deg (clockwise) brings it to point straight
	   right instead. */
	transform: rotate(45deg);
}

/* Theme/Elementor link defaults (e.g. a compound selector like
   `.elementor-widget-container a` or `.entry-content a`) can carry
   higher specificity than the single-class .hrsldr-button rules above
   and silently win — most visibly as an underline Button Text
   Decoration "None" can't remove. Re-assert the three properties most
   commonly clobbered this way, at higher specificity, with !important —
   a legitimate, deliberate use here since this is specifically fighting
   external link styling, not working around our own CSS. Every other
   .hrsldr-button property (background, padding, border-radius, etc.) is
   left alone above; only the at-risk ones are repeated here. */
.hrsldr-widget .hrsldr-button,
.hrsldr-widget .hrsldr-button:visited {
	text-decoration: var(--hs-button-text-decoration, none) !important;
	color: var(--hs-button-color, #1a1a1a) !important;
	font-weight: var(--hs-button-font-weight, 600) !important;
}

.hrsldr-widget .hrsldr-button:hover {
	text-decoration: var(--hs-button-text-decoration, none) !important;
	color: var(--hs-button-hover-color, #1a1a1a) !important;
}

.hrsldr-btn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Capped via min() at ~2x vertical padding plus a line-height
	   allowance for the button's font-size, so a manually-overridden
	   icon size can never render larger than the button itself. */
	width: min(var(--hs-button-arrow-size, 28px), calc(var(--hs-button-padding-v, 14px) * 2 + var(--hs-button-font-size, 15px) * 1.2));
	height: min(var(--hs-button-arrow-size, 28px), calc(var(--hs-button-padding-v, 14px) * 2 + var(--hs-button-font-size, 15px) * 1.2));
	border-radius: 50%;
	background: var(--hs-button-color, #1a1a1a);
	color: var(--hs-button-bg, #ffffff);
	/* The icon (see templates/hero-slider-single-slide.php) is drawn
	   already pointing up-right at rest — slanted by default, per the
	   design — and rotates to point straight right on hover (below). */
	transform: rotate(0deg);
	transform-origin: center;
	transition: transform 0.2s ease;
	font-size: 13px;
	line-height: 1;
	flex: none;
}

.hrsldr-btn-icon svg {
	/* Scales with the circle itself (whatever Button Arrow Icon Size
	   resolves to) rather than a fixed pixel size, so it stays
	   proportionate at any configured size. stroke="currentColor" in
	   the markup picks up the color set above automatically. */
	width: 50%;
	height: 50%;
	display: block;
}

/* Image card --------------------------------------------------------------- */

.hrsldr-image-wrap {
	margin-top: var(--hs-gap-button-image);
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	background: var(--hs-card-bg, #1e3a3a);
	border-radius: var(--hs-card-radius, 24px);
	/* No padding on mobile — the image runs edge-to-edge in the card at
	   this size; Image Card Internal Padding only applies from tablet
	   up (below), where there's room for it. */
	padding: 0;
}

.hrsldr-image {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}

/* Tablet ------------------------------------------------------------------- */

@media (min-width: 768px) {
	.hrsldr-widget {
		padding: var(--hs-section-padding-v, 40px) var(--hs-section-padding-h, 16px);
	}

	.hrsldr-arrow img,
	.hrsldr-arrow svg {
		width: var(--hs-arrow-size, 44px);
	}

	.hrsldr-content {
		max-width: 700px;
		min-height: 520px;
	}

	.hrsldr-arrow {
		top: var(--hs-arrow-left-top-tablet, 60px);
		left: var(--hs-arrow-left-offset-tablet, 140px);
	}

	.hrsldr-arrow-right {
		left: auto;
		top: var(--hs-arrow-right-top-tablet, 64px);
		right: var(--hs-arrow-right-offset-tablet, 120px);
	}

	.hrsldr-heading {
		font-size: var(--hs-heading-font-size-tablet, 32px);
	}

	.hrsldr-description {
		font-size: var(--hs-description-font-size-tablet, 15px);
	}

	.hrsldr-image-wrap {
		padding: var(--hs-card-padding, 20px);
	}
}

/* Desktop -------------------------------------------------------------------- */

@media (min-width: 1024px) {
	.hrsldr-widget {
		/* No hardcoded max-width/margin here on purpose — the widget now
		   always fills exactly whatever container it's placed in (an
		   Elementor Section/Container's actual content width, a theme's
		   own wrapper, etc.) instead of asserting a competing fixed
		   value like 1200px. A hardcoded value here that's *wider* than
		   the real container Elementor renders (a common mismatch — many
		   themes use 1140px, not 1200px) pushes this widget, and the
		   arrows at its very edges, past the visible background box and
		   into the surrounding page. */
		padding: var(--hs-section-padding-v, 60px) var(--hs-section-padding-h, 20px);
	}

	.hrsldr-content {
		max-width: 900px;
		min-height: 620px;
	}

	.hrsldr-arrow {
		top: var(--hs-arrow-left-top-desktop, 80px);
		left: var(--hs-arrow-left-offset-desktop, 236px);
	}

	.hrsldr-arrow-right {
		left: auto;
		top: var(--hs-arrow-right-top-desktop, 84px);
		right: var(--hs-arrow-right-offset-desktop, 200px);
	}

	.hrsldr-heading {
		font-size: var(--hs-heading-font-size, 48px);
	}

	.hrsldr-description {
		font-size: var(--hs-description-font-size, 16px);
	}

	.hrsldr-image-wrap {
		padding: var(--hs-card-padding, 32px);
	}
}