/*
 * Amber Builder: styles for the replacement Ultimate VC Addons elements and the homepage hero.
 * Visual Composer's own grid/element styles live in vc-frontend.css (pruned from js_composer 4.8).
 */

/* --ab-vw is the viewport width without the scrollbar (set by amber-builder.js); 100vw is the fallback. */

/* ---------- Full-width rows (VC "stretch row") ---------- */
.vc_row.ab-stretch-row {
	margin-left: calc(50% - var(--ab-vw, 100vw) / 2);
	margin-right: 0;
	width: var(--ab-vw, 100vw);
	padding-left: calc(var(--ab-vw, 100vw) / 2 - 50% - 15px);
	padding-right: calc(var(--ab-vw, 100vw) / 2 - 50% - 15px);
}
.vc_row.ab-stretch-row.ab-stretch-content {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- Row backgrounds (replaces Ultimate's upb_* backgrounds) ---------- */
.ab-has-bg {
	position: relative;
}
.ab-has-bg > :not(.ab-row-bg) {
	position: relative;
	z-index: 1;
}
.ab-row-bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 0;
	pointer-events: none;
}
.ab-row-bg.ab-full {
	left: calc(50% - var(--ab-vw, 100vw) / 2);
	right: auto;
	width: var(--ab-vw, 100vw);
}
.ab-row-bg.ab-fixed {
	background-attachment: fixed;
}
.ab-row-bg.ab-parallax {
	will-change: background-position;
}

/* ---------- Spacer ---------- */
.ult-spacer {
	height: var(--ab-h, 10px);
}
@media (max-width: 1199px) {
	.ult-spacer { height: var(--ab-h-tab, var(--ab-h, 10px)); }
}
@media (max-width: 991px) {
	.ult-spacer { height: var(--ab-h-tabp, var(--ab-h-tab, var(--ab-h, 10px))); }
}
@media (max-width: 767px) {
	.ult-spacer { height: var(--ab-h-mobl, var(--ab-h-tabp, var(--ab-h-tab, var(--ab-h, 10px)))); }
}
@media (max-width: 479px) {
	.ult-spacer { height: var(--ab-h-mob, var(--ab-h-mobl, var(--ab-h-tabp, var(--ab-h-tab, var(--ab-h, 10px))))); }
}

/* ---------- Icons ---------- */
.ult-just-icon-wrapper .aio-icon {
	line-height: 1;
	text-align: center;
}
.ult-just-icon-wrapper .aio-icon i {
	display: inline-block;
}
.ult-just-icon-wrapper .aio-icon.circle {
	border-radius: 50%;
}
.ult-just-icon-wrapper .aio-icon-img {
	display: inline-block;
}
.ult-just-icon-wrapper .aio-icon-img .img-icon {
	width: 1em;
	max-width: 100%;
}

/* ---------- Scroll animations ---------- */
.ult-animation.ab-animated {
	opacity: 1 !important;
}
@media (prefers-reduced-motion: reduce) {
	.ult-animation {
		opacity: 1 !important;
		animation: none !important;
	}
}

/* ---------- Carousel (Owl Carousel 2, bundled with the theme) ---------- */
.ab-carousel .owl-dots {
	text-align: center;
	margin-top: 20px;
}
.ab-carousel .owl-dot {
	display: inline-block;
	background: none;
	border: 0;
	padding: 0 5px;
	cursor: pointer;
}
.ab-carousel .owl-dot span {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ab-dots, #333);
	opacity: 0.4;
	transition: opacity 0.2s;
}
.ab-carousel .owl-dot.active span,
.ab-carousel .owl-dot:hover span {
	opacity: 1;
}

/* ---------- Advanced button hover ---------- */
.ubtn {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.ubtn .ubtn-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	opacity: 0;
	transition: opacity 0.2s;
}
.ubtn .ubtn-data {
	position: relative;
	z-index: 1;
}
.ubtn:hover {
	color: var(--ab-hover-color, inherit) !important;
	border-color: var(--ab-hover-border, currentColor) !important;
}
.ubtn:hover .ubtn-hover {
	opacity: 1;
}

/* ---------- Homepage hero (replaces LayerSlider slider #1) ---------- */
.amber-hero {
	position: relative;
	left: 50%;
	width: var(--ab-vw, 100vw);
	margin-left: calc(var(--ab-vw, 100vw) / -2);
	/* The old slider was 1920x700 and scaled down proportionally. */
	height: min(700px, 36.4583vw);
	background-color: #282828;
	background-size: cover;
	background-position: center center;
	overflow: hidden;
	text-align: center;
}
.amber-hero__logo {
	position: absolute;
	top: 30%;
	left: 50%;
	width: min(250px, 13.0208vw);
	height: auto;
	transform: translate(-50%, -50%);
	animation: amberHeroFade 0.5s ease-in-out both;
}
.amber-hero__title {
	position: absolute;
	top: 54.2857%;
	left: 0;
	right: 0;
	margin: 0;
	color: #fff;
	font-size: min(50px, 2.6042vw);
	line-height: 1.2;
	text-transform: uppercase;
	text-align: center;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
	animation: amberHeroRise 0.6s ease-in-out 0.2s both;
}
.amber-hero__action {
	position: absolute;
	top: 76.2857%;
	left: 0;
	right: 0;
	margin: 0;
	animation: amberHeroRise 0.5s ease-in-out 0.4s both;
}
.amber-hero__action:after {
	display: none;
}
.amber-hero .btn {
	display: inline-block;
	border: 2px solid #fff;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-family: "Roboto Slab", serif;
	font-size: 12px;
	font-style: normal;
	text-transform: uppercase;
	padding: 16px 36px;
}
.amber-hero .btn:hover,
.amber-hero .btn:focus {
	background-color: #fff;
	color: #332c20;
	text-decoration: none;
}
@media (max-width: 1199px) {
	.amber-hero .btn { padding: 8px 30px; }
}
@media (max-width: 991px) {
	.amber-hero .btn { font-size: 10px; padding: 4px 20px; }
}
@media (max-width: 767px) {
	.amber-hero { display: none; }
}
@keyframes amberHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes amberHeroRise {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.amber-hero__logo,
	.amber-hero__title,
	.amber-hero__action { animation: none; }
}