/**
 * GT Animations Pro - Frontend Styles
 *
 * @package GT_Animations_Pro
 * @since 1.0.0
 */

/* ===========================
   FOUT Prevention
   =========================== */

.gt-animation-hidden {
	visibility: hidden !important;
}

.gt-animation-ready {
	visibility: visible !important;
}

/* ===========================
   SplitText Heading Widget
   =========================== */

.gt-splittext-heading {
	/* No extra spacing - inherit from Elementor */
}

.gt-splittext-heading .elementor-heading-title {
	margin: 0;
	padding: 0;
}

/* ===========================
   Performance Notes
   =========================== */

/*
 * IMPORTANT: Do NOT add will-change, backface-visibility, or transform-style: preserve-3d
 * to animated elements. These CSS properties create GPU compositing layers.
 * With many elements (loop grids, split text, etc.), this causes:
 * - GPU memory thrashing
 * - Scroll-back glitches
 * - Browser freezes
 *
 * GSAP handles GPU acceleration automatically via force3D: "auto"
 * which promotes to 3D during animation and reverts to 2D after.
 */

/* ===========================
   GSAP Transition Override
   =========================== */

/*
 * Elementor and some themes add global "transition: all" to elements.
 * This conflicts with GSAP - CSS transitions intercept GSAP's inline style
 * updates, causing lag, glitches, and animation conflicts.
 *
 * We disable transitions on widget wrappers that GSAP animates directly.
 * Specific hover transitions are re-enabled on child elements as needed.
 */

/* Disable transitions on main GSAP-animated widget wrappers */
.gt-telescope-hero,
.gt-gallery-hero,
.gt-splittext-heading,
.gt-morphsvg-wrapper,
.gt-header-swap,
.gt-header-extracted,
[data-gt-loop-grid],
[data-gt-voxel-feed],
[data-gt-carousel] {
	transition: none !important;
}

/* Disable on animated child elements */
.gt-telescope-hero__gallery-item,
.gt-gallery-hero__gallery-item,
.gt-splittext-heading [data-gt-animate],
.gt-splittext-heading .gt-line-mask,
.gt-splittext-heading .gt-line-inner {
	transition: none !important;
}

/* Re-enable specific hover transitions where needed (non-scrubbed elements) */
.gt-telescope-hero[data-hover="scale"]:not(.gt-scrolling) .gt-telescope-hero__gallery-item,
.gt-telescope-hero[data-hover="lift"]:not(.gt-scrolling) .gt-telescope-hero__gallery-item,
.gt-telescope-hero[data-hover="glow"]:not(.gt-scrolling) .gt-telescope-hero__gallery-item,
.gt-telescope-hero[data-hover="tilt"]:not(.gt-scrolling) .gt-telescope-hero__gallery-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.gt-animation-hidden [data-gt-animate] {
	/* GSAP handles GPU optimization - no CSS needed */
}

/* ===========================
   Reveal Effect - Mask System
   =========================== */

.gt-line-mask {
	overflow: hidden;
	display: inline-block;
	vertical-align: top;
	position: relative;
}

.gt-line-inner {
	display: inline-block;
}

/* ===========================
   Split Text Display Fixes
   =========================== */

/* Ensure split lines/words/chars maintain proper display */
.gt-animation-hidden [data-gt-animate] > div {
	display: inline-block;
	white-space: pre-wrap;
}

/* Line splits should be block level */
.gt-animation-hidden [data-gt-animate] > div.gt-line-mask {
	display: block;
}

/* Split text elements - GSAP handles GPU acceleration */
.gt-line-mask,
.gt-line-inner {
	/* will-change and backface-visibility removed - GSAP force3D handles this */
}

/* ===========================
   Rolling Text Widget
   =========================== */

.gt-rolling-text {
	overflow: visible;
}

.gt-rolling-tube {
	position: relative;
	display: block;
}

.gt-rolling-title.gt-rolling-line {
	margin: 0;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
}

