/* ============================================================
   MODERN UI — Al-Huda Islamic School (AIS)  [v2 — optimized]
   Lighter on PC. Light theme only. Galeri-safe.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Fredoka:wght@500;600;700&display=swap');

:root{
  --ais-orange:#f59f3c;
  --ais-orange-deep:#e07a1f;
  --ais-green:#3aa856;
  --ais-green-deep:#1f7a3a;
  --ais-yellow:#fff3b0;
  --ais-yellow-soft:#fffbe6;
  --ais-white:#ffffff;
  --ais-ink:#1f2937;
  --ais-grad-warm:linear-gradient(135deg,#fff3b0 0%,#ffd28a 45%,#f59f3c 100%);
  --ais-shadow-lg:0 20px 50px rgba(224,122,31,.18);
  --ais-ease:cubic-bezier(.22,.61,.36,1);
  --ais-font:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --ais-font-display:'Fredoka','Plus Jakarta Sans',sans-serif;
}

/* ---------- TYPOGRAPHY ---------- */
body{
  font-family:var(--ais-font);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,.logo-text{font-family:var(--ais-font-display);letter-spacing:-.01em}
::selection{background:var(--ais-orange);color:#fff}

/* ---------- PRELOADER ---------- */
#ais-preloader{
  position:fixed;inset:0;z-index:99999;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:18px;
  background:var(--ais-grad-warm);
  transition:opacity .7s var(--ais-ease), visibility .7s var(--ais-ease);
}
#ais-preloader.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.ais-pre-logo{
  width:96px;height:96px;border-radius:50%;
  background:#fff;display:grid;place-items:center;
  box-shadow:0 12px 40px rgba(224,122,31,.35);
  animation:aisPulse 1.6s var(--ais-ease) infinite;
  overflow:hidden;
}
.ais-pre-logo img{width:78%;height:78%;object-fit:contain}
.ais-pre-text{
  font-family:var(--ais-font-display);
  font-weight:700;font-size:1.4rem;letter-spacing:.14em;
  color:#fff;text-shadow:0 2px 12px rgba(31,41,55,.25);
}
.ais-pre-bar{
  width:180px;height:4px;border-radius:99px;
  background:rgba(255,255,255,.4);overflow:hidden;position:relative;
}
.ais-pre-bar::after{
  content:"";position:absolute;left:-40%;top:0;height:100%;width:40%;
  background:linear-gradient(90deg,transparent,#fff,transparent);
  animation:aisSweep 1.2s var(--ais-ease) infinite;
}
@keyframes aisPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes aisSweep{0%{left:-40%}100%{left:100%}}

/* ---------- SCROLL PROGRESS ---------- */
#ais-scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0%;
  background:linear-gradient(90deg,var(--ais-green),var(--ais-orange),var(--ais-orange-deep));
  z-index:9998;border-radius:0 4px 4px 0;
  box-shadow:0 0 10px rgba(245,159,60,.45);
  transition:width .05s linear;
  will-change:width;
}

/* Custom cursor — Preset 2: AIS Brand colors (green ring, gold dot) */
@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  body.ais-cursor-on { cursor: none; }
  body.ais-cursor-on a,
  body.ais-cursor-on button,
  body.ais-cursor-on [role="button"],
  body.ais-cursor-on input,
  body.ais-cursor-on textarea,
  body.ais-cursor-on select { cursor: none; }
  #ais-cursor-dot,
  #ais-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 99997;
    will-change: transform;
  }
  #ais-cursor-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #BA7517;
    transition: background 0.2s, transform 0.2s;
  }
  #ais-cursor-ring {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 2px solid #1F4F37;
    opacity: 0.7;
    background: transparent;
    transition: width 0.2s cubic-bezier(.22,.61,.36,1), height 0.2s cubic-bezier(.22,.61,.36,1), border-color 0.2s, opacity 0.2s, background 0.2s;
  }
  body.ais-hover-link #ais-cursor-ring {
    width: 45px; height: 45px;
    border-color: #854F0B;
    opacity: 1;
    background: rgba(133, 79, 11, 0.08);
  }
  body.ais-hover-link #ais-cursor-dot {
    background: #854F0B;
    transform: scale(1.2);
  }
}

