/* ═══════════════════════════════════════════════════════════════════════
   wp-compat — imported WordPress/Kadence markup, rendered WITHOUT Kadence's
   own stylesheet or JS.

   Loaded only when the `wp-compat` module is enabled (see partials/head.php),
   and every rule is scoped to `.lws-html[data-source="wp-import"]` — the
   wrapper the `html` block puts around imported bodies. A greenfield site
   loads none of this, and an imported body can sit on the same page as
   designed blocks without leaking styles into them.

   Imported bodies carry their own inline <style> blocks (Kadence writes
   per-block CSS using --global-palette* vars). Those still win where present;
   everything here is the low-specificity layout/behaviour Kadence's main
   stylesheet and JS would have supplied.

   Two classes here — .lws-oncolor and .lws-onimage — are NOT in the WordPress
   markup. modules/wp-compat/wp-compat.php adds them at render time, because
   Kadence sets column backgrounds inside <style> rules rather than inline
   style attributes, and CSS alone cannot tell which blocks sit on a dark or
   photographic background and therefore need light text.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── row layout + columns (kt-row-layout / kadence-column) ─────────────── */

.lws-html[data-source="wp-import"] .wp-block-kadence-rowlayout { margin: 1.6rem 0; }
.lws-html[data-source="wp-import"] .kt-row-layout-inner { width: 100%; max-width: 100%; }
.lws-html[data-source="wp-import"] .kt-row-column-wrap {
  display: flex; flex-wrap: wrap;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
.lws-html[data-source="wp-import"] .kt-row-column-wrap > .wp-block-kadence-column { flex: 1 1 260px; min-width: 0; }
.lws-html[data-source="wp-import"] .kt-inside-inner-col { min-width: 0; }
.lws-html[data-source="wp-import"] .kt-inside-inner-col > :first-child { margin-top: 0; }
.lws-html[data-source="wp-import"] .kt-inside-inner-col > :last-child { margin-bottom: 0; }

/* Rows whose background image IS on the inline style attribute. The inline
   block CSS sets the image; this guarantees contrast even when it also set
   dark text meant for a light Kadence overlay we never render. */
.lws-html[data-source="wp-import"] [class*="kt-row-layout-id"]:has(> .kt-row-layout-inner[style*="background-image"]),
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"] {
  position: relative;
  border-radius: var(--lws-radius-lg);
  overflow: hidden;
  background-size: cover; background-position: center;
}
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"] {
  padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3rem);
}
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"]::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(100deg,
    rgb(var(--lws-overlay-rgb) / .74) 0%,
    rgb(var(--lws-overlay-rgb) / .48) 55%,
    rgb(var(--lws-overlay-rgb) / .28) 100%);
}
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"] > * { position: relative; z-index: 1; }
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"] :is(h1, h2, h3, h4, p, li, span, a):not(.btn):not(.kt-blocks-accordion-title) { color: #fff; }
.lws-html[data-source="wp-import"] .kt-row-layout-inner[style*="background-image"] .eyebrow { color: var(--lws-accent-soft); }

/* ── contrast-tagged regions (added by the PHP half) ───────────────────── */

