/* ═══════════════════════════════════════════════════════════════
   fuji-header.css
   Navigation / header component styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Base: large-screen defaults (≥ 1200px) ──────────────────── */
/* Declared first so media queries below can override without !important */
.mobile-menu  { display: none; }
.account-menu { display: block; }

/* Ensure the account icon link meets the 44×44px minimum touch target.
   The icon is only visible at ≥ xl (1200px+); below that it is hidden and
   the burger / expanded nav "Account" entry handles account actions instead. */
.account-menu .nav-link {
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── < xl (< 1200px): compact nav layout ─────────────────────── */
@media screen and (max-width: 1199.98px) {
    /* Both .account-menu and .text-user--dropdown are hidden here; account
       actions are handled by the "Account" entry inside the expanded/burger nav.
       Double-class selectors (.user-dropdown.account-menu etc.) are required
       because .user-dropdown { display: flex } is declared later in this file
       and would otherwise win the cascade at equal specificity. */
    .navbar-brand:hover              { margin-left: 0; }
    .mobile-menu                     { display: block; }
    .user-dropdown.account-menu      { display: none; }
    .user-dropdown.text-user--dropdown { display: none; }
}

/* ── < lg (< 992px): mega-menu narrow adjustments ────────────── */
@media screen and (max-width: 991.98px) {
    .has-mega-menu .container     { min-width: 700px; }
    .has-mega-menu .dropdown-menu { margin-left: -250px; }
}

/* ── lg–xl range (992px–1199.98px): mega-menu mid adjustment ─── */
@media screen and (min-width: 992px) and (max-width: 1199.98px) {
    .has-mega-menu .container     { min-width: 800px; }
    .has-mega-menu .dropdown-menu { margin-left: -110px; }
}

/* ── ≥ xl (≥ 1200px): mega-menu reset ───────────────────────── */
@media screen and (min-width: 1200px) {
    .has-mega-menu .dropdown-menu { margin-left: 0; }
}

/* ── Container: positioning context for absolute children ───── */
.navbar > .container-xxl { position: relative; }

/* ── Nav links ──────────────────────────────────────────────── */
.navbar-nav { font-size: var(--text-base); }
.navbar-nav .nav-link         { color: var(--color-gray-700); }
.navbar-nav .nav-link:hover,
.navbar-nav .dropdown-item:hover { color: black; text-decoration: none; }
.navbar-nav .nav-link.active-tab:hover { color: white; text-decoration: none; }

/* ── Mega-menu headers ──────────────────────────────────────── */
.mega-dropdown-header {
    font-size: var(--text-base);
    color: var(--color-primary);
    background: var(--color-bg-section);
    font-weight: bold;
    text-indent: 25px;
    padding: 5px 0;
}

.mega-dropdown-header:hover {
    background-color: var(--color-primary-dark);
    color: #fff;
    cursor: pointer;
}

.mega-dropdown-header a:hover {
    color: #fff;
    text-decoration: none !important;
}

/* ── Dropdown menu items ────────────────────────────────────── */
.menu-item,
.menu-item:hover,
.menu-sub-item,
.menu-sub-item:hover {
    font-size: 14px;
    color: black;
}

/* ── Dropdown caret ─────────────────────────────────────────── */
.dropdown-toggle::after { color: var(--color-primary); }

/* ── Social icons (desktop) ─────────────────────────────────── */
.social {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 130px;
}

.social-icon {
    height: 30px;
    display: flex;
    align-items: center;
}

/* ── User-account dropdown ──────────────────────────────────── */
.user-dropdown {
    position: absolute;
    right: 9.85rem;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    z-index: 1030;
}

.user-dropdown img {
    height: 30px;
    position: relative;
    left: 3px;
}

.user-dropdown .dropdown-menu { top: 100%; }

/* ── Text login / user name link ────────────────────────────── */
#textNavbarLoginMenuLink {
    position: relative;
    top: 0;
    right: 2.625rem;
    color: #23539a;
    cursor: pointer;
}

#textNavbarLoginMenuLink .dropdown-item { right: 2em; }