/* ============================================================
   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);
}