/* dark background → light text */
.lws-html[data-source="wp-import"] .lws-oncolor :is(h1, h2, h3, h4, h5, h6, p, li, a, strong, em):not(.btn) { color: #fff; }
.lws-html[data-source="wp-import"] .lws-oncolor .eyebrow,
.lws-html[data-source="wp-import"] .lws-oncolor figcaption { color: var(--lws-accent-soft); }

/* photographic background → scrim, then light text. Kadence ships a
   .kt-row-layout-overlay div in bg rows for exactly this, so where one exists
   we re-colour it (its own positioning CSS isn't shipped); column-image blocks
   have no overlay div and get ::after instead. */
.lws-html[data-source="wp-import"] .lws-onimage {
  position: relative;
  background-size: cover; background-position: center;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.lws-html[data-source="wp-import"] .lws-onimage > .kt-inside-inner-col { position: relative; }
.lws-html[data-source="wp-import"] .kt-row-layout-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lws-html[data-source="wp-import"] .lws-onimage > .kt-row-layout-overlay {
  opacity: 1 !important;
  background: linear-gradient(100deg,
    rgb(var(--lws-overlay-rgb) / .68) 0%,
    rgb(var(--lws-overlay-rgb) / .40) 60%,
    rgb(var(--lws-overlay-rgb) / .22) 100%) !important;
}
.lws-html[data-source="wp-import"] .lws-onimage:not(:has(> .kt-row-layout-overlay)) > .kt-inside-inner-col::after,
.lws-html[data-source="wp-import"] .lws-onimage:not(:has(> .kt-row-layout-overlay))::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgb(var(--lws-overlay-rgb) / .68), rgb(var(--lws-overlay-rgb) / .34));
}
.lws-html[data-source="wp-import"] .lws-onimage > *:not(.kt-row-layout-overlay),
.lws-html[data-source="wp-import"] .lws-onimage > .kt-inside-inner-col > * { position: relative; z-index: 1; }

/* Readability safety net: light text in dark/image regions gets a layered
   shadow so it holds up over ANY photo, even where the scrim is subtle. */
.lws-html[data-source="wp-import"] .lws-onimage :is(h1, h2, h3, h4, p, li, span),
.lws-html[data-source="wp-import"] .lws-oncolor :is(h1, h2, h3, h4, p, li, span) {
  text-shadow: 0 1px 3px rgb(var(--lws-overlay-rgb) / .78), 0 3px 16px rgb(var(--lws-overlay-rgb) / .5);
}

/* ── icons (kt-svg-icon) — cap runaway sizes, colour from the palette ───── */

.lws-html[data-source="wp-import"] .wp-block-kadence-icon { display: flex; flex-wrap: wrap; gap: 1rem; }
.lws-html[data-source="wp-import"] .kb-svg-icon-wrap,
.lws-html[data-source="wp-import"] .kt-svg-icon-wrap { font-size: 2.4rem; line-height: 0; }
.lws-html[data-source="wp-import"] .wp-block-kadence-icon svg,
.lws-html[data-source="wp-import"] .kt-svg-icon-wrap svg,
.lws-html[data-source="wp-import"] .kb-svg-icon-wrap svg {
  width: 1em; height: 1em; max-width: 4rem; max-height: 4rem; fill: currentColor;
}
/* a stray inline SVG with no explicit size must not blow up the layout */
.lws-html[data-source="wp-import"] > svg:not([width]),
.lws-html[data-source="wp-import"] p > svg:not([width]),
.lws-html[data-source="wp-import"] span > svg:not([width]) { max-width: 3rem; max-height: 3rem; }

/* ── accordion (kt-accordion / wp-block-kadence-pane) ──────────────────── */
/* Behaviour comes from wp-compat.js; this is the presentation. */

.lws-html[data-source="wp-import"] .kt-accordion-wrap { margin: 1.5rem 0; }
.lws-html[data-source="wp-import"] .wp-block-kadence-pane { margin-bottom: .7rem; }
.lws-html[data-source="wp-import"] .kt-accordion-header-wrap { margin: 0; }
.lws-html[data-source="wp-import"] .kt-blocks-accordion-header {
  width: 100%; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--lws-surface);
  border: 1.5px solid var(--lws-line);
  border-radius: var(--lws-radius);
  padding: 1rem 1.3rem;
  font-family: var(--lws-font-display); font-weight: 600; font-size: 1.1rem;
  color: var(--lws-ink);
  cursor: pointer;
  box-shadow: var(--lws-shadow);
  transition: border-color .15s, color .15s;
}
.lws-html[data-source="wp-import"] .kt-blocks-accordion-header:hover,
.lws-html[data-source="wp-import"] .kt-blocks-accordion-header.kt-accordion-panel-active { color: var(--lws-brand); border-color: var(--lws-brand-soft); }
.lws-html[data-source="wp-import"] .kt-blocks-accordion-title { font-family: var(--lws-font-display); font-weight: 600; }
/* CSS-drawn +/− marker — Kadence's icon-trigger styling isn't shipped */
.lws-html[data-source="wp-import"] .kt-blocks-accordion-header::after {
  content: '+'; font-size: 1.6rem; line-height: 1; color: var(--lws-brand); flex-shrink: 0; transition: transform .2s;
}
.lws-html[data-source="wp-import"] .kt-blocks-accordion-header.kt-accordion-panel-active::after { content: '\2212'; }
.lws-html[data-source="wp-import"] .kt-blocks-accordion-icon-trigger { display: none; }
.lws-html[data-source="wp-import"] .kt-accordion-panel { overflow: hidden; }
/* Gated on .lws-js (set by the inline script in head.php): with scripting off
   nothing can ever reopen a collapsed panel, so every panel stays visible and
   the page reads as a plain document. Same contract as the rest of the engine. */
