/* =========================================================
   BOE NAVBAR STYLES
   - Top Navbar     : .top-nav
   - Second Navbar  : .second-nav
   - Third Navbar   : .third-nav
   - Designed by    :  Essam Amarragy 12/15/2025
   ========================================================= */

/* A-Permit indicator next to logo */
.permit-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0; /* spacing controlled by logo margin / markup */

    width: 36px;
    height: 36px;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.95);
    border-radius: 2px;
    line-height: 1;
}

/* Permit type text next to boxed letter */
.permit-type-text {
    color: #ffffff;
    font-size: 1.20rem; /* slightly larger than nav links */
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0.95;
}


/* Keep navbars stuck together at the top */
.dual-nav {
    position: sticky;
    top: 0;
    z-index: 1030;
}

/* ===================== */
/* Top Navigation Styles */
/* ===================== */

.top-nav {
    background-color: #2B84B1;
}

/* BOE logo sizing */
.boe-logo {
    height: 34px;
    width: auto;
}

/* Top nav links: default */
.top-nav .nav-link {
    font-weight: 400;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #ffffff;
    opacity: 0.92;
}

    /* Hover (no underline, keep clean) */
    .top-nav .nav-link:hover {
        opacity: 1;
        text-decoration: none;
        color: #ffffff;
    }

/* Active (last clicked): subtle underline like second/third nav */
/*.top-nav .top-nav-main .nav-link.active {
    font-weight: 600;
    opacity: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.85);
    padding-bottom: 0.45rem;
    text-decoration: none;
}*/

    /* Active (applies to ALL links in top navbar, including Admin + Sign In) */
    .top-nav .nav-link.active {
        font-weight: 600;
        opacity: 1;
        border-bottom: 1px solid rgba(255, 255, 255, 0.85);
        padding-bottom: 0.45rem;
        text-decoration: none;
    }


/* Information dropdown link */
.top-nav .top-info-link {
    font-weight: 500;
    opacity: 0.95;
}

.top-nav .form-control {
    min-width: 180px;
}

/* ======================= */
/* Second Navigation Styles */
/* ======================= */

.second-nav .nav-link {
    font-weight: 400;
    font-size: 0.95rem;
    color: #495057;
    padding: 0.6rem 1rem;
}

/* Vertical separators between second nav items */
.second-nav-list .nav-item {
    position: relative;
}

    .second-nav-list .nav-item:not(:last-child)::after {
        content: "|";
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #adb5bd;
        font-weight: 300;
    }

/* Hover */
.second-nav .nav-link:hover {
    /*color: #212529;*/
    /*font-weight: 600;*/
    text-decoration: underline;
}

/* Active */
.second-nav .nav-link.active {
    font-weight: 500;
    border-bottom: 2px solid #0d6efd;
    padding-bottom: .35rem;
}

/* Badges */
.second-nav .badge {
    font-size: 0.75rem;
    vertical-align: middle;
}

/* Mobile polish */
.second-nav .navbar-toggler {
    margin-left: auto;
}

/* ===================== */
/* Third Navigation Bar  */
/* ===================== */

.third-nav .nav-link {
    color: #495057;
    padding: 0.5rem 0.9rem;
    font-weight: 400;
}

    .third-nav .nav-link:hover {
        text-decoration: underline;
    }

    .third-nav .nav-link.active {
        font-weight: 500;
        border-bottom: 2px solid #0d6efd;
        padding-bottom: .35rem;
    }

/* Remove bottom divider from third navbar: Essam 12/17/2025 */
.third-nav {
    border-bottom: none !important;
    box-shadow: none !important;
}


/* ===================== */
/* Shared spacing rules  */
/* ===================== */

.top-nav .navbar-nav .nav-link,
.second-nav .navbar-nav .nav-link,
.third-nav .nav-link {
    padding-top: .6rem;
    padding-bottom: .6rem;
}

/* Hide separators on mobile stacked layout */
@media (max-width: 991.98px) {
    .second-nav-list .nav-item::after {
        display: none;
    }
}