/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth;
}

/* Slide Transition in Hero Carousel */
#hero-slider .slide {
    will-change: opacity;
}

/* Custom Text Fade effect */
.slide-text {
    will-change: opacity, transform;
}

/* Play button pulse overlay animation */
@keyframes pulsePlay {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 139, 139, 0.4);
    }
    70% {
        box-shadow: 0 0 0 15px rgba(0, 139, 139, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 139, 139, 0);
    }
}
.facility-card:hover .w-14 {
    animation: pulsePlay 1.5s infinite;
}

/* CSS Modal animations */
@keyframes modalAppear {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
.animate-fade-in {
    animation: modalAppear 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Styling Scrollbars for Premium Look */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Custom styles for Notice details */
.markdown-body p {
    margin-bottom: 1.25rem;
    line-height: 1.8;
}
.markdown-body p:last-child {
    margin-bottom: 0;
}
.markdown-body strong {
    color: #0f172a;
    font-weight: 700;
}

/* Mobile View Optimizations for Spacing & Padding */
@media (max-width: 767px) {
    /* Set body padding to 2px */
    body {
        padding: 2px !important;
    }

    /* Container padding adjustments */
    .max-w-7xl, .max-w-\[92rem\], .container, .mx-auto {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }

    /* Reduce vertical padding in major sections & content wrappers */
    section {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    
    .py-6, .py-10, .py-11, .py-12, .py-14, .py-16, .py-20, .py-24, .py-28, .py-32 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
    
    .pt-5, .pb-20, .pt-10, .pb-10 {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .px-3, .px-4, .px-5, .px-6, .px-8 {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .p-4, .p-5, .p-6, .p-8, .p-12 {
        padding: 8px !important;
    }
    
    .rounded-2xl, .rounded-3xl {
        border-radius: 12px !important;
    }

    /* Spacing and gaps */
    .gap-3, .gap-4, .gap-5, .gap-6, .gap-8, .gap-10, .gap-12 {
        gap: 6px !important;
    }

    .mt-4, .mt-6, .mt-8, .mt-10, .mt-12, .mt-16 {
        margin-top: 6px !important;
    }

    .mb-3, .mb-4, .mb-6, .mb-10, .mb-12, .mb-14, .mb-16 {
        margin-bottom: 6px !important;
    }
    
    .mb-8 {
        margin-bottom: 2px !important;
    }
    
    .my-1.5, .my-8, .my-10 {
        margin-top: 4px !important;
        margin-bottom: 4px !important;
    }

    .space-y-2.5 > :not([hidden]) ~ :not([hidden]),
    .space-y-3 > :not([hidden]) ~ :not([hidden]),
    .space-y-4 > :not([hidden]) ~ :not([hidden]),
    .space-y-6 > :not([hidden]) ~ :not([hidden]),
    .space-y-8 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 6px !important;
    }

    .space-y-10 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 2px !important;
    }

    /* Hero slider banner adjustments */
    section.relative.bg-slate-900.min-h-\[500px\] {
        min-height: 240px !important;
        height: auto !important;
    }
    
    section.relative.bg-slate-900.min-h-\[500px\] .py-10 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    .slide-text h2 {
        font-size: 1.5rem !important; /* text-2xl */
        line-height: 2rem !important;
        margin-bottom: 4px !important;
    }
    
    .slide-text h2 span {
        font-size: 1.875rem !important; /* text-3xl */
    }
    
    .slide-text p {
        font-size: 0.875rem !important;
        line-height: 1.25rem !important;
        margin-bottom: 8px !important;
    }

    /* Subpage visual header */
    section.relative.bg-slate-950.text-white.py-6 {
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
    
    section.relative.bg-slate-950.text-white.py-6 h1 {
        font-size: 1.5rem !important;
    }
    
    section.relative.bg-slate-950.text-white.py-6 p {
        font-size: 0.75rem !important;
        line-height: 1rem !important;
    }

    /* Header adjustments */
    header .h-16 {
        height: 48px !important;
    }
    
    .header-ci-logo {
        height: 28px !important;
    }
    
    .sticky.top-16 {
        top: 48px !important;
    }

    /* Titles & Headings margins and font sizes */
    h2.text-3xl, h2.text-4xl, h2.text-2xl {
        font-size: 1.25rem !important; /* text-xl */
        line-height: 1.75rem !important;
        margin-bottom: 4px !important;
    }
    
    .w-12.h-1.bg-brand-teal.mx-auto.mt-4 {
        margin-top: 4px !important;
    }

    /* Facility Info cards */
    .facility-card {
        padding: 8px !important;
    }
    
    .facility-card .w-14.h-14 {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 4px !important;
    }
    
    .facility-card i {
        font-size: 14px !important;
    }
    
    .facility-card span {
        font-size: 11px !important;
    }
    
    .facility-card span.text-brand-teal {
        margin-top: 2px !important;
    }

    /* Subpage main layout */
    .border-b.border-slate-200.pb-5.mb-10 {
        padding-bottom: 6px !important;
        margin-bottom: 12px !important;
    }
    
    .border-b.border-slate-200.pb-5.mb-10 h2 {
        font-size: 1.25rem !important;
    }

    /* Form styling density */
    input, select, textarea {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        font-size: 12px !important;
    }
    button[type="submit"].w-full {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        margin-top: 8px !important;
    }

    .flex > button[type="submit"] {
        margin-top: 0 !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}