/* ============================================
   BILiC Website — Custom Styles
   Yayasan Muara Hati / Bandung Independent Living Center
   ============================================ */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    font-family: 'DM Sans', system-ui, sans-serif;
    color: #1c1917;
    background: #fafaf9;
}

/* ---- Typography ---- */
.font-serif { font-family: 'DM Serif Display', Georgia, serif; }

/* ---- Navbar ---- */
#navbar {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* ---- Hero Decorations ---- */
.hero-blob {
    position: absolute;
    border-radius: 60% 40% 70% 30% / 50% 60% 40% 60%;
    filter: blur(60px);
    opacity: 0.15;
    animation: morph 10s ease-in-out infinite;
}
@keyframes morph {
    0%, 100% { border-radius: 60% 40% 70% 30% / 50% 60% 40% 60%; }
    50%       { border-radius: 30% 60% 40% 70% / 60% 40% 60% 40%; }
}

/* ---- Pattern backgrounds ---- */
.pattern-dots {
    background-image: radial-gradient(circle, #0f766e22 1.5px, transparent 1.5px);
    background-size: 24px 24px;
}
.pattern-grid {
    background-image:
        linear-gradient(#0f766e10 1px, transparent 1px),
        linear-gradient(90deg, #0f766e10 1px, transparent 1px);
    background-size: 40px 40px;
}

/* ---- Gradient text ---- */
.text-gradient {
    background: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ---- Cards ---- */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -10px rgba(15, 118, 110, 0.2);
}

/* ---- Fade-up animation ---- */
.fade-up {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}
.fade-up:nth-child(1) { transition-delay: 0.05s; }
.fade-up:nth-child(2) { transition-delay: 0.15s; }
.fade-up:nth-child(3) { transition-delay: 0.25s; }
.fade-up:nth-child(4) { transition-delay: 0.35s; }
.fade-up:nth-child(5) { transition-delay: 0.45s; }

/* ---- Section heading decorator ---- */
.section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #0f766e;
    margin-bottom: 1rem;
}
.section-label::before {
    content: '';
    width: 28px;
    height: 2px;
    background: #d97706;
    border-radius: 2px;
}

/* ---- Program card color variants ---- */
.prog-teal   { --prog-color: #0d9488; --prog-bg: #f0fdfa; }
.prog-amber  { --prog-color: #d97706; --prog-bg: #fffbeb; }
.prog-green  { --prog-color: #16a34a; --prog-bg: #f0fdf4; }
.prog-blue   { --prog-color: #2563eb; --prog-bg: #eff6ff; }
.prog-purple { --prog-color: #7c3aed; --prog-bg: #f5f3ff; }

.prog-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--prog-bg);
    display: flex; align-items: center; justify-content: center;
    color: var(--prog-color);
}

/* ---- Timeline ---- */
.timeline-item {
    position: relative;
    padding-left: 2rem;
}
.timeline-item::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: #0f766e;
    border: 2px solid white;
    box-shadow: 0 0 0 3px #ccfbf1;
}
.timeline-item::after {
    content: '';
    position: absolute;
    left: 5px; top: 22px;
    width: 2px;
    height: calc(100% + 12px);
    background: #ccfbf1;
}
.timeline-item:last-child::after { display: none; }

/* ---- Stat counter ---- */
.stat-number {
    font-family: 'DM Serif Display', serif;
    font-size: 3rem;
    line-height: 1;
    color: #0f766e;
}

/* ---- Form inputs ---- */
.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid #e7e5e4;
    border-radius: 10px;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.9rem;
    color: #1c1917;
    background: white;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}
.form-input:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 3px #ccfbf180;
}
.form-input::placeholder { color: #a8a29e; }

/* ---- Hero wave ---- */
.wave-bottom {
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    overflow: hidden; line-height: 0;
}
.wave-bottom svg { display: block; }

/* ---- Scroll indicator ---- */
@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(8px); }
}
.scroll-bounce { animation: bounce-slow 2s ease-in-out infinite; }

/* ---- Badge ---- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .stat-number { font-size: 2.25rem; }
}

/* ============================================
   Dark Mode
   ============================================ */

/* Toggle button */
#dark-toggle {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
    transition: background 0.2s ease;
    flex-shrink: 0;
    color: #78716c;
}
#dark-toggle:hover { background: rgba(15,118,110,0.1); }
#dark-toggle .icon-sun  { display: none; }
#dark-toggle .icon-moon { display: block; }

/* Dark base */
html.dark body {
    background-color: #111110;
    color: #e7e5e4;
}
html.dark #dark-toggle { color: #d6d3d1; }
html.dark #dark-toggle:hover { background: rgba(20,184,166,0.15); }
html.dark #dark-toggle .icon-sun  { display: block; }
html.dark #dark-toggle .icon-moon { display: none; }

