/**
 * HNLS Logo Slider — Frontend styles
 * ────────────────────────────────────
 * Design tokens matched to the KS Academia Prep design system.
 *
 * Typography: DM Sans (body) + DM Serif Display (headings)
 * Palette:    Navy #182352, soft #E9EEFA, bg #F7F9FC
 *
 * To change the design tokens later, update the :root block below.
 * Widget inline styles (from Elementor controls) will override
 * background, padding, and per-logo values automatically.
 */

:root {
	/* ── Navy tones ── */
	--hnls-navy:        #182352;
	--hnls-navy-dark:   #0E173B;

	/* ── Background palette ── */
	--hnls-bg:          #F7F9FC;
	--hnls-bg2:         #EEF2F8;
	--hnls-surface:     #FFFFFF;

	/* ── Text ── */
	--hnls-text:        #10182E;
	--hnls-text2:       #2E3A59;
	--hnls-muted:       #66708A;
	--hnls-accent2:     #5C6D9A;

	/* ── Decorative ── */
	--hnls-soft:        #E9EEFA;
	--hnls-silver:      #B9BCCB;
	--hnls-border:      rgba(24,35,82,0.10);
	--hnls-border-s:    rgba(24,35,82,0.18);

	/* ── Shadows ── */
	--hnls-shadow-sm:   0 2px 8px rgba(14,23,59,0.06);
	--hnls-shadow-md:   0 6px 20px rgba(14,23,59,0.09);
	--hnls-shadow-lg:   0 16px 40px rgba(14,23,59,0.11);

	/* ── Radius ── */
	--hnls-radius-xl:   24px;
	--hnls-radius-lg:   18px;
	--hnls-radius-md:   12px;
	--hnls-radius-sm:   8px;
}

/* ─────────────────────────────────
 * Section wrapper
 * ───────────────────────────────── */

.hnls-ls {
	position: relative;
	overflow: hidden;
	width: 100%;
	/* padding and bg set via Elementor controls / inline styles */
}

.hnls-ls-inner {
	margin: 0 auto;
	text-align: center;
	padding: 0 24px 36px;
}

/* ─────────────────────────────────
 * Eyebrow — pill with dot, matching
 * the KSA .eyebrow component
 * ───────────────────────────────── */

.hnls-ls-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 13px;
	border-radius: 999px;
	background: var(--hnls-soft);
	border: 1px solid var(--hnls-border-s);
	color: var(--hnls-navy);
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 auto 14px;
}
.hnls-ls-eyebrow::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hnls-navy);
	flex-shrink: 0;
}

/* ─────────────────────────────────
 * Heading — DM Serif Display
 * ───────────────────────────────── */

.hnls-ls-heading {
	font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif;
	font-weight: 400;
	font-size: clamp(1.9rem, 3.5vw, 2.7rem);
	line-height: 1.15;
	color: var(--hnls-text);
	margin: 0 0 12px;
}

/* ─────────────────────────────────
 * Subheading — DM Sans
 * ───────────────────────────────── */

.hnls-ls-subheading {
	font-family: 'DM Sans', system-ui, sans-serif;
	font-size: 1.02rem;
	font-weight: 400;
	line-height: 1.72;
	color: var(--hnls-muted);
	max-width: 62ch;
	margin: 0 auto;
}

/* ─────────────────────────────────
 * Viewport & Track (marquee engine)
 * ───────────────────────────────── */

.hnls-ls-viewport {
	overflow: hidden;
	width: 100%;
	position: relative;
	/* Soft fade at edges — premium feel */
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 6%,
		black 94%,
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0%,
		black 6%,
		black 94%,
		transparent 100%
	);
}

/* Thin separator lines above and below the logo rail */
.hnls-ls-viewport::before,
.hnls-ls-viewport::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: var(--hnls-border);
	z-index: 1;
	pointer-events: none;
}
.hnls-ls-viewport::before { top: 0; }
.hnls-ls-viewport::after  { bottom: 0; }

.hnls-ls-track {
	display: flex;
	align-items: center;
	width: max-content;
	padding: 28px 0;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
}

/* Fallback keyframes — overridden dynamically by frontend.js */
@keyframes hnls-scroll-left {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@keyframes hnls-scroll-right {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* ─────────────────────────────────
 * Individual logo item
 * ───────────────────────────────── */

.hnls-ls-logo {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.hnls-ls-logo img {
	display: block;
	width: auto;
	/* height set via Elementor control; default fallback */
	height: 55px;
	object-fit: contain;
	/* opacity set via Elementor control; default fallback */
	opacity: 0.40;
	transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

/* Hover — stronger visibility */
.hnls-ls-logo:hover img {
	opacity: 1;
	transform: scale(1.05);
}

/* ── Grayscale modifier ── */
.hnls-ls--grayscale .hnls-ls-logo img {
	filter: grayscale(1);
}
.hnls-ls--grayscale .hnls-ls-logo:hover img {
	filter: grayscale(0);
}

/* ── Pause on hover modifier ── */
.hnls-ls--pausable:hover .hnls-ls-track {
	animation-play-state: paused;
}

/* ─────────────────────────────────
 * Dark background variant
 * When section bg is navy/dark,
 * add class .hnls-ls--dark to flip
 * heading/eyebrow colours.
 * ───────────────────────────────── */

.hnls-ls--dark .hnls-ls-heading {
	color: #FFFFFF;
}
.hnls-ls--dark .hnls-ls-subheading {
	color: rgba(255,255,255,0.55);
}
.hnls-ls--dark .hnls-ls-eyebrow {
	background: rgba(233,238,250,0.10);
	border-color: rgba(233,238,250,0.20);
	color: rgba(255,255,255,0.75);
}
.hnls-ls--dark .hnls-ls-eyebrow::before {
	background: rgba(255,255,255,0.50);
}
.hnls-ls--dark .hnls-ls-viewport::before,
.hnls-ls--dark .hnls-ls-viewport::after {
	background: rgba(255,255,255,0.08);
}

/* ─────────────────────────────────
 * Reduced motion
 * ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.hnls-ls-track {
		animation: none !important;
	}
	.hnls-ls-viewport {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* ─────────────────────────────────
 * Responsive
 * ───────────────────────────────── */

@media (max-width: 767px) {
	.hnls-ls-inner {
		padding: 0 16px 24px;
	}
	.hnls-ls-eyebrow {
		font-size: 0.72rem;
		letter-spacing: 0.03em;
		padding: 5px 11px;
	}
	.hnls-ls-heading {
		font-size: clamp(1.5rem, 4vw, 1.9rem);
	}
	.hnls-ls-subheading {
		font-size: 0.92rem;
	}
	.hnls-ls-track {
		padding: 20px 0;
	}
}