/* Cylinder mode - stack all lines on top of each other */
.gt-rolling-cylinder .gt-rolling-tube {
	display: flex;
	align-items: center;
	justify-content: center;
}

.gt-rolling-cylinder .gt-rolling-line {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* First line establishes the container size */
.gt-rolling-cylinder .gt-rolling-line:first-child {
	position: relative;
	top: auto;
	left: auto;
	transform: none;
}

.gt-rolling-char {
	display: inline-block;
	backface-visibility: hidden;
}

/* ===========================
   Scramble Heading Widget
   =========================== */

.gt-scramble-heading {
	/* No extra spacing - inherit from Elementor */
}

.gt-scramble-heading .gt-heading-title {
	margin: 0;
	padding: 0;
}

/* Don't hide scramble animations initially - they handle their own visibility */
.gt-scramble-heading.gt-animation-ready .gt-heading-title {
	visibility: visible !important;
	opacity: 1 !important;
}

/* Ensure inline elements for proper scramble */
.gt-scramble-heading .gt-heading-title span,
.gt-scramble-heading .gt-heading-title font {
	display: inline !important;
}

/* Default styles for scramble classes */
.gt-scramble-revealed {
	/* User can style revealed text via Elementor controls */
}

.gt-scramble-scrambled {
	/* Default scrambled text style - slightly transparent */
	opacity: 0.5;
}

/* ===========================
   Selective Animation
   =========================== */

/* Selective animation wrapper - widget is visible, only targeted elements animate */
.gt-selective-animation {
	visibility: visible !important;
}

/* Hide selective elements initially - these are the parts that will animate */
/* The gt-animate-this is the default shortcode class */
.gt-selective-animation .gt-animate-this,
.gt-selective-animation .gt-split-this,
.gt-selective-animation .gt-scramble-this,
.gt-selective-animation [data-gt-selective] {
	visibility: hidden;
	display: inline; /* Keep inline so surrounding text stays in place */
}

/* Ensure the wrapper content stays visible except for selective parts */
.gt-selective-animation [data-gt-animate] {
	visibility: visible !important;
}

/* Show selective elements once animation is ready (JS adds inline visibility) */
.gt-selective-animation.gt-animation-ready .gt-animate-this,
.gt-selective-animation.gt-animation-ready .gt-split-this,
.gt-selective-animation.gt-animation-ready .gt-scramble-this,
.gt-selective-animation.gt-animation-ready [data-gt-selective] {
	/* JS handles visibility via inline styles */
}

/* ===========================
   MorphSVG Widget
   =========================== */

.gt-morphsvg-wrapper {
	display: flex;
	justify-content: center;
	width: 100%;
}

.gt-morphsvg-container {
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
}

.gt-morphsvg-container svg {
	width: 100%;
	height: 100%;
	overflow: visible;
}

.gt-morphsvg-container svg path {
	vector-effect: non-scaling-stroke;
	/* Default fill - uses shape 1 color, then gradient 1, then global primary */
	fill: var(--gt-morph-shape-1, var(--gt-morph-gradient-1, var(--gt-morph-color-from, var(--e-global-color-primary, currentColor))));
}

.gt-morphsvg-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #a4afb7;
	font-size: 14px;
	padding: 40px;
	border: 2px dashed #e6e9ec;
	border-radius: 8px;
	width: 100%;
	height: 100%;
	min-height: 150px;
}

.gt-morphsvg-placeholder i {
	font-size: 32px;
}

/* ===========================
   Editor Compatibility
   =========================== */

.elementor-editor-active .gt-animation-hidden {
	visibility: visible !important;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 767px) {
	.gt-animation-hidden [data-gt-animate] {
		word-break: break-word;
	}
}

/* ===========================
   Accessibility
   =========================== */

/* Focus indicator for keyboard navigation */
.gt-splittext-heading:focus-visible,
.gt-scramble-heading:focus-visible,
.gt-rolling-text:focus-visible,
.gt-morphsvg-wrapper:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

