/* ============================================================================
   Navigation redesign — visual skin ONLY (navy + orange, per RankingPage mockup).
   Loaded AFTER navigation-menu.css / mobile-responsive.css so it overrides
   colours, fonts and accents WITHOUT touching layout, structure, the 3-level
   dropdowns, or the mobile toggle JS. Sitewide (in components/header.php).
   Remove the single <link> in header.php to fully revert.
   ============================================================================ */

:root {
    --nav-navy: #061642;            /* navbar + dropdown background */
    --nav-orange: #f58220;         /* accent */
    --nav-orange-hover: #e07018;
    --nav-on-navy: #ffffff;        /* light text on navy */
    --nav-on-navy-dim: rgba(255, 255, 255, 0.8);
    --nav-on-navy-dropdown: rgba(255, 255, 255, 0.75);
    --nav-font-body: 'Archivo', system-ui, sans-serif;
}

/* ── Bar ──────────────────────────────────────────────────────────────── */
.navbar {
    background: var(--nav-navy);
    border-bottom: 2px solid var(--nav-orange);   /* mockup's orange accent line */
    box-shadow: 0 2px 8px rgba(6, 22, 66, 0.25);
}
.nav-container { height: 72px; }

/* Wider cap + a bit less breathing room between the logo and the menu, so the
   full menu (through "Contact Us") fits without the last item clipping on large
   displays (e.g. 3840px). base .nav-container is capped at 1400px + margin-left:50px
   on .nav-menu, which the enlarged redesign logo + uppercase links overflow. */
.nav-container { max-width: 1600px; }
.nav-menu { margin-left: 24px; }
/* Let the menu shrink its own gaps before anything clips (never wraps/overflows). */
.nav-menu { flex-wrap: nowrap; }

/* Logo: the shared styles.css sizes it to 136px which made the bar very tall.
   Constrain to fit the bar (override, styles.css untouched). */
.nav-brand { max-width: none; }
.logo-image { height: 85px; max-width: 110px; width: auto; }

/* ── Top-level links ──────────────────────────────────────────────────── */
.nav-link {
    color: var(--nav-on-navy-dim);
    font-family: var(--nav-font-body);
    font-size: 13px;
    font-weight: 600;                 /* matches the mockup exactly */
    /* Full-bar-height padding so the active underline meets the navbar's bottom
       border (no gap) — matches the mockup. 72px bar − 3px underline ≈ 24px each. */
    padding: 24px 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 0;
    border-bottom: 3px solid transparent;
    /* pull the link's underline down onto the navbar's 2px orange border */
    margin-bottom: -2px;
}

/* The mockup antialiases the whole page, which makes Archivo 600 render lighter.
   Apply the same smoothing to the navbar so the weight matches the mockup and
   doesn't look chunkier under default subpixel rendering. */
.navbar,
.navbar * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
.nav-link:hover,
.nav-link.active {
    background: transparent;
    color: #fff;
    border-bottom-color: var(--nav-orange);
}

/* Dropdown caret/arrow tint */
.dropdown-arrow,
.nested-arrow { color: var(--nav-orange); opacity: 0.9; }

/* ── Dropdown panels (all levels) — navy, per mockup ──────────────────── */
.dropdown-menu,
.nested-dropdown-menu {
    background: var(--nav-navy);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 16px 32px rgba(6, 22, 66, 0.35);
}
/* Push the first-level dropdown below the navbar's orange border so the hovered
   nav-item's underline stays visible above it (matches the mockup). The nested
   submenu opens to the RIGHT (top:0), so this only targets the first level. */
.has-nested > .dropdown-menu,
.nav-dropdown > .dropdown-menu {
    top: calc(100% + 6px);
}

.dropdown-menu li a,
.nested-dropdown-menu li a,
.nav-dropdown-nested > a {
    color: var(--nav-on-navy-dropdown);
    font-family: var(--nav-font-body);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
/* Full-orange hover fill with white text (mockup). */
.dropdown-menu li a:hover,
.nested-dropdown-menu li a:hover,
.nav-dropdown-nested > a:hover {
    background-color: var(--nav-orange);
    color: #fff;
}
/* Keep the caret readable when its row is hovered (orange fill). */
.nav-dropdown-nested > a:hover .nested-arrow { color: #fff; opacity: 1; }

/* Scrollbar accent inside scrollable dropdowns */
.dropdown-menu.scrollable-menu::-webkit-scrollbar-thumb { background: var(--nav-orange); }
.dropdown-menu.scrollable-menu::-webkit-scrollbar-thumb:hover { background: var(--nav-orange-hover); }

/* ── Mobile toggle (Menu / Close) ─────────────────────────────────────── */
.nav-toggle {
    color: var(--nav-on-navy);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 4px;
    background: transparent;
}
.nav-toggle:hover { border-color: var(--nav-orange); color: var(--nav-orange); }
.nav-toggle span { background: transparent; color: inherit; }

/* ── Mobile menu panel: navy background, light text ───────────────────── */
@media (max-width: 768px) {
    .nav-brand { width: auto; }
    .logo-image { height: 42px; width: auto; max-width: 170px; }

    .nav-menu {
        background: var(--nav-navy);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
    .dropdown-menu,
    .nested-dropdown-menu {
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .dropdown-menu li a,
    .nested-dropdown-menu li a,
    .nav-dropdown-nested > a {
        color: var(--nav-on-navy-dim);
    }
    .dropdown-menu li a:hover,
    .nested-dropdown-menu li a:hover,
    .nav-dropdown-nested > a:hover {
        background: var(--nav-orange);
        color: #fff;
    }
}