/* ===== Mobile-First Base Styles ===== */

/* Prevent horizontal scroll on wrapper elements */
html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    width: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Box sizing for predictable layouts */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Prevent images from overflowing */
img,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Prevent text from overflowing */
h1,
h2,
h3,
h4,
h5,
h6,
p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* Ensure sections don't cause overflow */
section {
    position: relative;
    width: 100%;
    overflow-x: hidden;
}

/* Container safety */
.max-w-7xl {
    max-width: 100%;
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
}

/* ===== Mobile Responsive Adjustments ===== */
@media screen and (max-width: 640px) {

    /* Reduce heading sizes on mobile */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        letter-spacing: -0.02em !important;
    }

    h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
    }

    /* Increase hero section top padding to clear the fixed navbar */
    section.relative.pt-32 {
        padding-top: 7rem !important;
        padding-bottom: 4rem !important;
    }

    /* Reduce section padding on mobile */
    section:not(.pt-32) {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    /* Ensure buttons are tap-friendly */
    a,
    button {
        min-height: 44px;
    }

    /* Hide decorative elements that might cause overflow */
    .blur-3xl {
        display: none !important;
    }

    /* Ensure grid containers don't overflow */
    .grid {
        gap: 1rem !important;
    }
}

/* Hide scrollbar for chrome/safari/opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Smooth Fade Up Animation */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid items (up to 6 items) */
.delay-100 {
    transition-delay: 100ms;
}

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

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

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

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

/* Base transitions for smooth theme switching */
html {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Body */
html.dark body {
    background-color: #f8fafc;
    /* slate-50 */
    color: #475569;
    /* slate-600 */
}

/* Header/Nav */
html.dark nav {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 10px 40px rgba(226, 232, 240, 0.5) !important;
}

html.dark nav a,
html.dark nav span {
    color: #0f172a !important;
    /* slate-900 */
}

html.dark nav a:hover {
    color: #10b981 !important;
    /* emerald-500 */
}

/* Mobile Menu */
html.dark #mobile-menu {
    background-color: #0f172a !important;
}

html.dark #mobile-menu a {
    color: #e2e8f0 !important;
    border-color: rgba(51, 65, 85, 0.5) !important;
}

/* Sections with slate-50 background */
html.dark section.bg-slate-50,
html.dark .bg-slate-50 {
    background-color: #f8fafc !important;
}

/* Sections with white background */
html.dark section.bg-white,
html.dark .bg-white {
    background-color: #ffffff !important;
}

html.dark .bg-slate-100 {
    background-color: #334155 !important;
}

/* Text colors */
html.dark .text-slate-900 {
    color: #0f172a !important;
}

html.dark .text-slate-800 {
    color: #1e293b !important;
}

html.dark .text-slate-700 {
    color: #334155 !important;
}

html.dark .text-slate-600 {
    color: #475569 !important;
}

html.dark .text-slate-500 {
    color: #64748b !important;
}

/* Borders */
html.dark .border-slate-100,
html.dark .border-slate-200 {
    border-color: #e2e8f0 !important;
}

html.dark .border-white\/20 {
    border-color: rgba(226, 232, 240, 0.5) !important;
}

/* Shadows */
html.dark .shadow-slate-200\/50 {
    box-shadow: 0 10px 40px rgba(226, 232, 240, 0.5) !important;
}

/* Footer */
html.dark footer {
    background-color: #f8fafc !important;
    border-color: #e2e8f0 !important;
}

/* Preloader */
html.dark #preloader {
    background-color: #ffffff !important;
}

html.dark #preloader p {
    color: #10b981 !important;
}

/* FAQ section details */
html.dark details {
    background-color: #ffffff !important;
}

html.dark details summary {
    color: #0f172a !important;
}

/* Input fields and forms */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #475569 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b !important;
}

/* Scroll to top button */
html.dark #scroll-top-btn {
    background-color: #10b981;
}