/* Reduced motion - ensure animations are skipped */
@media (prefers-reduced-motion: reduce) {
	.gt-animation-hidden * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	/* Make elements immediately visible when reduced motion is preferred */
	.gt-animation-hidden {
		visibility: visible !important;
	}

	/* Skip GSAP transforms */
	.gt-animation-hidden [data-gt-animate],
	.gt-selective-animation .gt-split-this,
	.gt-selective-animation .gt-scramble-this {
		transform: none !important;
		opacity: 1 !important;
		visibility: visible !important;
	}
}

/* ===========================
   Smooth Scroll
   =========================== */

/* Wrapper structure for ScrollSmoother */
.gt-smooth-scroll-active {
	overflow: hidden;
}

.gt-smooth-scroll-active #gt-smooth-wrapper {
	overflow: hidden;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
}

/*
 * Account for WP admin bar on wrapper.
 * IMPORTANT: Must use !important to override ScrollSmoother's inline `inset: 0px` style.
 * Must also reset `inset` to `auto` since it's shorthand for top/right/bottom/left.
 */
.admin-bar.gt-smooth-scroll-active #gt-smooth-wrapper {
	inset: auto !important;
	top: 32px !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: calc(100% - 32px) !important;
}

@media screen and (max-width: 782px) {
	.admin-bar.gt-smooth-scroll-active #gt-smooth-wrapper {
		inset: auto !important;
		top: 46px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		height: calc(100% - 46px) !important;
	}
}

.gt-smooth-scroll-active #gt-smooth-content {
	overflow: visible;
	width: 100%;
}

/* Allow iframes to scroll normally when smooth scroll is active */
.gt-smooth-scroll-active iframe {
	touch-action: auto;
	pointer-events: auto;
}

/* Video backgrounds should not capture scroll/touch events */
.gt-smooth-scroll-active .elementor-background-video-container,
.gt-smooth-scroll-active .elementor-background-video-embed,
.gt-smooth-scroll-active .elementor-background-video-hosted,
.gt-smooth-scroll-active .elementor-background-video,
.gt-smooth-scroll-active .elementor-widget-video[data-settings*="background"] video,
.gt-smooth-scroll-active video[data-settings*="autoplay"] {
	pointer-events: none !important;
	touch-action: none !important;
}

/* Ensure the video container doesn't block scrolling */
.gt-smooth-scroll-active .elementor-element > .elementor-background-video-container {
	z-index: 0;
	pointer-events: none !important;
}

/* Video iframes (YouTube/Vimeo backgrounds) should not block scrolling */
.gt-smooth-scroll-active .elementor-background-video-embed iframe {
	pointer-events: none !important;
}

/* Fallback when smooth scroll is disabled */
.gt-smooth-scroll-mobile-disabled #gt-smooth-wrapper,
.gt-smooth-scroll-reduced-motion #gt-smooth-wrapper,
.gt-smooth-scroll-error #gt-smooth-wrapper {
	overflow: visible;
	position: static;
}

.gt-smooth-scroll-mobile-disabled #gt-smooth-content,
.gt-smooth-scroll-reduced-motion #gt-smooth-content,
.gt-smooth-scroll-error #gt-smooth-content {
	overflow: visible;
}

/* Smooth scroll reduced motion */
@media (prefers-reduced-motion: reduce) {
	.gt-smooth-scroll-active {
		overflow: visible !important;
	}

	.gt-smooth-scroll-active #gt-smooth-wrapper {
		overflow: visible !important;
		position: static !important;
	}
}

/* ===========================
   Header Handling
   =========================== */

/*
 * ARCHITECTURE NOTES:
 * When we extract a header and apply position:fixed, we must:
 * 1. Explicitly set width (element loses parent flex context)
 * 2. Preserve inner container structure (boxed vs full-width)
 * 3. NOT interfere with flex layouts of children
 * 4. Handle Elementor's sticky classes without breaking widths
 *
 * CRITICAL: Never set width:auto on flex children - breaks layout
 */

