/* Lindus Site Functions — converted page content (post content + ACF page sections built as Elementor V4 elements).
 * Element styles live on the elements; this file holds what V4 element styles can't express:
 *   1. breakpoint variables at the theme's widths (992 / 576 / 1200), which Elementor's breakpoints don't have;
 *   2. rich-text descendants (links, lists, sup) inside converted paragraphs — hooked on the global classes
 *      lindus-rte / lindus-rte-dark, which render as real class names;
 *   3. raw-HTML blocks kept in Shortcode widgets (FAQ accordions, layout divs, tables, maps);
 *   4. the brands logo pager dots (assets/js/brands.js) and the post-content offer panel.
 * Values: themes/lindus scss + computed styles on the live site at 1440 / 800 / 390px. See build/specs/. */

/* ---- 1. Breakpoint variables (elements read them with a fallback = desktop value) ---- */
:root {
	--lsf-lg-dir: row;            /* two-col / tile columns side by side >= 992 (col-lg) */
	--lsf-lg-dir-alt: row-reverse; /* media-left tile rows (DOM order text → media) */
	--lsf-lg-flex: 1 1 0;         /* column flex >= 992 */
	--lsf-about-pad: 4vw 0 4vw 0; /* .section-about >= 992 */
	--lsf-sm-full: 0%;            /* icon columns (col-sm-*): flex-basis floor, 100% below 576 */
	--lsf-sm-w8: 66.6667%;        /* free-estimate form column (col-sm-8) >= 576 */
	--lsf-xl-dir: row;            /* page content + offer sidebar (col-xl-8 / col-xl-4) >= 1200 */
	--lsf-xl-main: 0 0 calc(66.6667% - 10px);
	--lsf-xl-side: 0 0 calc(33.3333% - 20px);
	--lsf-xl-offer-pad: 50px;     /* .offer-form: 50px >= 1200, 50px 8vw below */
}
@media (max-width: 1199px) {
	:root {
		--lsf-xl-dir: column;
		--lsf-xl-main: 0 0 auto;
		--lsf-xl-side: 0 0 auto;
		--lsf-xl-offer-pad: 50px 8vw;
	}
}
@media (max-width: 991px) {
	:root {
		--lsf-lg-dir: column;
		--lsf-lg-dir-alt: column;
		--lsf-lg-flex: 0 0 auto;
		--lsf-about-pad: 50px 0 100px 0;
	}
}
@media (max-width: 575px) {
	:root {
		--lsf-sm-full: 100%;
		--lsf-sm-w8: 100%;
	}
}

/* ---- 2. Rich text (theme #content rules) ---- */
/* Links: Bootstrap blue — the theme's own `#content a` rule is an invalid selector and never applied. */
.elementor .lindus-rte a:not(.e-button-base):not(.lindus-btn-primary),
.elementor .lindus-rte a:not(.e-button-base):not(.lindus-btn-primary):visited {
	color: #007bff;
	text-decoration: none;
}
.elementor .lindus-rte a:not(.e-button-base):not(.lindus-btn-primary):hover,
.elementor .lindus-rte a:not(.e-button-base):not(.lindus-btn-primary):focus {
	color: #0056b3;
	text-decoration: none;
}
.elementor .lindus-rte-dark a:not(.e-button-base):not(.lindus-btn-primary):hover,
.elementor .lindus-rte-dark a:not(.e-button-base):not(.lindus-btn-primary):focus {
	color: #ccc;
}
/* Links wrapping an image (e-image with a link) take no text styles. */
.elementor .lindus-rte a.e-image-base,
.elementor .lindus-rte a:has(> img) {
	display: contents;
}
.elementor .lindus-rte strong,
.elementor .lindus-rte b {
	font-weight: 700;
}
.elementor .lindus-rte em,
.elementor .lindus-rte i {
	font-style: italic;
}
.elementor .lindus-rte u {
	text-decoration: underline;
}
.elementor .lindus-rte sup,
.elementor .lindus-rte sub {
	position: relative;
	font-size: 75%;
	line-height: 0;
	vertical-align: baseline;
}
.elementor .lindus-rte sup {
	top: -.25em;
}
.elementor .lindus-rte sub {
	bottom: -.25em;
}
/* Lists (converted to e-paragraph tag span): check icons on <ul> (theme main.js prepended div.check). */
.elementor .lindus-rte ul {
	display: block;
	list-style: none;
	padding: 0;
	margin: 0;
}
.elementor .lindus-rte ul li {
	position: relative;
	display: list-item;
	list-style: none;
	margin: 0 0 .5em 4.5em;
	line-height: 1.375em;
}
.elementor .lindus-rte ul li::before {
	content: "";
	position: absolute;
	top: 0;
	left: -2.5em;
	width: 1.5em;
	height: 1.5em;
	background: url(../img/icon-check.svg) center / contain no-repeat;
}
.elementor .lindus-rte ul li ul {
	margin-top: 15px;
}
.elementor .lindus-rte ul li ul li {
	margin-left: 1.5em;
}
.elementor .lindus-rte ul li ul li::before {
	left: -1.8em;
	width: 1.2em;
	height: 1.2em;
}
.elementor .lindus-rte ol {
	display: block;
	list-style: decimal;
	padding-left: 1.25em;
	margin: 0;
}
.elementor .lindus-rte ol li {
	display: list-item;
	margin-bottom: .5em;
	line-height: 1.375em;
}
.elementor .lindus-rte blockquote {
	margin: 1.25em .75em;
	padding: .25em 1em .375em;
	font-size: 1.1875em;
	line-height: 1.375em;
	font-weight: 500;
	border-left: 6px solid #283891;
}
.elementor .lindus-rte .e-youtube-base iframe {
	border: 0;
}