/* ---------- NAVBAR (NO backdrop-filter on scroll — fixes PC jank) ---------- */
.header{
  transition:transform .35s var(--ais-ease), box-shadow .35s ease, background .35s ease;
  will-change:transform;
}
.header.ais-scrolled{
  background:rgba(255,253,247,.97);
  box-shadow:0 6px 20px rgba(31,41,55,.07);
}
.header.ais-hidden{transform:translateY(-110%)}

/* ---------- BACK TO TOP ---------- */
#ais-to-top{
  position:fixed;right:22px;bottom:22px;z-index:9996;
  width:48px;height:48px;border-radius:50%;border:none;
  background:linear-gradient(135deg,var(--ais-orange),var(--ais-orange-deep));
  color:#fff;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--ais-shadow-lg);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .35s var(--ais-ease), transform .35s var(--ais-ease);
}
#ais-to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
#ais-to-top:hover{transform:translateY(-4px) scale(1.05)}
#ais-to-top i{font-size:1.4rem}

/* ---------- RIPPLE ---------- */
.ais-ripple{position:relative;overflow:hidden;isolation:isolate}
.ais-ripple .ais-ripple-ink{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.55);transform:scale(0);
  animation:aisRipple .6s var(--ais-ease) forwards;pointer-events:none;
}
@keyframes aisRipple{to{transform:scale(4);opacity:0}}

/* ---------- LAZY/BLUR-UP ---------- */
img.ais-lazy{filter:blur(10px);transform:scale(1.02);transition:filter .5s ease, transform .5s ease}
img.ais-lazy.is-loaded{filter:none;transform:none}

/* IMPORTANT: galeri images must NEVER be lazy-blurred (breaks caption hover) */
.gallery-item img, .gallery-section img, .galeri-item img{
  filter:none !important;
  transform:none !important;
}
.gallery-item img.ais-lazy, .gallery-section img.ais-lazy{
  filter:none !important; transform:none !important;
}

/* ---------- GALERI SAFETY: ensure captions & filter tabs work fine ---------- */
.gallery-tab, .gallery-section, .gallery-item, .gallery-caption,
.gallery-tab *, .gallery-item *{
  opacity:initial;
  transform:none;
}
.gallery-tab{opacity:1 !important}
.gallery-section.active{display:block !important; opacity:1 !important}
.gallery-item:hover .gallery-caption{opacity:1 !important}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- SMALL SCREEN ADJUST ---------- */
@media (max-width:1023px){
  #ais-cursor-dot, #ais-cursor-ring{display:none !important}
  body.ais-cursor-on{cursor:auto !important}
}
@media (max-width:768px){
  #ais-to-top{right:14px;bottom:14px;width:42px;height:42px}
}

/* ---------- KILL any data-theme dark styles (defensive) ---------- */
html[data-theme="dark"]{color-scheme:light}
#ais-theme-btn{display:none !important}



/* ========================================================
   NAVBAR DROPDOWNS (HOVER) — v3: aligned + no stray dots
   ======================================================== */

/* Wrapper imitates a regular menu anchor for flex alignment */
.menu .ais-has-dropdown{
  position:relative;
  display:inline-flex;
  align-items:center;
  padding:0;
  margin:0;
  line-height:1;
}

/* Inner trigger anchor inherits original .menu > a styling */
.menu .ais-has-dropdown > a{
  display:inline-flex;
  align-items:center;
  gap:.3em;
  line-height:1.2;
}

/* Hide our duplicate arrow — style.css already injects one via .menu .has-dropdown > a::after */
.menu .ais-has-dropdown > a.has-dropdown-trigger::after{
  content:none !important;
}

/* Suppress the legacy white CSS-triangle bullet that peeked under each item */
.menu .ais-has-dropdown .dropdown-menu::before{
  content:none !important;
  display:none !important;
  border:0 !important;
  background:none !important;
}

