/* ==========================================================================
   JIM Student Theme — Primary Navigation
   High-contrast, accessible navigation styles on deep navy background
   ========================================================================== */

.jim-nav {
    background: var(--jim-navy) !important;
    position: relative;
    z-index: 40;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.jim-nav__inner {
    max-width: var(--jim-max-width);
    margin-inline: auto;
    padding-inline: var(--jim-content-padding);
}

/* ── Outer navigation lists (supports OJS .pkp_nav_list and custom .jim-nav__list) ── */
.jim-theme .jim-nav ul.jim-nav__list,
.jim-theme .jim-nav ul.pkp_nav_list,
.jim-theme .jim-nav > .jim-nav__inner > ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 0 !important;
}

.jim-theme .jim-nav ul.jim-nav__list > li,
.jim-theme .jim-nav ul.pkp_nav_list > li,
.jim-theme .jim-nav > .jim-nav__inner > ul > li {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* ── Top-level Links: Crisp White Text on Deep Navy ── */
.jim-theme .jim-nav ul.jim-nav__list > li > a,
.jim-theme .jim-nav ul.pkp_nav_list > li > a,
.jim-theme .jim-nav > .jim-nav__inner > ul > li > a,
.jim-theme .jim-nav__link {
    color: #FFFFFF !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 13px 18px !important;
    text-decoration: none !important;
    letter-spacing: .01em !important;
    transition: all var(--jim-duration) var(--jim-ease) !important;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap !important;
    background: transparent !important;
    line-height: 1.4 !important;
}

/* ── SVGs in Top-Level Links ── */
.jim-theme .jim-nav ul.jim-nav__list > li > a svg,
.jim-theme .jim-nav ul.pkp_nav_list > li > a svg,
.jim-theme .jim-nav__link svg,
.jim-theme .jim-nav__home-icon {
    width: 15px !important;
    height: 15px !important;
    stroke: #FFFFFF !important;
    color: #FFFFFF !important;
    stroke-width: 2 !important;
    fill: none !important;
    flex-shrink: 0 !important;
}

/* ── Hover and Focus States ── */
.jim-theme .jim-nav ul.jim-nav__list > li > a:hover,
.jim-theme .jim-nav ul.pkp_nav_list > li > a:hover,
.jim-theme .jim-nav ul.jim-nav__list > li > a:focus-visible,
.jim-theme .jim-nav ul.pkp_nav_list > li > a:focus-visible,
.jim-theme .jim-nav__link:hover,
.jim-theme .jim-nav__link:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.12) !important;
}

/* ── Active State: Bright Emerald Bottom Border Accent ── */
.jim-theme .jim-nav ul.jim-nav__list > li.active > a,
.jim-theme .jim-nav ul.pkp_nav_list > li.active > a,
.jim-theme .jim-nav ul.jim-nav__list > li.current > a,
.jim-theme .jim-nav ul.pkp_nav_list > li.current > a,
.jim-theme .jim-nav .jim-nav__item--active > a,
.jim-theme .jim-nav .jim-nav__item--active > .jim-nav__link {
    color: #FFFFFF !important;
    border-bottom-color: var(--jim-green-bright) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Dropdown Caret for Items with Submenus ── */
.jim-theme .jim-nav ul.jim-nav__list > li:has(ul) > a::after,
.jim-theme .jim-nav ul.pkp_nav_list > li:has(ul) > a::after,
.jim-theme .jim-nav .jim-nav__item--has-dropdown > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 2px solid rgba(255, 255, 255, 0.85);
    border-bottom: 2px solid rgba(255, 255, 255, 0.85);
    transform: rotate(45deg);
    margin-left: 6px;
    margin-top: -3px;
    transition: transform 0.2s ease;
}

.jim-theme .jim-nav ul.jim-nav__list > li:hover:has(ul) > a::after,
.jim-theme .jim-nav ul.pkp_nav_list > li:hover:has(ul) > a::after,
.jim-theme .jim-nav .jim-nav__item--has-dropdown:hover > a::after {
    transform: rotate(-135deg);
    border-color: #FFFFFF;
}

/* ── Dropdown Menus: Clean White Container ── */
.jim-theme .jim-nav ul.jim-nav__list > li > ul,
.jim-theme .jim-nav ul.pkp_nav_list > li > ul,
.jim-theme .jim-nav .jim-nav__dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    background: var(--jim-white) !important;
    border-radius: 0 0 var(--jim-radius-sm) var(--jim-radius-sm) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.22) !important;
    min-width: 220px !important;
    z-index: 300 !important;
    list-style: none !important;
    padding: var(--jim-sp-2) 0 !important;
    margin: 0 !important;
    border: 1px solid var(--jim-border) !important;
    border-top: none !important;
}

.jim-theme .jim-nav ul.jim-nav__list > li:hover > ul,
.jim-theme .jim-nav ul.pkp_nav_list > li:hover > ul,
.jim-theme .jim-nav ul.jim-nav__list > li:focus-within > ul,
.jim-theme .jim-nav ul.pkp_nav_list > li:focus-within > ul,
.jim-theme .jim-nav .jim-nav__item:hover > .jim-nav__dropdown,
.jim-theme .jim-nav .jim-nav__item:focus-within > .jim-nav__dropdown {
    display: block !important;
}

/* ── Submenu Links: Deep Navy Text on White Background ── */
.jim-theme .jim-nav ul.jim-nav__list > li > ul a,
.jim-theme .jim-nav ul.pkp_nav_list > li > ul a,
.jim-theme .jim-nav .jim-nav__dropdown a {
    display: block !important;
    width: 100% !important;
    padding: 10px 18px !important;
    color: var(--jim-navy) !important;
    font-size: .8125rem !important;
    font-weight: 500 !important;
    border-bottom: none !important;
    background: transparent !important;
    text-align: left !important;
    white-space: nowrap !important;
    transition: all var(--jim-duration) var(--jim-ease) !important;
}

.jim-theme .jim-nav ul.jim-nav__list > li > ul a:hover,
.jim-theme .jim-nav ul.pkp_nav_list > li > ul a:hover,
.jim-theme .jim-nav .jim-nav__dropdown a:hover {
    background: var(--jim-surface) !important;
    color: var(--jim-teal) !important;
    padding-left: 22px !important;
}