/* ==========================================================================
   Alice Landing Enhancements
   Every rule is scoped to body.ale-enhanced so it can only ever affect the
   five landing pages. Nothing here changes layout, spacing, colour or type
   of the existing design - only motion, hover feedback and the new
   testimonial section (which is markup this plugin creates itself).
   ========================================================================== */

body.ale-enhanced {
	--ale-primary: #c39a6f;
	--ale-primary-soft: rgba(195, 154, 111, 0.14);
	--ale-line: rgba(195, 154, 111, 0.18);
	--ale-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   1. Scroll progress bar (fixed overlay - occupies no layout space)
   -------------------------------------------------------------------------- */
body.ale-enhanced .ale-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 100%;
	z-index: 99999;
	pointer-events: none;
	background: transparent;
}

body.ale-enhanced .ale-progress span {
	display: block;
	height: 100%;
	width: 0;
	transform-origin: 0 50%;
	background: linear-gradient(90deg, var(--ale-primary), #e8cfae);
	box-shadow: 0 0 12px rgba(195, 154, 111, 0.6);
	transition: width 0.12s linear;
}

/* --------------------------------------------------------------------------
   2. Back-to-top button (fixed overlay, only injected when none exists)
   -------------------------------------------------------------------------- */
body.ale-enhanced .ale-to-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ale-primary);
	background: rgba(0, 0, 0, 0.65);
	color: var(--ale-primary);
	border-radius: 50%;
	cursor: pointer;
	z-index: 9990;
	opacity: 0;
	visibility: hidden;
	transform: translateY(14px);
	backdrop-filter: blur(6px);
	transition: opacity 0.35s var(--ale-ease), transform 0.35s var(--ale-ease),
		visibility 0.35s var(--ale-ease), background-color 0.3s var(--ale-ease),
		color 0.3s var(--ale-ease);
}

body.ale-enhanced .ale-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

body.ale-enhanced .ale-to-top:hover,
body.ale-enhanced .ale-to-top:focus-visible {
	background: var(--ale-primary);
	color: #000;
	outline: none;
}

/* --------------------------------------------------------------------------
   3. Card hover micro-interactions
   Transform + shadow + border colour only: no reflow, no layout change.
   -------------------------------------------------------------------------- */
body.ale-enhanced .portfolio-card,
body.ale-enhanced .process-card,
body.ale-enhanced .excellence-item,
body.ale-enhanced .contact-info-card,
body.ale-enhanced .icon-box {
	transition: transform 0.45s var(--ale-ease), box-shadow 0.45s var(--ale-ease),
		border-color 0.45s var(--ale-ease);
	will-change: transform;
}

body.ale-enhanced .portfolio-card:hover,
body.ale-enhanced .process-card:hover,
body.ale-enhanced .excellence-item:hover,
body.ale-enhanced .contact-info-card:hover,
body.ale-enhanced .icon-box:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 40px -18px rgba(195, 154, 111, 0.45);
}

/* Icons inside a hovered card get a gentle lift */
body.ale-enhanced .excellence-icon,
body.ale-enhanced .contact-info-card i,
body.ale-enhanced .icon-box i {
	transition: transform 0.45s var(--ale-ease), color 0.35s var(--ale-ease);
	display: inline-block;
}

body.ale-enhanced .excellence-item:hover .excellence-icon,
body.ale-enhanced .contact-info-card:hover i,
body.ale-enhanced .icon-box:hover i {
	transform: translateY(-3px) scale(1.08);
}

/* --------------------------------------------------------------------------
   4. Image zoom inside existing .overflow-hidden wrappers
   The wrapper already clips, so scaling the image cannot push anything.
   -------------------------------------------------------------------------- */
body.ale-enhanced .overflow-hidden img,
body.ale-enhanced .portfolio-card img {
	transition: transform 0.7s var(--ale-ease), filter 0.7s var(--ale-ease);
	will-change: transform;
	backface-visibility: hidden;
}

