/*
 * Weebo layout and shared components.
 *
 * The page layout reproduces Elementor's box model so the hard-coded pages keep the old look:
 *   .wb-sec   a full-width section (padding/background per page in assets/css/pages/*.css)
 *   .wb-wrap  the 1140px boxed row (.wb-wrap--full for full width)
 *   .wb-col   a column with a 10px gutter; widths via .wb-col-25/33/50/66/100 or page CSS
 * Direct children of a column are stacked with 20px between them, like Elementor widgets.
 * The gap is a top margin on the following sibling. Columns are flex containers, so the gap
 * adds to each element's own margins, as on most Elementor pages. Pages Elementor rendered in
 * its older block mode (FAQ, Terms) use .wb-col--block, where the margins collapse instead.
 */

/* ---------- layout ---------- */
.wb-sec { position: relative; }
.wb-sec > .wb-bg-overlay { position: absolute; inset: 0; pointer-events: none; }
.wb-wrap { position: relative; display: flex; flex-wrap: wrap; max-width: 1140px; margin: 0 auto; }
.wb-wrap--full { max-width: none; }
.wb-col { position: relative; display: flex; flex-wrap: wrap; align-content: flex-start; width: 100%; min-height: 1px; padding: 10px; }
.wb-col > * { width: 100%; }
.wb-sec .wb-col > * + * { margin-top: 20px; }
.wb-sec .wb-col > .wb-wrap + * { margin-top: 0; } /* Elementor puts no gap after an inner section */
.wb-col--block { display: block; }
.wb-col:empty { padding: 0; } /* spacer columns take no height when stacked on mobile */
.wb-wrap.is-middle > .wb-col { align-content: center; }
.wb-col--flush { padding: 0; }

@media (min-width: 768px) {
	.wb-col-8 { width: 8%; }
	.wb-col-25 { width: 25%; }
	.wb-col-33 { width: 33.333%; }
	.wb-col-50 { width: 50%; }
	.wb-col-66 { width: 66.666%; }
	.wb-col-83 { width: 83.332%; }
	.wb-col-100 { width: 100%; }
}
@media (max-width: 1024px) { .wb-wrap { max-width: 1024px; } }
@media (max-width: 767px) { .wb-wrap { max-width: 767px; } }

/* ---------- shared section styles ---------- */
.wb-pad-80 { padding: calc(80px * var(--wb-sy, 1)) 0; }
.wb-bg-light { background-color: var(--wb-bg-soft); }
.wb-bg-blue { background-color: var(--wb-accent); }

/* Solid blue "Our Working Process" band. */
.wb-sec--process { background-color: var(--wb-accent); padding: calc(90px * var(--wb-sy, 1)) 0 calc(80px * var(--wb-sy, 1)); }

/* Column with extra left padding next to an image (Elementor "10px 10px 10px 40px"). */
.wb-col--text-left { padding: 10px 40px 10px 10px; } /* text column left of an image: the indent faces the image */
@media (max-width: 767px) { .wb-col--text-left { padding: 10px; } }

