/* ============================================================
   HOME: TOPBAR + HERO - brand re-skin
   Scope: topbar yellow strip, header nav, and the main hero
   block (heading, body, CTA, kid photos, line PNGs).
   Goal: pivot from the template's teal/yellow daycare-bright
   look to the ARKidzoo "warm cream paper + Sunburst Glow"
   signature. No markup changes - pure CSS overrides keyed
   off the Elementor element IDs that ship in index.astro.
   ============================================================ */

/* ---- TOPBAR (yellow contact strip) -------------------------- */
/* Soften the mustard yellow strip to brand yellow-50/100 so the
   page does not start with a heavy block of saturated color.
   Brand-overrides already pushes the full yellow-500 here; we
   tune it lighter and add subtle bottom shadow to lift the nav. */
body .elementor-element-10a137b:not(.elementor-motion-effects-element-type-background),
body .elementor-element-10a137b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-yellow-50) !important;
  border-bottom: 1px solid var(--color-yellow-300);
}

/* Topbar text + links read as warm ink, not white-on-yellow.
   `7755696` is the email/phone/location link cluster. */
body .elementor-element-7755696 a,
body .elementor-element-7755696 span,
body .elementor-element-7755696 i,
body .elementor-element-de605b1 .pxl-link a {
  color: var(--color-neutral-900) !important;
  font-family: var(--font-body) !important;
  font-weight: var(--weight-semibold);
  transition: color var(--duration-fast) var(--ease-out);
}

body .elementor-element-de605b1 .pxl-link a:hover {
  color: var(--color-brand) !important;
}

/* ---- HEADER NAV (white strip with logo + menu) -------------- */
/* Fredoka for the primary menu items so the nav reads playful. */
body .pxl-menu > li > a,
body .pxl-menu-primary > li > a {
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-neutral-900) !important;
  transition: color var(--duration-fast) var(--ease-out);
}

body .pxl-menu > li > a:hover,
body .pxl-menu > li.current-menu-item > a,
body .pxl-menu > li.current_page_item > a {
  color: var(--color-brand) !important;
}

/* The cart + search header icons */
body .pxl-cart--btn,
body .pxl-search-btn {
  color: var(--color-neutral-900) !important;
}

body .pxl-cart--btn:hover,
body .pxl-search-btn:hover {
  color: var(--color-brand) !important;
}

/* ---- HERO ROOT (2cd6e22) - paint the paper -------------- */
/* Make the outer hero a cream paper container with a Sunburst
   Glow pseudo-element bleeding from the top-right. Keep overflow
   hidden so the glow does not paint the page below. */
body .elementor-element-2cd6e22 {
  background: var(--color-paper) !important;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

body .elementor-element-2cd6e22::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -260px;
  right: -200px;
  width: 820px;
  height: 820px;
  border-radius: 50%;
  /* iter-2: widen the glow plateau so the hero reads as ambient
     light, not a hot red dot. Peak .32 carries to 60% radius then
     fades, giving a more cinematic halo at large sizes. */
  background: radial-gradient(circle,
    rgba(230, 59, 59, 0.32) 0%,
    rgba(230, 59, 59, 0.32) 30%,
    rgba(230, 59, 59, 0.18) 60%,
    rgba(230, 59, 59, 0) 80%);
  pointer-events: none;
}

body .elementor-element-2cd6e22::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: -200px;
  left: -160px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: var(--glow-sunburst-soft);
  pointer-events: none;
}

/* ---- HERO INNER BLUE PANEL (78b9adc) - retint to cream ---- */
/* The inner rounded box is the template's teal/blue surface.
   Swap to paper-sunken so the kid photos pop on a warm cream
   tile, but keep the rounded corners and absolute child layout. */
body .elementor-element-78b9adc:not(.elementor-motion-effects-element-type-background),
body .elementor-element-78b9adc > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-paper-sunken) !important;
  background-image: var(--glow-sunburst-soft) !important;
  background-position: 90% -20% !important;
  background-repeat: no-repeat !important;
  background-size: 70% 90% !important;
}

/* Lift the inner panel above the outer ::before/::after glows. */
body .elementor-element-78b9adc {
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-md);
}

/* The copy sub-containers need to sit above the panel bg. */
body .elementor-element-c0564bb,
body .elementor-element-3006e36,
body .elementor-element-58d548e {
  position: relative;
  z-index: 2;
}

/* ---- HERO HEADING (df14a5f) - Fun Learning With ARKidzoo ---- */
/* Fluid display type, tight leading, warm ink. The brand red
   underline appears via the existing <em>/<strong> wrap in the
   page data - we also tint <strong> + the literal "ARKidzoo"
   span if Elementor wrapped it. */
body .elementor-element-df14a5f .pxl-heading--text,
body .elementor-element-df14a5f .elementor-heading-title,
body .elementor-element-df14a5f h1,
body .elementor-element-df14a5f h2 {
  font-family: var(--font-display) !important;
  font-size: var(--text-display-xl) !important;
  font-weight: var(--weight-bold) !important;
  line-height: var(--leading-tight) !important;
  letter-spacing: var(--tracking-display) !important;
  color: var(--color-neutral-900) !important;
  margin-bottom: var(--space-4);
}

