/* ==========================================================
   VINCIT MANAGEMENT CONSULTING
   FILE       : 06-navbar.css
   PURPOSE    : Global Navigation & Mobile Menu
   VERSION    : 1.0.0
========================================================== */


/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: var(--z-header);

    color: var(--color-white);

    transition:
        background var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}


/* ==========================================================
   SCROLLED HEADER
========================================================== */

.site-header.is-scrolled {
    position: fixed;

    background: rgba(8, 44, 68, 0.97);

    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(12px);
}


/* ==========================================================
   NAVIGATION
========================================================== */

.site-nav {
    min-height: 88px;

    display: flex;
    align-items: center;

    gap: 35px;
}


/* ==========================================================
   BRAND
========================================================== */
/* ==========================================================
   BRAND
========================================================== */

.site-brand {
    display: flex;

    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;

    width: 190px;
    height: 70px;

    overflow: visible;

    color: var(--color-white);

    line-height: 1;

    transition: opacity var(--transition-normal);
}


.site-brand:hover {
    opacity: 0.92;
}


.site-brand__logo {
    display: block;

    width: 185px;
    height: auto;

    max-width: 100%;
    max-height: 64px;

    margin: 0;
    padding: 0;

    object-fit: contain;
    object-position: left center;
}


/* ==========================================================
   DESKTOP NAV
========================================================== */

.site-nav__desktop {
    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 27px;

    margin-left: auto;
}


/* ==========================================================
   NAV LINK
========================================================== */

.nav-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 8px 0;

    background: transparent;

    color: rgba(255, 255, 255, 0.86);

    font-family: var(--font-body);

    font-size: 13px;

    font-weight: var(--weight-semibold);

    transition:
        color var(--transition-normal);
}


.nav-link:hover,
.nav-link.is-active {
    color: var(--color-white);
}


.nav-link::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 0;
    height: 1px;

    background: var(--color-gold);

    transition: width var(--transition-normal);
}


.nav-link:hover::after,
.nav-link.is-active::after {
    width: 100%;
}


/* ==========================================================
   DROPDOWN
========================================================== */

.nav-dropdown {
    position: relative;
}


.nav-dropdown__trigger {
    cursor: pointer;
}


.nav-dropdown__arrow {
    color: var(--color-gold);

    font-size: 14px;

    line-height: 1;

    transition:
        transform var(--transition-normal);
}


.nav-dropdown:hover
.nav-dropdown__arrow {
    transform: rotate(180deg);
}


/* ==========================================================
   DROPDOWN MENU
========================================================== */

.nav-dropdown__menu {
    position: absolute;

    top: calc(100% + 18px);
    right: -20px;

    width: 285px;

    padding: 14px;

    background: var(--color-white);

    border-top: 3px solid var(--color-gold);

    box-shadow: var(--shadow-lg);

    opacity: 0;
    visibility: hidden;

    transform: translateY(8px);

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal),
        transform var(--transition-normal);
}


.nav-dropdown__menu::before {
    content: "";

    position: absolute;

    top: -9px;
    right: 35px;

    width: 14px;
    height: 14px;

    background: var(--color-white);

    transform: rotate(45deg);
}


.nav-dropdown:hover
.nav-dropdown__menu {
    opacity: 1;

    visibility: visible;

    transform: translateY(0);
}


.nav-dropdown__menu a {
    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 11px 12px;

    color: var(--color-heading);

    font-size: 13px;

    font-weight: var(--weight-semibold);

    transition:
        background var(--transition-fast),
        color var(--transition-fast);
}


.nav-dropdown__menu a:hover {
    background: var(--color-off-white);

    color: var(--color-emerald);
}


.nav-dropdown__divider {
    display: block;

    height: 1px;

    margin: 7px 12px;

    background: var(--color-border);
}


.nav-dropdown__all {
    color: var(--color-emerald) !important;
}


.nav-dropdown__all span {
    color: var(--color-gold);

    font-size: 18px;
}


