/*
 * Evora Widgets – Global Utility Styles
 * ─────────────────────────────────────────────────────────────────────────────
 * Loaded site-wide (frontend + Elementor editor preview) so these classes are
 * available on ANY Elementor widget, container, Gutenberg block, or theme markup.
 *
 * Apply via Elementor → Advanced → CSS Classes (or a block's Additional CSS class):
 *   .glass              Frosted-glass backdrop blur + subtle border
 *   .colored_text       Wrap part of a heading in a <span> to brand-color it
 *   .bk-animated-button Hover sweep-fill — works on buttons AND any element
 *   .custom-accordion   Restyle Elementor's nested accordion
 *   .custom-carousel    Scroll-snap carousel of a Loop Grid (one active row/card)
 *
 * Variants for .bk-animated-button (add alongside it):
 *   .bk-animated-button--violet | --indigo | --offwhite | --ghost
 *
 * The .custom-carousel design below is gated behind the .cc-ready class that
 * assets/js/evora-global.js adds to each loop container it controls. Before the
 * script runs (and inside the Elementor editor, where it is intentionally not
 * loaded) the grid renders normally and stays fully editable — nothing is dimmed
 * or clamped until the controller is live. The script also picks the axis:
 *   • Desktop (≥768px) → vertical scroll-snap, one row centered ([data-cc-mode="v"])
 *   • Mobile  (≤767px) → horizontal scroll-snap, one card centered ([data-cc-mode="h"])
 */

/* ═══════════════════════════════════════════════════════════════════════════
 *  GLASS EFFECT
 * ═══════════════════════════════════════════════════════════════════════════ */
.glass {
	backdrop-filter: blur(17.75px);
	-webkit-backdrop-filter: blur(17.75px);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  COLORED TEXT IN TITLES
 * ═══════════════════════════════════════════════════════════════════════════ */
.colored_text {
	--evora-brand-color: #7446FF;
}

.colored_text span {
	color: var(--evora-brand-color) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  ANIMATED SWEEP-FILL  (.bk-animated-button)
 * ─────────────────────────────────────────────────────────────────────────────
 *  --btn-fill is the single source of truth for the fill color.
 *
 *  Two carriers are supported:
 *    1. Elementor Button widget — the class sits on the widget wrapper, so the
 *       effect is applied to the inner .elementor-button.
 *    2. Any other element (container, link, image-box, plain block) — when the
 *       class does NOT wrap an .elementor-button, the element ITSELF becomes the
 *       animated surface and its direct children are lifted above the fill.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Elementor button carrier ──────────────────────────────────────────────── */
.bk-animated-button .elementor-button {
	position: relative;
	overflow: hidden;
	transition: color 0.3s ease;
}

.bk-animated-button .elementor-button::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--btn-fill, #6121EB);
	transform: translate(100%, 100%) scale(0.2);
	transform-origin: bottom right;
	transition: transform 0.45s ease, border-radius 0.45s ease;
	z-index: 1;
	border-radius: 240px 0 0 0;
}

.bk-animated-button .elementor-button:hover::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.bk-animated-button .elementor-button .elementor-button-content-wrapper,
.bk-animated-button .elementor-button .elementor-button-icon,
.bk-animated-button .elementor-button .elementor-button-text {
	position: relative;
	z-index: 2;
}

.bk-animated-button .elementor-button .elementor-button-icon {
	padding-top: 5px;
	transition: transform 0.3s ease, margin-inline-start 0.3s ease;
}

.bk-animated-button .elementor-button:hover .elementor-button-icon {
	transform: rotate(45deg);
	margin-inline-start: -5px;
}

/* ── Generic carrier (any element that does NOT wrap an Elementor button) ───── */
.bk-animated-button:not(:has(.elementor-button)) {
	position: relative;
	overflow: hidden;
	transition: color 0.3s ease;
}

.bk-animated-button:not(:has(.elementor-button))::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--btn-fill, #6121EB);
	transform: translate(100%, 100%) scale(0.2);
	transform-origin: bottom right;
	transition: transform 0.45s ease, border-radius 0.45s ease;
	z-index: 0;
	border-radius: 240px 0 0 0;
	pointer-events: none;
}

.bk-animated-button:not(:has(.elementor-button)):hover::before,
.services-card:hover .bk-animated-button:not(:has(.elementor-button))::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

/* Icon Box / generic carrier icon (e.g. Icon Box widget's .elementor-icon svg) —
 * the button carrier rotates .elementor-button-icon on hover (above); this is
 * the equivalent trigger for everything else, since the transition itself is
 * already declared once for both carriers further down.
 * Also fires from .services-card:hover so the whole card is the hover target,
 * not just the icon box itself. */
