/**
 * Desktop mega menu for the main-site nav.
 *
 * The markup comes from bizfinance_render_main_menu() in inc/menu-render.php, ported
 * from the Giving theme. This file replaces the `.biz-theme-mega-*` / `.biz-theme-nav-*`
 * rules that used to live in nus-nav.css; that file keeps the surrounding chrome
 * (`.biz-theme-main-nav` background and breakpoint visibility, the search box, the top
 * bar), so everything here is scoped under `.biz-theme-main-nav`.
 *
 * Loaded after nus-nav.css — see inc/styles.php.
 *
 * Values follow the theme's own palette: NUS blue #003d7a, orange #ef7c00.
 */

/* The panel spans the full viewport like the main site's, so its containing block is
   the full-width <nav>, not the centred .container inside it. Both the trigger and the
   .biz-theme-megamenu wrapper must therefore stay out of the way as containing
   blocks. */
.biz-theme-main-nav {
    position: relative;
}

.biz-theme-main-nav .nus-main-menu {
    display: flex;
    flex-direction: row;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.biz-theme-main-nav .nus-main-menu .nav-item {
    margin: 0 !important;
    position: static;
}

.biz-theme-main-nav .nus-main-menu .nav-link {
    display: block;
    padding: 15px 14px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.biz-theme-main-nav .nus-main-menu .nav-item:hover > .nav-link,
.biz-theme-main-nav .nus-main-menu .nav-item > .nav-link:focus {
    box-shadow: 0 -3px 0 #ef7c00 inset;
    color: #003d7a;
    background-color: #f8f9fa;
}

.biz-theme-main-nav .nus-main-menu .nav-link:focus {
    outline: none;
}

/* Bootstrap 4's .dropdown-toggle::after caret is a border triangle already; it only
   needs recolouring to sit on this bar. */
.biz-theme-main-nav .nus-main-menu .nav-link.dropdown-toggle::after {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    border-top-color: currentColor;
}

/* --- Panel ------------------------------------------------------------------ */

.biz-theme-main-nav .nus-mega-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 40px 0;
    border: 0;
    border-top: 3px solid #ef7c00;
    border-radius: 0;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    text-align: left;
}

/* Hover for pointers, focus-within so the panel is reachable by keyboard — the markup
   it replaces was not. */
.biz-theme-main-nav .nus-main-menu .nav-item.dropdown:hover > .nus-mega-panel,
.biz-theme-main-nav .nus-main-menu .nav-item.dropdown:focus-within > .nus-mega-panel {
    display: block;
    animation: bizfinanceMegaFadeIn 0.3s ease;
}

@keyframes bizfinanceMegaFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.biz-theme-main-nav .nus-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 40px;
}

.biz-theme-main-nav .nus-mega-col {
    min-width: 0;
}

/* --- Section titles and links ------------------------------------------------ */

.biz-theme-main-nav .nus-mega-title {
    display: block;
    margin-bottom: 8px;
    color: #003d7a;
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 25px;
}

.biz-theme-main-nav .nus-mega-col ul {
    margin: 0 0 25px;
    padding: 0 0 0 15px;
    list-style: none;
}

.biz-theme-main-nav .nus-mega-col li {
    padding: 5px 0;
    font-size: 14px;
    line-height: 1.4;
}

/* The Giving theme draws this caret with a Font Awesome 6 glyph. This theme never
   loads Font Awesome 6 — inc/styles.php pulls Line Awesome and Fontello, and the
   bundled Font Awesome 4.7 is not enqueued — so the same orange caret is drawn as a
   CSS border triangle instead. No icon-font dependency. */
.biz-theme-main-nav .nus-mega-col li::before {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin: 0 6px 0 -13px;
    vertical-align: middle;
    border-left: 5px solid #ef7c00;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

/* font-size is repeated on the anchor because template.css styles nav anchors directly
   and would otherwise win over the inherited size from the <li>. */
.biz-theme-main-nav .nus-mega-col li a {
    color: #141414;
    font-size: 14px;
    line-height: 1.4;
    text-decoration: none;
}

.biz-theme-main-nav .nus-mega-col li a:hover,
.biz-theme-main-nav .nus-mega-col li a:focus {
    color: #ef7c00;
    text-decoration: underline;
}

/* A second-level item with no children of its own reads as a lone link, so it gets the
   section title's weight rather than looking like an orphaned child. */
.biz-theme-main-nav .nus-mega-col li.nus-mega-standalone a {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    color: #003d7a;
}

/* Narrower desktops: fewer columns before the panel starts crowding. */
@media (max-width: 1199.98px) {
    .biz-theme-main-nav .nus-mega-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0 30px;
    }

    .biz-theme-main-nav .nus-main-menu .nav-link {
        padding: 15px 10px;
    }
}