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

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

[lang="ka"] {
    font-family: 'Fira Sans Condensed', 'Plus Jakarta Sans', 'Arial', sans-serif !important;
    line-height: 1.5 !important;
}

[lang="ka"] .hero-br {
    display: none;
}

[lang="ka"] h1, 
[lang="ka"] h2, 
[lang="ka"] h3 {
    font-family: 'Fira Sans Condensed', sans-serif !important;
    font-weight: 700 !important; /* Semibold/Bold to match English feel */
    letter-spacing: 0.01em !important;
    text-transform: none !important; /* No uppercase for a more natural look */
    line-height: 1.1 !important;
}

[lang="ka"] h1 {
    font-size: 4.5rem !important; /* Matches lg:text-7xl Exactly */
}

@media (max-width: 768px) {
    [lang="ka"] h1 {
        font-size: 3rem !important; /* Matches text-5xl Exactly */
    }
}

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: none;
    /* Removed translateY to stop the "going up" effect */
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity;
}

.fade-up.visible {
    opacity: 1;
}

/* 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;
    color-scheme: light;
}

html.dark {
    color-scheme: dark;
}

/* Body */
html.dark body {
    background-color: #0f172a;
    /* slate-900 */
    color: #94a3b8;
    /* slate-400 */
}

/* Header/Nav */
html.dark nav {
    background-color: rgba(15, 23, 42, 0.8) !important;
    /* slate-900/80 */
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

html.dark nav a,
html.dark nav span {
    color: #f8fafc !important;
    /* slate-50 */
}

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: #1e293b !important;
    /* slate-800 */
}

/* Sections with white background */
html.dark section.bg-white,
html.dark .bg-white,
html.dark .bg-white\/95,
html.dark .bg-white\/80 {
    background-color: #0f172a !important;
    /* slate-900 */
}

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

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

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

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

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

html.dark .text-slate-500 {
    color: #94a3b8 !important;
}

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

html.dark .border-white\/20 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

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

/* Footer */
html.dark footer {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}


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

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

/* Input fields and forms */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

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

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