/*
Theme Name:   TUO Hello Child
Theme URI:    https://www.tuofundraiser.com/
Description:  Child theme of Hello Elementor for the Apii Te Uki Ou Cook Islands School Fundraiser. Brand tokens, fonts, Elementor helper classes, responsive fixes, SEO titles and descriptions, school schema and automatic image alt text.
Author:       Wuv Digital
Author URI:   https://www.tuofundraiser.com/
Template:     hello-elementor
Version:      2.1.1
Requires PHP: 7.4
Text Domain:  tuo-hello-child
*/

/* ==========================================================================
   Brand tokens (match the Elementor Global Kit)
   ========================================================================== */
:root{
  --tuo-blue:#0F74BB;
  --tuo-navy:#0B3557;
  --tuo-yellow:#FCCD08;
  --tuo-yellow-d:#D9AE00;
  --tuo-gold:#D69A00;
  --tuo-green:#4DAA3F;
  --tuo-coral:#EF5B3C;
  --tuo-sky:#6FB6E6;
  --tuo-cream:#FFF8E8;
  --tuo-mist:#EAF4FB;
  --tuo-ink:#3C4A5C;
  --tuo-muted:#6B7A8C;
  --tuo-line:#E3E9F0;
  --tuo-display:"Fredoka","Baloo 2","Trebuchet MS",system-ui,sans-serif;
  --tuo-body:"Nunito","Segoe UI",system-ui,sans-serif;
  --tuo-shadow:0 22px 50px rgba(11,53,87,.12);
}

/* ==========================================================================
   Base
   ========================================================================== */