body.ale-enhanced .overflow-hidden:hover > img,
body.ale-enhanced .overflow-hidden:hover img,
body.ale-enhanced .portfolio-card:hover img {
	transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   5. Button shine sweep
   Uses an absolutely positioned pseudo-element - adds no space.
   -------------------------------------------------------------------------- */
body.ale-enhanced .btn-gold,
body.ale-enhanced .btn-dark,
body.ale-enhanced .btn-premium-gold,
body.ale-enhanced .btn-gold-rounded,
body.ale-enhanced .btn-ghost-white,
body.ale-enhanced .btn-outline-white,
body.ale-enhanced .btn-outline-white-custom,
body.ale-enhanced .btn-outline-white-simple,
body.ale-enhanced .btn-outline-white-ghost,
body.ale-enhanced .btn-outline-white-types,
body.ale-enhanced .ale-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.3s var(--ale-ease), box-shadow 0.3s var(--ale-ease),
		background-color 0.3s var(--ale-ease), color 0.3s var(--ale-ease),
		border-color 0.3s var(--ale-ease);
}

body.ale-enhanced .btn-gold::after,
body.ale-enhanced .btn-dark::after,
body.ale-enhanced .btn-premium-gold::after,
body.ale-enhanced .btn-gold-rounded::after,
body.ale-enhanced .btn-ghost-white::after,
body.ale-enhanced .btn-outline-white::after,
body.ale-enhanced .btn-outline-white-custom::after,
body.ale-enhanced .btn-outline-white-simple::after,
body.ale-enhanced .btn-outline-white-ghost::after,
body.ale-enhanced .btn-outline-white-types::after,
body.ale-enhanced .ale-btn::after {
	content: "";
	position: absolute;
	top: 0;
	left: -120%;
	width: 60%;
	height: 100%;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, 0.28),
		transparent
	);
	transition: left 0.75s var(--ale-ease);
}

body.ale-enhanced .btn-gold:hover::after,
body.ale-enhanced .btn-dark:hover::after,
body.ale-enhanced .btn-premium-gold:hover::after,
body.ale-enhanced .btn-gold-rounded:hover::after,
body.ale-enhanced .btn-ghost-white:hover::after,
body.ale-enhanced .btn-outline-white:hover::after,
body.ale-enhanced .btn-outline-white-custom:hover::after,
body.ale-enhanced .btn-outline-white-simple:hover::after,
body.ale-enhanced .btn-outline-white-ghost:hover::after,
body.ale-enhanced .btn-outline-white-types:hover::after,
body.ale-enhanced .ale-btn:hover::after {
	left: 130%;
}

body.ale-enhanced .btn-gold:hover,
body.ale-enhanced .btn-premium-gold:hover,
body.ale-enhanced .btn-gold-rounded:hover,
body.ale-enhanced .btn-outline-white-custom:hover,
body.ale-enhanced .btn-outline-white-simple:hover {
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. Footer + nav link underline slide
   -------------------------------------------------------------------------- */
body.ale-enhanced footer a:not(.ale-no-underline) {
	position: relative;
	background-image: linear-gradient(var(--ale-primary), var(--ale-primary));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 1px;
	transition: background-size 0.4s var(--ale-ease), color 0.3s var(--ale-ease);
}

body.ale-enhanced footer a:not(.ale-no-underline):hover {
	background-size: 100% 1px;
}

/* --------------------------------------------------------------------------
   7. Accordion (FAQ) chevron + row feedback
   -------------------------------------------------------------------------- */
body.ale-enhanced .accordion-item {
	transition: background-color 0.35s var(--ale-ease),
		border-color 0.35s var(--ale-ease);
}

body.ale-enhanced .accordion-button {
	transition: color 0.3s var(--ale-ease), padding-left 0.35s var(--ale-ease);
}

body.ale-enhanced .accordion-button:not(.collapsed) {
	color: var(--ale-primary);
}

/* --------------------------------------------------------------------------
   8. Reveal-on-scroll for the plugin's own elements only
   The class is applied by JS, and JS also force-reveals after 2.5s, so
   content can never be left invisible.
   -------------------------------------------------------------------------- */
body.ale-enhanced [data-ale-reveal].ale-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.8s var(--ale-ease), transform 0.8s var(--ale-ease);
}

