/*==================================================
ST ANNE PRE & PRIMARY SCHOOL
NAVBAR CSS v2.0
==================================================*/


/*==================================================
TOP BAR
==================================================*/

.top-bar{
    background:#0B2E6B;
    color:#fff;
    font-size:14px;
    padding:8px 0;
}

.top-bar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.top-left,
.top-right{
    display:flex;
    align-items:center;
    gap:25px;
}

.top-bar span{
    display:flex;
    align-items:center;
    gap:8px;
}

.top-bar i{
    color:#F9A826;
}


/*==================================================
MAIN NAVBAR
==================================================*/

#mainNav{
    background:#fff;
    box-shadow:0 2px 15px rgba(0,0,0,.08);
    padding:8px 0;
    position:sticky;
    top:0;
    z-index:1050;
    transition:.35s;
}


/*==================================================
LOGO
==================================================*/

.navbar-brand{
    display:flex;
    align-items:center;
    text-decoration:none;
    margin-right:25px;
}


.logo-text{
    margin-left:15px;
}

.logo-text h3{
    margin:0;
    color:#0B2E6B;
    font-size:22px;
    font-weight:700;
    line-height:1.2;
}

.logo-text span{
    font-size:11px;
    color:#777;
    letter-spacing:8px;
}


/*==================================================
NAVIGATION LINKS
==================================================*/

.navbar-nav{
    align-items:center;
}

.nav-item{
    margin:0 4px;
}

.nav-link{
    color:#333 !important;
    font-size:15px;
    font-weight:600;
    padding:10px 20px !important;
    transition:.3s;
    border-radius:8px;
}

.nav-link:hover,
.nav-link:focus{
    color:#F9A826 !important;
}

.nav-link.active{
    color:#0B2E6B !important;
}


/*==================================================
APPLY BUTTON
==================================================*/

#mainNav .btn-warning{
    background:#F9A826;
    border:none;
    color:#fff;
    font-weight:600;
    padding:11px 22px;
    border-radius:50px;
    margin-left:20px;
    transition:.3s;
}

#mainNav .btn-warning:hover{
    background:#e28d08;
    transform:translateY(-2px);
}
/*===================================
NAVBAR LOGO
===================================*/

.navbar-logo{
    /*  The logo lockup is 740x278 (2.66:1). It used to be boxed into 92x92
        with object-fit:contain, so `contain` letterboxed it down to ~34px of
        actual visible logo inside a square that was mostly empty space.
        Sizing by height with width:auto lets it render at its true ratio.
        Header height is unchanged: 72px logo - 8px collapsed margin + 16px
        navbar padding = the same 80px bar as before, but the logo now fills
        it almost edge to edge instead of floating small in the middle. */
    width:auto;
    height:72px;
    object-fit:contain;
    transition:.3s ease;
    margin-top:-4px;
    margin-bottom:-4px;
}
/*==================================================
DESKTOP DROPDOWN MENU
==================================================*/

.navbar .dropdown{
    position:relative;
}

.navbar .dropdown-menu{

    display:block;

    opacity:0;
    visibility:hidden;

    position:absolute;

    top:120%;
    left:0;

    min-width:240px;

    background:#fff;

    border:none;

    border-radius:15px;

    padding:10px 0;

    box-shadow:0 3px 12px rgba(0,0,0,.06);

    transition:.3s;

    transform:translateY(15px);

    z-index:9999;

}

.navbar .dropdown:hover>.dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.dropdown-item{

    padding:12px 22px;

    font-weight:500;

    color:#444;

    transition:.25s;

}

.dropdown-item:hover{

    background:#0B2E6B;

    color:#fff;

}
/*==================================================
SCROLL EFFECT
==================================================*/

#mainNav.scrolled{

    padding:8px 0;

    box-shadow:0 8px 25px rgba(0,0,0,.12);

}

#mainNav.scrolled .navbar-logo{

    /* Was declaring height twice (76px then 55px) plus a square width, so the
       shrink-on-scroll never matched the intended size. One rule now. */
    width:auto;
    height:60px;
    margin-top:-2px;
    margin-bottom:-2px;

}
/*==================================================
MOBILE
==================================================*/

@media(max-width:991px){

.top-bar{

display:none;

}

#mainNav{

padding:10px 0;

}

.navbar-logo{

width:auto;

height:56px;

margin-top:0;

margin-bottom:0;

}

.navbar-collapse{

margin-top:20px;

background:#fff;

padding:20px;

border-radius:15px;

box-shadow:0 15px 30px rgba(0,0,0,.08);

}

.nav-link{

padding:12px 5px !important;

margin:0;

}

/*  These MUST be selected as `.navbar .dropdown-menu` to match the specificity
    of the desktop rule above. As plain `.dropdown-menu` (0,1,0) the desktop
    `.navbar .dropdown-menu` (0,2,0) kept winning on `display`, so every mobile
    submenu stayed display:block while opacity:0 + visibility:hidden made it
    invisible - it still reserved its full height, which is where the huge blank
    gaps between "About Us", "Academics" and "Admissions" came from. */
.navbar .dropdown-menu{

position:static !important;

display:none;

opacity:1;

visibility:visible;

transform:none;

box-shadow:none;

border-radius:0;

min-width:0;

padding:0 0 0 18px;

margin:0;

}

.navbar .dropdown-menu.show{

display:block;

}

/*  Hover must not reveal submenus on touch: without this the desktop
    :hover rule fires on tap and expands a menu the toggle thinks is closed. */
.navbar .dropdown:hover>.dropdown-menu:not(.show){

opacity:1;

visibility:visible;

display:none;

}

/* Left-align the stacked mobile list - it was inheriting the centred layout. */
.navbar-nav{

text-align:left;

align-items:stretch;

}

.navbar-nav .nav-item{

width:100%;

border-bottom:1px solid #eef1f6;

}

.navbar-nav .nav-item:last-child{

border-bottom:none;

}

.navbar .dropdown-item{

padding:10px 8px;

font-size:15px;

white-space:normal;

}

#mainNav .btn-warning{

display:block;

width:100%;

margin-top:20px;

margin-left:0;

}

}
@media(max-width:576px){

.navbar-logo{

width:auto;

height:46px;

margin-top:0;

margin-bottom:0;

}

}

/*==================================================
TOP BAR - language picker sits beside the location
==================================================*/

.top-right{

    display:flex;
    align-items:center;
    gap:6px;

}