/* HTML to Elementor Site Installer — small handwritten CSS for behaviour
   that has no native control in free Elementor (dropdown hover, mobile
   drawer, sticky header/CTA, horizontal carousel scroll-snap). Everything
   else is styled through native Elementor Style/Advanced tab controls. */

/* ---- boxed-width safety net -----------------------------------------
   Elementor's "Content Width: Boxed" containers get max-width from the
   --content-width CSS variable, which lives in a per-page CSS file that
   Elementor normally (re)generates when a page is saved through its own
   editor. This plugin writes _elementor_data directly, so
   class-page-importer.php now forces that file to regenerate — this rule
   is just a defensive fallback in case that file is ever missing/stale
   (e.g. a caching layer served an old response), so boxed sections still
   read as a centered 1200px column instead of stretching full width. */
.e-con.e-con-boxed {
	max-width: var(--content-width, 1200px);
	margin-inline: auto;
}

/* ---- sticky header ---- */
#site-header {
	position: sticky !important;
	top: 0;
	z-index: 50;
}

/* ---- desktop nav dropdowns (hover, CSS-only, no JS) ---- */
#nav-item-sustavi,
#nav-item-usluge {
	position: relative !important;
}
#nav-drop-sustavi,
#nav-drop-usluge {
	position: absolute !important;
	top: 100%;
	left: -14px;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: all 0.18s cubic-bezier(0.2, 0.8, 0.2, 1);
	pointer-events: none;
}
#nav-item-sustavi:hover #nav-drop-sustavi,
#nav-item-usluge:hover #nav-drop-usluge {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}
#nav-desktop a:hover {
	color: #f47d20 !important;
}

/* ---- responsive header switch (matches original 900px breakpoint) ---- */
@media (max-width: 900px) {
	#nav-desktop,
	#header-phone {
		display: none !important;
	}
}
@media (min-width: 901px) {
	#mobile-menu-toggle {
		display: none !important;
	}
}
#mobile-menu-toggle {
	cursor: pointer;
}

/* ---- mobile drawer, toggled by assets/js/frontend.js ---- */
#mobile-drawer {
	display: none !important;
	position: fixed !important;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
}
body.htei-drawer-open #mobile-drawer {
	display: flex !important;
	flex-direction: column;
}
body.htei-drawer-open {
	overflow: hidden;
}
#mobile-drawer-close {
	cursor: pointer;
}
#mobile-drawer a:hover {
	color: #f47d20 !important;
}

/* ---- mobile sticky CTA bar ---- */
#mobile-sticky-cta {
	position: fixed !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
}
@media (min-width: 901px) {
	#mobile-sticky-cta {
		display: none !important;
	}
}
@media (max-width: 900px) {
	body {
		padding-bottom: 64px;
	}
}

/* ---- horizontal scroll-snap carousels (Usluge, Reference) ---- */
.htei-carousel-track,
#services-carousel,
#reference-carousel {
	overflow-x: auto !important;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	flex-wrap: nowrap !important;
}
.htei-carousel-track::-webkit-scrollbar,
#services-carousel::-webkit-scrollbar,
#reference-carousel::-webkit-scrollbar {
	display: none;
}
.htei-carousel-track > *,
#services-carousel > *,
#reference-carousel > * {
	scroll-snap-align: start;
	flex-shrink: 0;
}
.htei-carousel-prev,
.htei-carousel-next {
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	border-radius: 999px;
}

/* ---- native HTML contact/newsletter forms (see class-form-handler.php) ---- */
.elementor-widget-html form input:focus,
.elementor-widget-html form textarea:focus,
.elementor-widget-html form select:focus {
	outline: none;
	border-color: #f47d20 !important;
	box-shadow: 0 0 0 3px rgba(244, 125, 32, 0.22) !important;
}
.htei-form-success {
	display: none;
	background: rgba(92, 184, 92, 0.12);
	border: 1px solid rgba(92, 184, 92, 0.4);
	border-radius: 6px;
	padding: 20px;
	color: #1f3864;
	font-family: "Inter", sans-serif;
	font-size: 15px;
	font-weight: 600;
}