/* ============================================================================
   Every widget this theme ships renders one of the theme's own template parts
   verbatim -- the header, the footer, and a full section of a page such as the
   hero or the FAQ accordion. None of them were authored to live inside a
   second, narrower box: each already manages its own internal max-width with
   its own container class (.nav-container, .footer-container, .about-hero-
   section and so on), matching every other page on the site. Elementor drops
   a widget inside a boxed, padded, max-width container by default, which:

   - gutters the header and squeezes the navbar until the menu overlaps the
     logo (the bug this file was originally written for), and
   - quietly narrows every other section too. A narrower hero, for instance,
     wraps its headline onto more lines, which grows the hero taller, which
     pushes every section below it down the page. The mismatch compounds with
     each stacked section, so a page that looks fine at a glance can still be
     hundreds of pixels off from the theme's own render further down.

   So the containers wrapping a wacs-* widget give up their width and padding.
   The selector matches on the widget's class prefix, not by naming each one,
   so a future widget gets the same treatment automatically. Nothing else
   Elementor places is touched -- a container holding a non-wacs widget, or a
   deliberately narrow layout built from smaller pieces, behaves normally.
   ========================================================================= */

/* !important on the terminal physical/logical properties, not only on the
   custom properties that normally feed them. Elementor's own container CSS
   sets padding and max-width through several layers of custom-property
   indirection (--padding-top -> --padding-block-start -> padding-block-start,
   and separately --content-width / --container-max-width for width), and a
   container inserted with no explicit settings -- exactly what these
   pre-built layouts use -- can still resolve a non-zero default several
   layers down that a plain reset of --padding-top et al does not reach.
   Setting the properties the browser actually paints with, directly, is not
   affected by which internal variable Elementor's own rules happen to read
   this version.

   --row-gap / --column-gap matter for a different reason: a single-widget
   layout (the header, the footer) never exposed them, because a gap between
   flex children is invisible with only one child. A page built from nine
   stacked section widgets is a different shape -- Elementor's own default
   gap opened a 20px seam between every pair of them, compounding to 160px by
   the last section and pushing the footer down by the same amount. Measured
   directly in a browser (getBoundingClientRect on each section, layout on
   vs. off): every section's own height was byte-identical either way: only
   the gap between them differed. */
.e-con:has(> .e-con-inner > [class*="elementor-widget-wacs-"]),
.e-con:has(> [class*="elementor-widget-wacs-"]) {
	--content-width: 100% !important;
	--container-max-width: 100% !important;
	--width: 100% !important;
	--padding-top: 0 !important;
	--padding-right: 0 !important;
	--padding-bottom: 0 !important;
	--padding-left: 0 !important;
	--padding-block-start: 0 !important;
	--padding-block-end: 0 !important;
	--padding-inline-start: 0 !important;
	--padding-inline-end: 0 !important;
	--margin-top: 0 !important;
	--margin-bottom: 0 !important;
	--row-gap: 0 !important;
	--column-gap: 0 !important;
	--gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	padding-block: 0 !important;
	padding-inline: 0 !important;
	margin-block: 0 !important;
	gap: 0 !important;
}

.e-con-inner:has(> [class*="elementor-widget-wacs-"]) {
	--content-width: 100% !important;
	--row-gap: 0 !important;
	--column-gap: 0 !important;
	--gap: 0 !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	padding-block: 0 !important;
	padding-inline: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
}

[class*="elementor-widget-wacs-"],
[class*="elementor-widget-wacs-"] > .elementor-widget-container {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

/* A browser without :has() cannot reach the container from the widget, so the
   widget breaks out of it instead. html already carries overflow-x: clip, so
   100vw cannot introduce a horizontal scrollbar. */
@supports not selector(:has(*)) {
	[class*="elementor-widget-wacs-"] {
		position: relative;
		left: 50%;
		width: 100vw;
		max-width: 100vw;
		transform: translateX(-50%);
	}
}

/* The site header is sticky. Inside the editor canvas that would follow the
   scroll and cover the thing being edited. */
.elementor-editor-active .navbar-header {
	position: relative;
	top: auto;
}

/* ----------------------------------------------------------------------------
   Elementor ships `.elementor img { height: auto }`. That selector scores 0,1,1
   and the theme's own `.logo-img { height: 70px }` scores 0,1,0, so inside a
   layout every logo loses its fixed height and renders at its natural size --
   the header logo came out 72px tall instead of 68px, which shifted the whole
   brand block sideways.

   The theme's ladder is mirrored here one class higher so it wins it back.
   These are the only <img> elements the header and footer contain; everything
   else in them is inline SVG.

   Mirrors theme-styles.css:
     .logo-img         193 (70px), 2300 (62px), 2345 (64px), 3204 (48px)
     .drawer-logo-img  2553 (48px)
     .footer-logo-img  6889 (102px), 7770 (84px)
   Change a logo height there and change it here too.
   ------------------------------------------------------------------------- */

.elementor .logo-img {
	height: 70px;
	width: auto;
	max-height: 74px;
	object-fit: contain;
}

.elementor .footer-logo-img {
	height: 102px;
	width: auto;
	max-width: 320px;
	object-fit: contain;
}

@media (max-width: 1280px) {
	.elementor .logo-img { height: 62px; }
}

@media (max-width: 1080px) {
	.elementor .logo-img { height: 64px; }

	.elementor .drawer-logo-img {
		height: 48px;
		width: auto;
		object-fit: contain;
	}
}

@media (max-width: 768px) {
	.elementor .footer-logo-img {
		height: 84px;
		max-width: 260px;
	}
}

@media (max-width: 640px) {
	.elementor .logo-img { height: 48px; }
}