/* --------------------------------------------------
    HEADER HEIGHT (all screens)
-------------------------------------------------- */
header.site-header {
    height: var(--header-height);
}

header.site-header .navbar {
    min-height: var(--header-height);
    padding-top: 0;
    padding-bottom: 0;
}

/* --------------------------------------------------
DEFAULT (all screens)
-------------------------------------------------- */

/* Show text everywhere by default */
.nav-text,
.login-text {
    display: inline;
}

/* Hide icons everywhere by default */
.nav-icon,
.logo-mobile {
    display: none;
}

/* Show default logo everywhere by default */
.logo-default {
    display: inline;
}

/* Make LOGIN and LOGOUT buttons the same width (desktop/tablet) */
.login-btn {
    min-width: 110px;
    justify-content: center;
    text-transform: uppercase;
}

/* Active icon highlight */
.nav-link.active .nav-icon {
    color: #222;
    font-weight: 750;
}

/* Active text highlight */
.nav-link.active .nav-text {
    color: #222;
    font-weight: 750;
}

/* Hover colour for text + icons */
.nav-link:hover .nav-text,
.nav-link:hover .nav-icon {
    color: #1C8E1C;
}

/* --------------------------------------------------
MOBILE PORTRAIT ONLY
-------------------------------------------------- */
@media (max-width: 650px) { /* (max-width: 767.98px) and (orientation: portrait) */

    /* Swap logo → icon */
    .logo-default {
        display: none;
    }
    .logo-mobile {
        display: inline;
    }


    /* Show text again, but as a small label under the icon */
    .nav-text {
        display: block;
        font-size: 0.65rem;
        line-height: 1.1;
        margin-top: 0.15rem;
        color: #555;
    }

    /* Stack icon + text vertically */
    .nav-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
    }

    /* Keep icons visible */
    .nav-icon {
        display: block;
        font-size: 1.6rem;
        line-height: 1;
    }


    /* Hide login text */
    .login-text {
        display: none;
    }

    /* Larger login/logout icon, no right margin */
    .login-btn .bi {
        font-size: 1.8rem;
        margin-right: 0 !important;
    }

    /* Square login/logout button on mobile portrait */
    .login-btn {
        min-width: auto;          /* override desktop width */
        width: 2.6rem;
        height: 2.6rem;
        padding: 0;               /* no extra padding */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Remove extra vertical padding on nav items */
    #mainNav .nav-item {
        padding-top: 0;
        padding-bottom: 0;
    }


}