/* Blue call-to-action band (template-parts/cta-band.php). */
.wb-cta-band { padding: 67px 0; background-color: var(--wb-accent); }
.wb-cta-band > .wb-bg-overlay { background: #4054b2 url(../../../../uploads/2018/08/background-1.jpg) center / cover no-repeat; opacity: 0.1; }
.wb-cta-band .wb-cta-band__title { color: #fff;  font-size: 2.4rem; font-weight: 700; line-height: 1.2em; padding: 10px 95px 10px 10px; }
.wb-cta-band__button { text-align: right; }
.wb-cta-band__button .xs-btn { font-weight: 700; color: #fff; }
.wb-cta-band__button .xs-btn:hover { color: #4054b2; background-color: #fff; }
.wb-cta-band--soft .wb-cta-band__button .xs-btn { font-weight: 400; }
.wb-cta-band--soft .wb-cta-band__button .xs-btn:hover { color: #fff; background-color: #1027a8; }
@media (min-width: 768px) {
	.wb-cta-band__text { width: 55%; }
	.wb-cta-band__action { width: 45%; }
}
@media (max-width: 767px) {
	.wb-cta-band .wb-cta-band__title { padding: 0; text-align: center; }
	.wb-cta-band__button { text-align: center; }
}

/* ---------- widgets ---------- */

/* Seocify section headings: white variant and the extra space under the process heading. */
.xs-heading.is-white .section-title,
.xs-heading.is-white .section-subtitle { color: #fff; }
.wb-col > .process-heading { margin-bottom: 44px; }

/* Body copy used by Elementor text widgets across the site. */
.wb-text { color: #292225;  font-size: 1rem; font-weight: 400; line-height: 1.7333333333em; letter-spacing: -0.4px; }
.wb-col > .wb-text { margin-bottom: 30px; }

/* Elementor-style heading widget (plain h2/h3 with its own typography; defaults are Elementor's globals). */
.wb-title { margin: 0; padding: 0; line-height: 1; color: var(--wb-ink);  font-weight: 600; }
.wb-title span { color: var(--wb-accent); } /* Seocify highlights words wrapped in <span> */
.wb-size-large { font-size: 29px; } /* Elementor heading size preset */

/* Elementor text-editor widget defaults. */
.wb-editor { color: var(--wb-text-soft);  font-weight: 400; }

/* Spacer widget. */
.wb-spacer { height: var(--spacer-size, 50px); }

/* Column with vertically centred content; right-aligned widget (centred on mobile). */
.wb-col.is-middle { align-content: center; }
.wb-align-right { text-align: right; }
@media (max-width: 767px) { .wb-mobile-align-center { text-align: center; } }

/* Check-mark list (Elementor icon list). */
.wb-check-list { list-style: none; margin: 0; padding: 0; }
.wb-check-list li { display: flex; align-items: center;  font-size: 1rem; line-height: 1.7333333333em; color: #292225; }
.wb-check-list li:not(:last-child) { padding-bottom: 5px; }
.wb-check-list li:not(:first-child) { margin-top: 5px; }
.wb-check-list span { align-self: center; padding-left: 5px; }
.wb-col > .wb-check-list { margin-bottom: 40px; }

/* Icon list with Elementor markup (any icon). */
.wb-icon-list .elementor-icon-list-items { list-style: none; margin: 0; padding: 0; }
.wb-icon-list .elementor-icon-list-item { position: relative; display: flex; align-items: var(--icon-vertical-align, center); margin: 0; padding: 0; font-size: inherit; }
.wb-icon-list .elementor-icon-list-icon { position: relative; top: var(--icon-vertical-offset, initial); display: flex; }
.wb-icon-list .elementor-icon-list-icon + .elementor-icon-list-text { align-self: center; padding-inline-start: 5px; }
.wb-icon-list .elementor-icon-list-text { color: var(--wb-text-soft);  font-weight: 400; }

/* Image widget (centred by default, like Elementor). */
.wb-img { text-align: center; }
.wb-img img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; }
.wb-img--center { text-align: center; }
.wb-img.xs-info-img { text-align: left; } /* Elementor kept these left-aligned on mobile too */

/* Icon box (keeps Elementor's class names because the Seocify CSS styles them, e.g. .contact-widget). */
.wb-icon-box .elementor-icon-box-wrapper { display: block; text-align: center; }
.wb-icon-box .elementor-icon-box-icon { margin: 0 auto 19px; }
.wb-icon-box .elementor-icon { display: inline-block; line-height: 1; color: var(--wb-accent); font-size: 50px; text-align: center; }
.wb-icon-box .elementor-icon i { position: relative; display: block; width: 1em; height: 1em; }
.wb-icon-box .elementor-icon-box-description { margin: 0; color: var(--wb-text-soft);  font-weight: 400; }

/* Accordion (Elementor toggle markup). */
.wb-toggle .elementor-toggle { text-align: start; }
.wb-toggle .elementor-tab-title { margin: 0; padding: 15px; border-bottom: none; font-weight: 700; line-height: 1; cursor: pointer; outline: none; }
.wb-toggle .elementor-toggle-icon { display: inline-block; width: 1em; }
.wb-toggle .elementor-toggle-icon-right { float: right; text-align: right; }
.wb-toggle .elementor-toggle-icon-closed { display: block; }
.wb-toggle .elementor-toggle-icon-opened,
.wb-toggle .elementor-active .elementor-toggle-icon-closed { display: none; }
.wb-toggle .elementor-active .elementor-toggle-icon-opened { display: block; }
.wb-toggle .elementor-toggle-title {  font-weight: 600; }
.wb-toggle .elementor-tab-content { display: none; padding: 15px; border-bottom: none; color: var(--wb-text-soft);  font-weight: 400; }
@media (max-width: 767px) {
	.wb-toggle .elementor-tab-title { padding: 12px; }
	.wb-toggle .elementor-tab-content { padding: 12px 10px; }
}

/* Thin horizontal divider with 50px space above and below. */
.wb-divider { display: flex; align-items: center; padding: calc(36px * var(--wb-sy, 1)) 0; }
.wb-divider span { display: flex; width: 100%; border-top: 1px solid var(--wb-line); } /* #f7f7f7 was invisible on white */

/* Embedded Google map. */
.wb-map { overflow: hidden; line-height: 0; }
.wb-map iframe { width: 100%; height: 400px; border: 0; }

/* ---------- forms ---------- */
.weebo-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.weebo-form-response:empty { display: none; }
.weebo-form-response { margin: 1em 0 0; padding: 0.5em 1em; border: 2px solid #46b450; font-size: 0.9rem; }
.weebo-form-response.is-error { border-color: #dc3232; }
.weebo-field-error { display: block; color: #dc3232; font-size: 0.85em; font-weight: normal; margin: -0.6em 0 0.8em; }
.footer-widget .weebo-form-response { color: #fff; }

/* Spinner next to a submit button; takes the same space as Contact Form 7's did, visible while sending. */
.weebo-spinner { visibility: hidden; display: inline-block; position: relative; width: 24px; height: 24px; margin: 0 24px; padding: 0; border-radius: 100%; background-color: #23282d; opacity: 0.75; vertical-align: middle; }
.weebo-spinner::before { content: ""; position: absolute; top: 4px; left: 4px; width: 6px; height: 6px; border-radius: 100%; background-color: #fbfbfc; transform-origin: 8px 8px; animation: weebo-spin 1s linear infinite; }
.weebo-form.is-submitting .weebo-spinner { visibility: visible; }
@keyframes weebo-spin { to { transform: rotate(360deg); } }