/* Header transition container */
.second-header {
    background-color: rgba(0, 0, 0, 0.4); /* translucent at top */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* Solid dark background after scroll */
.scrolled .second-header {
    background-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Nav link base state — white text */
.second-header .nav-link {
    color: white;
    transition: color 0.3s ease;
}

/* Nav link hover & active while at top */
.second-header .nav-link:hover,
.second-header .nav-link.active {
    color: #FFD700; /* optional highlight at top */
}

/* Nav link style when scrolled — gold by default */
.scrolled .second-header .nav-link {
    color: #FFD700;
}

/* Hover or active while scrolled — white for contrast */
.scrolled .second-header .nav-link:hover,
.scrolled .second-header .nav-link.active {
    color: #ffffff;
}

/* Optional: text shadow utility for white text readability */
.text-outline {
    text-shadow:
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px  1px 0 #000,
            1px  1px 0 #000;
}