/* Custom Styles for ET Template Landing Page */

/* Font fallbacks - ensures fonts work even if CDN fails */
body {
    font-family: 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Logo styling */
.logo-img {
    transition: transform 0.3s ease;
}

.logo-img:hover {
    transform: scale(1.05);
}

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

/* Remove default details marker */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

html {
    scroll-behavior: smooth;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Responsive Design for Extra Small Screens (320px and below) */
@media (max-width: 320px) {
    /* Reduce base font size */
    html {
        font-size: 14px;
    }
    
    /* Navigation adjustments */
    nav .flex {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Header adjustments */
    h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3 {
        font-size: 1.25rem !important;
    }
    
    /* Button adjustments */
    button, a.btn {
        font-size: 0.875rem !important;
        padding: 0.5rem 1rem !important;
    }
    
    /* Card padding */
    .rounded-2xl, .rounded-3xl {
        padding: 1rem !important;
    }
    
    /* Grid adjustments */
    .grid {
        gap: 0.75rem !important;
    }
    
    /* Countdown timer specific - make even smaller */
    #countdown-days {
        font-size: 3rem !important;
    }
    
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 1.5rem !important;
    }
    
    /* Container padding */
    .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Responsive Design for Very Small Screens (280px - smallest mobile) */
@media (max-width: 280px) {
    html {
        font-size: 12px;
    }
    
    #countdown-days {
        font-size: 2.5rem !important;
    }
    
    #countdown-hours,
    #countdown-minutes,
    #countdown-seconds {
        font-size: 1.25rem !important;
    }
    
    .min-w-\[50px\] {
        min-width: 40px !important;
    }
}

/* Additional custom styles can be added here */