/* Dropdown panel */
.menu .ais-has-dropdown .dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:240px;
  background:#ffffff;
  border-radius:12px;
  box-shadow:0 12px 32px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.06);
  padding:.45rem;
  /* margin-top:0 + padding-top creates an invisible bridge so cursor can travel */
  margin-top:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index:9999;
  border-top:3px solid #F59E0B;
}
.menu .ais-has-dropdown .dropdown-menu::after{
  /* invisible hover bridge above the panel */
  content:"";
  position:absolute;
  top:-12px; left:0; right:0; height:14px;
  background:transparent;
}
.menu .ais-has-dropdown.is-open .dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Dropdown items */
.menu .ais-has-dropdown .dropdown-item{
  display:flex;
  align-items:center;
  gap:.6rem;
  padding:.6rem .85rem;
  border-radius:8px;
  color:#1f2937;
  text-decoration:none;
  font-size:.95rem;
  line-height:1.25;
  transition:background-color .15s ease, color .15s ease, transform .15s ease;
  white-space:nowrap;
}
.menu .ais-has-dropdown .dropdown-item .di-icon{
  font-size:1.05rem;
  width:1.4em;
  text-align:center;
  flex:none;
}
.menu .ais-has-dropdown .dropdown-item .di-label{ flex:1; }
.menu .ais-has-dropdown .dropdown-item:hover,
.menu .ais-has-dropdown .dropdown-item:focus{
  background:#FFF7E6;
  color:#B45309;
  transform:translateX(2px);
}
.menu .ais-has-dropdown .dropdown-item:active{ background:#FDE68A; }

/* Keep dropdown inside viewport on the right edge */
.menu > .ais-has-dropdown:nth-last-child(-n+2) .dropdown-menu{
  left:auto;
  right:0;
}

/* Tablet/desktop narrow: prevent dropdown from being hidden by legacy media-query */
@media (max-width: 1180px){
  .menu .ais-has-dropdown .dropdown-menu{ display:block !important; }
  .menu .ais-has-dropdown .dropdown-menu{ opacity:0; visibility:hidden; }
  .menu .ais-has-dropdown.is-open .dropdown-menu{ opacity:1; visibility:visible; }
}

/* Mobile (≤ 768px): accordion */
@media (max-width: 768px){
  .menu .ais-has-dropdown{ display:block; width:100%; }
  .menu .ais-has-dropdown > a{
    display:flex; align-items:center; justify-content:space-between; width:100%;
  }
  .menu .ais-has-dropdown .dropdown-menu{
    position:static;
    box-shadow:none;
    border-top:0;
    border-left:3px solid #F59E0B;
    border-radius:0 8px 8px 0;
    margin:.25rem 0 .5rem .75rem;
    padding:.25rem;
    background:#FFFBEB;
    transform:none;
    transition:none;
    display:none !important;
    opacity:1;
    visibility:visible;
    min-width:0;
  }
  .menu .ais-has-dropdown.is-open .dropdown-menu{
    display:block !important;
    transform:none;
  }
  .menu .ais-has-dropdown .dropdown-menu::after{ display:none; }
  .menu .ais-has-dropdown .dropdown-item{
    padding:.55rem .7rem;
    font-size:.92rem;
  }
}


/* ========================================================
   SCROLL REVEAL v2 — layout-safe: opacity + gentle lift,
   high-specificity reset so .ais-reveal-in always wins.
   ======================================================== */
.ais-reveal{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

/* High-specificity reset: any element that has BOTH classes resets fully.
   Using both class names raises specificity above any heading-specific rule. */
.ais-reveal.ais-reveal-in,
h1.ais-reveal.ais-reveal-in,
h2.ais-reveal.ais-reveal-in,
h3.ais-reveal.ais-reveal-in,
p.ais-reveal.ais-reveal-in,
section.ais-reveal.ais-reveal-in,
.card.ais-reveal.ais-reveal-in{
  opacity:1 !important;
  transform:none !important;
}

/* Honor users who prefer less motion */
@media (prefers-reduced-motion: reduce){
  .ais-reveal{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}