/* Basic list reset to remove default styles */
nav ul,
nav li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Styles for the main navigation bar */
.main-nav > ul {
  display: flex;
  flex-direction: row;
  gap: 0.5rem; /* 8px */
}

/* Styles for all navigation links */
.nav-link {
  transition: all 0.2s ease-in-out;
  display: inline-block;

  border: 1px dotted white;
  width: 150px;
  height: 40px;
  box-sizing: border-box;

  background-repeat: no-repeat;
  background-size: contain;
}

.nav-link .text {
  font-size: 14px;
  position: absolute;
  text-decoration: none;
  color: white;
  bottom: 1px;
  right: 1px;
  width: calc(100% - 1px);
  box-sizing: border-box;
  padding: 2px 2px 2px 0;
  background-color: rgba(64, 64, 64, 0.5);
  text-align: right;
}

.nav-link:hover .text {
  color: orange;
  text-shadow: 1px 1px solid rgba(0, 0, 0, 0.5);
}


/* Position the nav items for dropdowns */
.nav-item {
    position: relative;
}

/* The key to a CSS-only dropdown: position and visibility */
.dropdown-list {
    display: none;
    position: absolute;

    z-index: 10;
    flex-direction: column;
    gap: 0.25rem; /* 4px */
}

/* The dropdown menu appears when the parent li is hovered */
.nav-item:hover > .dropdown-list {
    display: flex; /* Use flex to control the children's layout */
}

/* Position for multi-level dropdowns to the side */
.dropdown-list .nav-item .dropdown-list {
    top: 0;
    left: 100%;
}

.nav-item .user-hangar { background-image: url('/assets/exported/FleetToggleArt.png'); background-size: cover; }

.Home { background-image: url('/assets/cubedweb/nav_backgrounds/planet.png'); }
.Hangars { background-image: url('/assets/cubedweb/nav_backgrounds/hangar_window.png'); }
.Fleet { background-image: url('/assets/cubedweb/nav_backgrounds/units_in_flight.png'); }
.Equipment { background-image: url('/assets/cubedweb/nav_backgrounds/chip_equipment.png'); }
.Implants { background-image: url('/assets/cubedweb/nav_backgrounds/chip_implant.png'); }
.Tools { background-image: url('/assets/cubedweb/nav_backgrounds/spanner.png'); }
.Hangar_Admin { background-image: url('/assets/cubedweb/nav_backgrounds/satellite.png'); }
.Hangar_Upload { background-image: url('/assets/cubedweb/nav_backgrounds/upload.png'); }
.Unit_Detail { background-image: url('/assets/cubedweb/nav_backgrounds/ship_turret.png'); }
.Level_Up_Calc, .Level_Up_Calculator { background-image: url('/assets/cubedweb/nav_backgrounds/level_up.png'); }
.Bounties, .Bounty_Data { background-image: url('/assets/cubedweb/nav_backgrounds/bounties.png'); }
.Anomalies, .Anomaly_Data { background-image: url('/assets/cubedweb/nav_backgrounds/anomolies.png'); }
.Upgrades, .Upgrade_Data { background-image: url('/assets/cubedweb/nav_backgrounds/upgrades.png'); }
.Equipment_Farm { background-image: url('/assets/cubedweb/nav_backgrounds/equipment_farm.png'); }
.Factions { background-image: url('/assets/cubedweb/nav_backgrounds/faction_index.png'); }
.Guides { background-image: url('/assets/cubedweb/nav_backgrounds/guides.png'); }
.Guide_Howto { background-image: url('/assets/cubedweb/nav_backgrounds/how_to.png'); }
.Guide_Dispatch { background-image: url('/assets/cubedweb/nav_backgrounds/dispatch.png'); }
.Guide_FactionOperations { background-image: url('/assets/cubedweb/nav_backgrounds/faction_ops.png'); }
.Guide_Abyss { background-image: url('/assets/cubedweb/nav_backgrounds/abyss.png'); }
.Guide_BountyBosses { background-image: url('/assets/cubedweb/nav_backgrounds/bounty_bosses.png'); }
.Guide_Campaign { background-image: url('/assets/cubedweb/nav_backgrounds/campaign.png'); }
.Guide_AllianceVault { background-image: url('/assets/cubedweb/nav_backgrounds/vault.png'); }
.Guide_ArenaPvP { background-image: url('/assets/cubedweb/nav_backgrounds/arena.png'); }
.Unit_Finder { background-image: url('/assets/cubedweb/nav_backgrounds/unit_finder.png'); }

.Marauders { background-image: url('/assets/Faction\ Backgrounds/Marauders.png'); background-size: cover; }
.Terran_Combine { background-image: url('/assets/Faction\ Backgrounds/Terran Combine.png'); background-size: cover; }
.Atlas_Syndicate { background-image: url('/assets/Faction\ Backgrounds/Atlas Syndicate.png'); background-size: cover; }
.Binderburg { background-image: url('/assets/Faction\ Backgrounds/binderburg 1.png'); background-size: cover; }
.Gelecek { background-image: url('/assets/Faction\ Backgrounds/Gelecek.png'); background-size: cover; }
.MPL { background-image: url('/assets/Faction\ Backgrounds/MPL.png'); background-size: cover; }
.Frontier_Legion { background-image: url('/assets/Faction\ Backgrounds/Frontier Legion.png'); background-size: cover; }
.XAOC { background-image: url('/assets/Faction\ Backgrounds/XAOC.png'); background-size: cover; }
.Tianchao { background-image: url('/assets/Faction\ Backgrounds/Tianchao.png'); background-size: cover; }
.Everliving { background-image: url('/assets/Faction\ Backgrounds/Everliving.png'); background-size: cover; }
.Khajiit { background-image: url('/assets/Faction\ Backgrounds/Khajiit.png'); background-size: cover; }