/* ============================================================
   Home: CTA banner + TESTIMONIALS. Owned by cta-testimonials
   agent. Targets only the CTA root #6a1db2d and the testimonials
   root #abc99ad plus their owned children. Pure CSS overrides -
   no markup changes.

   Goal:
   - CTA banner ("Want us to visit your school?") gets a soft red
     Sunburst Glow halo behind it, a big Fredoka heading, warm
     body copy and a brand red pill "Request a demo" button.
   - Testimonials carousel becomes a clean white raised card with
     a Fredoka quote, brand red author tag and purple role line.
   - Arrows are brand red pills with gentle hover lift.
   ============================================================ */

/* ============================================================
   A) CTA BANNER - "Want us to visit your school?"
   ============================================================ */

/* ---- SECTION ROOT --------------------------------------- */
/* Sit the whole CTA band on warm paper with section rhythm and
   establish a stacking context so the Sunburst Glow halo can sit
   behind everything without bleeding into other sections. */
body .elementor-element-6a1db2d {
  background: var(--color-paper) !important;
  padding-block: var(--section-y) !important;
  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* The Sunburst Glow signature - one soft red radial behind the
   CTA copy column. This is "the moment" per brand guidelines:
   one glow per view, here. Centered right-of-middle so it halos
   the heading + button without washing the kid-photo cluster.
   Iter-2: bumped to a direct radial-gradient with a tighter 60%
   falloff. The .32 peak with concentrated falloff reads stronger
   than the .45 token glow that smeared over 70% of the radius. */
body .elementor-element-6a1db2d::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: 8%;
  width: 720px;
  height: 720px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(230, 59, 59, .32) 0%,
    rgba(230, 59, 59, 0) 60%) !important;
  pointer-events: none;
}

/* ---- CTA COPY COLUMN ------------------------------------ */
/* Container holding the heading, body and button. Give it room
   to breathe and align contents to the start of the column. */
body .elementor-element-063a35a {
  gap: var(--space-4) !important;
  padding: var(--space-6) !important;
}

/* ---- CTA HEADING ---------------------------------------- */
/* "Want us to visit your school?" - big Fredoka display, deep
   ink, tight tracking. Sells the moment. */
body .elementor-element-04f366c .pxl-heading--text,
body .elementor-element-04f366c h2,
body .elementor-element-04f366c h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-display-l) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--text-primary) !important;
  margin-bottom: var(--space-3) !important;
  max-width: 18ch;
}

/* Color any emphasised word in brand red (matches global em rule). */
body .elementor-element-04f366c em {
  font-style: normal;
  color: var(--color-brand) !important;
}

/* ---- CTA BODY COPY -------------------------------------- */
/* Nunito Sans, secondary ink, comfortable reading measure. */
body .elementor-element-a13aebd .pxl-text-editor,
body .elementor-element-a13aebd p {
  font-family: var(--font-body) !important;
  font-size: var(--text-body-l) !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--text-secondary) !important;
  max-width: 48ch;
  margin-bottom: var(--space-5) !important;
}

/* ---- "Request a demo" BUTTON ---------------------------- */
/* Brand red pill, Fredoka label, sunburst glow on hover. This is
   the primary CTA of the section - firm size, confident weight. */
body .elementor-element-80d7caa .pxl-btn,
body .elementor-element-80d7caa a.btn,
body .elementor-element-80d7caa .btn-link,
body .elementor-element-80d7caa button {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-button) !important;
  letter-spacing: var(--tracking-display) !important;
  padding: var(--space-3) var(--space-7) !important;
  box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out) !important;
}

body .elementor-element-80d7caa .pxl-btn:hover,
body .elementor-element-80d7caa a.btn:hover,
body .elementor-element-80d7caa .btn-link:hover,
body .elementor-element-80d7caa button:hover {
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-2px);
}

/* ---- DECORATIVE PNGs ------------------------------------ */
/* Keep the kid photo + rocket + dotted/fight decorative PNGs in
   place, but cap their visual weight so the Sunburst Glow halo
   reads as the dominant ambient signal. Soft drop-shadow lift on
   the big kid hero photo so it floats on warm cream. */
body .elementor-element-904fe86 img {
  border-radius: var(--radius-lg);
}

/* Iter-2: per-decoration opacities. The yellow paint-splat top-bg
   and the kid mascot were both competing with the heading and the
   red Request-a-demo pill at iter-1's blanket .9. The dotted wisp
   stays light at .85 since it is small and corner-anchored. */
body .elementor-element-ba69c66 .pxl-item--image {
  opacity: .85;
}

/* Top-left yellow paint-splat (kids-kindergarten-bg-top23-scaled).
   Drop to .6 - present as ambient color, no longer a focal blob. */
body .elementor-element-3685f33 .pxl-item--image {
  opacity: .6 !important;
}

/* Bottom-right kid/rocket mascot (kids-kindergarten-img-fight).
   Drop to .85 so it recedes behind the red Request-a-demo pill. */
body .elementor-element-4360ecd .pxl-item--image {
  opacity: .85 !important;
}

