/* ============================================================
   ARKIDZOO BRAND OVERRIDES - layered on top of the modkids
   template CSS. Keeps the template's Elementor structure intact
   but nudges colors, type and a few key surfaces toward the
   ARKidzoo brand guidelines.

   Loaded only on pages that opt in via <link rel="stylesheet">.
   Pairs with arkidzoo-tokens.css for the CSS variables.
   ============================================================ */

/* ---- TYPOGRAPHY -------------------------------------------- */
/* Fredoka for every headline + button label,
   Nunito Sans for body copy + UI text.                         */

body,
body p,
body li,
body td,
body input,
body textarea,
body select,
body button,
body a,
body span,
body label {
  font-family: var(--font-body) !important;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .pxl-heading--text,
body .pxl-item--title,
body .pxl-post--title,
body .elementor-heading-title,
body .pxl-bagde,
body .pxl-cart--btn,
body .btn,
body .btn-link,
body .btn-shop,
body .wpcf7-submit,
body .pxl-submenu > li > a,
body .pxl-menu > li > a,
body .pxl-search-submit,
body .pxl-form--label {
  font-family: var(--font-display) !important;
  letter-spacing: var(--tracking-display);
}

body h1 strong, body h2 strong, body h3 strong, body h4 strong {
  font-weight: var(--weight-bold);
}

/* ---- COLOR EQUITY ------------------------------------------- */
/* Template's primary orange-red (#FF5833) -> ARKidzoo red.
   Override background + color + border in the common surfaces.  */

body .pxl-btn--primary,
body .btn.btn-primary,
body button[type="submit"].wpcf7-submit,
body .pxl-submit,
body .pxl-cta--button,
body .pxl-add-cart,
body .added_to_cart,
body .btn-shadow-custom {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
  border-color: var(--color-brand) !important;
  border-radius: var(--radius-pill) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
}

body .pxl-btn--primary:hover,
body .btn.btn-primary:hover,
body button[type="submit"].wpcf7-submit:hover,
body .pxl-submit:hover,
body .pxl-cta--button:hover,
body .pxl-add-cart:hover,
body .btn-shadow-custom:hover {
  background: var(--color-brand-hover) !important;
  box-shadow: var(--glow-red) !important;
  transform: translateY(-1px);
}

/* Links + inline accents */
body a {
  transition: color var(--duration-fast) var(--ease-out);
}

body a:hover,
body .pxl-link a:hover,
body .pxl-menu > li > a:hover,
body .pxl-submenu > li > a:hover,
body .pxl-post--title a:hover,
body .pxl-getintouch a:hover {
  color: var(--color-brand) !important;
}

/* Background + nav accents in the template that were orange-red */
body .pxl-cart--qty,
body .pxl-wishlist--qty,
body .pxl-compare--qty,
body .pxl-bagde {
  background: var(--color-brand) !important;
}

/* The "Get In Touch" pill in the header */
body .pxl-popup-trigger,
body .pxl-cta--button.btn-shadow-custom {
  background: var(--color-brand) !important;
  color: var(--color-white) !important;
}

/* Eyebrow / section-tag text that uses the template orange */
body .pxl-eyebrow,
body .pxl-tagline,
body .elementor-element [style*="color:#FF5833"],
body .elementor-element [style*="color: #FF5833"] {
  color: var(--color-brand) !important;
}

/* ---- HEADINGS get the brand display weight + tighter tracking ---- */
body h1, body h2,
body .pxl-heading--text {
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-snug);
}

body h2 em,
body h1 em {
  font-style: normal;
  color: var(--color-brand);
}

/* ---- CARDS + SURFACES --------------------------------------- */
/* Warm-tinted shadows on lifted cards so they sit with the cream paper. */

body .pxl-icon-box,
body .pxl-getintouch,
body .pxl-post--inner,
body .pxl-banner1,
body .pxl-product .pxl-item--inner,
body .pxl-card {
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card);
  transition: transform var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out);
}

body .pxl-icon-box:hover,
body .pxl-post--inner:hover,
body .pxl-product .pxl-item--inner:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

/* Pill chips / badges */
body .pxl-tag,
body .pxl-badge,
body .pxl-cat-link,
body .onsale {
  border-radius: var(--radius-pill) !important;
}