/* Extracted header base styles - JS sets top dynamically for admin bar */
.gt-header-extracted {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 99990 !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* ======================
   Elementor Container Preservation
   ====================== */

/* Boxed containers: preserve max-width and centering on inner wrapper */
.gt-header-extracted.e-con-boxed > .e-con-inner {
	max-width: var(--container-max-width, 1140px);
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

/* Full-width containers: ensure children maintain full width */
.gt-header-extracted.e-con-full {
	width: 100% !important;
}

/* Preserve flex layout on all child containers */
.gt-header-extracted .e-con {
	/* Don't override width - let Elementor's flex handle it */
}

/*
 * Ensure inner flex containers maintain their display mode.
 * CRITICAL: Must exclude elements with Elementor's responsive visibility classes.
 * Without these :not() selectors, we'd override Elementor's hiding on different devices.
 */
.gt-header-extracted .e-con.e-flex:not(.elementor-hidden-desktop):not(.elementor-hidden-laptop):not(.elementor-hidden-tablet):not(.elementor-hidden-tablet_extra):not(.elementor-hidden-mobile):not(.elementor-hidden-mobile_extra):not(.elementor-hidden-phone):not(.elementor-hidden-widescreen) {
	display: flex !important;
}

/* ======================
   Elementor Sticky Override
   ====================== */

/*
 * When Elementor's sticky is active on elements INSIDE our header,
 * we need to disable its positioning but PRESERVE its width.
 *
 * IMPORTANT: Do NOT set width:auto - this breaks flex layouts.
 * Elementor sets specific widths on sticky elements for flex calculations.
 */
.gt-header-extracted .elementor-sticky,
.gt-header-extracted .elementor-sticky--active,
.gt-header-extracted .elementor-sticky--effects {
	position: relative !important;
	top: auto !important;
	/* width is intentionally NOT overridden - preserves flex layout */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* ======================
   Voxel Theme Support
   ====================== */

/* Voxel navbar containers - preserve their flex structure */
.gt-header-extracted .ts-form-group,
.gt-header-extracted [class*="ts-navbar"] {
	/* Voxel sets its own flex properties - don't interfere */
}

/* Ensure WP admin bar stays fixed and above our header */
.gt-smooth-scroll-active #wpadminbar {
	position: fixed !important;
	top: 0 !important;
	z-index: 999999 !important;
	overflow: visible !important;
}

/* Ensure admin bar submenus appear above header */
.gt-smooth-scroll-active #wpadminbar .ab-sub-wrapper {
	z-index: 999999 !important;
}

.gt-smooth-scroll-active #wpadminbar .menupop .ab-sub-wrapper {
	overflow: visible !important;
}

/* Fixed header - always visible */
.gt-header-fixed {
	transform: translateY(0) !important;
}

/* Scroll-up header states */
.gt-header-scroll-up {
	transition: transform 0.3s ease;
}

.gt-header-scroll-up.gt-header-hidden {
	transform: translateY(-100%);
}

/* Smart sticky header states */
.gt-header-smart {
	/* No transition here - GSAP handles it */
}

.gt-header-smart.gt-header-pinned {
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Header blend modes - for transparent headers over varied backgrounds */
/* Applied via JS when overlap_content + blend_mode is set */
.gt-header-blend-difference { mix-blend-mode: difference; }
.gt-header-blend-exclusion { mix-blend-mode: exclusion; }
.gt-header-blend-multiply { mix-blend-mode: multiply; }
.gt-header-blend-screen { mix-blend-mode: screen; }
.gt-header-blend-overlay { mix-blend-mode: overlay; }
.gt-header-blend-color-dodge { mix-blend-mode: color-dodge; }
.gt-header-blend-color-burn { mix-blend-mode: color-burn; }

/* Ensure header stays above page content but below admin bar on mobile */
@media screen and (max-width: 767px) {
	.gt-header-extracted {
		z-index: 99990;
	}
}

/* ===========================
   Header Swap Template
   =========================== */

/* Swap header container - shown when scrolled past offset */
.gt-header-swap {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99989 !important;
	margin: 0 !important;
}

/* When swap is active, swap header is visible */
.gt-header-swap.gt-header-swap-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
}