/* Inline accent: any <em>, <strong>, .pxl-heading--accent or
   span the template wraps the punchy word in gets brand red. */
body .elementor-element-df14a5f em,
body .elementor-element-df14a5f strong,
body .elementor-element-df14a5f .pxl-heading--accent,
body .elementor-element-df14a5f span[style*="color"] {
  font-style: normal !important;
  color: var(--color-brand) !important;
  font-weight: var(--weight-bold) !important;
}

/* ---- HERO BODY COPY (a0abd2a) -------------------------------- */
body .elementor-element-a0abd2a,
body .elementor-element-a0abd2a p,
body .elementor-element-a0abd2a .pxl-text-editor {
  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);
}

/* ---- SHOP NOW BUTTON (e4e88dc) - the primary CTA ------------ */
/* Pill, brand red, Sunburst Glow halo on hover. The shared
   brand-overrides already sets background + radius, but we
   bump the size, shadow, and motion so the hero CTA feels hero. */
body .elementor-element-e4e88dc .pxl-btn,
body .elementor-element-e4e88dc .pxl-btn--primary,
body .elementor-element-e4e88dc a,
body .elementor-element-e4e88dc button {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-color: var(--color-brand) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight);
  padding: 14px 30px !important;
  box-shadow: var(--shadow-md);
  transition: transform var(--duration-fast) var(--ease-bounce),
              box-shadow var(--duration-base) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}

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

/* ---- KID PHOTOS - keep + soften the rectangles --------------- */
/* The 4 absolute-positioned kid images. Round their corners and
   add a warm shadow so they read as polaroid-style photo cards
   on the cream surface rather than crisp template rectangles. */
body .elementor-element-b8b9d8d .pxl-item--image img,
body .elementor-element-fd56685 .pxl-item--image img,
body .elementor-element-d0aac2f .pxl-item--image img,
body .elementor-element-1e1292d .pxl-item--image img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--duration-slow) var(--ease-out);
}

body .elementor-element-b8b9d8d:hover .pxl-item--image img,
body .elementor-element-fd56685:hover .pxl-item--image img,
body .elementor-element-d0aac2f:hover .pxl-item--image img {
  transform: translateY(-4px);
}

/* The kite/kid-kate (1e1292d) is a transparent PNG mascot, no
   rounded card needed - keep shadow off so it floats freely. */
body .elementor-element-1e1292d .pxl-item--image img {
  border-radius: 0;
  box-shadow: none;
}

/* ---- DECORATIVE LINE PNGs - red wash to match the brand ----- */
/* The 3 dotted-line/curl PNGs that connect the icon-box trio.
   Apply a hue rotation + saturation pass so the template's
   yellow squiggles read as warm red/orange brand decoration.
   iter-2: prior `hue-rotate(-30deg)` washed to tan; pushing the
   hue ~340deg + saturation 2 + a touch darker lands inside the
   brand red family without crushing the line PNG mid-tones. */
body .elementor-element-67e1329 img,
body .elementor-element-195c6a1 img,
body .elementor-element-c449ff7 img,
body .elementor-element-e25b360 img {
  filter: hue-rotate(340deg) saturate(2) brightness(0.9);
  transition: filter var(--duration-base) var(--ease-out);
}

/* ---- REDUCED MOTION ----------------------------------------- */
/* Honor the brand motion contract: no transforms or transitions
   for users who asked for less movement. */
@media (prefers-reduced-motion: reduce) {
  body .elementor-element-e4e88dc .pxl-btn,
  body .elementor-element-e4e88dc a,
  body .elementor-element-b8b9d8d .pxl-item--image img,
  body .elementor-element-fd56685 .pxl-item--image img,
  body .elementor-element-d0aac2f .pxl-item--image img {
    transition: none !important;
    transform: none !important;
  }
}

/* =============================================================
   ITER-2 FIXES (verifier P0s) - keep at file end so cascade wins
   ============================================================= */

/* ---- 1) TOPBAR YELLOW STRIP - kill the mustard --------------
   Diagnosis: post-417.css paints `.elementor-417 .elementor-element
   .elementor-element-10a137b` (0,3,0 specificity) with the template
   mustard `#FFCA24`. Iter-1 attempted `body .elementor-element-10a137b`
   (0,2,1, !important) but `arkidzoo-brand-overrides.css` ALSO set
   `var(--color-yellow-500)` (#F5C518 - still mustard) at the same
   0,2,1 + !important. Both !important rules tied on specificity, so
   the LATER stylesheet wins by source order. We load AFTER brand-
   overrides, but the verifier still sees mustard, so we go nuclear:
   raise specificity AND target the visible Elementor wrappers.

   `header` adds 1 element, the attribute selector adds 1 class, the
   double class chain adds another class -> well above the template's
   0,3,0 ceiling, and !important locks the !important arms-race. */