/* ---- 3. Raw-HTML blocks (Shortcode widget) inside converted content: the theme's typography ---- */
.elementor .lindus-rte .elementor-widget-shortcode {
	width: 100%;
	max-width: 100%;
	font-family: Rubik, sans-serif;
	font-size: 18px;
	line-height: 1.5;
	color: inherit;
}
.elementor .lindus-rte .elementor-widget-shortcode p {
	margin: 0 0 .75em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
.elementor .lindus-rte .elementor-widget-shortcode h2 {
	margin: 1em 0 .5em;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.125em;
	letter-spacing: -.02em;
	color: inherit;
}
.elementor .lindus-rte .elementor-widget-shortcode h3 {
	margin: 1.25em 0 .5em;
	font-size: 26px;
	font-weight: 500;
	line-height: 1.1875em;
	letter-spacing: -.02em;
	color: inherit;
}
.elementor .lindus-rte .elementor-widget-shortcode img {
	max-width: 100%;
	height: auto;
}
.elementor .lindus-rte .elementor-widget-shortcode .aligncenter {
	display: block;
	margin: 0 auto 1em;
}
.elementor .lindus-rte .elementor-widget-shortcode table {
	border-collapse: collapse;
}
.elementor .lindus-rte .elementor-widget-shortcode iframe {
	max-width: 100%;
}
/* Bootstrap bits the old content markup relies on (Bootstrap is gone with the theme). */
.elementor .lindus-rte .elementor-widget-shortcode .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.elementor .lindus-rte .elementor-widget-shortcode [class*="col-"] {
	position: relative;
	width: 100%;
	padding: 0 15px;
}
@media (min-width: 768px) {
	.elementor .lindus-rte .elementor-widget-shortcode .col-md-6 { flex: 0 0 50%; max-width: 50%; }
	.elementor .lindus-rte .elementor-widget-shortcode .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}
.elementor .lindus-rte .elementor-widget-shortcode .text-center {
	text-align: center;
}
.elementor .lindus-rte .elementor-widget-shortcode .embed-responsive {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.elementor .lindus-rte .elementor-widget-shortcode .embed-responsive iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
/* Theme .btn.btn-primary for buttons kept inside raw HTML — same values as the global class lindus-btn-primary. */
.elementor .lindus-rte .elementor-widget-shortcode .btn.btn-primary {
	display: inline-block;
	padding: 17.5px 42px;
	border: 1px solid #cbea1b;
	border-radius: 5px;
	background-color: #cbea1b;
	background-image: linear-gradient(0deg, #cbea1b, #e5ff51);
	color: #262b35;
	font-family: Rubik, sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 15.75px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all .3s;
}
.elementor .lindus-rte .elementor-widget-shortcode .btn.btn-primary:hover,
.elementor .lindus-rte .elementor-widget-shortcode .btn.btn-primary:focus {
	background-color: #fff;
	background-image: none;
	color: #262b35;
}
@media (max-width: 1024px) {
	.elementor .lindus-rte .elementor-widget-shortcode { font-size: 16px; }
	.elementor .lindus-rte .elementor-widget-shortcode h2 { font-size: 28px; }
	.elementor .lindus-rte .elementor-widget-shortcode h3 { font-size: 23px; }
}
@media (max-width: 767px) {
	.elementor .lindus-rte .elementor-widget-shortcode { font-size: 15px; }
	.elementor .lindus-rte .elementor-widget-shortcode h2 { font-size: 25px; }
	.elementor .lindus-rte .elementor-widget-shortcode h3 { font-size: 21px; }
}

/* ---- 4a. Brands logo pager (assets/js/brands.js; theme Slick .slider-dots.darker) ---- */
/* The list keeps a 15px bottom padding (the theme's empty dots row); when dots show, they take that place. */
.elementor .lindus-brands.is-sliding {
	padding-bottom: 0;
}
.elementor .lindus-brands .lsf-dots {
	display: flex;
	justify-content: center;
	margin: 15px 0 0;
	padding: 0;
	list-style: none;
}
.elementor .lindus-brands .lsf-dots li {
	display: flex;
	width: 23px;
	height: 17px;
	margin: 0;
	cursor: pointer;
}
.elementor .lindus-brands .lsf-dots button {
	width: 17px;
	height: 17px;
	margin: 0 3px;
	padding: 0;
	border: 0;
	border-radius: 100%;
	background: rgba(38, 43, 53, .5);
	font-size: 0;
	cursor: pointer;
	transition: background-color .1s;
}
.elementor .lindus-brands .lsf-dots li:hover button {
	background: #8f8f8f;
}
.elementor .lindus-brands .lsf-dots li.is-active button {
	background: #283891;
}
.elementor .lindus-brands.is-sliding > .e-con-inner,
.elementor .lindus-brands.is-sliding {
	touch-action: pan-y;
}
.elementor .lindus-brands.is-dragging * {
	user-select: none;
	-webkit-user-drag: none;
}

/* ---- 4b. Offer panel next to the page content (theme sidebar.php .offer-form.sidebar__form) ---- */
.elementor .lindus-offer-panel b,
.elementor .lindus-offer-panel strong {
	font-weight: 700; /* sidebar offer: bold runs stay bold (site.css sets 400 for the banner) */
}
.elementor .lindus-offer-panel form {
	width: 100%;
	margin: 36px auto;
}
.elementor .lindus-offer-panel .elementor-widget-shortcode {
	width: 100%;
}
.elementor .lindus-offer-panel .chosen-container {
	width: 100% !important; /* Chosen measures the select while the sticky panel lays out; the theme field is full width */
}

/* ---- 5. Brilliant Web-to-Lead [salesforce] forms ----
 * The plugin loads custom.css from the active theme's salesforce-wordpress-to-lead/ folder; that file lived in the
 * lindus theme (html font-size 10px, so rem values are px/10 here). Same rules, in px. */
.salesforce_w2l_lead .sf_field {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 1px;
	flex: 1 1 0;
	margin-bottom: 10px;
	padding-right: 5px;
	padding-left: 5px;
	text-align: left;
	font-family: Rubik, sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.5em;
	color: #262b35;
	outline: 0;
}
.salesforce_w2l_lead .w2llabel {
	display: inline-block;
	flex-grow: 1;
	margin: .375em 0;
	text-align: left;
	font-size: 17px;
	font-weight: 500;
	line-height: 1em;
	color: #262b35;
}
.salesforce_w2l_lead .w2linput {
	display: block;
	width: 100%;
	height: 42px;
	margin: 0;
	padding: .5em 12px .5em 12.5px;
	border: none;
	border-radius: 5px;
	outline: 0;
	background-color: #efefef;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.125em;
	text-transform: uppercase;
	color: #495057;
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.salesforce_w2l_lead .w2lsubmit .w2linput.submit {
	display: inline-block;
	width: inherit;
	min-width: 200px;
	height: auto;
	min-height: 52px;
	margin: 0;
	padding: 1.25em 3em;
	border: 1px solid #cbea1b;
	border-radius: 5px;
	background-color: #cbea1b;
	background-image: linear-gradient(0deg, #cbea1b, #e5ff51);
	font-family: inherit;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.125em;
	letter-spacing: 1px;
	text-align: center;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: normal;
	vertical-align: middle;
	color: #262b35;
	cursor: pointer;
	-webkit-appearance: button;
	transition: all .3s ease;
}
.salesforce_w2l_lead .sf_field.sf_type_multi-select .w2linput {
	height: inherit;
}
.salesforce_w2l_lead .sf_required_fields_msg {
	font-size: inherit;
	color: #262b35;
}
@media only screen and (min-width: 768px) {
	.sf_one_column {
		max-width: 50% !important;
		margin: 0 auto !important;
	}
}

/* ---- 6. Raw HTML lead forms in a Free Estimate section (theme .offer-form.hero__form markup) ---- */
.lsf-raw-form .offer-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 50px 8vw 100px;
	text-align: center;
	background-position: 50% 50%;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (min-width: 1200px) {
	.lsf-raw-form .hero__form {
		width: 40%;
		max-width: 500px;
		padding: 50px 4vw 0;
	}
}
.lsf-raw-form .offer-form form {
	width: calc(100% - 20px);
	margin: 36px auto;
}
.lsf-raw-form .form-group {
	margin-bottom: 10px;
}
.lsf-raw-form p:empty {
	display: none;
}

/* ---- FAQ accordions (build/convert/accordion.py → e-accordion with global class lindus-faq) ----
 * Replaces the Header Footer Code Manager snippets #64–#66 the theme pages relied on. Arial isn't a Google Font, so
 * the element styles can't carry it; the "+" icon loses its vertical stroke when open (→ "−") instead of rotating. */
.elementor .lindus-faq,
.elementor .lindus-faq .e-paragraph-base {
	font-family: Arial, Helvetica, sans-serif;
}
.elementor .lindus-faq summary {
	list-style: none;
}
.elementor .lindus-faq summary::-webkit-details-marker {
	display: none;
}
.elementor .lindus-faq summary *,
.elementor .lindus-faq details[open] > summary * {
	transform: none !important;
}
.elementor .lindus-faq details[open] > summary .lsf-plus-v {
	display: none;
}
.elementor .lindus-faq a {
	color: #007bff;
}
/* The theme's "+" was an Arial 18px glyph (~10px); Elementor's SVG sizing otherwise wins over the element style. */
.elementor .lindus-faq summary .e-svg-base,
.elementor .lindus-faq summary svg {
	width: 10px !important;
	height: 10px !important;
	min-width: 0 !important;
}