/* ---- HERO SUNBURST GLOW ------------------------------------- */
/* Add a soft red sunburst behind the home hero without touching markup.
   The template's first .e-con-boxed inside #pxl-main is the hero. */

body #pxl-main > .elementor-container > .row > .pxl-content-area > main > article > div > div > .elementor-element.e-con-boxed:first-of-type {
  position: relative;
  isolation: isolate;
}

body #pxl-main > .elementor-container > .row > .pxl-content-area > main > article > div > div > .elementor-element.e-con-boxed:first-of-type::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -200px;
  right: -200px;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: var(--glow-sunburst-soft);
  pointer-events: none;
}

/* ---- BODY BACKGROUND ---------------------------------------- */
body {
  background: var(--surface-page);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: var(--color-brand);
  color: var(--color-white);
}

/* ---- FORM INPUTS -------------------------------------------- */
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="search"],
body textarea,
body select {
  border-radius: var(--radius-md) !important;
  border-color: var(--border-subtle) !important;
}

body input[type="text"]:focus,
body input[type="email"]:focus,
body input[type="tel"]:focus,
body input[type="search"]:focus,
body textarea:focus,
body select:focus {
  border-color: var(--color-brand) !important;
  outline: 3px solid var(--color-red-100);
  outline-offset: 0;
}

/* ============================================================
   LOGO COLORS ON DECORATIVE SHAPES
   The wordmark uses 5 colors with roles - AR=purple, k=green,
   i=blue, d=yellow, zoo=red. Push those colors through the
   template's decorative shapes so the page sings the same song.
   ============================================================ */

/* ---- SVG arrows + tags retinted ----------------------------- */
/* The template uses #FF5833 (orange-red) and #5E0144 (dark purple)
   as a 2-tone shape pair on swiper navigation arrows. Map the
   orange-red to brand red (already done above via button rules)
   and the dark purple to brand purple - so the 2-tone shape
   becomes a brand-aligned red/purple pair instead of orange/maroon. */

body svg path[fill="#5E0144"],
body svg [fill="#5E0144"] {
  fill: var(--color-purple-500) !important;
}

body svg path[fill="#FF5833"],
body svg [fill="#FF5833"] {
  fill: var(--color-brand) !important;
}

/* ---- ICON BOX TINTS (3-up pillar row) ----------------------- */
/* The 3 pillar icon boxes (Unlock potential / Learning kit / AR
   makes teaching stick) get the logo's first three colors:
   purple, green, yellow. The icon container picks up a soft
   tint of the accent + a colored ring. */

body .elementor-element-417150a .pxl-item--icon {
  background: var(--color-purple-50) !important;
  border-radius: 50%;
  padding: var(--space-2);
  box-shadow: 0 0 0 4px var(--color-purple-500);
}

body .elementor-element-a294421 .pxl-item--icon {
  background: var(--color-green-50) !important;
  border-radius: 50%;
  padding: var(--space-2);
  box-shadow: 0 0 0 4px var(--color-green-500);
}

body .elementor-element-c9d779e .pxl-item--icon {
  background: var(--color-yellow-50) !important;
  border-radius: 50%;
  padding: var(--space-2);
  box-shadow: 0 0 0 4px var(--color-yellow-500);
}

/* ---- ICON BOX TINTS (4-up category row) --------------------- */
/* The 4 product family icon boxes get the FULL logo palette:
   red, purple, yellow, blue. Each card gets a tinted background
   and accent border on the left, so the column reads as a row
   of 4 colorful product families. */

body .elementor-element-95ec026 .pxl-icon-box,
body .elementor-element-95ec026 .pxl-item--inner {
  background: var(--color-red-50);
  border-left: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
}

body .elementor-element-7155172 .pxl-icon-box,
body .elementor-element-7155172 .pxl-item--inner {
  background: var(--color-purple-50);
  border-left: 4px solid var(--color-purple-500);
  border-radius: var(--radius-md);
}

body .elementor-element-7bbd7bd .pxl-icon-box,
body .elementor-element-7bbd7bd .pxl-item--inner {
  background: var(--color-yellow-50);
  border-left: 4px solid var(--color-yellow-500);
  border-radius: var(--radius-md);
}

