/* =========================================================================
   CircleTime - Elementor compatibility layer
   Loaded AFTER elementor-frontend.

   Two mechanisms carry the design into Elementor:

   1. styles-elementor.css - a generated copy of the design stylesheet whose
      selectors are prefixed with body.elementor-page, so the design's rules
      outrank Elementor's container defaults wherever the design declares a
      property.

   2. This file - which neutralises Elementor's container variables back to
      their CSS initial values. That matters because the design frequently
      relies on browser defaults it never declares (a div is display:block, a
      flex row is flex-direction:row). Elementor declares those properties on
      every container, so without this reset it silently wins wherever the
      design is implicit. Resetting the VARIABLE rather than the property
      keeps the design's own explicit rules in charge.
   ========================================================================= */

.elementor .e-con.ct-raw{
  /* Box model: a plain div has no padding, margin or imposed size. */
  --padding-top:0px; --padding-right:0px; --padding-bottom:0px; --padding-left:0px;
  --padding-block-start:0px; --padding-block-end:0px;
  --padding-inline-start:0px; --padding-inline-end:0px;
  --margin-top:0px; --margin-right:0px; --margin-bottom:0px; --margin-left:0px;
  --margin-block-start:0px; --margin-block-end:0px;
  --margin-inline-start:0px; --margin-inline-end:0px;
  --width:auto;
  --content-width:none;
  --min-height:auto;

  /* Display: block is the div default. Design blocks that need grid or flex
     declare it themselves and win on specificity. */
  --display:block;

  /* Flex and grid defaults, as the CSS initial values. */
  --flex-direction:row;
  --justify-content:normal;
  --align-items:normal;
  --align-content:normal;
  --flex-wrap:nowrap;
  --gap:0px; --row-gap:0px; --column-gap:0px;
  --grid-auto-flow:row;
  --justify-items:legacy;
  --overlay-opacity:0;
}

/* Widget wrappers must be transparent to the design's layout.
   Scoped to .elementor-widget deliberately: .elementor-element also matches
   CONTAINERS, and at (0,3,0) this rule would outrank the design's own
   (0,2,1) sizing rules - which silently collapsed .hero__visual to 0x0 at
   desktop widths by overriding its width:100%/max-width:620px. */
.elementor .elementor-widget.ct-raw{ width:auto; max-width:none; }
.elementor .elementor-widget.ct-raw > .elementor-widget-container{ margin:0; padding:0; }

/* Elementor's heading widget imposes its kit typography; let the design's own
   heading rules cascade through. */
.elementor .elementor-widget-heading .elementor-heading-title{
  font-family:inherit; font-size:inherit; font-weight:inherit;
  line-height:inherit; color:inherit;
}

/* Elementor gives the text-editor widget its own colour and leading. */
.elementor .elementor-widget-text-editor{
  color:inherit; font-family:inherit; font-size:inherit; line-height:inherit;
}

/* The canvas template styles nothing itself. */
body.elementor-page{ margin:0; }

/* Image frames.

   The design sizes every photo with a frame element that has its own
   aspect-ratio plus `<frame> img{ height:100%; object-fit:cover }`. Elementor
   inserts two wrappers between the frame and the <img>, so height:100%
   resolves against a wrapper of auto height, the image falls back to its
   intrinsic height and overflows the frame - which clipped the bottom off the
   program cards and squashed the round hero portraits.

   Making those two wrappers full-height restores the chain. The frames are the
   six the stylesheet defines: .pic, .hero__ph, .prog__media, .lb__thumb, .hero__main, .hero__bubble. */
body.elementor-page .pic .elementor-widget-image,
body.elementor-page .pic .elementor-widget-container,
body.elementor-page .pic figure,
body.elementor-page .hero__ph .elementor-widget-image,
body.elementor-page .hero__ph .elementor-widget-container,
body.elementor-page .hero__ph figure,
body.elementor-page .prog__media .elementor-widget-image,
body.elementor-page .prog__media .elementor-widget-container,
body.elementor-page .prog__media figure,
body.elementor-page .lb__thumb .elementor-widget-image,
body.elementor-page .lb__thumb .elementor-widget-container,
body.elementor-page .lb__thumb figure,
body.elementor-page .hero__main .elementor-widget-image,
body.elementor-page .hero__main .elementor-widget-container,
body.elementor-page .hero__main figure,
body.elementor-page .hero__bubble .elementor-widget-image,
body.elementor-page .hero__bubble .elementor-widget-container,
body.elementor-page .hero__bubble figure{ margin:0; padding:0; line-height:0; }

