/*
 * Compatibility layer for the CotizaYA landing.
 *
 * The original stylesheet is never edited. This file removes what WordPress and
 * Elementor add around the markup, and repositions the two things the design
 * expects but a WordPress page cannot give it on its own.
 */

/* Elementor wraps each widget in .elementor-widget-container and each document
   in .e-con. Neither exists in the original file, so both must be
   dimensionless pass-throughs. */
[class*="elementor-widget-cotizaya-"] .elementor-widget-container {
	margin: 0;
	padding: 0;
}

body .elementor > .e-con,
body .elementor > .e-con > .e-con-inner {
	--container-max-width: none;
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	max-width: none;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* Elementor resets every image inside .elementor with
   `height: auto; max-width: 100%`, one class plus one element, which outranks
   this design's own image sizing. Same fix as the opwapps landing. */
.elementor .brand-logo-img {
	width: 32px;
	height: 32px;
	max-width: none;
	object-fit: contain;
	flex-shrink: 0;
}

/* The logo slot before anyone uploads a file: the box the design reserves,
   holding its place so the header never reflows once the image arrives. */
.elementor .brand-logo-slot {
	display: inline-block;
	border-radius: 8px;
	background: rgba(16, 185, 129, 0.12);
}

/* Elementor also declares `.elementor a { box-shadow: none }`, one class plus
   one element, which strips the glow from the orange call-to-action buttons.
   Of every shadow this design declares, only .btn-orange lands on an <a>, so
   these two rules are the whole repair. They mirror the original values. */
.elementor a.btn-orange {
	box-shadow: 0 4px 14px rgba(249, 115, 22, 0.35);
}

.elementor a.btn-orange:hover {
	box-shadow: 0 6px 18px rgba(249, 115, 22, 0.45);
}

/* The navbar declares `position: sticky`, but a sticky element can only travel
   inside its own parent, and Elementor's two wrappers are exactly as tall as
   the header itself, so it had nowhere to go. `display: contents` drops those
   wrappers out of the box tree and makes the header a direct child of the page
   container, which is the full height of the document. */
.elementor-widget-cotizaya-navbar,
.elementor-widget-cotizaya-navbar > .elementor-widget-container {
	display: contents;
}

/* The design asks for smooth scrolling, but the browser chooses the speed and
   CSS cannot change it: on a page this tall it reads as a jump.
   cotizaya-scroll.js animates it instead, so the native behaviour steps aside. */
html {
	scroll-behavior: auto;
}

/* WordPress admin bar shifts a position:sticky navbar by its own height. */
body.admin-bar .navbar {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .navbar {
		top: 46px;
	}
}