/* Nav-pills styled as pill-buttons */
.navigation-main.nav-pills > li {
    margin-right: 8px;
}
.navigation-main.nav-pills > li > a {
    padding: 8px 16px;
    border-radius: 6px;
    color: #333;
    background: transparent;
    border: 1px solid transparent;
    transition: all .18s ease;
    display: inline-block;
}
/* Hover: subtle shadow, rounded corners — do NOT move item vertically */
.navigation-main.nav-pills > li > a:hover,
.navigation-main.nav-pills > li > a:focus {
    background: transparent !important;
    color: inherit !important;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    /* keep position stable */
    transform: translateY(0);
    border-radius: 12px;
} 
/* Active / Selected menu: keep same color, apply shadow + rounded corner without lifting */
.navigation-main.nav-pills > li.active > a,
.navigation-main.nav-pills > li > a.active,
.navigation-main li.current-menu-item > a,
.navigation-main li.current_page_item > a {
    background: transparent !important;
    color: inherit !important;
    padding: 8px 16px;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0,0,0,0.18);
    transform: translateY(0);
    transition: all .18s ease;
}

/* ensure non-active links contrast well on dark nav */
.navigation-main.nav-pills > li > a { color: rgba(255,255,255,0.95); }
/* removed old hover color swap - shadow rules above provide hover/active effect */

/* menu option icon + label styling */
/* Raised z-index and enable pointer events so icons are clickable above other header elements */
.menu-options{z-index:9999; pointer-events: auto;}
.menu-options .opt-list{
    display:flex;
    gap:6px;
    align-items:center;
    justify-content:flex-end;
}
.menu-options .opt-list li{list-style:none;}
.menu-options .opt-list .toolTip{display:inline-flex;align-items:center;padding:6px 10px;border-radius:26px;cursor:pointer;transition:all .15s ease;background:transparent;z-index:99999}

/* Make nav links visible on light headers by default, keep white on dark header-lower */
.navigation-main.nav-pills > li > a { color: #333 !important; }
.header-lower .navigation-main.nav-pills > li > a { color: #fff !important; }

/* Make tooltips visible and icons high-contrast */
.menu-options .opt-list .toolTip{background:rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.06)}
.menu-options .opt-list .icon i, .menu-options .opt-list .iconn i{color:#fff;font-size:18px}
.menu-options .opt-list .toolTip:hover{background:rgba(0,0,0,0.12)}

/* Emoji fallback (visible if icon font fails). This prevents empty UI if FA doesn't load. */
.menu-options .opt-list li.latestBox .icon i:before { content: "⌚"; font-size:18px; display:inline-block; line-height:1; color:#fff }
.menu-options .opt-list li[rel="trendBar"] .iconn i:before { content: "⚡"; font-size:18px; display:inline-block; line-height:1; color:#fff }
.menu-options .opt-list li[rel="searchBar"] .iconn i:before { content: "🔍"; font-size:18px; display:inline-block; line-height:1; color:#fff }

/* Force the emoji fallback to be hidden when FontAwesome provided glyph exists (prevents duplication).
   This checks whether the FontAwesome font is used by matching the computed font-family on .fa; in most browsers
   this means the :before used by FA will render and we hide our fallback. */
.fa + .icon i:before, .fa:before { /* no-op to increase selector specificity */ }
@font-face { font-family: 'fonttest'; src: local('Arial'); }
@supports (font-family: FontAwesome) {
    .menu-options .opt-list .icon i:before,
    .menu-options .opt-list .iconn i:before { display: none; }
}

/* Ensure correct icon color on dark header */
.header-lower .menu-options .opt-list .icon, .header-lower .menu-options .opt-list .iconn{color:#fff}
.menu-options .opt-list .icon, .menu-options .opt-list .iconn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:8px;color:#fff;font-size:16px;line-height:1}
.menu-options .opt-list .icon i, .menu-options .opt-list .iconn i{color:inherit}
.menu-options .opt-list .label{color:#fff;font-weight:600;font-size:14px;display:none}
.menu-options .opt-list li:hover .toolTip{background:rgba(255,255,255,0.06);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12)}
.menu-options .opt-list li:hover .label{display:inline-block;padding-left:6px}

/* Make icons visible on light backgrounds too */
.menu-options .opt-list .toolTip{backdrop-filter: none}
.menu-options .opt-list .toolTip{border:1px solid rgba(255,255,255,0.06)}
/* ensure menu option icons remain visible on dark header/menu */
.menu-options .opt-list .icon, .menu-options .opt-list .iconn{color:#fff !important}

@media (max-width: 767px) {
    .navigation-main.nav-pills { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .navigation-main.nav-pills > li { display: inline-block; margin-right: 6px; }
    .menu-options .opt-list .label{display:none}
}

/* Remove duplicate caret indicators in the main navigation (hide inline .caret and FA caret inside nav). Keep link ::after pseudo-element arrow. */
.navigation-main.nav-pills .caret,
.navigation-main.nav-pills .dropdown-toggle .caret,
.navigation-main.nav-pills .fa-caret-down,
.navigation-main.nav-pills .fa-caret-up,
.nav.navbar-nav .caret,
.main-menu .navbar-collapse .caret,
.nav.navbar-nav .fa-caret-down,
.nav.navbar-nav .fa-caret-up {
    display: none !important;
}

/* Hide pseudo-element arrows that may be attached to the .caret element itself (e.g., .caret:after) but do NOT hide the link's ::after arrow */
.navigation-main.nav-pills > li > a .caret:after {
    display: none !important;
}

/* Uniform font-size for main navigation (desktop + mobile) */
.navigation-main.nav-pills > li > a {
    font-size: 15px !important;
    line-height: 1.4;
}

/* Accessibility: increase menu tap targets on mobile */
@media (max-width: 480px) {
    .navigation-main.nav-pills > li > a { padding: 10px 12px; font-size: 15px !important; }
}