body .elementor-element-3a324eb .pxl-icon-box,
body .elementor-element-3a324eb .pxl-item--inner {
  background: var(--color-blue-50);
  border-left: 4px solid var(--color-blue-500);
  border-radius: var(--radius-md);
}

/* ---- BOW-TIE shapes on the service swiper ------------------- */
/* The .pxl-bow-tie pseudo-shape sits behind each pxl-icon-box7.
   Cycle the 3 visible bow-ties through purple/green/yellow so
   the swiper reads as a colorful procession of learning areas. */

body .pxl-icon-box7:nth-of-type(3n+1) .pxl-bow-tie::before,
body .pxl-icon-box7:nth-of-type(3n+1) .pxl-bow-tie {
  background: var(--color-purple-500) !important;
}

body .pxl-icon-box7:nth-of-type(3n+2) .pxl-bow-tie::before,
body .pxl-icon-box7:nth-of-type(3n+2) .pxl-bow-tie {
  background: var(--color-green-500) !important;
}

body .pxl-icon-box7:nth-of-type(3n+3) .pxl-bow-tie::before,
body .pxl-icon-box7:nth-of-type(3n+3) .pxl-bow-tie {
  background: var(--color-yellow-500) !important;
}

/* ---- TESTIMONIAL slide accent ------------------------------- */
/* The brand mark sits on a deep aubergine ink shadow. Bring that
   warmth to the testimonial author tag.                          */

body .pxl-item--position {
  color: var(--color-purple-500) !important;
  font-weight: var(--weight-semibold);
}

/* ---- BANNER + DEAL backgrounds get a brand-tinted overlay --- */
/* The hero banner box and the trending-deal banner sit on warm
   neutral surfaces. Soften the template's daycare-bright tone
   with the brand's paper cream + a touch of yellow accent.       */

body .pxl-banner1,
body .pxl-banner-trending {
  background: var(--surface-sunken) !important;
}

/* ---- SWIPER pagination dots --------------------------------- */
body .pxl-swiper-pagination .swiper-pagination-bullet {
  background: var(--color-neutral-200) !important;
  opacity: 1;
}

body .pxl-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-brand) !important;
}

/* ---- SCROLL TO TOP button ----------------------------------- */
body .pxl-scroll-top svg path[fill="#5E0144"] {
  fill: var(--color-purple-500) !important;
}

body .pxl-scroll-top svg path[fill="#FF5833"] {
  fill: var(--color-brand) !important;
}

/* ---- SHARED TOPBAR + HEADER YELLOW -> brand yellow ---------- */
/* The yellow contact strip at the top of every page is element
   `10a137b` in post-417.css (shared header template). On the home
   page only, retint it to the brand's pure yellow.                */

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-500) !important;
}

/* Any other large hero/section block in the shared header that
   carries the template's mustard yellow.                          */
body .elementor-element-42e479f:not(.elementor-motion-effects-element-type-background),
body .elementor-element-42e479f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background-color: var(--color-yellow-500) !important;
}

/* ---- AGGRESSIVE COLOR SWAP via attribute selectors ---------- */
/* Catch-all for any inline style="background-color: #..." that
   still uses the template palette. Runs after everything else.    */

body [style*="background-color:#FFCA24"],
body [style*="background-color: #FFCA24"],
body [style*="background:#FFCA24"],
body [style*="background: #FFCA24"] {
  background-color: var(--color-yellow-500) !important;
  background: var(--color-yellow-500) !important;
}

body [style*="background-color:#4CB0B3"],
body [style*="background-color: #4CB0B3"],
body [style*="background:#4CB0B3"],
body [style*="background: #4CB0B3"] {
  background-color: var(--color-blue-500) !important;
  background: var(--color-blue-500) !important;
}

body [style*="background-color:#19DD8D"],
body [style*="background-color: #19DD8D"] {
  background-color: var(--color-green-500) !important;
}

body [style*="background-color:#FF5833"],
body [style*="background-color: #FF5833"] {
  background-color: var(--color-brand) !important;
}

body [style*="color:#FF5833"],
body [style*="color: #FF5833"] {
  color: var(--color-brand) !important;
}

body [style*="color:#5E0144"],
body [style*="color: #5E0144"] {
  color: var(--color-purple-500) !important;
}