/* LFFO bridge: make Elementor's structural chrome invisible to layout.
   Loaded last so it wins on equal specificity. */

/* Section containers stand in for the source <section> elements.

   EVERYTHING Elementor contributes is neutralised through its CUSTOM
   PROPERTIES, never with real declarations. A real declaration here sits at
   (0,2,0) and outranks the source's own (0,1,0) rules, which silently breaks
   them. Two bugs came from exactly that mistake:
     - `padding:0` stripped `.section{padding-block:clamp(56px,9vw,110px)}` and
       the hero's block padding, flattening the whole site's vertical rhythm;
     - `display:block` overrode `.section-divider{display:flex;align-items:
       center;justify-content:center}`, so the divider leaf could never centre.
   Setting --display instead lets `.e-con{display:var(--display)}` resolve to
   block by default while any source rule that wants flex still wins.          */
/* Elementor writes --display:flex PER ELEMENT, e.g.
       .elementor-35 .elementor-element.elementor-element-a5b0271{--display:flex}
   at (0,3,0). A plain `.e-con.lffo-section` rule is (0,2,0) and loses, which is
   why an earlier attempt appeared to do nothing.

   Why it matters: `.container` carries `margin-inline:auto`. In a BLOCK parent
   that centres a full-width block, which is what the source does. In a FLEX
   parent the auto margins absorb the free space and SUPPRESS stretching, so the
   container collapses to fit-content -- measured 944px with 260.77px margins
   either side inside a 1466px section, shifting every interior page 159px right.
   Forcing the default back to block restores the source's box model; sections
   that genuinely want flex (.hero, .section-divider) still declare `display`
   themselves at (0,1,0) in style.css, which loads after Elementor and wins.

   The class is doubled to reach (0,4,0) so this cannot be lost to load order. */
.e-con.lffo-section.lffo-section {
	--display: block;
}

.e-con.lffo-section {
	--display: block;
	--width: 100%;
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--padding-block-start: 0px;
	--padding-block-end: 0px;
	--padding-inline-start: 0px;
	--padding-inline-end: 0px;
	--margin-top: 0px;
	--margin-right: 0px;
	--margin-bottom: 0px;
	--margin-left: 0px;
	max-width: none;
}

/* NOTE: an earlier revision overrode the source's
       .section:not(.hero):not(.lib-section):not(.has-sticky){
         content-visibility:auto; contain-intrinsic-size:auto 900px }
   on the theory that it was padding the document height and leaving white
   space under the footer. Measurement in the browser disproved that:
   docH 7016 vs footerBottom 7017 -- the footer reaches the document end
   exactly. The real cause was horizontal overflow (docW 1157 > winW 1155)
   showing a horizontal scrollbar. The override has been removed so the
   source's offscreen-render optimisation works as authored.                  */

/* The verbatim markup wrapper and Elementor's inner div are removed from the box
   tree entirely, so each section's real children become direct layout children of
   the section, exactly as in the source. */
.lffo-section > .elementor-widget-text-editor.lffo-raw,
.lffo-section > .elementor-widget-text-editor.lffo-raw > .elementor-widget-container {
	display: contents;
}

/* Elementor's kit adds widget spacing and typography resets; the source
   stylesheets own all of that. */
.lffo-section .elementor-widget:not(:last-child) { margin-block-end: 0; }

/* ── Header / footer ──────────────────────────────────────────────────────
   The header and footer are the source partials verbatim. Every Elementor
   wrapper between the location root and <header class="site-header"> is taken
   out of the box tree, so:
     - .site-header keeps position:fixed against the viewport rather than being
       trapped by an ancestor that establishes a containing block;
     - .site-header ~ .mobile-nav still matches, because both partials sit in the
       same widget and therefore remain DOM siblings.
   Elementor's location wrappers must not paint or space anything here.        */
.elementor-location-header .e-con.lffo-header-raw,
.elementor-location-header .lffo-header-raw > .elementor-widget-text-editor.lffo-raw,
.elementor-location-header .lffo-header-raw > .elementor-widget-text-editor.lffo-raw > .elementor-widget-container,
.elementor-location-footer .e-con.lffo-footer-raw,
.elementor-location-footer .lffo-footer-raw > .elementor-widget-text-editor.lffo-raw,
.elementor-location-footer .lffo-footer-raw > .elementor-widget-text-editor.lffo-raw > .elementor-widget-container {
	display: contents;
}