body.elementor-page .pic > .elementor-widget-image,
body.elementor-page .hero__ph > .elementor-widget-image,
body.elementor-page .prog__media > .elementor-widget-image,
body.elementor-page .lb__thumb > .elementor-widget-image,
body.elementor-page .hero__main > .elementor-widget-image,
body.elementor-page .hero__bubble > .elementor-widget-image,
body.elementor-page .pic > .elementor-widget-image > .elementor-widget-container,
body.elementor-page .hero__ph > .elementor-widget-image > .elementor-widget-container,
body.elementor-page .prog__media > .elementor-widget-image > .elementor-widget-container,
body.elementor-page .lb__thumb > .elementor-widget-image > .elementor-widget-container,
body.elementor-page .hero__main > .elementor-widget-image > .elementor-widget-container,
body.elementor-page .hero__bubble > .elementor-widget-image > .elementor-widget-container{ height:100%; }

/* Decorative doodles position against their section, so the HTML widget
   carrying them must not create a box of its own. */
.elementor .elementor-widget-html.ct-deco,
.elementor .elementor-widget-html.ct-deco > .elementor-widget-container{
  position:static; margin:0; padding:0; line-height:0;
}

/* Full-bleed sections must not be constrained by Elementor's page wrapper. */
body.elementor-page .elementor,
body.elementor-page .elementor > .e-con{ max-width:none; }

/* =========================================================================
   #spaces supporting points (targeted update — A Place Parents Trust).
   A 5-up strip of icon cards that fills the section's lower space without
   removing any existing content, using the site's own chipic/token visual
   language. Added for the Elementor build only.
   ========================================================================= */
