/**
 * File: header-top-nav-shared.css
 * Purpose: Shared styles for top navigation UI across both desktop and mobile headers.
 * Usage: Used in both `.desktop-top-nav` and `.mobile-top-nav` components.
 * Dependencies: Works alongside `header-top-nav-desktop.css` and `header-top-nav-mobile.css`.
 *
 * Contents:
 * - Scoped variables for `.top-nav`
 * - Shared base layout for `.menu-bar`
 * - Icon font overrides (account, wishlist, login/logout)
 *
 * Notes:
 * - Avoid placing desktop- or mobile-specific layout styles here.
 * - This file handles structure and styling that is reused across both views.
 *
 * Key Class Targets:
 * - `.menu-bar`, `.menu-item`
 * - `.menu-bar-account-icon:before`, `.menu-bar-login-icon:before`, `.menu-bar-wishlist-icon:before`
 */



/* ---------------------------- */
/* ----- Scoped Variables ----- */
/* ---------------------------- */

.top-nav {
  --top-nav-bar-bg-color:var(--brown-medium);
  --top-nav-link-color: var(--tan-lightest);
  --top-nav-link-hover-color: var(--brand-orange-medium);
  --top-nav-regular-icon-set: var(--fa-style-family-classic);
  --top-nav-social-icon-set: var(--fa-style-family-brands);
}



/* ========================================================= */
/* ===  Base Menu Bar Styling =========================== */
/* ========================================================= */
  
.menu-bar {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0px;
  justify-content: space-around;
}

.menu-bar.display-left{
  justify-content: flex-start;
}

.menu-bar.display-right{
  justify-content: flex-end;
}

.menu-bar-item {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.menu-bar-item i {
  margin-right: 5px;
}




/* ========================================================= */
/* ===  Icon Font Content Overrides ====================== */
/* ========================================================= */

.menu-bar .menu-bar-logout-icon:before,
.menu-bar .menu-bar-login-icon:before {
  font-family: ETmodules;
  font-size: 1.4em;
  font-weight: 400;
  position: relative;
  top: 2px;
}

.menu-bar .menu-bar-wishlist-icon:before {
  font-family: tinvwl-webfont;
  font-size: 1.85em;
  font-weight: 400;
  position: relative;
  top: 2px;
  line-height: 1.1em;
}

.menu-bar .menu-bar-account-icon:before {
  content: '';
  font-family: FontAwesome;
  font-size: 1.7em;
  position: relative;
  top: 2px;
}

.menu-bar .menu-bar-logout-icon:before {
  content: '\e06d';
}

.menu-bar .menu-bar-login-icon:before {
  content: '\e06c';
}

.menu-bar .menu-bar-wishlist-icon:before {
  content: '\e908';
}