/* ============================================================
 * Umeed-e-Noor Sunshine — effect layer (on top of compiled Tailwind)
 * VERIFICATION MARKER: UEN-SUN-EFFECTS-v1.0.0
 * ============================================================ */

.material-symbols-outlined{font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;line-height:1;vertical-align:middle}
.fredoka-header{font-family:'Fredoka',sans-serif}

/* Skip link */
.uen-skip{position:absolute;left:-9999px;top:0;z-index:100000;background:#8f4e00;color:#fff;padding:12px 18px;
  border-radius:0 0 12px 0;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;text-decoration:none}
.uen-skip:focus{left:0}

/* Visible focus everywhere */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,
[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #006590;outline-offset:2px;border-radius:6px}

/* Screen-reader only */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Decorative blob mask (from design) */
.blob-mask{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M44.7,-76.4C58.2,-69.2,70.1,-58.5,77.5,-45.3C84.8,-32,87.7,-16,86.6,-0.6C85.5,14.8,80.5,29.5,72.4,42.4C64.3,55.3,53.2,66.3,39.9,73.5C26.6,80.7,11.3,84.1,-3.2,89.7C-17.7,95.3,-35.4,103.1,-49.8,98.2C-64.2,93.3,-75.3,75.7,-82.1,58.8C-88.9,41.9,-91.4,25.6,-91.1,9.8C-90.8,-6,-87.7,-21.3,-80.7,-35.1C-73.7,-48.9,-62.8,-61.2,-49.6,-68.5C-36.4,-75.8,-20.9,-78.1,-4.3,-70.7C12.3,-63.3,24.6,-46.2,33.1,-33.5C41.6,-20.8,46.3,-12.4,44.7,-76.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF0066' d='M44.7,-76.4C58.2,-69.2,70.1,-58.5,77.5,-45.3C84.8,-32,87.7,-16,86.6,-0.6C85.5,14.8,80.5,29.5,72.4,42.4C64.3,55.3,53.2,66.3,39.9,73.5C26.6,80.7,11.3,84.1,-3.2,89.7C-17.7,95.3,-35.4,103.1,-49.8,98.2C-64.2,93.3,-75.3,75.7,-82.1,58.8C-88.9,41.9,-91.4,25.6,-91.1,9.8C-90.8,-6,-87.7,-21.3,-80.7,-35.1C-73.7,-48.9,-62.8,-61.2,-49.6,-68.5C-36.4,-75.8,-20.9,-78.1,-4.3,-70.7C12.3,-63.3,24.6,-46.2,33.1,-33.5C41.6,-20.8,46.3,-12.4,44.7,-76.4Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center}

.wave-divider{aspect-ratio:960/100;width:100%;background-repeat:no-repeat;background-position:center;background-size:cover}

.btn-hover-tilt{transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.btn-hover-tilt:hover{transform:scale(1.05) rotate(2deg)}

@keyframes uen-float{0%{transform:translateY(0) rotate(0)}50%{transform:translateY(-20px) rotate(2deg)}100%{transform:translateY(0) rotate(0)}}
.animate-float{animation:uen-float 6s ease-in-out infinite}

.confetti-canvas,#uen-confetti{pointer-events:none;position:fixed;inset:0;width:100%;height:100%;z-index:100}

/* Off-canvas open state */
#uen-offcanvas.is-open{visibility:visible;pointer-events:auto}
#uen-offcanvas.is-open .uen-oc-overlay{opacity:1}
#uen-offcanvas.is-open .uen-oc-panel{transform:translateX(0)}

/* Injected page content: safe fallbacks (classes decide fonts, per Stitch) */
.uen-content a{color:#8f4e00}
.uen-content img{max-width:100%;height:auto}

/* WordPress core alignment help inside injected content */
.uen-content .alignwide{max-width:1200px;margin-inline:auto}

@media (prefers-reduced-motion:reduce){
  .animate-float,.blob,.blob-animation,.scrolling-marquee{animation:none}
  .btn-hover-tilt{transition:none}
  .btn-hover-tilt:hover{transform:none}
  .uen-oc-overlay,.uen-oc-panel{transition:none!important}
  html{scroll-behavior:auto}
}

/* ============================================================
 * Stitch component classes — ported verbatim from the design's
 * per-page <style> blocks (exact values).
 * ============================================================ */

/* Masonry gallery (exact) */
.masonry{column-count:1;column-gap:1.5rem}
@media (min-width:768px){.masonry{column-count:2}}
@media (min-width:1024px){.masonry{column-count:3}}
.masonry-item{break-inside:avoid;margin-bottom:1.5rem}

/* Organic (blob) image frame (exact) */
.organic-frame{border-radius:60% 40% 30% 70% / 60% 30% 70% 40%;transition:border-radius .4s ease}
.organic-frame:hover{border-radius:2rem}

/* Decorative blobs — blurred colour glows (exact) */
.blob{position:absolute;z-index:-1;filter:blur(40px);opacity:.4;animation:uen-blob-drift 20s infinite alternate ease-in-out}
.blob-bg{filter:blur(80px);opacity:.4;z-index:-1}
.blob-animation{animation:uen-blob-drift 20s infinite alternate ease-in-out}
@keyframes uen-blob-drift{0%{transform:translate(0,0) rotate(0deg)}100%{transform:translate(30px,50px) rotate(10deg)}}

/* Lifted-element shadows (exact) */
.joyful-shadow{box-shadow:0 10px 30px rgba(143,78,0,.15)}
.coral-shadow{box-shadow:0 10px 30px rgba(242,109,125,.15)}
.mint-shadow{box-shadow:0 10px 30px rgba(56,198,160,.15)}
.card-shadow{box-shadow:0 10px 30px rgba(143,78,0,.15)}

/* Glass header + focused input (exact) */
.glass-header{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.form-input-focus:focus{border-color:#e8871e}

/* Timeline horizontal scroll — hide scrollbar (exact) */
.timeline-hide-scrollbar{-ms-overflow-style:none;scrollbar-width:none}
.timeline-hide-scrollbar::-webkit-scrollbar{display:none}

/* Wave divider: shape is an inline <svg> in the markup; this only sizes it (exact) */
.wave-divider{aspect-ratio:960/100;width:100%;background-repeat:no-repeat;background-position:center;background-size:cover}

/* Partner logo marquee (class name implies scrolling; Stitch omitted the keyframe) */
@keyframes uen-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.scrolling-marquee{animation:uen-marquee 30s linear infinite;width:max-content}
.scrolling-marquee:hover{animation-play-state:paused}

/* Full-bleed background placeholder should crop, not tile */
.uen-content img[src$="placeholder-bg.svg"]{object-fit:cover}

/* ============================================================
 * Requested overrides: lighter hero banners (Home + About)
 * ============================================================ */
.uen-content .min-h-\[921px\],
.uen-content .h-\[512px\]{
  background:
    radial-gradient(120% 90% at 15% 12%, #fff2df 0%, rgba(255,242,223,0) 60%),
    radial-gradient(120% 90% at 85% 15%, #eaf4ff 0%, rgba(234,244,255,0) 60%),
    radial-gradient(130% 120% at 60% 100%, #f6edff 0%, rgba(246,237,255,0) 55%),
    linear-gradient(135deg,#fffaf3 0%,#fff3e6 100%);
}
/* Fade the navy shader right down so the banners read light */
.uen-content .min-h-\[921px\] canvas[id^="shader-canvas"],
.uen-content .h-\[512px\] canvas[id^="shader-canvas"]{opacity:.14}

/* Clip decorative blob overflow so pages don't get an empty scrollable strip on the right */
#uen-main{overflow-x:hidden}