/* =========================================================
   assets/css/custom.css
   Pelengkap Tailwind: dipakai untuk hal-hal yang tidak praktis
   ditulis lewat utility class (animasi, transisi, font-face).
   ========================================================= */

body{
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
}
h1, h2, h3, .font-heading{
    font-family: var(--font-heading);
}

/* Skip link aksesibilitas */
.skip-link{
    position:absolute; left:-9999px; top:0; z-index:999;
    background:var(--color-primary); color:#fff; padding:.75rem 1.25rem;
    border-radius:0 0 .5rem 0;
}
.skip-link:focus{ left:0; }

/* Fokus keyboard terlihat jelas (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible{
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* Hero background: video/slider layer */
.hero-media{ position:absolute; inset:0; overflow:hidden; }
.hero-media video, .hero-media img{
    width:100%; height:100%; object-fit:cover;
}
.hero-overlay{
    /* Warna/opacity diisi inline lewat style="" dari template-parts/front/hero.php,
       mengikuti pengaturan admin di Customizer > Pengaturan Hero Section > Overlay. */
    position:absolute; inset:0;
}

/* Slider fade */
.hero-slide{
    position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease-in-out;
}
.hero-slide.is-active{ opacity:1; }

/* Kartu program: aksen border kiri bergerak saat hover (signature element) */
.program-card{
    position:relative;
    transition: transform .35s ease, box-shadow .35s ease;
}
.program-card::before{
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:4px;
    background: var(--color-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .35s ease;
}
.program-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px -20px rgba(15,81,50,.35); }
.program-card:hover::before{ transform: scaleY(1); }

/* Accordion FAQ */
.faq-item[open] summary .faq-icon{ transform: rotate(45deg); }
.faq-icon{ transition: transform .25s ease; }
summary::-webkit-details-marker{ display:none; }
summary{ list-style:none; cursor:pointer; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .hero-slide, .program-card, .faq-icon{ transition:none !important; }
}

/* Ornamen garis lengkung khas islami sebagai signature divider antar seksi */
.section-divider{
    height:28px;
    background-repeat: repeat-x;
    background-size: 56px 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='28' viewBox='0 0 56 28'%3E%3Cpath d='M0 28 Q14 0 28 28 Q42 0 56 28' fill='none' stroke='%23C89B3C' stroke-width='2' opacity='0.5'/%3E%3C/svg%3E");
}