/* The bar fill has to live on .hero-head (and the mobile .nav-menu), not on .hero.
   Bulma and vendor-manual paint .hero.is-info itself; a child box-shadow under that
   opaque parent never shows on the page (or on the compliance banner that sits as a
   sibling inside the same hero). Keep the hero transparent so the original
   0 2px 3px drop shadow can cast again. */
.navigation-shell .hero.is-info {
    background-color: transparent;
    color: var(--color-text-inverse);
}

.navigation-shell .hero.is-info .hero-head,
.navigation-shell .hero.is-info .nav-menu {
    background-color: var(--color-surface-info);
}

/* Sit above in-hero status banners so the drop shadow lands on them, not under them. */
.navigation-shell .hero.is-info .hero-head {
    position: relative;
    z-index: 1;
}

/* Bottom hairline on the teal bar: Bulma used rgba(255,255,255,0.2). Wiring it to
   text-inverse-muted (0.7) made a bright white edge that read as a "white shadow". */
.navigation-shell .hero.is-info .nav {
    box-shadow: 0 1px 0 var(--color-border-inverse-muted);
}

.navigation-shell .nav-item,
.navigation-shell .hero.is-info a.nav-item,
.navigation-shell .hero.is-info .nav-item a:not(.button) {
    color: var(--color-text-inverse-muted);
}

.navigation-shell .nav-item:hover,
.navigation-shell .hero.is-info a.nav-item:hover,
.navigation-shell .hero.is-info a.nav-item.is-active,
.navigation-shell .hero.is-info .nav-item a:not(.button):hover,
.navigation-shell .hero.is-info .nav-item a:not(.button).is-active {
    color: var(--color-text-inverse);
}

.navigation-shell .nav-item--with-dot::after {
    background-color: var(--color-surface-on-brand);
}

/* The env mail preview control sits in a dropdown-trigger inside the info hero. Page sheets
   that style preference-panel dropdown triggers are more specific than .button.is-info and
   would repaint this control; keep it on the same teal as the bar. */
.navigation-shell .dropdown-trigger > .button.is-info {
    background-color: var(--color-surface-info);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.navigation-shell .dropdown-trigger > .button.is-info:hover,
.navigation-shell .dropdown-trigger > .button.is-info:focus,
.navigation-shell .dropdown-trigger > .button.is-info:active {
    background-color: var(--color-surface-accent-hover);
    border-color: transparent;
    color: var(--color-text-inverse);
}

.navigation-shell .navbar-item--new::after {
    background-color: var(--color-action-primary);
    color: var(--color-text-inverse);
}

.navigation-shell .navbar__items-divider {
    background-color: var(--color-border-default);
}

.navigation-shell .navbar-dropdown {
    background-color: var(--color-surface-raised);
    border-color: var(--color-border-default);
    box-shadow: 0 0 8px 8px var(--color-shadow-low);
}

.navigation-shell .navbar-dropdown a.navbar-item {
    color: var(--color-text-primary);
}

.navigation-shell .navbar-dropdown a.navbar-item:hover {
    background-color: var(--color-surface-info);
    color: var(--color-text-inverse);
}

@media screen and (max-width: 768px) {
    /* The burger bars are drawn as filled boxes, so they take a surface role. A text role on a
       background property is the tier mix-up this audit is meant to catch. */
    .navigation-shell .hero.is-info .nav-toggle span,
    .navigation-shell .hero.is-info .nav-toggle.is-active span {
        background-color: var(--color-surface-inverse);
    }

    .navigation-shell .hero.is-info .nav-menu .nav-item,
    .navigation-shell .navbar-dropdown {
        border-top-color: var(--color-text-inverse-muted);
    }
}