/* Original header when swapped - visual indicator class */
.gt-header-extracted.gt-header-swapped {
	/* Original header is hidden via JS, but this class can be used for transitions */
}

/* Ensure swap header Elementor content renders correctly */
.gt-header-swap .elementor {
	min-height: auto;
}

.gt-header-swap .elementor-section,
.gt-header-swap .elementor-container,
.gt-header-swap .e-con {
	margin: 0;
}

/* ===========================
   Dual Header Mode
   =========================== */

/*
 * Dual header mode: Original header stays in document flow (scrolls naturally),
 * while swap header is the sticky element that appears on scroll.
 * Original is NOT extracted from the page in dual mode.
 */
.gt-dual-header-mode {
	/* Body class for dual header mode styling */
}

/* In dual mode, the swap header handles all the fixed positioning */
.gt-header-swap.gt-header-dual-mode {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 99990 !important;
	margin: 0 !important;
	width: 100% !important;
	/* NOTE: Do NOT add will-change or transform:translateZ(0) here!
	   GSAP handles GPU optimization via force3D:true in the animation.
	   Persistent GPU layers cause thrashing with other ScrollTrigger elements. */
}

/*
 * IMPORTANT: Only target direct child containers, NOT all nested containers.
 * Setting width:100% on ALL .e-con breaks flex column layouts where
 * columns need their calculated widths preserved.
 */
.gt-header-swap.gt-header-dual-mode > .elementor,
.gt-header-swap.gt-header-dual-mode > .e-con {
	width: 100% !important;
}

/* First-level Elementor section/container in swap header */
.gt-header-swap.gt-header-dual-mode .elementor > .elementor-inner > .elementor-section-wrap > .elementor-section,
.gt-header-swap.gt-header-dual-mode .elementor > .elementor-section {
	width: 100% !important;
}

/* For boxed layouts in swap header */
.gt-header-swap.gt-header-dual-mode .e-con.e-con-boxed > .e-con-inner {
	max-width: var(--container-max-width, 1140px);
	margin: 0 auto;
}

/* Dual mode with overlap enabled - header is positioned absolute to overlap content */
.gt-dual-header-mode .gt-header-overlap-mode {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	z-index: 100 !important;
	width: 100% !important;
}

/* Ensure direct child Elementor containers in overlapping dual header maintain width */
.gt-dual-header-mode .gt-header-overlap-mode > .elementor,
.gt-dual-header-mode .gt-header-overlap-mode > .e-con {
	width: 100% !important;
}

/* For boxed layouts in overlapping dual header */
.gt-dual-header-mode .gt-header-overlap-mode .e-con.e-con-boxed > .e-con-inner {
	max-width: var(--container-max-width, 1140px);
	margin: 0 auto;
}

/* ===========================
   Dual Header Mode - Mobile Flex Protection
   =========================== */

/*
 * CRITICAL: Preserve flex layouts in dual mode on mobile.
 * Elementor sets specific widths on flex children - we must not override these.
 * This prevents the "stacking" issue where flex items wrap on mobile.
 */

/*
 * Swap header: preserve inner flex containers.
 * CRITICAL: Must exclude elements with Elementor's responsive visibility classes.
 * Without these :not() selectors, we'd override Elementor's hiding on different devices.
 */
