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

.site-header {
    width: 100%;
    background: var(--public-nav-bg);
    border-bottom: 1px solid var(--public-nav-border);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
}

.site-header-inner {
    height: 60px;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

/* LOGO WRAPPER */
.site-logo {
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

    /* LINK HOLDS BOTH IMAGE + TEXT */
    .site-logo a {
        display: flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        margin: 0;
        padding: 0;
        height: 100%;
    }

    /* IMAGE — full height of header */
    .site-logo img {
        display: block;
        height: 100%;
        width: auto;
    }

    /* TEXT — block element, smart wrapping */
    .site-logo .logo-text {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand-primary);
    line-height: 1.1;
    flex: 1 1 auto;   /* can grow, can shrink */
    min-width: 0;     /* allows wrapping ONLY when needed */
    white-space: nowrap; /* default: stay on one line */
}


/* DESKTOP NAV */
.site-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
}

    /* TOP-LEVEL ITEMS */
    .site-nav > a,
    .nav-dropdown > span {
        display: flex;
        align-items: center;
        height: 100%;
        padding: 0 16px;
        color: var(--public-nav-text);
        text-transform: uppercase;
        text-decoration: none;
        font-size: 16px;
        letter-spacing: 0.05em;
        cursor: pointer;
        transition: background .15s ease, color .15s ease;
    }

        .site-nav > a:hover,
        .nav-dropdown > span:hover {
            background: var(--public-nav-hover-bg);
            color: var(--public-nav-hover-text);
        }

        /* ACTIVE STATE */
        .site-nav > a.active,
        .nav-dropdown > span.active {
            background: var(--public-nav-active-bg);
            color: var(--public-nav-active-text);
            font-weight: 700;
        }

/* DROPDOWN */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--public-nav-bg);
    border: 1px solid var(--public-nav-border);
    min-width: 200px;
    box-shadow: 0 5px 12px rgba(0,0,0,0.4);
    z-index: 100;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: block;
}

/* DROPDOWN LINKS */
.nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    color: var(--public-nav-text);
    text-decoration: none;
    font-size: 15px;
    text-transform: none;
    border-bottom: 1px solid var(--public-nav-border);
    transition: background .15s ease, color .15s ease;
}

    .nav-dropdown-menu a:hover {
        background: var(--public-nav-hover-bg);
        color: var(--public-nav-hover-text);
    }

    .nav-dropdown-menu a.active {
        background: var(--public-nav-active-bg);
        color: var(--public-nav-active-text);
        font-weight: 700;
    }

/* MAIN CONTENT SHIFT */
.public-main {
    margin-left: 0 !important;
    padding-top: 60px;
}

/* ============================================
   NAV OVERFLOW MODE
   ============================================ */

/* main.js measures logo+nav's actual width against .site-header-inner's
   available width on load/resize and toggles this class on <body> --
   content-driven rather than a fixed viewport breakpoint, since item
   count and site-name length both vary per install. Everything below is
   what switches the single-row desktop nav over to the existing
   off-canvas panel + MENU toggle (assets/css/main.css). */
body.nav-collapsed .site-header-inner {
    height: 50px;
    padding: 0 12px;
}

body.nav-collapsed .site-logo .logo-text {
    font-size: 16px;
    white-space: normal;
}

body.nav-collapsed .site-nav.mobile-panel {
    flex-direction: column;
    position: fixed;
    top: 0;
    right: -260px;
    width: 260px;
    height: 100vh;
    background: var(--public-nav-bg);
    border-left: 1px solid var(--public-nav-border);
    padding-top: 60px;
    transition: right 0.25s ease;
    z-index: 200;
}

    body.nav-collapsed .site-nav.mobile-panel.open {
        right: 0;
    }

    body.nav-collapsed .site-nav.mobile-panel > a,
    body.nav-collapsed .site-nav.mobile-panel .nav-dropdown > span {
        display: block;
        padding: 16px 16px 16px 40px;
        border-bottom: 1px solid var(--public-nav-border);
        color: var(--public-nav-text);
        text-transform: uppercase;
        font-size: 16px;
        height: auto;
    }

        body.nav-collapsed .site-nav.mobile-panel > a.active,
        body.nav-collapsed .site-nav.mobile-panel .nav-dropdown > span.active {
            background: var(--public-nav-active-bg);
            color: var(--public-nav-active-text);
            font-weight: 700;
        }

    body.nav-collapsed .site-nav.mobile-panel .nav-dropdown-menu {
        display: none;
        position: static;
        border: none;
        box-shadow: none;
    }

    body.nav-collapsed .site-nav.mobile-panel .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    body.nav-collapsed .site-nav.mobile-panel .nav-dropdown-menu a {
        padding: 12px 24px;
        border-bottom: 1px solid var(--public-nav-border);
        text-transform: none;
    }

body.nav-collapsed .public-main {
    padding: 70px 12px 40px 12px;
}