body.ale-enhanced [data-ale-reveal].ale-reveal.ale-in {
	opacity: 1;
	transform: none;
}

/* ==========================================================================
   9. TESTIMONIALS SECTION + SLIDER
   ========================================================================== */

body.ale-enhanced .ale-testimonials {
	position: relative;
	background-color: #000;
	padding: 90px 0;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Soft gold glow, decorative only */
body.ale-enhanced .ale-testimonials::before {
	content: "";
	position: absolute;
	top: -20%;
	left: 50%;
	width: 900px;
	height: 900px;
	max-width: 140%;
	transform: translateX(-50%);
	background: radial-gradient(
		circle,
		rgba(195, 154, 111, 0.1) 0%,
		rgba(195, 154, 111, 0) 62%
	);
	pointer-events: none;
	z-index: 0;
}

body.ale-enhanced .ale-testimonials > .container {
	position: relative;
	z-index: 1;
}

/* ---- Section heading ---- */
body.ale-enhanced .ale-section-head {
	text-align: center;
	margin-bottom: 56px;
}

body.ale-enhanced .ale-eyebrow {
	display: inline-block;
	font-family: "Dosis", sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--ale-primary);
	margin-bottom: 14px;
	position: relative;
	padding-bottom: 12px;
}

body.ale-enhanced .ale-eyebrow::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 40px;
	height: 2px;
	background: var(--ale-primary);
	transform: translateX(-50%) scaleX(0);
	transform-origin: 50% 50%;
	transition: transform 0.8s var(--ale-ease) 0.25s;
}

body.ale-enhanced .ale-section-head.ale-in .ale-eyebrow::after,
body.ale-enhanced .ale-section-head:not(.ale-reveal) .ale-eyebrow::after {
	transform: translateX(-50%) scaleX(1);
}

body.ale-enhanced .ale-title {
	font-family: "Dosis", sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	line-height: 1.2;
	font-size: clamp(1.9rem, 4vw, 3rem);
	color: var(--ale-primary);
	margin: 0 0 16px;
}

body.ale-enhanced .ale-intro {
	max-width: 800px;
	margin: 0 auto;
	color: #fff;
	opacity: 0.75;
	line-height: 1.8;
}

/* ---- Slider shell ---- */
body.ale-enhanced .ale-slider {
	position: relative;
	--ale-per-view: 3;
	--ale-gap: 28px;
}

body.ale-enhanced .ale-viewport {
	overflow: hidden;
	padding: 6px 2px 10px;
}

body.ale-enhanced .ale-track {
	display: flex;
	gap: var(--ale-gap);
	transition: transform 0.65s var(--ale-ease);
	will-change: transform;
}

body.ale-enhanced .ale-slider.is-dragging .ale-track {
	transition: none;
}

body.ale-enhanced .ale-slide {
	flex: 0 0
		calc(
			(100% - (var(--ale-per-view) - 1) * var(--ale-gap)) / var(--ale-per-view)
		);
	min-width: 0;
	display: flex;
}

/* ---- Card ---- */
body.ale-enhanced .ale-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 44px 32px 32px;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--ale-line);
	transition: transform 0.45s var(--ale-ease), background-color 0.45s var(--ale-ease),
		border-color 0.45s var(--ale-ease), box-shadow 0.45s var(--ale-ease);
}

body.ale-enhanced .ale-card:hover {
	transform: translateY(-6px);
	background: rgba(195, 154, 111, 0.05);
	border-color: var(--ale-primary);
	box-shadow: 0 18px 44px -20px rgba(195, 154, 111, 0.55);
}

body.ale-enhanced .ale-quote-mark {
	position: absolute;
	top: 4px;
	right: 26px;
	font-family: "Dosis", sans-serif;
	font-size: 96px;
	line-height: 1;
	color: var(--ale-primary);
	opacity: 0.16;
	pointer-events: none;
	transition: opacity 0.45s var(--ale-ease), transform 0.45s var(--ale-ease);
}

