/*
 * Compatibility layer. The landing stylesheet is never edited; this file only
 * removes what WordPress, the theme and Elementor add around our markup, so the
 * boxes end up at the measurements the original design declares.
 *
 * Every rule here exists to REMOVE an added-on style, never to introduce one.
 */

/* Elementor wraps each widget in .elementor-widget-container, and full-width
   documents in .elementor / .e-con. None of those exist in the original file,
   so they must be dimensionless pass-throughs. */
.elementor-widget-opwapps-navbar .elementor-widget-container,
.elementor-widget-opwapps-hero .elementor-widget-container,
.elementor-widget-opwapps-apps-grid .elementor-widget-container,
.elementor-widget-opwapps-footer .elementor-widget-container,
.elementor-widget-opwapps-legal-content .elementor-widget-container,
.elementor-widget-opwapps-contact-form .elementor-widget-container {
	margin: 0;
	padding: 0;
}

/* The document container must not impose its own boxed width or gutters:
   .container in the landing stylesheet is the only thing allowed to do that. */
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;
}

/* The landing pins its footer with body{display:flex} + .footer{margin-top:auto}.
   Under a theme the page content sits inside wrappers, so the flex chain has to
   be handed down for that rule to keep working. */
body > .elementor-location-header,
body > .elementor-location-footer {
	flex: 0 0 auto;
	width: 100%;
}

body > main,
body > .site,
body > #page,
body > .elementor-location-single,
body > .elementor-location-archive {
	flex: 1 0 auto;
	width: 100%;
}

/* Elementor resets every image inside .elementor with
   `height: auto; max-width: 100%`. That selector is one class plus one element,
   so it outranks the landing's .logo-img and .brand-img.

   `height` made the header logos render at their natural size. `max-width`
   is subtler and only shows on a narrow viewport: as flex items the logos get
   squeezed below their aspect ratio, which changes how the header wraps and
   shortens it by 41px at 390. The original stylesheet declares neither, so
   `max-width: none` is what the design actually has.

   These rules mirror the landing; they are not new decisions. A new image
   class with a height must be added here too. */
.elementor .logo-img {
	height: 40px;
	max-width: none;
}

.elementor .brand-img {
	height: 24px;
	max-width: none;
}

/* In the original file these two blocks are direct children of a flex body, so
   each one establishes its own block formatting context and the bottom margin
   of its last paragraph stays inside. Under a widget wrapper they are ordinary
   blocks, that margin escapes, and the page comes out 16px shorter.
   flow-root restores exactly that containment and nothing else. */
.elementor .legal-content,
.elementor .contact-content {
	display: flow-root;
}

/* 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;
	}
}