/* Elementor wraps text-editor output in typography defaults; the source owns it. */
.lffo-raw > .elementor-widget-container { font-family: inherit; font-size: inherit; line-height: inherit; color: inherit; }

/* ── 1. Sticky header ──────────────────────────────────────────────────
   .site-header is position:sticky, which can only travel inside its parent's
   box. Solace's <header class="header"> and Elementor's location <header> are
   both exactly bar-height, so the bar had nowhere to stick and scrolled away.
   Taking both out of the box tree makes <body> the scroll container again, so
   the bar follows the page and condenses exactly as in the source.            */
.wrapper > header.header,
header.elementor-location-header {
	display: contents;
}

/* ── 2. List markers ───────────────────────────────────────────────────
   Solace's theme.min.css sets `ul li{list-style:disc}` (0,0,2), which outranks
   the source's `ul{list-style:none}` (0,0,1) regardless of load order -- hence
   bullets appearing through the nav and page lists. Restored at 0,1,2.
   <ol> is deliberately left alone: the source never reset it, so decimal
   markers are the original browser default and correct.                       */
.lffo-raw ul,
.lffo-raw ul li,
.lffo-section .lffo-raw ul li {
	list-style: none;
}

/* ── 3. Dropdown: kill the half-pixel blur ────────────────────────────────
   DIAGNOSIS. The source centres the panel with
       left:50%; transform:translateX(-50%) translateY(0) scale(1)
   and that transform is RETAINED in the open state. The panel's width is
   content-driven (min-width:288px, but the .d-sub strings push it wider), so
   on any odd width -50% resolves to a half-pixel -- e.g. 313px -> -156.5px.
   The panel then sits off the device-pixel grid and every glyph inside it is
   resampled. A permanent transform also promotes the panel to its own layer,
   which drops subpixel antialiasing. Together that is the soft, noisy zoom
   look, worst on hover because the row underneath is repainting.

   FIX (best practice). Centre with auto margins instead of a transform, so
   the open state carries NO transform at all and the panel is pixel-snapped.
   The entrance keeps its lift and settle, because those live in the CLOSED
   state and animate to `none` -- transient by design, crisp at rest.

   The pointer keeps its own centring: -50% of an 18px triangle is a whole
   pixel, so it was never part of the problem.                               */
.site-header .nav-item.has-dropdown > .dropdown {
	left: 0;
	right: 0;
	margin-inline: auto;
	width: max-content;
	max-width: min(92vw, 460px);
	transform: translateY(10px) scale(.985);
}

.site-header .nav-item.has-dropdown.open > .dropdown {
	transform: none;
}

/* Row hover keeps the source's 3px nudge; hinting the compositor up front
   stops the row being re-rasterised mid-transition. */
.site-header .dropdown a {
	backface-visibility: hidden;
}

/* ── 4. Solace chrome that is not part of the source ──────────────────────────
   The theme prints a responsive search overlay and a skip link into every page
   regardless of the Elementor header. Its own CSS hid the search and kept the
   skip link visually-hidden-until-focused; dequeuing that CSS exposed both.
   The search component has no equivalent in the source and is removed. The
   skip link is genuine accessibility, so it is restored to the standard
   visually-hidden pattern rather than deleted.                               */
.item--inner.builder-item--header_search_responsive,
.nv-search-icon-component,
.close-container.responsive-search,
.box-scroll-to-top,
.topbutton {
	display: none !important;
}

/* .box-scroll-to-top was the "white strip below the footer". Solace prints a
   scroll-to-top widget as the last element in <body>; its own CSS made it a
   fixed, hidden-until-scrolled button. With that CSS dequeued it fell back to
   position:static, display:block and rendered as a 27px band under the footer
   showing the page background. Measured in the browser: docH 8105,
   footerBottom 8078, .box-scroll-to-top height 27 -- an exact match. Three
   earlier guesses (content-visibility, document overshoot, horizontal
   scrollbar) were all wrong; this is the element. */

.solace-skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.solace-skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	clip-path: none;
	z-index: 100000;
	background: #0F2038;
	color: #fff;
	font: 600 14px/1 Inter, system-ui, sans-serif;
	border: 1px solid #C9A34E;
	border-radius: 3px;
}