/*
This file is for any custom CSS that is difficult to achieve with Tailwind's utility classes.
For this prototype, most styling is handled directly by Tailwind classes in the HTML
or through the tailwind.config object in the head of the document.
*/

body {
    font-family: 'Poppins', sans-serif;
}

/* Styles for the active navigation link via scroll spy */
.nav-link {
    position: relative;
    transition: color 0.3s ease;
}

/* Text color for unscrolled (on hero) and scrolled states */
.nav-link {
    color: #D1D5DB; /* gray-300 */
}
.nav-link.scrolled {
    color: #1a1a1a; /* sdd-dark */
}
.nav-link.scrolled:hover {
    color: #D52B1E; /* sdd-red */
}

/* Active state styling */
.nav-link.active {
    font-weight: 700;
}
.nav-link.active.scrolled {
    color: #D52B1E; /* sdd-red */
}
.nav-link.active:not(.scrolled) {
    color: #D52B1E; /* sdd-red */
}

/* Underline effect for active link */
.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #D52B1E; /* sdd-red */
    border-radius: 2px;
}

@media (max-width: 768px) {
    #hero select {
        padding: 1rem; /* p-4 */
        font-size: 1.125rem; /* text-lg */
        height: 56px; /* A fixed height */
    }
}

[x-cloak] {
    display: none !important;
}