/* ============================================================
   B) TESTIMONIALS - "Appreciatory words from happy customers"
   ============================================================ */

/* ---- SECTION ROOT --------------------------------------- */
body .elementor-element-abc99ad {
  background: var(--color-paper) !important;
  padding-block: var(--section-y) !important;
  position: relative;
}

/* ---- SECTION HEADING ------------------------------------ */
/* "Appreciatory words from happy customers" - Fredoka display,
   centered, deep ink. Sets the warm tone for the carousel below. */
body .elementor-element-ce818fa .pxl-heading--text,
body .elementor-element-ce818fa h2,
body .elementor-element-ce818fa h3 {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-bold) !important;
  font-size: var(--text-h1) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--text-primary) !important;
  text-align: center;
  margin-bottom: var(--space-6) !important;
}

/* ---- CAROUSEL CONTAINER --------------------------------- */
/* Center the carousel on the page and give it generous side air. */
body .elementor-element-3d08d33 {
  max-width: 920px;
  margin-inline: auto !important;
  padding-inline: var(--space-5);
  position: relative;
}

/* ---- TESTIMONIAL CARD (each slide) ---------------------- */
/* White raised card with the brand's lg radius, warm-tinted card
   shadow and generous inner padding so the quote can breathe.
   The .bg-mask becomes the card surface; the .pxl-item--inner is
   the content well. */
body .elementor-element-3d08d33 .pxl-swiper-slide {
  position: relative;
}

body .elementor-element-3d08d33 .pxl-swiper-slide .bg-mask {
  position: absolute !important;
  inset: 0;
  background: var(--color-paper-raised) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid var(--border-subtle);
  z-index: 0;
}

body .elementor-element-3d08d33 .pxl-swiper-slide .pxl-item--inner {
  position: relative;
  z-index: 1;
  padding: var(--space-7) var(--space-7) var(--space-6) !important;
  text-align: center;
}

/* ---- QUOTE TEXT (.pxl-item--desc) ----------------------- */
/* Large Fredoka display, snug leading, deep ink. The quote IS
   the card - everything else supports it. Add a soft red oversized
   opening-quote glyph above the text as a brand flourish. */
body .elementor-element-3d08d33 .pxl-item--desc {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-h3) !important;
  line-height: var(--leading-snug) !important;
  letter-spacing: var(--tracking-tight) !important;
  color: var(--text-primary) !important;
  max-width: 56ch;
  margin: 0 auto var(--space-5) !important;
  position: relative;
}

body .elementor-element-3d08d33 .pxl-item--desc::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--color-brand);
  opacity: .35;
  margin-bottom: var(--space-2);
}

/* ---- AUTHOR NAME (.pxl-item--title) --------------------- */
/* Fredoka, brand red, semibold. Reads as the byline tag. */
body .elementor-element-3d08d33 .pxl-item--title {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  font-size: var(--text-h4) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--color-brand) !important;
  margin: 0 0 var(--space-1) !important;
}

/* ---- AUTHOR ROLE (.pxl-item--position) ------------------ */
/* Muted neutral, Nunito Sans, tracking-wide for a small-caps feel.
   Global rule sets this purple - inside the carousel scope override
   to muted secondary so the brand-red author name pops first. */
body .elementor-element-3d08d33 .pxl-item--position {
  font-family: var(--font-body) !important;
  font-weight: var(--weight-medium) !important;
  font-size: var(--text-body-s) !important;
  color: var(--text-secondary) !important;
  letter-spacing: var(--tracking-wide) !important;
  text-transform: uppercase;
}

/* ---- SWIPER ARROWS -------------------------------------- */
/* Brand red pill arrows that sit just outside the card. Use the
   .pxl-swiper-arrow-wrap children scoped to this widget so the
   programs-section swiper is not affected. */
body .elementor-element-3d08d33 .pxl-swiper-arrow {
  width: 48px !important;
  height: 48px !important;
  border-radius: var(--radius-pill) !important;
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  box-shadow: var(--shadow-md) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out) !important;
}

body .elementor-element-3d08d33 .pxl-swiper-arrow i {
  color: var(--color-white) !important;
  font-size: 16px;
}

body .elementor-element-3d08d33 .pxl-swiper-arrow:hover {
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-1px) scale(1.04);
}

/* Hide the right-side avatar/photo block on this carousel so the
   testimonial reads as a centered text quote card. The 4 lifted
   testimonials don't carry per-author portraits, and the photo
   slot would render as an empty pink box. */
body .elementor-element-3d08d33 .pxl-item--image.bg-image {
  display: none !important;
}

/* ---- REDUCED MOTION ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body .elementor-element-80d7caa .pxl-btn,
  body .elementor-element-80d7caa a.btn,
  body .elementor-element-3d08d33 .pxl-swiper-arrow {
    transition: none !important;
  }
  body .elementor-element-80d7caa .pxl-btn:hover,
  body .elementor-element-80d7caa a.btn:hover,
  body .elementor-element-3d08d33 .pxl-swiper-arrow:hover {
    transform: none;
  }
}