/*
 * Elementor parity fixes for LB Engineering pages converted from Gutenberg.
 *
 * Elementor's own stylesheets are loaded in a cascade layer (see
 * inc/Setup/ElementorParity.php), so the source CSS already wins every direct
 * conflict. This file is only for structural residue the layer cannot fix:
 * Elementor wraps each widget in a div and turns each container into a flex
 * column, so rules here re-establish what the source markup relied on.
 *
 * Add rules only when the pixel report (gutenberg-to-elementor skill) shows a
 * band that needs them, and note which section they fix.
 */

/* Converted containers mirror plain block-level source elements: no default
   container padding, no widget gaps, and `width: auto` instead of Elementor's
   100%. The difference matters as soon as the element has horizontal margins
   (Bootstrap .row: 100% loses the -12px gutters) or is a flex item that the
   source sizes shrink-to-fit (the hero's centred .home-main-content). These are
   custom-property defaults only, so Elementor's own controls (which write the
   same properties per element at higher specificity) keep working. The kit
   sets the padding/gap defaults too; repeating them here keeps parity even if
   the kit is reset. */
.e-con.lbe-con {
	--container-default-padding-top: 0px;
	--container-default-padding-right: 0px;
	--container-default-padding-bottom: 0px;
	--container-default-padding-left: 0px;
	--widgets-spacing: 0px 0px;
	--widgets-spacing-row: 0px;
	--widgets-spacing-column: 0px;
	--width: auto;
	/* A source element the source CSS makes a flexbox (.contact-flex
	   { display: flex }) is a row unless it says otherwise; Elementor's column
	   default would stack its children. The direction control still writes
	   --flex-direction per element at higher specificity. */
	--flex-direction: row;
	/* Elementor switches every container to flex-wrap: wrap under 768px. In a
	   wrapping column flexbox the flex line is sized to its content, so a child
	   like Bootstrap's .row stops stretching to the container width (428px
	   inside a 390px phone) and text reflows. A plain block never wraps. */
	--flex-wrap-mobile: nowrap;
}

/* A converted container stands in for a plain source element, and plain
   elements are blocks, not flexboxes. The differences bite in ordinary CSS:
   `margin: 0 auto` on a flex item cancels stretch and shrinks it to content
   (.engineer-services-content lost 38px on phones), sibling margins stop
   collapsing, inline children become flex items. Zero specificity (:where) so
   any source rule that makes the element a flexbox (.row, .d-flex,
   .hero .col-12 ...) still wins. Containers the converter marked lbe-flex
   (source flex rows) keep Elementor's flex engine and its direction controls. */
:where(.e-con.lbe-con:not(.lbe-flex)) {
	display: block;
}

/* Inline styles on source elements (style="padding-top:0") become Elementor
   control values plus a side marker; the marked side consumes the control's
   custom property with !important, the strength an inline style had over the
   stylesheet. Unmarked sides stay with the source stylesheet. Editing the
   value in Elementor's Padding/Margin/Min Height control updates it. */
.e-con.lbe-pt { padding-block-start: var(--padding-block-start) !important; }
.e-con.lbe-pb { padding-block-end: var(--padding-block-end) !important; }
.e-con.lbe-pl { padding-inline-start: var(--padding-inline-start) !important; }
.e-con.lbe-pr { padding-inline-end: var(--padding-inline-end) !important; }
.e-con.lbe-mt { margin-block-start: var(--margin-block-start) !important; }
.e-con.lbe-mb { margin-block-end: var(--margin-block-end) !important; }
.e-con.lbe-ml { margin-inline-start: var(--margin-inline-start) !important; }
.e-con.lbe-mr { margin-inline-end: var(--margin-inline-end) !important; }
.e-con.lbe-mh { min-height: var(--min-height) !important; }
.e-con.lbe-h { height: var(--min-height) !important; }

/* A widget wrapper sits between a converted container and the source markup
   it holds. When that markup sizes itself against its parent (`.lb-choose-box
   { height: 100% }` filling a Bootstrap column that flex-stretches to the row
   height), the wrapper's auto height breaks the percentage and the cards end
   up unequal. A lone widget takes its container's full height so the source
   element sees the same parent height it had. Zero specificity, so widget
   height settings still win. */
:where(.e-con.lbe-con) > .elementor-widget:only-child {
	height: 100%;
}

/* A widget holding a bare <hr> (marked lbe-bare by the converter): in the
   source the <hr> was the row's child and took the gutter padding itself,
   so its border spanned the full row. The wrapper takes the padding instead
   and the line ends 12px short on each side unless the wrapper gives it up. */
.row > .elementor-widget.lbe-bare {
	padding-left: 0;
	padding-right: 0;
}

/* Logged-in admin bar: keep the fixed header below it instead of hiding behind it. */
body.admin-bar .header.fixed-top {
	top: 32px;
}
@media (max-width: 782px) {
	body.admin-bar .header.fixed-top {
		top: 46px;
	}
}
@media (max-width: 600px) {
	/* The admin bar is position: absolute here and scrolls away, so the header starts
	   below it (46px) and assets/js/main.js lifts it to the top as the page scrolls.
	   Top is left out of the transition so it follows the scroll without lag. */
	body.admin-bar .header.fixed-top {
		top: 46px;
		transition: background-color 0.5s, box-shadow 0.5s;
	}
}