html{scroll-behavior:smooth}
body{font-family:var(--tuo-body);color:var(--tuo-ink);background:#fff;overflow-x:clip;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{font-family:var(--tuo-display);color:var(--tuo-navy);text-wrap:balance}
a{color:var(--tuo-blue)}
img{max-width:100%;height:auto}
:focus-visible{outline:3px solid var(--tuo-navy);outline-offset:3px}
.screen-reader-text:focus{background:#fff;color:var(--tuo-navy);padding:12px 16px;border-radius:12px;z-index:100000}

/* Elementor containers never cause sideways scroll (blob backdrops, shape dividers, negative margins) */
.elementor>.elementor-section,.elementor>.e-con{overflow-x:clip}
.elementor-widget-image img{height:auto}

/* ==========================================================================
   Helper classes — add in Elementor: Advanced → CSS Classes
   ========================================================================== */
/* Blob-shaped photo (image widget or container) */
.tuo-blob img,.tuo-blob.e-con{border-radius:52% 48% 44% 56% / 48% 56% 44% 52%;border:8px solid #fff;box-shadow:var(--tuo-shadow);object-fit:cover;aspect-ratio:5/4;width:100%}
.tuo-blob-round img{border-radius:52% 48% 44% 56% / 48% 56% 44% 52%;object-fit:cover;aspect-ratio:1/1;width:100%}
.tuo-blob-thumb img{border-radius:42% 58% 50% 50% / 50% 46% 54% 50%;object-fit:cover;aspect-ratio:1/1}
/* White rounded card */
.tuo-card{background:#fff;border-radius:28px;box-shadow:var(--tuo-shadow)}
/* Coloured words inside headings: wrap with <span class="tuo-hl"> or <span class="tuo-marker"> */
.tuo-hl{color:var(--tuo-blue)}
.tuo-marker{background:linear-gradient(transparent 62%,var(--tuo-yellow) 62%);padding:0 .1em}
/* Non-clickable tag pills made from a button widget */
.tuo-pill .elementor-button{pointer-events:none}
/* Square-ish gallery tiles */
.tuo-gallery img{aspect-ratio:1/1;object-fit:cover;border-radius:22px}
/* Hide decorative doodles on phones */
@media (max-width:767px){.tuo-doodle{display:none!important}}

/* ==========================================================================
   Responsive polish
   ========================================================================== */
@media (max-width:1024px){
  .elementor-widget-heading .elementor-heading-title{overflow-wrap:anywhere}
}
@media (max-width:767px){
  body{font-size:16px}
  .elementor-button{white-space:normal}
  .elementor-widget-n-menu .e-n-menu-toggle,.elementor-menu-toggle{border-radius:12px}
  .elementor-widget-text-editor table{display:block;overflow-x:auto}
}


/* ==========================================================================
   Ambient motion — add in Elementor: Advanced → CSS Classes
   tuo-float  gentle up/down bob        tuo-float-slow  slower bob
   tuo-drift  wandering bubble          tuo-twinkle     star pulse
   tuo-fly    bird gliding across the section (put on an absolutely positioned icon)
   tuo-morph  blob that slowly changes shape (container with a background)
   tuo-morph-img  same, for the photo inside an image widget
   tuo-spin   very slow rotation        tuo-wave-move   sways the section's shape dividers
   tuo-bob-icons  bobs every icon inside (e.g. the four pillar cards)
   ========================================================================== */
@keyframes tuoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes tuoDrift{0%,100%{transform:translate(0,0)}25%{transform:translate(18px,-22px)}50%{transform:translate(-10px,-34px)}75%{transform:translate(-20px,-12px)}}
@keyframes tuoMorph{0%,100%{border-radius:46% 54% 60% 40%/50% 42% 58% 50%}33%{border-radius:58% 42% 44% 56%/42% 58% 42% 58%}66%{border-radius:40% 60% 54% 46%/58% 44% 56% 42%}}
@keyframes tuoMorphPic{0%,100%{border-radius:52% 48% 44% 56%/48% 56% 44% 52%}50%{border-radius:46% 54% 52% 48%/54% 46% 54% 46%}}
@keyframes tuoSpin{to{transform:rotate(360deg)}}
@keyframes tuoTwinkle{0%,100%{transform:scale(1) rotate(0);opacity:.95}50%{transform:scale(.6) rotate(72deg);opacity:.45}}
@keyframes tuoFly{0%{transform:translate(-15vw,0) rotate(-4deg)}25%{transform:translate(22vw,-26px) rotate(3deg)}50%{transform:translate(56vw,8px) rotate(-3deg)}75%{transform:translate(86vw,-18px) rotate(4deg)}100%{transform:translate(115vw,0) rotate(-4deg)}}
@keyframes tuoFlap{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.72)}}
@keyframes tuoSway{from{transform:translateX(-44%)}to{transform:translateX(-56%)}}
.tuo-float{animation:tuoFloat 5s ease-in-out infinite}
.tuo-float-slow{animation:tuoFloat 7.5s ease-in-out infinite}
.tuo-drift{animation:tuoDrift 16s ease-in-out infinite}
.tuo-twinkle .elementor-icon,.tuo-twinkle.e-con,.tuo-twinkle>svg{animation:tuoTwinkle 3.2s ease-in-out infinite}
.tuo-fly{pointer-events:none;animation:tuoFly var(--tuo-fly,36s) linear infinite;left:0!important}
.tuo-fly .elementor-icon{animation:tuoFlap 1.1s ease-in-out infinite;transform-origin:50% 60%}
.tuo-morph,.tuo-morph.e-con{animation:tuoMorph 14s ease-in-out infinite}
.tuo-morph-img img{animation:tuoMorphPic 10s ease-in-out infinite}
.tuo-spin{animation:tuoSpin 60s linear infinite}
.tuo-bob-icons .elementor-icon{animation:tuoFloat 4.5s ease-in-out infinite}
.tuo-wave-move{overflow-x:clip}
.tuo-wave-move>.elementor-shape{overflow:hidden}
.tuo-wave-move>.elementor-shape svg{width:calc(125% + 1.3px)!important;left:50%!important;animation:tuoSway 7s ease-in-out infinite alternate!important;will-change:transform}
.tuo-delay-1{animation-delay:-2s!important}.tuo-delay-2{animation-delay:-5s!important}.tuo-delay-3{animation-delay:-9s!important}
@media (max-width:767px){.tuo-fly.tuo-desktop-only,.tuo-drift.tuo-desktop-only{display:none!important}}
@media (prefers-reduced-motion:reduce){
  .tuo-float,.tuo-float-slow,.tuo-drift,.tuo-twinkle .elementor-icon,.tuo-fly,.tuo-fly .elementor-icon,.tuo-morph,.tuo-morph-img img,.tuo-spin,.tuo-bob-icons .elementor-icon,.tuo-wave-move>.elementor-shape svg{animation:none!important}
  .tuo-fly{display:none!important}
}

/* Respect reduced-motion for Elementor entrance animations */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .elementor-invisible{visibility:visible!important}
  .animated{animation:none!important;transition:none!important}
}

/* Hello Elementor resets */
.page-header .entry-title{font-family:var(--tuo-display);color:var(--tuo-navy)}

/* Header: Menu Cart shows only the icon + count bubble */
.elementor-menu-cart__toggle .elementor-button-text{display:none}
.elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active{color:var(--tuo-blue)}