.bk-animated-button:not(:has(.elementor-button)):hover .elementor-icon,
.services-card:hover .bk-animated-button:not(:has(.elementor-button)) .elementor-icon {
	transform: rotate(45deg);
}

/* Lift the element's own content above the fill */
.bk-animated-button:not(:has(.elementor-button)) > * {
	position: relative;
	z-index: 1;
}

/* ── Variants (one source of truth each) ─────────────────────────────────────
 * Applied in Elementor as separate CSS-class entries (e.g. "bk-animated-button"
 * + "--ghost"), which renders as two space-separated class tokens, not one
 * glued-together class — so these must be compound two-class selectors. */
.bk-animated-button.--violet   { --btn-fill: #6121EB; }
.bk-animated-button.--indigo   { --btn-fill: #7446FF; }
.bk-animated-button.--offwhite { --btn-fill: #f0f0f0; }
.bk-animated-button.--ghost    { --btn-fill: transparent; }

/* ── Shared transitions (apply to ANY trigger: :hover, .btn-active, or a
 *    consumer-specific state such as the careers card hover) ───────────────────
 *  These are component setup, not a trigger — they just make the icon rotation
 *  and the offwhite text/SVG recolor animate smoothly wherever they fire.
 */
.bk-animated-button .elementor-icon {
	display: inline-flex;
	transition: transform 0.3s ease;
}

.bk-animated-button.--offwhite,
.bk-animated-button.--offwhite .elementor-heading-title,
.bk-animated-button.--offwhite h1,
.bk-animated-button.--offwhite h2,
.bk-animated-button.--offwhite h3,
.bk-animated-button.--offwhite h4,
.bk-animated-button.--offwhite h5,
.bk-animated-button.--offwhite h6,
.bk-animated-button.--offwhite p,
.bk-animated-button.--offwhite a,
.bk-animated-button.--offwhite span,
.bk-animated-button.--offwhite svg,
.bk-animated-button.--offwhite svg path {
	transition: color 0.3s ease, fill 0.3s ease;
}

/* ── Persistent active state (.btn-active) ─────────────────────────────────────
 *  Mirrors :hover so a clicked item can keep the filled look. Gated behind
 *  .evora-btn-scope (added to the loop widget) so only opted-in widgets react —
 *  no other button on the page is affected. Set by Loop Sync's JS.
 * ─────────────────────────────────────────────────────────────────────────── */
.evora-btn-scope .bk-animated-button.btn-active .elementor-button::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.evora-btn-scope .bk-animated-button.btn-active:not(:has(.elementor-button))::before {
	transform: translate(0, 0) scale(1);
	border-radius: inherit;
}

.evora-btn-scope .bk-animated-button.btn-active .elementor-button .elementor-button-icon {
	transform: rotate(45deg);
	margin-inline-start: -5px;
}

.evora-btn-scope .bk-animated-button.--offwhite.btn-active .elementor-button {
	color: var(--e-global-color-secondary);
}

.evora-btn-scope .bk-animated-button.--offwhite.btn-active .elementor-button svg {
	fill: var(--e-global-color-secondary);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  CUSTOM ACCORDION  (Elementor nested accordion)
 * ═══════════════════════════════════════════════════════════════════════════ */
.custom-accordion .e-n-accordion-item-title {
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 0px solid rgba(255, 255, 255, 0.1) !important;
}

.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-text > span {
	color: #DAD1F3;
	font-size: 14px;
	font-style: normal;
	font-weight: 500;
}

.custom-accordion details[open] > .e-n-accordion-item-title {
	border-radius: 5px 5px 0 0 !important;
}

/* Always show the e-closed icon, hide e-opened */
.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened {
	display: none !important;
}

.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-closed {
	display: inline-flex !important;
}

/* Rotate the single icon */
.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon i {
	display: inline-block;
	transition: transform 0.3s ease;
}

.custom-accordion .e-n-accordion-item-title:hover .e-n-accordion-item-title-icon i {
	transform: rotate(-90deg);
}

.custom-accordion details[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon i {
	transform: rotate(-180deg);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  CUSTOM CAROUSEL  (.custom-carousel — scroll-snap a Loop Grid)
 * ─────────────────────────────────────────────────────────────────────────────
 *  Put .custom-carousel on a wrapper (Tabs widget, Container, etc.) that holds
 *  one or more Loop Grids. evora-global.js measures each loop container, adds
 *  .cc-ready + data-cc-mode, and toggles .cc-active on the centered row/card.
 *
 *  All visual treatment is gated behind .cc-ready so the grid is untouched until
 *  the controller is live (and in the editor, where the script never loads).
 *  The dynamic sizing (max-height / card width / scroll padding) is set inline
 *  by the script; this file owns the static look and the axis-specific layout.
 * ═══════════════════════════════════════════════════════════════════════════ */
.custom-carousel .elementor-loop-container.cc-ready {
	position: relative;
	scroll-behavior: smooth;
	scrollbar-width: none;          /* Firefox */
	-ms-overflow-style: none;       /* IE / old Edge */
	-webkit-overflow-scrolling: touch;
}

.custom-carousel .elementor-loop-container.cc-ready::-webkit-scrollbar {
	display: none;                  /* WebKit / Blink */
}

/* ── Vertical mode (desktop): keep the native grid, scroll-snap on Y ────────── */
.custom-carousel .elementor-loop-container.cc-ready[data-cc-mode="v"] {
	overflow-x: hidden;
	overflow-y: scroll;
	scroll-snap-type: y mandatory;
}

/* ── Horizontal mode (mobile): one card centered, scroll-snap on X ──────────── */
.custom-carousel .elementor-loop-container.cc-ready[data-cc-mode="h"] {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	overflow-x: scroll;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
}

/* ── Item states (shared by both axes) ─────────────────────────────────────── */
.custom-carousel .elementor-loop-container.cc-ready > .e-loop-item {
	scroll-snap-align: center;
	transition: opacity 0.45s ease, filter 0.45s ease;
	opacity: 0.3;
	filter: blur(1.5px);
	pointer-events: none;
}

.custom-carousel .elementor-loop-container.cc-ready > .e-loop-item.cc-active {
	opacity: 1;
	filter: none;
	pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  EPJ VIDEO HOVER — keep .bk-animated-button visible above the video layer
 *  EPJ hides all non-video children of .epj-card-hovered (opacity, visibility,
 *  or pointer-events). This restores our button panel and ensures it sits above
 *  the absolutely-positioned video overlay.
 * ═══════════════════════════════════════════════════════════════════════════ */
.epj-video-hover .bk-animated-button,
.epj-video-hover.epj-card-hovered .bk-animated-button {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 2;
}

.epj-video-hover .bk-animated-button *,
.epj-video-hover.epj-card-hovered .bk-animated-button * {
	opacity: 1 !important;
	visibility: visible !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  CONTROLLER BUTTON  (.controller-btn)
 * ─────────────────────────────────────────────────────────────────────────────
 *  Same sweep animation as .bk-animated-button — only the colors are changed:
 *    default → #7446ff bg,    #f0f0f0 text
 *    hover   → #6121eb sweep, #f0f0f0 text  (both fills are dark, white reads fine)
 *    active  → #f0f0f0 sweep, #0f0f0f text  (.btn-active set by Loop Sync JS)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Resting: solid purple background (button is ghost/transparent by default) */
.controller-btn.bk-animated-button .elementor-button {
	background-color: #7446ff !important;
	color: #f0f0f0 !important;
}

/* Sweep fill for hover: darker purple */
.controller-btn.bk-animated-button {
	--btn-fill: #6121eb;
}

/* Text stays off-white during the hover sweep */
.controller-btn.bk-animated-button .elementor-button:hover,
.controller-btn.bk-animated-button .elementor-button:focus {
	color: #f0f0f0 !important;
}

/* Active: flip sweep fill to off-white, text to near-black */
.controller-btn.bk-animated-button.btn-active {
	--btn-fill: #f0f0f0;
}

.controller-btn.bk-animated-button.btn-active .elementor-button,
.controller-btn.bk-animated-button.btn-active .elementor-button:hover,
.controller-btn.bk-animated-button.btn-active .elementor-button:focus {
	color: #0f0f0f !important;
}

/* ── Navigation arrows within the controller carousel ──────────────────────
 *  font-size sets the base to 12 px; transform scales to 14 px on hover
 *  (14 ÷ 12 ≈ 1.167) — compositor-only, no layout shift. */

.swiper:has(.controller-btn) .elementor-swiper-button i {
	font-size: 12px !important;
	display: inline-block;
	transition: transform 0.2s ease;
}

.swiper:has(.controller-btn) .elementor-swiper-button:hover i {
	transform: scale(1.167);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
	.bk-animated-button .elementor-button::before,
	.bk-animated-button:not(:has(.elementor-button))::before,
	.bk-animated-button .elementor-button .elementor-button-icon,
	.custom-accordion .e-n-accordion-item-title .e-n-accordion-item-title-icon i,
	.custom-carousel .elementor-loop-container.cc-ready > .e-loop-item,
	.swiper:has(.controller-btn) .elementor-swiper-button i {
		transition: none;
	}

	.custom-carousel .elementor-loop-container.cc-ready {
		scroll-behavior: auto;
	}
}