.lws-js .lws-html[data-source="wp-import"] .kt-accordion-panel-hidden { display: none; }
.lws-html[data-source="wp-import"] .kt-accordion-panel-inner { padding: 1rem 1.3rem 1.4rem; }
.lws-html[data-source="wp-import"] .kt-accordion-panel-inner > :first-child { margin-top: 0; }
.lws-html[data-source="wp-import"] .kt-accordion-panel-inner > :last-child { margin-bottom: 0; }

/* ── tabs (kt-tabs) ────────────────────────────────────────────────────── */

.lws-html[data-source="wp-import"] .kt-tabs-wrap { margin: 1.5rem 0; }
.lws-html[data-source="wp-import"] .kt-tabs-title-list {
  display: flex; flex-wrap: wrap; gap: .5rem;
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  border-bottom: 2px solid var(--lws-line);
}
.lws-html[data-source="wp-import"] .kt-tabs-title-list li,
.lws-html[data-source="wp-import"] .kt-title-item { list-style: none; margin: 0; }
.lws-html[data-source="wp-import"] .kt-tab-title {
  display: inline-block; padding: .7rem 1.1rem;
  font-family: var(--lws-font-display); font-weight: 600;
  color: var(--lws-muted); text-decoration: none;
  border-radius: var(--lws-radius) var(--lws-radius) 0 0;
  cursor: pointer;
}
.lws-html[data-source="wp-import"] .kt-title-item.kt-tab-title-active .kt-tab-title,
.lws-html[data-source="wp-import"] .kt-tab-title-active { color: var(--lws-brand); box-shadow: inset 0 -2px 0 var(--lws-brand); }
.lws-html[data-source="wp-import"] .kt-tab-inner-content[hidden] { display: none; }
.lws-html[data-source="wp-import"] .kt-tab-inner-content > :first-child { margin-top: 0; }

/* ── force-readable text ───────────────────────────────────────────────────
   Imported blocks often bake in color:var(--global-palette9) (white) for a
   dark background Kadence would have drawn. On a light ground that text is
   invisible, so default those elements to the theme's ink; the tagged
   .lws-oncolor / .lws-onimage regions (real dark/image backgrounds) put the
   light text back. */

