/* style.css - Custom styles for the website */

/* Non-editable styles */
.text-highlight-dark {
    color: var(--color-highlight-dark);
}

/* Apply custom colors using Tailwind's arbitrary values or custom classes */
.text-main-green { color: var(--color-main); }
.bg-main-green { background-color: var(--color-main); }
.border-main-green { border-color: var(--color-main); }
.hover\:bg-main-green:hover { background-color: var(--color-main); }

/* Specific hover effects for links/buttons */
.hover\:text-highlight-purple:hover { color: var(--color-highlight-purple); }
.hover\:bg-highlight-purple:hover { background-color: var(--color-highlight-purple); }

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth; /* Smooth scrolling for navigation */
}

/* Custom scrollbar for a grittier look */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a; /* Dark track */
}
::-webkit-scrollbar-thumb {
    background: var(--color-main); /* Green thumb */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-main-light);
}

/* Hamburger menu icon */
.hamburger-menu {
    display: none; /* Hidden by default, shown on small screens */
    cursor: pointer;
    z-index: 50; /* Ensure it's above other content */
}
.hamburger-menu span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.4s;
    border-radius: 2px;
}

/* Rotate first bar */
.hamburger-menu.open span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

/* Fade out the second bar */
.hamburger-menu.open span:nth-child(2) {
    opacity: 0;
}

/* Rotate last bar */
.hamburger-menu.open span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Mobile navigation overlay */
.mobile-nav-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.95); /* Semi-transparent dark overlay */
    z-index: 40; /* Below hamburger menu */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
}
.mobile-nav-overlay.open {
    display: flex;
    opacity: 1;
}

/* Media query for mobile menu */
@media (max-width: 767px) {
    .hamburger-menu {
        display: block;
    }
    nav ul {
        display: none; /* Hide desktop nav */
    }
}