/* ==========================================================
   DJJ Healthcare
   header.css
========================================================== */

/* ==========================================================
   HEADER
========================================================== */
#siteHeader {
    position: fixed;
    left: 0;
    top: 24px;
    width: 100%;
    z-index: 5000;
}

/* ==========================================================
   BACKGROUND
========================================================== */
/* #navigationBackground {
    position: absolute;
    inset: 0;
    background: rgba(55, 56, 111, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--shadow);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
} */

#navigationBackground {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--primary-transparent);
    transition: inherit;
    box-shadow: var(--shadow);
}

/* ==========================================================
   CONTENT
========================================================== */
#mainNavigation {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding-left: 110px; */
    padding-right: 30px;
}

/* ==========================================================
   LOGO
========================================================== */
/* .logoCircle {
    position: absolute;
    left: 0;
    top: 50%;
    width: var(--logo-size);
    height: var(--logo-size);
    transform: translateY(-50%);
    border-radius: 50%;
    background: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 20;
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: var(--shadow);
} */

.logoCircle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    flex-shrink: 0;
    transition:
        transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        margin 0.65s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.nav-expanded .logoCircle {
    margin-right: auto;
    transform: translateX(0);
}

.nav-collapsed .logoCircle {
    transform: translateX(0);
    margin: 0 auto;
}

.logoCircle img.expanded {
    left: 25px;
    position: absolute;
    width: 200%;
    max-width: 200%;
    transition: transform 0.6s;
}

.logoCircle img.expanded.hide {
    display: none;
}

.logoCircle img.collapsed {
    /* left: 25px;
    position: absolute; */
    width: 70%;
    max-width: 70%;
    transition: transform 0.6s;
}

.logoCircle img.collapsed.hide {
    display: none;
}

.logoCircle:hover img {
    transform: scale(1.08);
}

/* ==========================================================
   DESKTOP NAVIGATION
========================================================== */
.desktopNavigation {
    display: flex;
    align-items: center;
    gap: 36px;
}

.desktopNavigation,
.socialIcons {
    transition:
        opacity 0.35s 0.25s,
        transform 0.35s 0.25s;
}

.desktopNavigation li {
    position: relative;
    opacity: 0;
    transform: translateY(-18px);
    transition:
        opacity 0.35s,
        transform 0.35s;
}

.desktopNavigation li.show {
    opacity: 1;
    transform: none;
}

.desktopNavigation a {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    transition: var(--transition);
    position: relative;
}

.desktopNavigation a::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 0;
    height: 2px;
    background: var(--secondary);
    transform: translateX(-50%);
    transition: var(--transition);
}

.desktopNavigation a:hover {
    color: var(--secondary);
}

.desktopNavigation a:hover::after {
    width: 100%;
}

.desktopNavigation a.active {
    color: var(--secondary);
}

.desktopNavigation a.active::after {
    width: 100%;
}

/* ==========================================================
   SOCIAL
========================================================== */
.navigationRight {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-left: auto;
}

.socialIcons {
    display: flex;
    align-items: center;
    gap: 14px;
}

.socialIcons a {
    width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.35s,
        transform 0.35s;
}

.socialIcons a.show {
    opacity: 1;
    transform: scale(1);
}

.socialIcons a:hover {
    background: var(--primary);
    transform: translateY(-3px);
}

/* ==========================================================
   MOBILE BUTTON
========================================================== */
#mobileMenuButton {
    display: none;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: none;
    color: #fff;
    font-size: 28px;
    margin-left: auto;
}

/* ==========================================================
   SHRUNK MENU
========================================================== */
.nav-collapsed .desktopNavigation,
.nav-collapsed .socialIcons {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* ==========================================================
   EXPANDED MENU
========================================================== */
.nav-expanded .desktopNavigation,
.nav-expanded .socialIcons {
    opacity: 1;
    transform: none;
}

/* ==========================================================
   NAVIGATION
========================================================== */
#navigationContainer {
    position: fixed;
    top: 24px;
    left: calc((100% - min(1272px, calc(100vw - 40px))) / 2); /*50%;*/
    transform: translateX(0%); /*translateX(-50%);*/
    height: var(--menu-height);
    transition:
        width 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        border-radius 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
        background 0.45s,
        box-shadow 0.45s;
    overflow: hidden;
    z-index: 1000;
    margin: auto;
}

#navigationContainer.nav-expanded {
    width: min(1272px, calc(100vw - 40px));
    border-radius: 40px;
}

#navigationContainer.nav-collapsed {
    width: var(--menu-height);
    border-radius: 50%;
    left: calc((100% - min(1272px, calc(100vw - 40px))) / 2);
    transform: none;
    box-shadow: 0 0 30px rgba(50,139,146,.5);;
}

/* ==========================================================
   MOBILE NAVIGATION
========================================================== */
#mobileNavigation {
    position: fixed;
    top: 110px;
    left: 24px;
    right: 24px;
    background: rgba(55, 56, 111, 0.98);
    border-radius: 24px;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: all 0.4s;
    box-shadow: var(--shadow-large);
    z-index: 4000;
}

#mobileNavigation.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#mobileNavigation ul {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

#mobileNavigation a {
    color: #fff;
    font-size: 17px;
}