/* ==========================================================
   CTA
========================================================== */

.nav-cta {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    flex-shrink: 0;

    min-height: 44px;

    padding: 0 20px;

    background: var(--color-emerald);

    color: var(--color-white);

    border: 1px solid var(--color-emerald);

    border-radius: var(--radius-sm);

    font-size: 12px;

    font-weight: var(--weight-bold);

    transition:
        background var(--transition-normal),
        border-color var(--transition-normal),
        transform var(--transition-normal);
}


.nav-cta:hover {
    background: var(--color-emerald-dark);

    border-color: var(--color-emerald-dark);

    color: var(--color-white);

    transform: translateY(-2px);
}


.nav-cta span {
    color: var(--color-gold-light);

    font-size: 16px;

    transition:
        transform var(--transition-normal);
}


.nav-cta:hover span {
    transform: translateX(3px);
}


/* ==========================================================
   MOBILE TOGGLE
========================================================== */

.mobile-nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 8px;

    margin-left: auto;

    background: transparent;
}


.mobile-nav-toggle span {
    display: block;

    width: 25px;
    height: 2px;

    margin: 5px auto;

    background: var(--color-white);

    transition:
        transform var(--transition-normal),
        opacity var(--transition-normal);
}


.mobile-nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}


.mobile-nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
}


.mobile-nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}


/* ==========================================================
   MOBILE NAV
========================================================== */

.mobile-nav {
    display: none;

    position: fixed;

    inset: 0;

    padding-top: 88px;

    background: var(--color-navy-dark);

    overflow-y: auto;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity var(--transition-normal),
        visibility var(--transition-normal);
}


.mobile-nav.is-open {
    opacity: 1;

    visibility: visible;
}


.mobile-nav__inner {
    display: flex;

    flex-direction: column;

    padding-block: 35px 50px;
}


.mobile-nav__inner > a,
.mobile-nav__service-trigger {
    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    padding: 16px 0;

    background: transparent;

    color: var(--color-white);

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);

    font-family: var(--font-body);

    font-size: 17px;

    font-weight: var(--weight-semibold);

    text-align: left;
}


.mobile-nav__service-trigger span:last-child {
    color: var(--color-gold);

    font-size: 24px;

    font-weight: 400;
}


.mobile-nav__service-list {
    display: none;

    padding: 5px 0 10px 18px;
}


.mobile-nav__service-list.is-open {
    display: block;
}


.mobile-nav__service-list a {
    display: block;

    padding: 10px 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 14px;
}


.mobile-nav__service-list a:hover {
    color: var(--color-gold);
}


.mobile-nav__cta {
    justify-content: center !important;

    margin-top: 25px;

    padding: 15px !important;

    background: var(--color-emerald);

    border: 0 !important;

    border-radius: var(--radius-sm);
}
/* ==========================================================
   VINCIT LOGO — FINAL SIZE CONTROL
   PURPOSE : Keep actual logo contained inside navbar
========================================================== */

.site-header .site-nav .site-brand {
    display: flex !important;

    align-items: center !important;
    justify-content: flex-start !important;

    width: 190px !important;
    min-width: 190px !important;

    height: 70px !important;

    margin: 0 !important;
    padding: 0 !important;

    flex: 0 0 190px !important;

    overflow: hidden !important;
}


.site-header .site-nav .site-brand__logo {
    display: block !important;

    width: 175px !important;
    min-width: 175px !important;

    height: auto !important;

    max-width: 175px !important;
    max-height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
    object-position: left center !important;
}

/* ==========================================================
   VINCIT PREMIUM HEADER LOGO
   Purpose : Premium logo sizing for dark navy header
   Version : 1.0.1
========================================================== */

.site-brand {
    display: flex;
    align-items: center;

    width: 190px;
    height: 70px;

    flex-shrink: 0;
}


.site-brand__logo {
    display: block;

    width: 185px;
    max-width: 100%;
    height: 64px;

    object-fit: contain;
    object-position: left center;
}