/*
 * Techie UX Addons — shared design tokens.
 * Loaded before every element stylesheet so shadows, easing, and focus
 * treatment are consistent across all elements. Elements may still override
 * any token locally; these are sensible shared defaults, not hard rules.
 */
[class*="techie-"] {
	--techie-ease: cubic-bezier(.22, .61, .36, 1);
	--techie-ease-out: cubic-bezier(.16, 1, .3, 1);

	/* Elevation scale (cool neutral, matches the slider/card polish) */
	--techie-shadow-xs: 0 2px 6px rgba(16, 24, 40, .05);
	--techie-shadow-sm: 0 6px 16px rgba(16, 24, 40, .06);
	--techie-shadow-md: 0 12px 28px rgba(16, 24, 40, .08);
	--techie-shadow-lg: 0 20px 44px rgba(16, 24, 40, .12);
	--techie-shadow-xl: 0 28px 60px rgba(16, 24, 40, .16);

	--techie-focus-ring: 0 0 0 3px color-mix(in srgb, var(--techie-accent, #4f46e5), transparent 68%);
}

/* Consistent keyboard focus for every interactive part of every element.
   Uses focus-visible so mouse users never see a ring. */
[class*="techie-"] a:focus-visible,
[class*="techie-"] button:focus-visible,
[class*="techie-"] summary:focus-visible,
[class*="techie-"] [tabindex]:focus-visible,
[class*="techie-"] input:focus-visible,
[class*="techie-"] select:focus-visible {
	outline: 2px solid var(--techie-accent, #4f46e5);
	outline-offset: 2px;
}

/* Never leave a raw double outline on custom-styled controls that already
   provide their own visible focus treatment. */
[class*="techie-"] :focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	[class*="techie-"] * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* ==================== SHARED PER-SIDE BORDERS ==================== */
/* Applied to any element root carrying .techie-has-borders. Each side is an
   independent width driven by its own CSS var (Top/Right/Bottom/Left), so
   users get Flatsome-style individual border controls on every element. */
.techie-has-borders {
	border-style: var(--techie-bd-style, solid);
	border-color: var(--techie-bd-color, #e2e6ef);
	border-top-width: var(--techie-bd-top, 0);
	border-right-width: var(--techie-bd-right, 0);
	border-bottom-width: var(--techie-bd-bottom, 0);
	border-left-width: var(--techie-bd-left, 0);
}

.techie-has-bd-radius {
	border-radius: var(--techie-bd-radius, 0);
}

/* ==================== UX BUILDER: SCROLLABLE SLIDERS ==================== */
/* The builder re-renders elements via Angular, which interrupts the transform
   based slide navigation and can leave sliders "stuck" on the first slide.
   When builder-fixes.js tags a slider root with .techie-builder-scroll we turn
   the track into a plain horizontally-scrollable row so every slide is
   reachable for preview and editing. Front-end behaviour is unaffected. */
.techie-builder-scroll.techie-slider .techie-slider__viewport,
.techie-builder-scroll.techie-cards--slider:not(.techie-cards--slider-stack) .techie-cards__viewport,
.techie-builder-scroll.techie-timeline--slider .techie-timeline__viewport {
	-webkit-overflow-scrolling: touch;
	clip-path: none !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
	scroll-snap-type: x proximity;
}

.techie-builder-scroll.techie-slider .techie-slider__track,
.techie-builder-scroll.techie-cards--slider:not(.techie-cards--slider-stack) .techie-cards__track,
.techie-builder-scroll.techie-timeline--slider .techie-timeline__track,
.techie-builder-scroll.techie-testimonials .techie-testimonials__track {
	transform: none !important;
	transition: none !important;
}

/* Testimonials carousel track is itself the scroller. */
.techie-builder-scroll.techie-testimonials .techie-testimonials__track {
	-webkit-overflow-scrolling: touch;
	overflow-x: auto !important;
	scroll-snap-type: x proximity;
}

/* Slides snap gently and keep their per-view width while scrolling. */
.techie-builder-scroll .techie-slider__slide,
.techie-builder-scroll .techie-cards__track > *,
.techie-builder-scroll .techie-timeline__item,
.techie-builder-scroll .techie-testimonials__card {
	scroll-snap-align: start;
}

/* Un-stack absolute/fade effects in the builder so they scroll as a row. */
.techie-builder-scroll.techie-slider--effect-fade .techie-slider__slide,
.techie-builder-scroll.techie-slider--effect-coverflow .techie-slider__slide,
.techie-builder-scroll.techie-slider--effect-cards .techie-slider__slide {
	left: auto !important;
	opacity: 1 !important;
	position: relative !important;
	transform: none !important;
}