.lws-html[data-source="wp-import"] .wp-block-kadence-advancedheading,
.lws-html[data-source="wp-import"] .kt-blocks-info-box-title { color: var(--lws-ink) !important; }
.lws-html[data-source="wp-import"] .kt-blocks-info-box-text,
.lws-html[data-source="wp-import"] .kt-infobox-textcontent,
.lws-html[data-source="wp-import"] .kt-blocks-info-box-learnmore { color: var(--lws-muted) !important; }
.lws-html[data-source="wp-import"] :is(.lws-oncolor, .lws-onimage) :is(.wp-block-kadence-advancedheading, .kt-blocks-info-box-title, .kt-blocks-info-box-text, .kt-infobox-textcontent, h1, h2, h3, h4, p, li) { color: #fff !important; }

/* ── info boxes ────────────────────────────────────────────────────────────
   Keep them clean (image + heading + text). Deliberately NOT given a card
   shell — that left empty boxes wherever the media or icon didn't fill. */

.lws-html[data-source="wp-import"] .wp-block-kadence-infobox .kt-blocks-info-box-link-wrap { border-radius: var(--lws-radius-lg); overflow: hidden; }
.lws-html[data-source="wp-import"] .kt-blocks-info-box-media { background: transparent !important; border: 0 !important; }
.lws-html[data-source="wp-import"] .kt-blocks-info-box-learnmore { background: none !important; color: var(--lws-brand) !important; padding: 0 !important; }
.lws-html[data-source="wp-import"] .kt-blocks-info-box-link-wrap { text-decoration: none; color: inherit; }

/* ── core WordPress blocks ─────────────────────────────────────────────── */

.lws-html[data-source="wp-import"] .wp-block-buttons a,
.lws-html[data-source="wp-import"] .wp-block-button__link {
  display: inline-block;
  background: var(--lws-brand); color: var(--lws-on-brand);
  font-family: var(--lws-font-display); font-weight: 600;
  text-decoration: none;
  border-radius: var(--lws-btn-radius);
  padding: .7rem 1.3rem;
}
.lws-html[data-source="wp-import"] .wp-block-columns,
.lws-html[data-source="wp-import"] .kt-row-layout-inner { display: flex; flex-wrap: wrap; gap: 1.5rem; }
.lws-html[data-source="wp-import"] .wp-block-column,
.lws-html[data-source="wp-import"] .wp-block-kadence-column { flex: 1 1 280px; min-width: 0; }
.lws-html[data-source="wp-import"] .wp-block-image { margin: 1.2em 0; }
.lws-html[data-source="wp-import"] .wp-block-image img { border-radius: var(--lws-radius); }
.lws-html[data-source="wp-import"] .wp-block-kadence-advancedheading { text-wrap: balance; }
.lws-html[data-source="wp-import"] iframe { max-width: 100%; }

/* ── alignment helpers ─────────────────────────────────────────────────── */

.lws-html[data-source="wp-import"] .aligncenter { text-align: center; }
.lws-html[data-source="wp-import"] .alignleft { float: left; margin: .3rem 1.5rem 1rem 0; }
.lws-html[data-source="wp-import"] .alignright { float: right; margin: .3rem 0 1rem 1.5rem; }

/* Floated media is a desktop affordance; on a phone it strands text in a
   column too narrow to read. Same floor engine.css uses for its own grids. */
@media (max-width: 640px) {
  .lws-html[data-source="wp-import"] .alignleft,
  .lws-html[data-source="wp-import"] .alignright { float: none; margin: 1.2rem 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ELEMENTOR — added 2026-08-05 for the Mind & Body Solutions migration, the
   first import into this engine that was not Kadence.

   Elementor splits its CSS in two: a framework stylesheet (which we do not
   ship) and a PER-PAGE file that sets custom properties on element ids
   (`wp-content/uploads/elementor/css/post-19.css`, regenerated by the plugin,
   also not shipped). Its framework then reads those:

       .e-con { display: var(--display); flex-direction: var(--flex-direction) }

   With neither file present the custom properties are unset, every one of
   those declarations is invalid, and the element falls back to browser
   defaults. Content survives; geometry does not. What follows is the geometry,
   written as real values rather than as var() references to properties that
   will never exist here.
   ═══════════════════════════════════════════════════════════════════════ */

/* AN ICON WITH NO SIZE FILLS THE PAGE, and it is the first thing you see.
   Elementor's own rule is `.elementor-icon svg { width:1em; height:1em }` with
   the em coming from a font-size in the per-page file. Without either, the SVG
   has no intrinsic size, takes its viewBox aspect ratio and stretches to the
   container — the home page opened with a Facebook logo 1,200px tall and the
   contact page with a map pin the size of a door. Nothing about it looks like a
   CSS fault; it looks like the page is broken. */
.lws-html[data-source="wp-import"] .elementor-icon { font-size: 1.75rem; line-height: 1; display: inline-block; }
.lws-html[data-source="wp-import"] .elementor-icon i,
.lws-html[data-source="wp-import"] .elementor-icon svg { width: 1em; height: 1em; display: block; }
.lws-html[data-source="wp-import"] .elementor-social-icon { font-size: 1.1rem; padding: .5em; border-radius: 50%; }
.lws-html[data-source="wp-import"] .elementor-icon-box-icon .elementor-icon { font-size: 2.25rem; }

/* The same failure in a different costume: any inline SVG the import carries
   that nothing else has sized. Bounded rather than fixed, so an intentionally
   wide decorative SVG still scales down instead of overflowing. */
.lws-html[data-source="wp-import"] svg:not([width]):not([height]) { max-width: 100%; max-height: 40vh; }

/* ── containers ───────────────────────────────────────────────────────── */
/* `e-con` is Elementor's flex container. Default direction is column, which is
   what an unset var() cannot tell the browser. Children marked `e-con-full`
   are the row halves — they get a floor rather than a fixed width so a
   two-column section reflows instead of overflowing. */
.lws-html[data-source="wp-import"] .e-con,
.lws-html[data-source="wp-import"] .e-con-inner { display: flex; flex-direction: column; gap: clamp(.9rem, 2vw, 1.6rem); width: 100%; min-width: 0; }
.lws-html[data-source="wp-import"] .e-con.e-flex > .e-con-inner { width: 100%; }
.lws-html[data-source="wp-import"] .e-parent > .e-con-inner > .e-con.e-child,
.lws-html[data-source="wp-import"] .e-con-inner > .e-child { flex: 1 1 260px; }

/* A parent whose children are ALL containers is a row on wide screens — that
   is Elementor's commonest section shape, and stacking it makes a two-column
   page four screens long. `:has()` keeps it to the case we can actually
   recognise; anything else stays a column, which is the safe direction to be
   wrong in. */
@media (min-width: 900px) {
  .lws-html[data-source="wp-import"] .e-con-inner:has(> .e-con.e-child + .e-con.e-child) {
    flex-direction: row; align-items: stretch; flex-wrap: wrap;
  }
}

.lws-html[data-source="wp-import"] .elementor-widget-container > :first-child { margin-top: 0; }
.lws-html[data-source="wp-import"] .elementor-widget-container > :last-child { margin-bottom: 0; }
.lws-html[data-source="wp-import"] .elementor-widget-image img,
.lws-html[data-source="wp-import"] .elementor-image img { max-width: 100%; height: auto; border-radius: var(--lws-radius); }

/* ── the responsive hide classes ──────────────────────────────────────── */
/* READ OFF THE CLIENT'S OWN elementor/frontend.min.css, not from memory, and
   the reason matters: Elementor emits `@media (min-width:-1)` — a query that
   can never match — for every OPTIONAL breakpoint a site has not enabled. On
   this site `laptop`, `tablet_extra`, `mobile_extra` and `widescreen` are all
   disabled, so `elementor-hidden-laptop` hides nothing anywhere. Implementing
   it from the class name would have hidden content the live site shows.
   Only the three real ones are here. */
@media (max-width: 767px) {
  .lws-html[data-source="wp-import"] .elementor-hidden-mobile,
  .lws-html[data-source="wp-import"] .elementor-hidden-phone { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
  .lws-html[data-source="wp-import"] .elementor-hidden-tablet { display: none; }
}
@media (min-width: 1025px) {
  .lws-html[data-source="wp-import"] .elementor-hidden-desktop { display: none; }
}

/* Screen-reader-only text Elementor ships beside every social icon. Without
   this the icon row reads "Facebook-f Instagram Tiktok Youtube" in full size
   next to the icons themselves. */
.lws-html[data-source="wp-import"] .elementor-screen-only,
.lws-html[data-source="wp-import"] .elementor-icon-list-text.elementor-screen-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Elementor's nested accordion is native <details>/<summary> — it needs no JS
   and gets none. It does need a pointer and some room. */
.lws-html[data-source="wp-import"] .e-n-accordion-item-title { cursor: pointer; padding: .75rem 0; font-weight: 600; }
.lws-html[data-source="wp-import"] .e-n-accordion-item { border-bottom: 1px solid var(--lws-hairline, rgba(0,0,0,.12)); }