:root {
    --primary-green: #064e3b;
    /* Emerald 900 */
    --accent-gold: #d4af37;
    --soft-white: #fcfbf7;
}

body {
    font-family: 'Hind Siliguri', sans-serif;
    background-color: var(--soft-white);
    color: #1a2e26;
    overflow-x: hidden;
}

.serif-font {
    font-family: 'Playfair Display', serif;
}

/* ===============================
   Hero Backgrounds
   =============================== */

.hero-bg {
    background: linear-gradient(to bottom,
            rgba(6, 78, 59, 0.95),
            rgba(6, 78, 59, 0.8)),
        url('/images/dhaka-skyline.jpg');
    background-size: cover;
    background-position: center;
}

.hero-gradient {
    background: linear-gradient(to right,
            rgba(6, 78, 59, 0.9),
            rgba(6, 78, 59, 0.3)),
        url('../imgs/home-hero-bg.jpg');
    background-size: cover;
    background-position: center;
}

/* ===============================
   Patterns & Visual Effects
   =============================== */

.islamic-pattern {
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l2.5 7.5L40 10l-7.5 2.5L30 20l-2.5-7.5L20 10l7.5-2.5L30 0z' fill='%23d4af37' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}

.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

.gold-glow {
    box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
}

/* ===============================
   Hover & Float Effects
   =============================== */

.video-card:hover .play-overlay {
    opacity: 1;
}

@keyframes float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0);
    }
}

.float-btn {
    animation: float 4s ease-in-out infinite;
}

/* ===============================
   Scroll Reveal Animation
   =============================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

/* ===============================
   Accordion
   =============================== */

.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
}

.accordion-item.active .accordion-content {
    max-height: 500px;
    opacity: 1;
}

.accordion-icon {
    transition: transform 0.3s ease;
}

.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

/* Manifesto Hero Background */
.hero-bg-manifesto {
    background: linear-gradient(to bottom, rgba(6, 78, 59, 0.95), rgba(6, 78, 59, 0.8));
    background-size: cover;
    background-position: center;
}

/* ===============================
   Chatbot Animations
   =============================== */

.chat-enter {
    animation: chatSlideIn 0.3s ease-out forwards;
}

.chat-exit {
    animation: chatSlideOut 0.3s ease-in forwards;
}

@keyframes chatSlideIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes chatSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
}

.typing-dot {
    animation: typing 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) {
    animation-delay: -0.32s;
}

.typing-dot:nth-child(2) {
    animation-delay: -0.16s;
}

@keyframes typing {

    0%,
    80%,
    100% {
        transform: scale(0);
    }

    40% {
        transform: scale(1);
    }
}


.ward-tab.active {
    background-color: var(--primary-green);
    color: var(--accent-gold);
    border-color: var(--primary-green);
}

.ward-pane {
    display: none;
}

.ward-pane.active {
    display: flex;
    animation: fadeIn 0.8s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===============================
   Horizontal Scrollbar Styles
   =============================== */

.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: rgb(16 185 129) rgb(236 253 245);
}

.scrollbar-thin::-webkit-scrollbar {
    height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: rgb(236 253 245);
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background: rgb(16 185 129);
    border-radius: 10px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background: rgb(5 150 105);
}

/* Hide scrollbar but keep scroll functionality */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Alias for no-scrollbar */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ===============================
   Mobile Bottom Navigation
   =============================== */

/* Safe area support for notched devices */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .pb-safe {
        padding-bottom: calc(env(safe-area-inset-bottom) + 0.5rem);
    }
}

/* Prevent content from being hidden behind bottom nav */
@media (max-width: 1023px) {
    body {
        padding-bottom: 5.5rem;
    }
}

/* Prevent body scroll when menu is open */
body.menu-open {
    overflow: hidden;
}

/* Material Symbols Outlined */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
}

/* Filled icon variant */
.material-symbols-outlined.fill-current {
    font-variation-settings: 'FILL' 1;
}

/* Bottom nav icon active state animation */
@keyframes navPop {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.bottom-nav-active .material-symbols-outlined {
    animation: navPop 0.3s ease-out;
}

/* ===============================
   Mobile Compact Cards
   =============================== */

@media (max-width: 767px) {
    /* Only reduce padding inside cards and content containers, not sections */
    section[class*="py-"],
    [class*="py-16"],
    [class*="py-24"],
    [class*="py-12"] {
        /* Keep section spacing intact */
    }

    /* Reduce padding inside rounded cards only */
    section [class*="rounded-2xl"].p-6,
    section [class*="rounded-2xl"].p-8,
    section [class*="rounded-xl"].p-6,
    section [class*="rounded-xl"].p-8,
    section [class*="rounded-3xl"].p-6,
    section [class*="rounded-3xl"].p-8 {
        padding: 0.75rem !important;
    }

    /* Reduce gaps in grids */
    section .grid .gap-6 {
        gap: 0.75rem;
    }

    section .grid .gap-8 {
        gap: 1rem;
    }

    /* Reduce bottom margins inside cards */
    [class*="rounded-2xl"] .mb-4,
    [class*="rounded-2xl"] .mb-6,
    [class*="rounded-xl"] .mb-4,
    [class*="rounded-xl"] .mb-6 {
        margin-bottom: 0.5rem !important;
    }
}