body header .elementor-417 .elementor-element.elementor-element-10a137b,
body header .elementor-417 .elementor-element.elementor-element-10a137b:not(.x),
body header [data-id="10a137b"],
body header .elementor-element[data-id="10a137b"],
body header .elementor-element.elementor-element-10a137b,
body header .elementor-element-10a137b:not(.elementor-motion-effects-element-type-background),
body header .elementor-element-10a137b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-paper) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--color-neutral-100) !important;
}

/* Also catch the sticky-header copy of the topbar in case the
   sticky `.pxl-header-elementor-sticky` block ever exposes a yellow
   topbar surface during scroll. */
body .pxl-header-elementor-sticky .elementor-element-10a137b,
body .pxl-header-elementor-main .elementor-element-10a137b {
  background-color: var(--color-paper) !important;
  background-image: none !important;
}

/* ---- 2) "GET IN TOUCH" PILL - force brand red ----------------
   Diagnosis: the visible button background lives on the template's
   `.btn-shadow-custom:after` pseudo, which reads
   `background-color: var(--fourth-color)` and the theme defines
   `--fourth-color: #FFBA03` (orange-yellow). brand-overrides only
   restyled the host `.btn-shadow-custom` element, NOT the `:after`,
   so the visible pill stayed yellow. We override the `:after`
   directly, and re-style the host for redundancy. The selector
   `body header .btn-shadow-custom` (0,2,1) beats the 0,1,0 of the
   theme's `.btn-shadow-custom:after`. */
body header .elementor-element-fdc397b .pxl-button .btn,
body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom,
body header a.btn.btn-shadow-custom,
body header .pxl-button .btn-shadow-custom {
  background-color: var(--color-brand) !important;
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-color: var(--color-brand) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-display) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-tight) !important;
  padding: 10px 22px !important;
  box-shadow: var(--shadow-sm) !important;
  transition: background var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-bounce) !important;
}

/* The `:after` is the actual visible pill background (the template
   creates a 2-layer "shadow card" trick). Force its color to brand
   red so the pill stops reading as yellow-on-yellow. */
body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom:after,
body header .btn-shadow-custom:after {
  background-color: var(--color-brand) !important;
  background: var(--color-brand) !important;
}

/* The `:before` is the offset "stack" rectangle - tint it to a
   subtle brand-hover red so the layered shadow effect still reads
   on the cream topbar, instead of plain white-on-yellow. */
body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom:before,
body header .btn-shadow-custom:before {
  background-color: var(--color-red-100) !important;
  border-color: var(--color-brand) !important;
}

/* Inner label spans inherit white text on the red pill. */
body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom .pxl--btn-text,
body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom span {
  color: var(--color-white) !important;
}

body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom:hover,
body header a.btn.btn-shadow-custom:hover,
body header .pxl-button .btn-shadow-custom:hover {
  background-color: var(--color-brand-hover) !important;
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-1px) !important;
}

body header .elementor-element-fdc397b .pxl-button .btn-shadow-custom:hover:after,
body header .btn-shadow-custom:hover:after {
  background-color: var(--color-brand-hover) !important;
}

/* ---- 3) HERO BODY COPY - lock the color ---------------------
   Verifier flagged that some inline spans inside the body-copy
   widget were still reading at the template ink color (too dark
   against the cream Sunburst Glow). Force every descendant
   element to inherit the warm secondary text token. */
body .elementor-element-a0abd2a * {
  color: var(--text-secondary) !important;
}

/* Keep inline brand accents (em/strong/.pxl-text-editor mark)
   readable as red even after the catch-all above. */
body .elementor-element-a0abd2a em,
body .elementor-element-a0abd2a strong,
body .elementor-element-a0abd2a mark,
body .elementor-element-a0abd2a a {
  color: var(--color-brand) !important;
}

/* ---- TOPBAR TEXT - relift after the bg flips to cream -------
   The iter-1 rule already set link color to neutral-900, but the
   icon glyphs sit inside <i> tags that inherit through `.pxl-link
   --icon` and may not have been hit. Cover the divider too. */
body header .elementor-element-7755696 a,
body header .elementor-element-7755696 i,
body header .elementor-element-7755696 span,
body header .elementor-element-3564f6f a,
body header .elementor-element-3564f6f i,
body header .elementor-element-3564f6f span,
body header .elementor-element-8c0cb2c a,
body header .elementor-element-8c0cb2c i,
body header .elementor-element-8c0cb2c span,
body header .elementor-element-3fb6c56 a,
body header .elementor-element-3fb6c56 i,
body header .elementor-element-3fb6c56 span {
  color: var(--color-neutral-900) !important;
}

/* Divider separators on the topbar - tone the lines to neutral
   so they don't slash through the cream strip as a yellow streak. */
body header .elementor-element-14126f2 .elementor-divider-separator,
body header .elementor-element-721b737 .elementor-divider-separator {
  border-color: var(--color-neutral-200) !important;
  background-color: var(--color-neutral-200) !important;
}