/* Custom styles for НейроКурсы */
:where([class^="ri-"])::before {
    content: "\f3c2";
}

/* Additional custom styles if needed */
body {
    font-family: 'Gilroy', sans-serif;
}

/* Mobile menu animations */
#mobileMenu {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}

#mobileMenu.hidden {
    display: none;
}

#mobileMenu:not(.hidden) {
    opacity: 1;
}

/* Mobile menu content animation */
#mobileMenu > div {
    animation: slideDown 0.3s ease-in-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header stays on top when menu is open */
header {
    position: relative;
    z-index: 50;
}

/* Calculate header height for mobile menu */
:root {
    --header-height: 80px;
}

@media (max-width: 1024px) {
    :root {
        --header-height: 70px;
    }
}

/* Mobile menu positioning */
#mobileMenu {
    top: var(--header-height, 80px) !important;
    height: calc(100vh - var(--header-height, 80px)) !important;
    max-height: calc(100vh - var(--header-height, 80px)) !important;
}

#mobileMenu > div {
    height: 100% !important;
    max-height: 100% !important;
}

/* Better spacing for mobile header */
@media (max-width: 640px) {
    header nav {
        padding: 0.75rem 0;
    }
    
    header nav > div:first-child {
        gap: 0.5rem;
    }
}

/* Scroll offset for anchor links to account for fixed header */
section[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 1024px) {
    section[id] {
        scroll-margin-top: 80px;
    }
}

/* Mobile menu - fully opaque */
#mobileMenu {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
}

#mobileMenu > div {
    background-color: rgb(17, 24, 39) !important; /* gray-900 */
}

/* Ensure mobile menu content is visible with proper colors */
#mobileMenu a {
    color: rgb(209, 213, 219) !important; /* text-gray-300 */
}

#mobileMenu a:hover {
    color: rgb(124, 58, 237) !important; /* text-primary */
}

#mobileMenu button {
    color: rgb(209, 213, 219) !important; /* text-gray-300 */
}

#mobileMenu button:hover {
    color: rgb(255, 255, 255) !important; /* text-white */
}

#mobileMenu .text-white {
    color: rgb(255, 255, 255) !important;
}

#mobileMenu .text-gray-400 {
    color: rgb(156, 163, 175) !important;
}

#mobileMenu .text-gray-300 {
    color: rgb(209, 213, 219) !important;
}

/* Quiz container border transition */
#quizContainer {
    transition: border 0.3s ease-in-out;
}

/* Prevent zoom on iOS when focusing input fields */
input[type="text"],
input[type="tel"],
input[type="email"],
textarea,
select {
    font-size: 16px !important; /* Minimum 16px prevents auto-zoom on iOS Safari */
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="tel"],
    input[type="email"],
    textarea,
    select {
        font-size: 14px; /* Smaller on desktop is fine */
    }
}