@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Lexend:wght@300;400;500;600;700;800&display=swap');

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Global Image Reset for Responsiveness */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes bottom space */
}

/* Touch Targets (Mobile Accessibility) */
button, 
input, 
select, 
textarea,
a.btn,
.btn {
    min-height: 44px; /* Minimum touch target size */
}

/* Responsive Table Wrapper */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #FAFAF9;
}

::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Organic Shapes & Animations */
.blob-shape {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

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

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

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

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

/* Background Pattern */
.bg-grid {
    background-size: 40px 40px;
    mask-image: linear-gradient(to bottom, transparent, 10%, white, 90%, transparent);
}

/* Mobile menu subtle entry */
@keyframes menu-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-fade-up {
    opacity: 0;
    animation: menu-fade-up 0.25s ease forwards;
}

.mobile-menu-panel {
    opacity: 0;
    transform: translateY(12px);
    transition: transform 0.28s ease, opacity 0.28s ease;
}

#mobile-menu.is-open .mobile-menu-panel {
    opacity: 1;
    transform: translateY(0);
}

#mobile-menu.is-closing .mobile-menu-panel {
    opacity: 0;
    transform: translateY(12px);
}

/* Typography Enhancements */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Lexend', sans-serif;
    line-height: 1.2;
}

/* Fluid Typography */
h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw + 1rem, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw + 1rem, 2.5rem); }
h4 { font-size: clamp(1.25rem, 2vw + 1rem, 2rem); }
h5 { font-size: clamp(1.1rem, 1.5vw + 1rem, 1.5rem); }
h6 { font-size: clamp(1rem, 1vw + 1rem, 1.25rem); }

body {
    font-family: 'Inter', sans-serif;
}

/* Shake animation for error feedback */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}