.gt-header-swap.gt-header-dual-mode .e-con.e-flex:not(.elementor-hidden-desktop):not(.elementor-hidden-laptop):not(.elementor-hidden-tablet):not(.elementor-hidden-tablet_extra):not(.elementor-hidden-mobile):not(.elementor-hidden-mobile_extra):not(.elementor-hidden-phone):not(.elementor-hidden-widescreen) {
	display: flex !important;
}

/* Don't override widths on inner flex items - let Elementor handle them */
.gt-header-swap.gt-header-dual-mode .e-con.e-flex > .e-con {
	/* Width intentionally NOT set - preserve Elementor's calculated flex widths */
}

/*
 * DUAL HEADER MODE: Fix mobile stacking ONLY.
 * Desktop layout is correct - do not modify.
 * Only apply fixes at mobile breakpoint.
 *
 * IMPORTANT: We ONLY override flex-direction and flex-wrap.
 * DO NOT touch align-items - let template's value cascade through.
 */

/* MOBILE ONLY: Fix column stacking in headers when dual mode enabled */
@media screen and (max-width: 767px) {
	/*
	 * CRITICAL: Use Elementor's .e-parent class to target ONLY the main header row.
	 * - .e-con.e-parent = main container (the header row) - TARGET THIS
	 * - .e-con.e-child = nested containers (columns/widgets) - DO NOT TARGET
	 *
	 * This ensures inner widgets retain their Elementor styling while
	 * the outer header row stays horizontal and vertically centered.
	 */

	/* Swap header: parent containers only */
	.gt-header-swap.gt-header-dual-mode .e-con.e-parent.e-flex,
	.gt-header-swap.gt-header-dual-mode .e-con.e-parent.e-con--row {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	/* Original header in dual mode: parent containers only */
	body.gt-dual-header-mode [data-elementor-type="header"] .e-con.e-parent.e-flex,
	body.gt-dual-header-mode [data-elementor-type="header"] .e-con.e-parent.e-con--row,
	body.gt-dual-header-mode [data-elementor-type="header-vx"] .e-con.e-parent.e-flex,
	body.gt-dual-header-mode [data-elementor-type="header-vx"] .e-con.e-parent.e-con--row {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}

	/* Extracted header (single mode): parent containers only */
	.gt-header-extracted .e-con.e-parent.e-flex,
	.gt-header-extracted .e-con.e-parent.e-con--row {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
	}
}

/* ===========================
   Elementor Responsive Visibility in Headers
   =========================== */

/*
 * CRITICAL: Respect Elementor's responsive visibility classes in swap header.
 *
 * Problem: Our .gt-header-swap .e-con.e-flex { display: flex !important }
 * overrides Elementor's .elementor-hidden-* classes because:
 * 1. Our selector has higher specificity (4 classes vs 2)
 * 2. We use !important while Elementor doesn't
 *
 * Fix: Explicitly hide elements with Elementor's visibility classes,
 * using same media queries as Elementor but with higher specificity.
 */

/*
 * Specificity must be HIGH to override our flex rules.
 * Our flex rule: .gt-header-swap.gt-header-dual-mode .e-con.e-flex = 4 classes (40 points)
 * These rules use 5+ classes to ensure they win.
 */

/* Widescreen: hide elements marked hidden on widescreen (Elementor Pro breakpoint >2400px) */
@media (min-width: 2400px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-widescreen,
	.gt-header-swap .elementor-hidden-widescreen,
	.gt-header-extracted .elementor-hidden-widescreen {
		display: none !important;
	}
}

/* Desktop: hide elements marked hidden on desktop */
@media (min-width: 1025px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-desktop,
	.gt-header-swap .elementor-hidden-desktop,
	.gt-header-extracted .elementor-hidden-desktop {
		display: none !important;
	}
}

/* Laptop: hide elements marked hidden on laptop (Elementor Pro breakpoint ~1025-1440px) */
@media (min-width: 1025px) and (max-width: 1440px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-laptop,
	.gt-header-swap .elementor-hidden-laptop,
	.gt-header-extracted .elementor-hidden-laptop {
		display: none !important;
	}
}

/* Tablet: hide elements marked hidden on tablet */
@media (min-width: 768px) and (max-width: 1024px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-tablet,
	.gt-header-swap .elementor-hidden-tablet,
	.gt-header-extracted .elementor-hidden-tablet {
		display: none !important;
	}
}

/* Tablet Extra: custom breakpoint - hide when class exists */
@media (min-width: 768px) and (max-width: 1024px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-tablet_extra,
	.gt-header-swap .elementor-hidden-tablet_extra,
	.gt-header-extracted .elementor-hidden-tablet_extra {
		display: none !important;
	}
}

/* Mobile: hide elements marked hidden on mobile/phone */
@media (max-width: 767px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-mobile,
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-phone,
	.gt-header-swap .elementor-hidden-mobile,
	.gt-header-swap .elementor-hidden-phone,
	.gt-header-extracted .elementor-hidden-mobile,
	.gt-header-extracted .elementor-hidden-phone {
		display: none !important;
	}
}

/* Mobile Extra: custom breakpoint between mobile and tablet */
@media (max-width: 880px) {
	.gt-header-swap.gt-header-dual-mode .e-con.elementor-hidden-mobile_extra,
	.gt-header-swap .elementor-hidden-mobile_extra,
	.gt-header-extracted .elementor-hidden-mobile_extra {
		display: none !important;
	}
}

/* ===========================
   Header-Only Mode
   =========================== */

/*
 * Header-only mode: header behavior ON, smooth scroll OFF.
 * ScrollSmoother is skipped entirely, native browser scroll is used.
 * These rules override .gt-smooth-scroll-active to restore native scroll.
 */
.gt-header-only-mode,
.gt-header-only-mode body {
	overflow: visible !important;
}

.gt-header-only-mode #gt-smooth-wrapper {
	position: static !important;
	overflow: visible !important;
	height: auto !important;
	width: auto !important;
	top: auto !important;
	left: auto !important;
	right: auto !important;
	bottom: auto !important;
}

