/* =========================================================================
   Elementor compatibility layer
   -------------------------------------------------------------------------
   Makes pages built with Elementor inherit the Aliston Care design system
   defined in style.css (brand colours, Outfit/Nunito typography, rounded
   cards, soft shadows). Loaded only on pages built with Elementor.
   ========================================================================= */

/* ------------------------------------------------------------------ 1. Layout */
.elementor-page .elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--ac-container);
}
.elementor-page .ac-elementor-content { padding: 0; }

/* ------------------------------------------------------------------ 2. Type */
.elementor-page .elementor-widget-heading .elementor-heading-title {
  font-family: var(--ac-font-head);
  font-weight: 700;
  color: var(--ac-ink);
  line-height: 1.2;
}
.elementor-page .elementor-widget-text-editor,
.elementor-page .elementor-widget-text-editor p {
  font-family: var(--ac-font-body);
  font-size: 17px;
  line-height: 1.7;
}
/* Colour belongs on the element Elementor styles (the widget wrapper), never on
   the <p> child: a child's own colour beats what it inherits, so setting it on
   the paragraph used to cancel every colour chosen in Elementor. Specificity
   stays at (0,2,0) so Elementor's per-element rule — loaded later — wins, while
   this still beats Elementor's generic kit default and keeps the design look. */