/* Project page title row: on the source the back arrow link is a direct flex child of .prjt-dflex and
   shrinks next to a long title. Here the link and the title each sit inside a text widget, so let the widgets take no box of their own. */
.prjt-dflex > .elementor-widget-text-editor { display: contents; }

/* Playfair Display. The source loads it from Google Fonts through the extension-less file
   _cdn/fonts.googleapis.com/css2, which the host serves as text/plain, so browsers ignore it.
   Same @font-face rules, loaded from this stylesheet instead. */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_qiTbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_pqTbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_naUbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_iiUbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_gGUbtY.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKdFvUDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKd3vUDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKebukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfFukDQ.ttf) format('truetype');
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../src/_cdn/fonts.gstatic.com/s/playfairdisplay/v40/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKfsukDQ.ttf) format('truetype');
}

/* v4 paragraphs: Elementor resets inline link colour (.e-paragraph-base a { color: unset }), so links looked like plain text.
   Re-apply the site's link style from main.css (a / a:hover). Specificity .elementor + .e-paragraph-base beats the reset. */
.elementor .e-paragraph-base a {
	color: #5F96E7;
	text-decoration: none;
	transition: 0.3s;
}
.elementor .e-paragraph-base a:hover {
	color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/* lbx-list: add in the CSS Classes field of a Text Editor widget that holds a bulleted/numbered list.
   Gives the list items a little space between them (the widget has no setting for it in the free version). */
.lbx-list li {
	margin-bottom: 16px;
}
.lbx-list li:last-child {
	margin-bottom: 0;
}

/* lbx-align-laptop: v4 global class. Between the tablet breakpoint (1024px) and 1199px the editor has no breakpoint of its own,
   so a flexbox with this class aligns its items to the start instead of the value set in its local style. */
@media (min-width: 1025px) and (max-width: 1199px) {
	.elementor .lbx-align-laptop {
		align-items: flex-start;
	}
}

/* lbx-icon-list: add in the CSS Classes field of an Icon List widget. The theme's ul padding (Bootstrap, 2rem) pushes the
   icons away from the left edge; this removes it so the list lines up with the text above it. */
.lbx-icon-list .elementor-icon-list-items {
	padding-left: 0;
}

/* lbx-faq: add in the CSS Classes field of a nested Accordion widget (title tag: div). Matches the site's existing FAQ accordion:
   white items with a soft shadow, light-blue title when open, chevron on the right. The theme's reset breaks the default title row, so it is rebuilt here. */
.lbx-faq .e-n-accordion { gap: 0; }
.lbx-faq .e-n-accordion-item { background: #fff; color: #212529; border: 0; border-radius: 0; margin-bottom: 20px; box-shadow: 0 0 3px 0 #000; }
.lbx-faq .e-n-accordion-item-title { position: relative; display: flex; align-items: center; width: 100%; padding: 16px 20px; color: #212529; background: #fff; border: 0; border-radius: 0; list-style: none; cursor: pointer; text-align: left; box-shadow: none; transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out; }
.lbx-faq .e-n-accordion-item-title::-webkit-details-marker { display: none; }
.lbx-faq .e-n-accordion-item-title-header { flex: 1 1 auto; }
.lbx-faq .e-n-accordion-item-title-text { margin: 0; font-family: Nexa-Bold, sans-serif; font-size: 16px; font-weight: 400; line-height: 19.2px; color: inherit; }
.lbx-faq .e-n-accordion-item-title-icon { display: none; }
.lbx-faq .e-n-accordion-item-title::after { content: ""; flex-shrink: 0; width: 20px; height: 20px; margin-left: auto; background-repeat: no-repeat; background-size: 20px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); transition: transform .2s ease-in-out; }
.lbx-faq .e-n-accordion-item[open] > .e-n-accordion-item-title { color: #052c65; background: #cfe2ff; box-shadow: inset 0 -1px 0 #dee2e6; }
.lbx-faq .e-n-accordion-item[open] > .e-n-accordion-item-title::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e"); transform: rotate(-180deg); }
.lbx-faq .e-n-accordion-item > .e-con { padding: 16px 20px; gap: 0; min-height: 0; background: #fff; }
.lbx-faq .e-n-accordion-item > .e-con > :last-child { margin-bottom: 0; }
.lbx-faq .e-n-accordion-item-title:focus { z-index: 3; outline: 0; box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25); }

/* lbx-acc-area: add together with lbx-faq on a nested Accordion that has a single item (the "Related Service Areas" boxes).
   Boxed black border, black title when open. */
.lbx-acc-area .e-n-accordion-item { border: 1px solid #000; margin-bottom: 0; box-shadow: none; }
.lbx-acc-area .e-n-accordion-item-title-text { font-size: 18px; line-height: 22px; }
.lbx-acc-area .e-n-accordion-item[open] > .e-n-accordion-item-title { color: #fff; background: #000; }
.lbx-acc-area .e-n-accordion-item[open] > .e-n-accordion-item-title::after { filter: invert(1); }

/* lbx-404-text: 404 template link look (dark, underlined) like live */
.elementor .lbx-404-text a, .elementor .lbx-404-text a:hover, .elementor .lbx-404-text a:focus { color: #191919; text-decoration: underline; }