/* ============================================================
   cedar-elementor.css
   Bridges Elementor's NATIVE widget markup to the Cedar design so that
   content built with real Heading / Text / Button / Image widgets looks
   identical to the original. Loaded AFTER cedar.css.
   Targets Elementor's stable widget HTML structure.
   ============================================================ */

/* Constrain native sections to the Cedar container width (like .wrap). */
.cedar-native > .elementor-container { width: min(1200px, 92vw); margin-inline: auto; }

/* Headings rendered by the Heading widget keep the Cedar display font. */
.elementor-widget-heading .elementor-heading-title { font-family: var(--disp); line-height: 1.05; letter-spacing: -.02em; }
/* Inside the indigo hero, headings/text are light (mirrors .hero h1 / .hero p). */
.hero .elementor-widget-heading .elementor-heading-title { color: #fff; }
.hero .elementor-widget-text-editor { color: #d6d4ee; }

/* Text editor paragraphs pick up the muted body colour by default. */
.elementor-widget-text-editor { color: var(--muted); line-height: 1.65; }
.elementor-widget-text-editor p { margin: 0 0 .8rem; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* ---- Buttons: re-skin the native Button widget as a Cedar .btn ---- */
.cedar-btn .elementor-button {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--sans); font-weight: 700; font-size: 1rem;
  padding: .92rem 1.55rem; border-radius: 12px; border: 0; cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .25s;
}
.cedar-btn .elementor-button:hover { transform: translateY(-2px); }
.cedar-btn-green  .elementor-button { background: var(--green);  color: #fff; box-shadow: 0 12px 26px -12px rgba(98,183,60,.9); }
.cedar-btn-green  .elementor-button:hover { background: var(--green-deep); }
.cedar-btn-indigo .elementor-button { background: var(--indigo); color: #fff; }
.cedar-btn-indigo .elementor-button:hover { background: var(--indigo-2); }
.cedar-btn-white  .elementor-button { background: #fff; color: var(--indigo); }
.cedar-btn-ghost  .elementor-button { background: transparent; color: var(--indigo); border: 1.6px solid var(--line); }
.cedar-btn-ghost  .elementor-button:hover { border-color: var(--indigo); background: rgba(52,49,95,.05); }
/* Ghost button placed on the dark hero needs light text/border. */
.cedar-btn-onhero .elementor-button { color: #fff; border-color: rgba(255,255,255,.4); }
.cedar-btn-onhero .elementor-button:hover { background: rgba(255,255,255,.08); }

/* ---- Cards: an Elementor column carrying .card becomes a Cedar card ---- */
.elementor-column.card { position: relative; }
.elementor-column.card > .elementor-widget-wrap { align-content: flex-start; }
/* The emoji chip (.ic) is a Heading widget; keep the chip box, not the title. */
.card .elementor-widget-heading.ic .elementor-heading-title { font-size: inherit; color: inherit; line-height: 1; margin: 0; letter-spacing: 0; }
.card .elementor-widget { margin: 0; }
.card .elementor-widget-heading.ic { margin-bottom: .95rem; }
.card h3.elementor-heading-title { font-size: 1.2rem; margin-bottom: .4rem; }
.card .elementor-widget-text-editor { margin-bottom: .5rem; }

/* Centre the section-head heading + eyebrow when used. */
.cedar-center { text-align: center; }
.cedar-center .eyebrow { justify-content: center; }

/* Keep the dark CTA strip / spotlight headings legible. */
.cta-strip .elementor-heading-title { color: #fff; }

/* ---- Flagship "Supported Living" spotlight: native editable version ---- */
/* Inner sections must not inherit the page-level section{padding}. */
.elementor-section.elementor-inner-section { padding-top: 0; padding-bottom: 0; }
/* Badge pill wraps a Heading(span); make its text inherit the pill styling. */
.spotlight .badge .elementor-heading-title { font: inherit; color: inherit; letter-spacing: inherit; line-height: 1; margin: 0; }
/* Checklist as a 2-column Icon List. */
.feats-native .elementor-icon-list-items { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin: 1.4rem 0; }
.feats-native .elementor-icon-list-item { align-items: flex-start; padding: 0; }
.feats-native .elementor-icon-list-text { color: #eceaf7; font-weight: 600; font-size: .94rem; }
.feats-native .elementor-icon-list-icon { color: #9ff07a; padding-top: .15rem; }
.feats-native .elementor-icon-list-icon svg { fill: #9ff07a; width: 1em; height: 1em; }
/* The marked photo: a swappable Image widget styled like the original .sl-media. */
.sl-media-native img { border-radius: 22px; aspect-ratio: 3 / 4; width: 100%; object-fit: cover; box-shadow: var(--shadow); }
/* Decorative green glow blob (was a <div class="deco">), now CSS-only. */
.spotlight::after { content: ""; position: absolute; right: -90px; top: -90px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(98,183,60,.32), transparent 65%); pointer-events: none; }

/* ---- About "Our promise" split: native editable version ---- */
/* Promise rows = Icon Box styled as Cedar .vitem cards (box has no Elementor
   default, so these apply reliably; colours are baked into the widget). */
.vitem-native { margin-bottom: 1rem; }
.elementor-widget-icon-box.vitem-native > .elementor-widget-container {
  background: #f7f6fd; border: 1px solid rgba(52,49,95,.13);
  border-radius: 16px; padding: 1.05rem 1.15rem;
}
.vitem-native .elementor-icon-box-wrapper { display: flex; gap: .85rem; align-items: flex-start; text-align: left; }
.vitem-native .elementor-icon-box-icon { margin: 0 !important; }
.elementor-widget-icon-box.vitem-native .elementor-icon { border-radius: 9px !important; }
.vitem-native .elementor-icon-box-title { margin-bottom: .15rem; }
/* The marked photo panel: swappable Image widget, tall and rounded. */
.media-native img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 24px; box-shadow: 0 26px 60px -28px rgba(52,49,95,.55);
}

/* ---- Front-end colour lock for promise cards ----
   The editor shows baked colours, but the front end loads Elementor's
   per-element CSS, which can lag on import/cache and fall back to the default
   global blue (#6EC1E4). Force the Cedar colours from the theme stylesheet
   (scoped to .vitem-native so nothing else is affected). */
.elementor-widget-icon-box.vitem-native .elementor-icon { background-color: #62b73c !important; }
.elementor-widget-icon-box.vitem-native .elementor-icon i,
.elementor-widget-icon-box.vitem-native .elementor-icon svg { color: #fff !important; fill: #fff !important; }
.elementor-widget-icon-box.vitem-native .elementor-icon-box-title,
.elementor-widget-icon-box.vitem-native .elementor-icon-box-title > a { color: #34315f !important; }
.elementor-widget-icon-box.vitem-native .elementor-icon-box-description { color: #5e5b80 !important; }

/* ════════ Home native sections (editable) ════════ */
.cedar-eyebrow .elementor-heading-title{display:inline-block;color:#9ff07a;font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.cedar-eyebrow-dark .elementor-heading-title{color:var(--green-deep)!important}
.cedar-center{text-align:center}
.cedar-center .elementor-widget-button .elementor-button-wrapper{display:flex;justify-content:center;flex-wrap:wrap}

/* hero */
.cedar-hero{background:linear-gradient(135deg,#34315f,#524e96)!important;color:#fff}
.cedar-hero h1.elementor-heading-title{color:#fff!important;font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.04;font-weight:800;margin:.5rem 0 1rem}
.cedar-hero .elementor-widget-text-editor,.cedar-hero .elementor-widget-text-editor p{color:#d8d7ee!important;font-size:1.05rem;max-width:60ch;margin-bottom:1.5rem}
.cedar-hero-grid > .elementor-container{align-items:center;gap:clamp(1.5rem,4vw,3rem)}
.cedar-hero-cta > .elementor-container{gap:.7rem;justify-content:flex-start}
.cedar-hero-cta .elementor-column{width:auto}
.cedar-hero-pills .elementor-icon-list-items{display:flex;flex-wrap:wrap;gap:.5rem .9rem;margin-top:1.3rem}
.cedar-hero-pills .elementor-icon-list-text{color:#eceaf7!important;font-weight:600;font-size:.86rem}
.cedar-hero-pills .elementor-icon-list-icon,.cedar-hero-pills .elementor-icon-list-icon svg{color:#9ff07a;fill:#9ff07a}
.cedar-hero-media img{border-radius:26px;aspect-ratio:5/6;width:100%;object-fit:cover;box-shadow:var(--shadow);transform:rotate(2deg)}

/* stats */
.cedar-stats{background:linear-gradient(135deg,#34315f,#524e96)!important;border-radius:22px;box-shadow:var(--shadow)}
.cedar-stats-grid > .elementor-container{gap:1rem}
.cedar-stat{text-align:center}
.cedar-stat-num .elementor-heading-title{color:#9ff07a!important;font-size:2.3rem;font-weight:800;line-height:1}
.cedar-stat-label,.cedar-stat-label p{color:#dfe0f5!important;font-size:.9rem;margin:.25rem 0 0}

/* cards */
.cedar-cards-h2 .elementor-heading-title{color:var(--ink)!important;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cedar-cards-row > .elementor-container{gap:1.3rem;align-items:stretch;margin-top:1.3rem}
.cedar-card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.6rem;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.cedar-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-sm)}
.cedar-card-tag .elementor-heading-title{position:absolute;top:1rem;right:1rem;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#fff!important;background:var(--green);padding:.26rem .58rem;border-radius:999px}
.cedar-card-photo img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:14px;margin-bottom:1rem}
.cedar-card-title .elementor-heading-title{color:var(--ink)!important;font-size:1.2rem;margin-bottom:.4rem}
.cedar-card-desc,.cedar-card-desc p{color:var(--muted)!important;font-size:.94rem}
.cedar-card-more .elementor-button{background:transparent!important;color:var(--indigo-3)!important;padding:0;font-weight:800;font-size:.9rem;box-shadow:none!important;margin-top:.6rem}
.cedar-card-more .elementor-button:hover{transform:none;text-decoration:underline}

/* cta */
.cedar-cta{background:linear-gradient(135deg,#34315f,#524e96)!important}
.cedar-cta-h2 .elementor-heading-title{color:#fff!important;font-size:clamp(1.8rem,3.4vw,2.6rem);margin:.4rem 0 .6rem}
.cedar-cta-text,.cedar-cta-text p{color:#eceaf7!important;max-width:60ch;margin:0 auto 1.2rem}
.cedar-cta-btns > .elementor-container{gap:.7rem;justify-content:center}
.cedar-cta-btns .elementor-column{width:auto}

/* finder isolated section keeps original look via cedar.css */
.cedar-finder .wrap{padding:0}

/* ════════ Site-wide native sections (about/services/supported/careers/bedblocking) ════════ */
.cedar-native.cedar-splitsec > .elementor-container,
.cedar-native.cedar-aboutpromise > .elementor-container,
.cedar-native.cedar-steps-sec > .elementor-container,
.cedar-native.cedar-cards > .elementor-container{padding-block:clamp(2.2rem,5vw,4.4rem)}
.cedar-lead,.cedar-lead p{color:var(--muted)!important;font-size:1.12rem;line-height:1.6;max-width:68ch}
.cedar-muted,.cedar-muted p{color:var(--muted)!important;margin-bottom:1rem}
/* split layout */
.cedar-split-grid > .elementor-container{gap:clamp(1.5rem,4vw,3rem);align-items:center}
.cedar-split-h2 .elementor-heading-title{color:var(--ink)!important;font-size:clamp(1.6rem,3vw,2.2rem);margin:.3rem 0 .7rem}
.cedar-split-h3 .elementor-heading-title{color:var(--ink)!important;font-size:1.5rem;margin-bottom:.5rem}
.cedar-media-native img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:var(--shadow);display:block}
.cedar-media-native.tall img{aspect-ratio:3/4}
/* value-card emoji icon */
.cedar-card-ic .elementor-heading-title{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:14px;background:rgba(123,120,201,.16);font-size:1.45rem;margin-bottom:.7rem}
/* statbar */
.cedar-statbar > .elementor-container{gap:1rem;margin:1.6rem 0;justify-content:space-between}
.cedar-statbar-item{text-align:center;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.1rem .8rem}
.cedar-statbar-num .elementor-heading-title{color:var(--green-deep)!important;font-size:1.85rem;font-weight:800;line-height:1}
.cedar-statbar-label,.cedar-statbar-label p{color:var(--muted)!important;font-size:.86rem;margin:.3rem 0 0}
/* steps */
.cedar-steps > .elementor-container{gap:1.2rem;margin-top:1.6rem;align-items:stretch}
.cedar-step{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:1.4rem}
.cedar-step-num .elementor-heading-title{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--green);color:#fff!important;font-weight:800;font-size:1.1rem;margin-bottom:.7rem}
.cedar-step-title .elementor-heading-title{color:var(--ink)!important;font-size:1.08rem;margin-bottom:.3rem}
.cedar-step-desc,.cedar-step-desc p{color:var(--muted)!important;font-size:.92rem}
/* split section general padding handled above; ensure inner sections aren't squeezed */
.cedar-splitsec .elementor-widget-button{margin-top:1rem}