.elementor-page .elementor-widget-text-editor { color: var(--ac-body); }
.elementor-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-page .elementor-widget-text-editor a { color: var(--ac-primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------------------------------------------------- 3. Section heading block */
.elementor-page .acel-head .elementor-widget-heading .elementor-heading-title {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
/* Accent words inside headings: no forced colour, so the heading colour set in
   the Elementor editor always wins. Re-add the rule below if you want a fixed
   brand accent: .elementor-page .acel-head .elementor-heading-title span { color: var(--ac-primary); } */
.elementor-page .acel-head .elementor-widget-text-editor { font-size: 1.05rem; }

/* ------------------------------------------------------------------ 4. Buttons */
.elementor-page .elementor-button {
  font-family: var(--ac-font-head);
  font-weight: 600;
  font-size: 0.98rem;
  border-radius: var(--ac-radius-pill);
  padding: 16px 30px;
  line-height: 1;
  border: 2px solid transparent;
  transition: var(--ac-transition);
}
.elementor-page .elementor-button:hover { transform: translateY(-2px); box-shadow: var(--ac-shadow); }
.elementor-page .elementor-button-icon svg,
.elementor-page .elementor-button-icon i { font-size: 15px; }
/* Hero button pair: size each button to its label and leave a gap. */
.elementor-page .acel-btns > .elementor-container { gap: 20px; }
.elementor-page .acel-btns > .elementor-container > .elementor-column { width: auto; flex: 0 0 auto; }

/* ------------------------------------------------------------------- 5. Images */
.elementor-page .elementor-widget-image img { border-radius: var(--ac-radius-sm); }
.elementor-page .acel-media-flush .elementor-widget-image img { border-radius: 0; width: 100%; display: block; }
.elementor-page .acel-round .elementor-widget-image img { border-radius: var(--ac-radius); }

/* Full-width programme banner image (mirrors the theme's .ac-area__photo) */
.elementor-page .acel-area-media .elementor-widget-container img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
}

/* -------------------------------------------------------------- 6. Pillar split */
.elementor-page .acel-pillar .elementor-widget-image img {
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow);
  width: 100%;
  object-fit: cover;
}
/* Text + photo split: centre the columns vertically. */
.elementor-page .acel-story > .elementor-container { align-items: center; }

/* ----------------------------------------------------------------- 7. Card column */
.elementor-page .acel-card > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.elementor-page .acel-card > .elementor-widget-wrap > .elementor-widget:last-child { margin-bottom: 0; }

/* Photo card (image flush to the top edge) */
.elementor-page .acel-card--media > .elementor-widget-wrap { padding: 0; overflow: hidden; }
.elementor-page .acel-card--media .elementor-widget-image img { border-radius: 0; }
.elementor-page .acel-card--media .elementor-widget-heading,
.elementor-page .acel-card--media .elementor-widget-text-editor { padding-left: 26px; padding-right: 26px; }
.elementor-page .acel-card--media .elementor-widget-image + .elementor-widget-heading { padding-top: 22px; }
.elementor-page .acel-card--media > .elementor-widget-wrap > .elementor-widget:last-child { padding-bottom: 26px; }
.elementor-page .acel-card--media .elementor-widget-heading .elementor-heading-title { font-size: 1.2rem; margin-bottom: 8px; }

/* --------------------------------------------------------------- 8. Value cards */
.elementor-page .acel-value > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 32px 28px;
  height: 100%;
}
.elementor-page .acel-value .elementor-icon-box-icon { margin-bottom: 18px !important; }
.elementor-page .acel-value .elementor-icon {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: var(--ac-primary-soft);
  color: var(--ac-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  padding: 0;
}
.elementor-page .acel-value .elementor-icon svg { width: 28px; height: 28px; fill: currentColor; }
.elementor-page .acel-value .elementor-icon-box-title { font-size: 1.22rem; margin-bottom: 10px; }
.elementor-page .acel-value .elementor-icon-box-title { font-family: var(--ac-font-head); color: var(--ac-ink); }
.elementor-page .acel-value .elementor-icon-box-description { font-size: 0.95rem; margin: 0; }

/* On the green band the value cards invert. */
.elementor-page .acel-on-primary .acel-value > .elementor-widget-wrap {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}
.elementor-page .acel-on-primary .acel-value .elementor-icon { background: rgba(255, 255, 255, 0.12); color: var(--ac-gold); }
.elementor-page .acel-on-primary .acel-value .elementor-icon-box-title { color: #fff; }
.elementor-page .acel-on-primary .acel-value .elementor-icon-box-description { color: #d8eee6; }
.elementor-page .acel-on-primary .acel-value .icon-box-title { color: #fff; }
.acel-on-primary .acel-head .elementor-widget-text-editor { color: #cfe7de; }

/* ------------------------------------------------------------------ 9. Counters */
.elementor-page .acel-stat > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 34px 20px;
  height: 100%;
  text-align: center;
}
.elementor-page .acel-stat .elementor-counter-number-wrapper {
  font-family: var(--ac-font-head);
  font-weight: 800;
  font-size: 2.5rem;
  color: var(--ac-primary);
  line-height: 1;
  display: block;
}
.elementor-page .acel-stat .elementor-counter-number-suffix { font-size: 2.5rem; }
.elementor-page .acel-stat .elementor-counter-title {
  font-family: var(--ac-font-body);
  font-weight: 700;
  color: var(--ac-ink);
  font-size: 1rem;
  margin-top: 10px;
  display: block;
}

/* ------------------------------------------------------------- 10. Testimonials */
.elementor-page .acel-quote .elementor-testimonial-wrapper {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 34px 30px;
  height: 100%;
}
.elementor-page .acel-quote .elementor-testimonial-content {
  font-style: italic;
  color: var(--ac-ink);
  font-size: 1rem;
  position: relative;
  padding-top: 30px;
}
.elementor-page .acel-quote .elementor-testimonial-content::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 0;
  font-family: var(--ac-font-script);
  font-size: 4rem;
  line-height: 1;
  color: var(--ac-primary-300);
}
.elementor-page .acel-quote .elementor-testimonial-name {
  font-family: var(--ac-font-head);
  font-weight: 800;
  color: var(--ac-primary);
  font-size: 1rem;
}
.elementor-page .acel-quote .elementor-testimonial-job { font-size: 0.86rem; color: var(--ac-muted); }

/* ---------------------------------------------------------------- 11. Accordion */
.elementor-page .acel-faq .elementor-accordion-item {
  background: #fff;
  border: 1px solid var(--ac-line) !important;
  border-radius: var(--ac-radius-sm);
  box-shadow: var(--ac-shadow-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.elementor-page .acel-faq .elementor-tab-title {
  font-family: var(--ac-font-head);
  font-weight: 700;
  color: var(--ac-ink);
  font-size: 1.05rem;
  padding: 20px 24px !important;
  border: 0 !important;
}
.elementor-page .acel-faq .elementor-tab-title.elementor-active { background: transparent; }
.elementor-page .acel-faq .elementor-tab-content {
  border: 0 !important;
  padding: 0 24px 22px !important;
  color: var(--ac-body);
}

/* ---------------------------------------------------------------- 12. Info cards */
.elementor-page .acel-info > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 28px;
  height: 100%;
  display: flex;
  gap: 16px;
}
.elementor-page .acel-info .elementor-icon-box-wrapper { display: flex; gap: 16px; text-align: left; }
.elementor-page .acel-info .elementor-icon-box-icon { flex: none; margin: 0 !important; }
.elementor-page .acel-info .elementor-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--ac-primary-soft);
  color: var(--ac-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  padding: 0;
}
.elementor-page .acel-info .elementor-icon svg { width: 24px; height: 24px; fill: currentColor; }
.elementor-page .acel-info .elementor-icon-box-title { font-size: 1.05rem; margin-bottom: 4px; }
.elementor-page .acel-info .elementor-icon-box-title { font-family: var(--ac-font-head); color: var(--ac-ink); }
.elementor-page .acel-info .elementor-icon-box-description { font-size: 0.95rem; margin: 0; }

/* ------------------------------------------------------- 12b. Timeline columns */
.elementor-page .elementor-section .acel-timeline > .elementor-widget-wrap {
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  box-shadow: var(--ac-shadow-sm);
  padding: 30px;
  height: 100%;
}
.elementor-page .acel-timeline .elementor-widget-heading .elementor-heading-title {
  font-size: 1.05rem;
  color: var(--ac-primary);
}
.elementor-page .acel-timeline .elementor-widget-text-editor,
.elementor-page .acel-timeline .elementor-widget-text-editor p { font-size: 0.95rem; }
.elementor-page .acel-timeline .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
/* separate each programme entry */
.elementor-page .acel-timeline .elementor-widget-heading { border-top: 1px solid var(--ac-line); padding-top: 18px; margin-top: 18px; }
.elementor-page .acel-timeline .elementor-widget-heading:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* ----------------------------------------------------------------- 13. Hero band */
.elementor-page .acel-hero .elementor-widget-heading .elementor-heading-title { color: #fff; }
.elementor-page .acel-hero .elementor-widget-text-editor { color: #d8eee6; }
.elementor-page .acel-hero .acel-eyebrow .elementor-heading-title {
  font-family: var(--ac-font-head);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #8fe3c2;
}

/* ------------------------------------------------------------- 14. List widgets */
.elementor-page .acel-list .elementor-icon-list-item { font-weight: 600; color: var(--ac-ink); }
.elementor-page .acel-list .elementor-icon-list-icon { color: var(--ac-primary-300); }

/* --------------------------------------------------------- 15. CTA / bank panel */
.elementor-page .acel-bank > .elementor-widget-wrap {
  background: var(--ac-secondary);
  border-radius: var(--ac-radius);
  padding: 34px;
}
.elementor-page .acel-bank .elementor-heading-title { color: #fff; }
.elementor-page .acel-bank .elementor-widget-text-editor { color: #d8eee6; }

/* ------------------------------------------------------------- 16. Responsive */
@media (max-width: 767px) {
  .elementor-page .acel-card > .elementor-widget-wrap,
  .elementor-page .acel-value > .elementor-widget-wrap,
  .elementor-page .acel-stat > .elementor-widget-wrap { padding: 24px 20px; }
  .elementor-page .acel-hero .elementor-heading-title { font-size: 2rem; }
}

/* --------------------------------------------------------- 17. Card gutters
   Elementor's column-gap rules
   (.elementor-column-gap-* > .elementor-column > .elementor-element-populated
   { padding: 15px }) tie with the card rules above in specificity but are
   loaded later, so they win and the card backgrounds end up flush against each
   other. Re-assert the card padding with a higher-specificity selector, and
   build the gutters on the column itself — box-sizing is border-box, so the
   column padding shrinks the card box instead of overflowing the row. */
.elementor-page .elementor-column.acel-card,
.elementor-page .elementor-column.acel-value,
.elementor-page .elementor-column.acel-stat,
.elementor-page .elementor-column.acel-info,
.elementor-page .elementor-column.acel-bank,
.elementor-page .elementor-column.acel-timeline {
  padding: 0 15px;
  margin-bottom: 30px;
}

.elementor-page .elementor-section .acel-card > .elementor-widget-wrap { padding: 30px; }
.elementor-page .elementor-section .acel-card--media > .elementor-widget-wrap { padding: 0; }
.elementor-page .elementor-section .acel-value > .elementor-widget-wrap { padding: 32px 28px; }
.elementor-page .elementor-section .acel-stat > .elementor-widget-wrap { padding: 34px 20px; }
.elementor-page .elementor-section .acel-info > .elementor-widget-wrap { padding: 28px; }
.elementor-page .elementor-section .acel-bank > .elementor-widget-wrap { padding: 34px; }

@media (max-width: 767px) {
  .elementor-page .elementor-section .acel-card > .elementor-widget-wrap,
  .elementor-page .elementor-section .acel-value > .elementor-widget-wrap,
  .elementor-page .elementor-section .acel-stat > .elementor-widget-wrap { padding: 24px 20px; }
}

/* --------------------------------------------- 18. Hero slider
   Slides are Elementor columns (`.acel-hero-slide`) inside the hero row.
   Grid-stacking (every slide in cell 1/1) overlaps them and sizes the row to
   the tallest slide, so the hero height never collapses while crossfading. */
.elementor-page .acel-hero-slider { position: relative; overflow: hidden; }
.elementor-page .acel-hero-slider .elementor-container {
  display: grid;
  grid-template-columns: 1fr;
}
.elementor-page .acel-hero-slider .acel-hero-slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
/* No-JS fallback (and the Elementor editor, which does not run theme JS):
   reveal the first slide so the hero is never blank. Once the script takes
   over it adds `acel-hero-ready`, handing control back to `is-active`. */
.elementor-page .acel-hero-slider .acel-hero-slide:first-child {
  opacity: 1;
  visibility: visible;
}
.elementor-page .acel-hero-slider.acel-hero-ready .acel-hero-slide {
  opacity: 0;
  visibility: hidden;
}
.elementor-page .acel-hero-slider.acel-hero-ready .acel-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}
.elementor-page .acel-hero-slider .acel-hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* Inside the Elementor editor: reveal every slide, stacked one after another,
   so each headline/button can be clicked and edited. The crossfade, arrows and
   background layers are hidden so nothing overlaps the widgets. */
body.ac-elementor-preview .acel-hero-slider .acel-hero-slide,
body.ac-elementor-preview .acel-hero-slider.acel-hero-ready .acel-hero-slide,
body.ac-elementor-preview .acel-hero-slider.acel-hero-ready .acel-hero-slide.is-active {
  grid-area: auto;
  position: relative;
  opacity: 1;
  visibility: visible;
  transition: none;
  padding: 34px 0;
  border-bottom: 1px dashed rgba(4, 106, 88, .35);
}
body.ac-elementor-preview .acel-hero-slider .acel-hero-slide:last-child { border-bottom: 0; }
body.ac-elementor-preview .acel-hero-slider .acel-hero-slide .elementor-widget-wrap { max-width: none; }
body.ac-elementor-preview .acel-hero-slider .acel-hero-nav { display: none; }
body.ac-elementor-preview .acel-hero-slider > .acel-hero-bg { display: none; }
body.ac-elementor-preview .acel-hero-slider.has-bg-slides::after { display: none; }
/* Cap the readable text width now that slides span the full row. */
.elementor-page .acel-hero-slider .acel-hero-slide .elementor-widget-wrap { max-width: 680px; }

/* Full-bleed crossfading background layers (injected by JS). */
.elementor-page .acel-hero-slider.has-bg-slides > .acel-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  opacity: 0;
  transition: opacity 0.9s ease;
  z-index: 0;
}
.elementor-page .acel-hero-slider.has-bg-slides > .acel-hero-bg.is-active {
  opacity: 1;
  animation: acel-kenburns 14s ease-out both;
}
/* Green wash so text stays legible over any photo (matches the sample overlay). */
.elementor-page .acel-hero-slider.has-bg-slides::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(3, 86, 74, 0.82);
  z-index: 0;
  pointer-events: none;
}
.elementor-page .acel-hero-slider > .elementor-container { position: relative; z-index: 1; }

@keyframes acel-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* Circular prev/next controls (Charifund `.slider-navigation` style). */
.elementor-page .acel-hero-slider .acel-hero-nav {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 40px;
  z-index: 2;
  display: flex;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.elementor-page .acel-hero-slider .acel-hero-arrow {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.elementor-page .acel-hero-slider .acel-hero-arrow svg { width: 22px; height: 22px; }
.elementor-page .acel-hero-slider .acel-hero-arrow:hover {
  background: var(--ac-gold);
  border-color: var(--ac-gold);
  color: #122f2a;
}
.elementor-page .acel-hero-slider .acel-hero-next { background: var(--ac-gold); border-color: var(--ac-gold); color: #122f2a; }
.elementor-page .acel-hero-slider .acel-hero-next:hover { background: #fff; border-color: #fff; }

/* Headline underline accent — the Charifund hand-drawn squiggle under a key
   word. Beats `.acel-title span` (green) so the word stays white on the hero. */
.elementor-page .acel-hero .acel-title .elementor-heading-title .acel-underline,
.elementor-page .acel-hero .elementor-heading-title .acel-underline {
  display: inline-block;
  position: relative;
  color: #fff;
  padding-bottom: 0.16em;
  background-repeat: no-repeat;
  background-position: left bottom 0.02em;
  background-size: 100% 0.34em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='196' height='15' viewBox='0 0 196 15' fill='none'%3E%3Cpath d='M1 13C42.1844 2.92057 142.978 -3.87406 195 9.2668' stroke='%23f2b01e' stroke-width='4'/%3E%3C/svg%3E");
}

@media (max-width: 767px) {
  .elementor-page .acel-hero-slider .acel-hero-nav { bottom: 20px; }
  .elementor-page .acel-hero-slider .acel-hero-arrow { width: 48px; height: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .elementor-page .acel-hero-slider .acel-hero-slide { transition: none; }
  .elementor-page .acel-hero-slider.has-bg-slides > .acel-hero-bg { transition: none; }
  .elementor-page .acel-hero-slider.has-bg-slides > .acel-hero-bg.is-active { animation: none; }
}