/*
 * site.css – custom overrides, complements the Freelancer theme (styles.css).
 * Future project-specific adjustments go here.
 */

/*
 * After navigation Blazor sets focus to the first <h1>
 * (FocusOnNavigate in Routes.razor) – an accessibility aid. The
 * masthead heading is not interactive, however, so we suppress only
 * the visible focus outline; the focusing itself is preserved.
 */
.masthead-heading:focus,
.masthead-heading:focus-visible {
    outline: none;
}

/*
 * Align the "Unsere Lösungen" dropdown with the header.
 * Theme colors: secondary (navbar) #2c3e50, primary (accent) #B0D352.
 * Standard Bootstrap renders the menu white – brought into the header style here.
 */

/*
 * Menu container: exactly the navbar color. For .bg-secondary the theme uses
 * --bs-secondary-rgb: 77,77,77 (#4D4D4D, anthracite) – NOT #2c3e50.
 * The box-shadow visibly separates the open menu from the same-colored bar.
 */
#mainNav .dropdown-menu {
    background-color: #4D4D4D;
    border: none;
    border-radius: 0.25rem;
    padding: 0.25rem 0;
    margin-top: 0.25rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.35);
}

/* Items: white uppercase letters (contrast on #4D4D4D ~7.4:1, WCAG AA) */
#mainNav .dropdown-menu .dropdown-item {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.65rem 1.25rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

/*
 * Hover / keyboard focus / active: accent green. Best practice: dark text
 * on light green – white on #B0D352 would be only ~1.7:1, #2c3e50 reaches ~8:1.
 */
#mainNav .dropdown-menu .dropdown-item:hover,
#mainNav .dropdown-menu .dropdown-item:focus,
#mainNav .dropdown-menu .dropdown-item:active,
#mainNav .dropdown-menu .dropdown-item.active {
    color: #2c3e50;
    background-color: #B0D352;
}

/*
 * The open dropdown toggle should – like the other items – be recognizable
 * as active. Green text on mobile, a green pill from desktop up (mirrors the
 * theme's .active rules for #mainNav).
 */
#mainNav .navbar-nav a.nav-link.dropdown-toggle.show,
#mainNav .navbar-nav a.nav-link.dropdown-toggle.show:focus {
    color: #B0D352;
}

@media (min-width: 992px) {
    #mainNav .navbar-nav > li.nav-item > a.nav-link.dropdown-toggle.show,
    #mainNav .navbar-nav > li.nav-item > a.nav-link.dropdown-toggle.show:focus,
    #mainNav .navbar-nav > li.nav-item > a.nav-link.dropdown-toggle.show:hover {
        color: #fff;
        background: #B0D352;
    }

    /*
     * While the dropdown is open it is the active context: suppress the
     * ScrollSpy highlight of the other top-level links, so that
     * e.g. "Über uns" does not light up at the same time.
     */
    #mainNav .navbar-nav:has(a.dropdown-toggle.show) > li.nav-item > a.nav-link.active:not(.dropdown-toggle) {
        color: #fff;
        background: transparent;
    }
}