/* =========================================================
   Transparent-at-top navbar, solid white on scroll.
   Smooth background + shadow transition (no backdrop-filter
   which does not animate reliably).
   ========================================================= */

/* Alpha-only transitions: start and end use the SAME RGB base colour,
   only the alpha channel animates. This prevents the interpolator from
   passing through a semi-transparent grey half-way. */
.navbar-default {
    background: rgba(255, 255, 255, 0) !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border-bottom: 1px solid rgba(0, 84, 154, 0) !important;
    box-shadow: 0 3px 18px rgba(0, 84, 154, 0) !important;
    padding-top: 25px;
    padding-bottom: 25px;
    transition: background-color 0.48s ease,
                box-shadow 0.48s ease,
                border-color 0.48s ease,
                padding 0.48s ease;
}

.navbar-default.scrolled {
    background: rgba(255, 255, 255, 1) !important;
    background-color: rgba(255, 255, 255, 1) !important;
    border-bottom-color: rgba(0, 84, 154, 0.12) !important;
    box-shadow: 0 3px 18px rgba(0, 84, 154, 0.14) !important;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Animate text / icon colour changes on the same curve so the whole
   navbar morphs progressively in both directions. */
.navbar-default .navbar-nav > li > a,
.navbar-default .toptel a,
.navbar-default .navbar-brand {
    transition: color 0.48s ease;
}
.navbar-default .icon-bar {
    transition: background-color 0.48s ease;
}

/* On pages with a dark hero (IPA, Virtu), lighten nav link text at top
   so it remains readable over the blue gradient. Dark text returns when scrolled. */
body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .navbar-nav > li > a,
body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .toptel a {
    color: #fff;
}
body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .icon-bar {
    background-color: #fff !important;
}

/* =========================================================
   Mobile: navbar ALWAYS solid (no transparency).
   Avoids menu items being unreadable over hero content
   when the hamburger menu is open at the top of the page.
   ========================================================= */
@media (max-width: 991px) {
    .navbar-default,
    .navbar-default:not(.scrolled) {
        background: rgba(255, 255, 255, 1) !important;
        background-color: rgba(255, 255, 255, 1) !important;
        border-bottom: 1px solid rgba(0, 84, 154, 0.12) !important;
        box-shadow: 0 3px 14px rgba(0, 84, 154, 0.12) !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }
    /* Force dark text on mobile regardless of hero theme */
    body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .navbar-nav > li > a,
    body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .toptel a,
    .navbar-default .navbar-nav > li > a {
        color: #1a2a3a !important;
    }
    body:has(#virtuel.virtu-page, #ipa.ipa-page) .navbar-default:not(.scrolled) .icon-bar,
    .navbar-default .icon-bar {
        background-color: #888 !important;
    }
    /* Solid background under the open dropdown menu */
    .navbar-default .navbar-collapse {
        background: #fff;
        border-top: 1px solid rgba(0, 84, 154, 0.08);
        margin-left: -15px;
        margin-right: -15px;
        padding-left: 15px;
        padding-right: 15px;
        box-shadow: 0 8px 18px rgba(0, 84, 154, 0.1);
    }
    .navbar-default .navbar-nav > li > a {
        padding: 12px 15px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    }
    .navbar-default .navbar-nav > li:last-child > a {
        border-bottom: none;
    }

    /* Restore the .ismobile spacer that layout.less hides at max-width:767px.
       Without this, registration / install / tryout pages have their step
       navigation tucked under the fixed navbar. */
    body header.ismobile {
        display: block !important;
        min-height: 72px !important;
        max-height: 72px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }
}