body.elementor-page .trust{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  margin-top:30px;
  width:100%;
}
body.elementor-page .trust__i{
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  text-align:center; gap:12px; padding:24px 16px;
  background:var(--white); border:1px solid var(--b-hair); border-radius:var(--r-lg);
}
body.elementor-page .trust__i .chipic{ margin:0; }
body.elementor-page .trust__i h3{
  font-family:var(--f-head); font-size:1rem; line-height:1.3; font-weight:700;
  color:var(--ink); margin:0;
}
@media (max-width:860px){ body.elementor-page .trust{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px){ body.elementor-page .trust{ grid-template-columns:1fr; } }

/* #approach: image fills its column at desktop so the deep band has no empty
   dark gaps above/below the photo (targeted fix). */
@media (min-width:1000px){
  body.elementor-page #approach .deep__grid{ align-items:center; }
  body.elementor-page #approach .deep__media{ display:flex; }
  body.elementor-page #approach .deep__media .pic{ height:auto; aspect-ratio:4/3; }
}

/* #approach pillars: clean icon/text alignment (fixes heading overlapping the
   icon chip and inconsistent gap between pillars). */
body.elementor-page #approach .pil{ display:flex; align-items:flex-start; gap:14px; }
body.elementor-page #approach .pil .pil__ic{ flex:0 0 auto; }
body.elementor-page #approach .pil > .e-con{ flex:1 1 0; min-width:0; }
body.elementor-page #approach .pil h3{ margin:0 0 4px; }
body.elementor-page #approach .pil p{ margin:0; }

/* #programs: centered card content (age badge, program name, description),
   matching the CircleTime reference layout. */
body.elementor-page .prog__body--c{ text-align:center; align-items:center; }
body.elementor-page .prog__body--c .prog__badge{ display:inline-block; margin:0 0 12px; }
body.elementor-page .prog__body--c .prog__h{ margin:0 0 8px; }
body.elementor-page .prog__body--c .prog__p{ margin:0 auto; max-width:48ch; }

/* #programs: only two programs now, so use two equal columns. The design
   defaults to three columns at >=1024px, which left the two cards at one-third
   width with an empty third slot (they looked small). Two equal columns fill
   the row and centre the pair exactly. */
@media (min-width:760px){
  body.elementor-page #programs .progs__grid{ grid-template-columns:repeat(2,1fr); max-width:920px; margin-inline:auto; justify-content:stretch; }
  body.elementor-page #programs .progs__grid .prog--c{ grid-column:auto; }
}

/* #spaces: three balanced photos in a row, features list full-width below. */
body.elementor-page #spaces .spaces-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
body.elementor-page #spaces .spaces-grid .pic{ aspect-ratio:4/3; border-radius:var(--r-lg); overflow:hidden; position:relative; margin:0; height:auto; }
body.elementor-page #spaces .spaces-features{ margin-top:28px; }
@media (max-width:820px){ body.elementor-page #spaces .spaces-grid{ grid-template-columns:1fr; } }

/* #why: photo thumbnails in place of the icon chips. */
body.elementor-page .chipic--photo{ width:118px; height:118px; padding:0; overflow:hidden; background:none; border-radius:20px; box-shadow:var(--sh-2); }\nbody.elementor-page .chipic--photo img{ width:100%; height:100%; object-fit:cover; display:block; }
body.elementor-page .chipic--photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* #programs: centre the section header (pill, heading, description). */
body.elementor-page #programs .progs__head{ text-align:center; align-items:center; }
body.elementor-page #programs .progs__head .pill{ margin-inline:auto; }
@media (min-width:760px){
  body.elementor-page #programs .progs__top{ display:block; position:relative; }
  body.elementor-page #programs .progs__head{ max-width:760px; margin-inline:auto; }
  body.elementor-page #programs .progs__mascot{ position:absolute; top:0; right:0; }
}


/* Flaticon lineal-color icon chips (why + approach) 2026-10-10 */
body.elementor-page .chipic--icon{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;padding:0;border-radius:18px;background:#fff;box-shadow:0 6px 16px rgba(22,50,75,.10);overflow:visible;}
body.elementor-page .chipic--icon img{width:40px;height:40px;object-fit:contain;display:block;}
body.elementor-page #approach .chipic--icon{margin-bottom:12px;}


/* #approach icon size reduction 2026-10-10 */
body.elementor-page #approach .chipic--icon{width:48px;height:48px;border-radius:14px;}
body.elementor-page #approach .chipic--icon img{width:30px;height:30px;}


/* #why wide card vertical centering fix 2026-10-10 */
body.elementor-page #why .bx--wide{justify-content:flex-start;}


/* Smooth scroll (Lenis) + parallax 2026-10-10 */
html.ct-smooth, html.ct-smooth body{height:auto;}
html.lenis, html.lenis body{height:auto;}
.lenis.lenis-smooth{scroll-behavior:auto !important;}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain;}
.lenis.lenis-stopped{overflow:hidden;}
.lenis.lenis-smooth iframe{pointer-events:none;}


/* #spaces gallery hover animation (ref: beyondjourney Destinations) 2026-10-10 */
body.elementor-page #spaces .spaces-grid .pic{transition:transform .55s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),opacity .55s cubic-bezier(.22,1,.36,1);will-change:transform;}
body.elementor-page #spaces .spaces-grid .pic:hover{transform:scale(1.03);box-shadow:0 22px 46px -20px rgba(22,50,75,.38);z-index:2;}
body.elementor-page #spaces .spaces-grid .pic img{transition:transform .9s ease-out;will-change:transform;}
body.elementor-page #spaces .spaces-grid .pic:hover img{transform:scale(1.07);}
@media (prefers-reduced-motion:reduce){body.elementor-page #spaces .spaces-grid .pic,body.elementor-page #spaces .spaces-grid .pic img{transition:none;}body.elementor-page #spaces .spaces-grid .pic:hover,body.elementor-page #spaces .spaces-grid .pic:hover img{transform:none;}}

/* #spaces reveal reduced-motion guard 2026-10-10 */
@media (prefers-reduced-motion:reduce){body.elementor-page #spaces .spaces-grid .pic.reveal{opacity:1;transform:none;transition:none;}}


/* #why bento: tile cards gaplessly (drop wide spans) 2026-10-10 */
body.elementor-page #why .bento .bx--wide{grid-column:auto;}


/* #why bento: photo to far-right column 2026-10-10 */
@media (min-width:1000px){body.elementor-page #why .bento .bx--photo{grid-column:4;grid-row:1/span 2;}}


/* #why cards: alternating pastel yellow/blue 2026-10-10 */
body.elementor-page #why .elementor-element-2d744c1,
body.elementor-page #why .elementor-element-2c0720a,
body.elementor-page #why .elementor-element-aaab7ca{background-color:#FFF8E6;border-color:#F3E6BE;}
body.elementor-page #why .elementor-element-d0e8ceb,
body.elementor-page #why .elementor-element-b8ec4eb,
body.elementor-page #why .elementor-element-f9ee491{background-color:#EAF3FB;border-color:#D3E5F5;}

/* 2026-10-21 section tweaks */
/* FAQ: subtler card border */
body.elementor-page #faq .qa{border-color:rgba(199,224,245,.45)}
/* Visit: center section header */
body.elementor-page #visit .sechead{text-align:center}
body.elementor-page #visit .sechead .pill{margin-inline:auto}

/* v2: approach feature image removed in redesign (bento replaces it) */
body.elementor-page #approach .deep__media{display:none !important;}
body.elementor-page #approach .deep__grid{display:block;}