/* Backgrounds */
html.dark .bg-white          { background-color: #1c1a18 !important; }
html.dark .bg-neutral-50     { background-color: #111110 !important; }
html.dark .bg-neutral-100    { background-color: #1c1a18 !important; }
html.dark .bg-neutral-200    { background-color: #292524 !important; }
html.dark .bg-white\/80      { background-color: rgba(28,26,24,0.85) !important; }
html.dark .bg-white\/60      { background-color: rgba(28,26,24,0.65) !important; }
html.dark .bg-white\/50      { background-color: rgba(28,26,24,0.55) !important; }
html.dark .bg-white\/10      { background-color: rgba(255,255,255,0.08) !important; }
html.dark .bg-primary-50     { background-color: rgba(15,118,110,0.15) !important; }
html.dark .bg-neutral-50\/80 { background-color: rgba(17,17,16,0.85) !important; }

/* Text */
html.dark .text-neutral-900 { color: #f5f5f4 !important; }
html.dark .text-neutral-800 { color: #e7e5e4 !important; }
html.dark .text-neutral-700 { color: #d6d3d1 !important; }
html.dark .text-neutral-600 { color: #a8a29e !important; }
html.dark .text-neutral-500 { color: #78716c !important; }
html.dark .text-primary-dark { color: #2dd4bf !important; }

/* Borders */
html.dark .border-neutral-100 { border-color: #292524 !important; }
html.dark .border-neutral-200 { border-color: #292524 !important; }
html.dark .border-white\/20   { border-color: rgba(255,255,255,0.12) !important; }
html.dark .border-white\/25   { border-color: rgba(255,255,255,0.15) !important; }

/* Navbar — selalu solid putih (light) / hitam (dark) */
#navbar {
    background: #ffffff;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}
html.dark #navbar {
    background: #0a0a09 !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

/* Desktop nav links di dark mode */
html.dark #navbar a.text-neutral-700,
html.dark #navbar a.text-neutral-600 {
    color: #d6d3d1 !important;
}
html.dark #navbar a:hover {
    color: #14b8a6 !important;
    background-color: rgba(20,184,166,0.1) !important;
}
html.dark #navbar .text-primary-dark { color: #2dd4bf !important; }
html.dark #navbar .text-neutral-500  { color: #78716c !important; }

/* Mobile menu */
html.dark #mobile-menu {
    background-color: #0a0a09 !important;
    border-color: #1c1a18 !important;
}

/* Cards */
html.dark .card-hover {
    background-color: #1c1a18;
}
html.dark .card-hover:hover {
    box-shadow: 0 20px 40px -10px rgba(20,184,166,0.2);
}

/* Shadow adjustments */
html.dark .shadow-md  { box-shadow: 0 4px 16px rgba(0,0,0,0.35) !important; }
html.dark .shadow-lg  { box-shadow: 0 8px 24px rgba(0,0,0,0.4)  !important; }
html.dark .shadow-xl  { box-shadow: 0 16px 40px rgba(0,0,0,0.45) !important; }

/* Form inputs */
html.dark .form-input {
    background: #292524;
    border-color: #3d3a37;
    color: #f5f5f4;
}
html.dark .form-input:focus {
    border-color: #14b8a6;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.2);
}
html.dark .form-input::placeholder { color: #57534e; }
html.dark select,
html.dark textarea,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="tel"] {
    background-color: #292524 !important;
    color: #f5f5f4 !important;
    border-color: #3d3a37 !important;
}

/* Program color variants in dark */
html.dark .prog-teal   { --prog-bg: rgba(13,148,136,0.18); }
html.dark .prog-amber  { --prog-bg: rgba(217,119,6,0.18);  }
html.dark .prog-green  { --prog-bg: rgba(22,163,74,0.18);  }
html.dark .prog-blue   { --prog-bg: rgba(37,99,235,0.18);  }
html.dark .prog-purple { --prog-bg: rgba(124,58,237,0.18); }

/* Timeline */
html.dark .timeline-item::before {
    border-color: #111110;
    box-shadow: 0 0 0 3px rgba(20,184,166,0.25);
}
html.dark .timeline-item::after {
    background: rgba(20,184,166,0.18);
}

/* Section label & stat */
html.dark .section-label { color: #14b8a6; }
html.dark .stat-number   { color: #14b8a6; }

/* Text gradient override */
html.dark .text-gradient {
    background: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 50%, #fbbf24 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Patterns */
html.dark .pattern-dots {
    background-image: radial-gradient(circle, rgba(20,184,166,0.12) 1.5px, transparent 1.5px);
}
html.dark .pattern-grid {
    background-image:
        linear-gradient(rgba(20,184,166,0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20,184,166,0.06) 1px, transparent 1px);
}

/* Footer tweaks */
html.dark .bg-neutral-900 { background-color: #080807 !important; }
html.dark .bg-neutral-800 { background-color: #1c1a18 !important; }
html.dark .border-neutral-800 { border-color: #1c1a18 !important; }