.gt-header-only-mode #gt-smooth-content {
	overflow: visible !important;
	transform: none !important;
}

/* ===========================
   Header Overlap - FOUC Prevention
   =========================== */

/*
 * When overlap is enabled, we hide the content briefly until JS has
 * extracted the header. This prevents the visible "content shift up" flash.
 *
 * The body class .gt-header-overlap is added by PHP when overlap is enabled.
 * JS adds .gt-header-ready to body after header extraction completes.
 */

/*
 * FOUC Prevention for Header Overlap
 *
 * Problem: Header is in document flow initially. When JS extracts it and makes it
 * position:fixed, content shifts up. User sees a flash/jump.
 *
 * Solution: Hide the ENTIRE page briefly until JS has processed the header.
 * This is more reliable than trying to pre-position elements.
 */

/* Hide entire smooth wrapper until header is processed */
.gt-header-overlap #gt-smooth-wrapper {
	opacity: 0;
}

/* Reveal once header extraction is complete */
.gt-header-overlap.gt-header-ready #gt-smooth-wrapper {
	opacity: 1;
	transition: opacity 0.15s ease-out;
}

/* Fallback: reveal after 0.5s in case JS fails */
@keyframes gt-fouc-fallback {
	to { opacity: 1; }
}

.gt-header-overlap #gt-smooth-wrapper {
	animation: gt-fouc-fallback 0.15s 0.5s forwards;
}

/* Disable animation once JS has run */
.gt-header-overlap.gt-header-ready #gt-smooth-wrapper {
	animation: none;
}

/* Ensure extracted header (outside wrapper) is always visible */
.gt-header-overlap .gt-header-extracted {
	opacity: 1 !important;
}

/* GT Sticky - TABLED (needs ScrollSmoother compatibility work)
   Code removed - PHP disabled in gt-animations-pro.php lines 117-118, 148-149 */