body.ale-enhanced .ale-card:hover .ale-quote-mark {
	opacity: 0.3;
	transform: translateY(-4px);
}

body.ale-enhanced .ale-stars {
	display: flex;
	gap: 5px;
	margin-bottom: 18px;
	color: var(--ale-primary);
	font-size: 13px;
}

body.ale-enhanced .ale-stars .ale-star-off {
	color: rgba(255, 255, 255, 0.2);
}

body.ale-enhanced .ale-quote {
	flex: 1 1 auto;
	margin: 0 0 28px;
	padding: 0;
	border: 0;
	color: #fff;
	opacity: 0.82;
	font-size: 15px;
	line-height: 1.85;
	quotes: none;
}

body.ale-enhanced .ale-author {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

body.ale-enhanced .ale-avatar {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--ale-primary-soft);
	border: 1px solid var(--ale-line);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color 0.45s var(--ale-ease);
}

body.ale-enhanced .ale-card:hover .ale-avatar {
	border-color: var(--ale-primary);
}

body.ale-enhanced .ale-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body.ale-enhanced .ale-avatar-initial {
	font-family: "Dosis", sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--ale-primary);
	text-transform: uppercase;
	line-height: 1;
}

body.ale-enhanced .ale-author-meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.ale-enhanced .ale-name {
	font-family: "Dosis", sans-serif;
	font-style: normal;
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

body.ale-enhanced .ale-job {
	font-size: 12.5px;
	letter-spacing: 1px;
	color: var(--ale-primary);
	opacity: 0.9;
}

/* ---- Arrows ---- */
body.ale-enhanced .ale-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.6);
	border: 1px solid var(--ale-primary);
	color: var(--ale-primary);
	border-radius: 50%;
	cursor: pointer;
	z-index: 3;
	padding: 0;
	transition: background-color 0.3s var(--ale-ease), color 0.3s var(--ale-ease),
		opacity 0.3s var(--ale-ease), transform 0.3s var(--ale-ease);
}

body.ale-enhanced .ale-prev {
	left: -22px;
}

body.ale-enhanced .ale-next {
	right: -22px;
}

body.ale-enhanced .ale-nav:hover,
body.ale-enhanced .ale-nav:focus-visible {
	background: var(--ale-primary);
	color: #000;
	outline: none;
}

body.ale-enhanced .ale-nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

body.ale-enhanced .ale-slider.is-static .ale-nav,
body.ale-enhanced .ale-slider.is-static .ale-dots {
	display: none;
}

/* ---- Dots ---- */
body.ale-enhanced .ale-dots {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-top: 36px;
}

body.ale-enhanced .ale-dot {
	width: 26px;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.22);
	cursor: pointer;
	transition: background-color 0.35s var(--ale-ease), width 0.35s var(--ale-ease);
}

body.ale-enhanced .ale-dot:hover {
	background: rgba(195, 154, 111, 0.6);
}

body.ale-enhanced .ale-dot.is-active {
	width: 42px;
	background: var(--ale-primary);
}

/* ---- Responsive ---- */
@media (max-width: 1199.98px) {
	body.ale-enhanced .ale-prev {
		left: -8px;
	}
	body.ale-enhanced .ale-next {
		right: -8px;
	}
}

@media (max-width: 991.98px) {
	body.ale-enhanced .ale-slider {
		--ale-per-view: 2;
		--ale-gap: 22px;
	}
	body.ale-enhanced .ale-testimonials {
		padding: 70px 0;
	}
}

