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

/* Tailwind is loaded via CDN in header, custom styles here */

/* Default (Light Mode) Styles */
body {
    background-color: #FFFFFF;
    color: #0F172A;
    /* Slate 900 */
}

.bg-background {
    background-color: #FFFFFF;
}

.text-foreground {
    color: #0F172A;
}

/* Dark Mode Overrides */
.dark body {
    background-color: #020617;
    /* Slate 950 */
    color: #F8FAFC;
    /* Slate 50 */
}

.dark .bg-background {
    background-color: #020617;
}

.dark .text-foreground {
    color: #F8FAFC;
}

/* Smooth scrolling */
html.scroll-smooth {
    scroll-behavior: smooth;
}

/* GTranslate fix */
.gtranslate_wrapper {
    display: inline-block;
    vertical-align: middle;
}

.dark .gtranslate_wrapper select {
    background-color: #1e293b;
    color: white;
    border-color: #334155;
}

/* Animations */
.animate-spin-slow {
    animation: spin 8s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Horizontal Draggable Submenu Styles */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.draggable-submenu-container {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
}

.draggable-submenu-item {
    user-select: none;
    -webkit-user-drag: none;
}