@media (max-width: 767.98px) {
	body.ale-enhanced .ale-slider {
		--ale-per-view: 1;
		--ale-gap: 16px;
	}
	body.ale-enhanced .ale-nav {
		position: static;
		transform: none;
	}
	body.ale-enhanced .ale-dots {
		align-items: center;
		margin-top: 26px;
	}
	body.ale-enhanced .ale-slider {
		padding-bottom: 0;
	}
	/* Move the arrows beside the dots on small screens */
	body.ale-enhanced .ale-slider {
		display: block;
	}
	body.ale-enhanced .ale-controls-row {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 16px;
		margin-top: 26px;
	}
	body.ale-enhanced .ale-controls-row .ale-dots {
		margin-top: 0;
	}
	body.ale-enhanced .ale-card {
		padding: 38px 24px 26px;
	}
	body.ale-enhanced .ale-section-head {
		margin-bottom: 40px;
	}
}

/* --------------------------------------------------------------------------
   10. Reduced motion - turn every added animation off
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.ale-enhanced .ale-track,
	body.ale-enhanced [data-ale-reveal].ale-reveal,
	body.ale-enhanced .ale-card,
	body.ale-enhanced .ale-nav,
	body.ale-enhanced .ale-dot,
	body.ale-enhanced .portfolio-card,
	body.ale-enhanced .process-card,
	body.ale-enhanced .excellence-item,
	body.ale-enhanced .contact-info-card,
	body.ale-enhanced .icon-box,
	body.ale-enhanced .overflow-hidden img,
	body.ale-enhanced .portfolio-card img,
	body.ale-enhanced .ale-to-top,
	body.ale-enhanced .ale-progress span {
		transition-duration: 0.001ms !important;
		animation-duration: 0.001ms !important;
	}

	body.ale-enhanced [data-ale-reveal].ale-reveal {
		opacity: 1 !important;
		transform: none !important;
	}

	body.ale-enhanced .portfolio-card:hover,
	body.ale-enhanced .process-card:hover,
	body.ale-enhanced .excellence-item:hover,
	body.ale-enhanced .contact-info-card:hover,
	body.ale-enhanced .icon-box:hover,
	body.ale-enhanced .ale-card:hover {
		transform: none;
	}

	body.ale-enhanced .overflow-hidden:hover img,
	body.ale-enhanced .portfolio-card:hover img {
		transform: none;
	}
}

/* Print: hide interactive chrome */
@media print {
	body.ale-enhanced .ale-progress,
	body.ale-enhanced .ale-to-top,
	body.ale-enhanced .ale-nav,
	body.ale-enhanced .ale-dots {
		display: none !important;
	}
	body.ale-enhanced .ale-track {
		display: block;
		transform: none !important;
	}
}

/* --------------------------------------------------------------------------
   11. Scroll performance on touch devices
   The templates use `background-attachment: fixed` for the hero and parallax
   bands. Mobile browsers either ignore it outright (iOS Safari) or repaint the
   whole layer on every scroll frame, which is the single biggest scroll-jank
   source on these pages. Switching to `scroll` on coarse-pointer devices costs
   nothing visually there (the parallax already does not work) and removes the
   repaint. Desktop is untouched, so the effect stays exactly as designed.
   -------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
	body.ale-enhanced .hero,
	body.ale-enhanced [style*="background-attachment: fixed"],
	body.ale-enhanced [style*="center/cover no-repeat fixed"] {
		background-attachment: scroll !important;
	}
}

/* --------------------------------------------------------------------------
   12. WordPress admin bar offset (logged-in users only)

   The templates pin `.top-bar` at top:0 and `header` at top:42px, then reserve
   the space with body{padding-top:170px}. Core's admin bar adds
   html{margin-top:32px !important}, which moves the document but not fixed
   elements - so the gold top bar ends up behind the admin bar and a 32px gap
   appears under the header.

   Shifting both bars down by the admin bar's height restores the original
   spacing. Visitors are never affected: without the admin bar this block does
   not apply at all. Above 782px the admin bar is fixed and 32px tall, which is
   why the media query starts there - below that width core switches it to
   position:absolute (it scrolls away) and the templates already hide the top
   bar and pin the header at top:0.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 783px) {
	body.ale-enhanced.ale-adminbar .top-bar {
		top: 32px;
	}

	body.ale-enhanced.ale-adminbar header {
		top: 74px !important; /* 32px admin bar + 42px top bar */
	}
}