/*
 * Navigation Styles - OPTIMIZED
 *
 * Comprehensive navigation menu styling for ValueOfGain theme.
 * Includes main menu, submenu dropdowns, mobile responsive, and dynamic Reports menu.
 *
 * Mobile-first approach: Base styles for mobile, desktop enhancements in media query.
 * Theme colors: Uses --mkt-lightgray and --mkt-gray from customizer
 * Icons: Material Design Icons (MDI)
 * Class naming: mkt- (kebab-case) convention
 *
 * OPTIMIZATION NOTES:
 * - Consolidated duplicate styles between location-list and markets-list
 * - Unified icon system using CSS cascade (no complex :not() chains needed)
 * - Icon precedence: locked > favorite > recent variants > default > expired
 */

/* ===================================
   MDI Icon Variables
   =================================== */
:root {
  --mkt-mdi-heart: '\F02D1';    /* heart - favorites */
  --mkt-mdi-locked: '\F033e';   /* lock - access restricted */
  --mkt-mdi-recent: '\F0996';   /* progress-clock - 5-14 days */
  --mkt-mdi-recent: '\F0A10';   /* rhombus */
  --mkt-mdi-recent: '\F04F9';   /* tag */
  --mkt-mdi-star: '\F04CE';     /* star - fresh content */
}

/* ===================================
   Main Navigation Container
   =================================== */

.main-navigation {
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  flex-grow: 1;
  align-items: end;
  background: rgb(var(--mkt-primary, black));
  color: rgb(var(--mkt-background, white));
}

/* Mobile Menu Toggle Button */
.menu-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  max-width: 19rem;
  min-width: 15rem;
  border: none;
  cursor: pointer;
  padding: 0.5rem 2rem;
  color: inherit;
  background: rgb(var(--mkt-primary, black));
  font-size: 1rem;
  font-weight: 600;
}

.menu-toggle::after {
  content: '\F035C';
  font-family: 'Material Design Icons';
  font-size: 1.5rem;
  display: inline-block;
}

.main-navigation .menu-toggle-container {
  background: rgb(var(--mkt-lightgray));
  padding: 0 1rem;
}

/* ===================================
   Mobile Menu Container
   =================================== */

.primary-menu-container {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: rgb(var(--mkt-primary));
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  /*max-width: 20rem;*/
  width: 100%;
  position: relative;
  z-index: 999;
}

.main-navigation.toggled .primary-menu-container {
  display: block;
}

/* ===================================
   Menu Lists
   =================================== */

.primary-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 1rem;
  gap: 0;
}

.primary-menu li {
  border-top: 1px solid rgb(var(--mkt-border-color));
  position: relative;
  list-style: none;
}

.primary-menu li:last-child {
  border-bottom: none;
}

/* ===================================
   Menu Links
   =================================== */

.primary-menu a {
  max-width: 18rem;
  color: inherit;
  text-decoration: none;
  margin-left: auto;
  padding: 1rem 2rem;
  display: block;
  transition: color 0.3s;
}


.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation.toggled ul {
  display: block;
}

/* Mobile nested menu indentation */
.main-navigation.toggled ul ul a {
  padding-left: 2rem;
}

.main-navigation.toggled ul ul ul a {
  padding-left: 3rem;
}

.main-navigation.toggled ul ul li a::before {
  content: '–';
  margin-right: 0.5rem;
  opacity: 0.5;
}

/* ===================================
   Submenu Dropdowns
   =================================== */

.main-navigation ul ul {
  display: none;
}

.main-navigation.toggled ul ul {
  display: none; /* Hidden by default, expanded via .submenu-open */
}

/* Show submenu when user taps the toggle button */
.main-navigation.toggled li.submenu-open > ul {
  display: block;
}

.main-navigation ul li.focus > ul,
.main-navigation ul li:focus-within > ul {
  display: block;
}

.main-navigation li.menu-item-has-children > a::after {
  content: '\F0140'; /* mdi-menu-down */
  font-family: 'Material Design Icons';
  font-size: 1.25rem;
  float: right;
  padding-right: 1rem;
}

.main-navigation li li.menu-item-has-children > a::after {
  /*padding-right: 1rem;*/
}

.main-navigation li.menu-item-has-children.focus > a::after,
.main-navigation li.menu-item-has-children:focus-within > a::after {
  transform: rotate(180deg);
}

/* ===================================
   UNIFIED NAVIGATION ICONS
   Uses CSS cascade for precedence (no complex :not() chains needed)
   Order: Default → Recent variants → Favorites → Locked (highest priority)
   =================================== */

/* Base icon styles for ALL navigation menus */
.main-navigation a::before,
.mkt-location-list a::before,
.mkt-markets-list a::before {
  font-family: 'Material Design Icons';
  font-size: 1.375rem;
  font-size: 1rem;
  font-weight: normal;
  color: inherit;
  display: inline-block;
  margin-right: 0.25rem;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

.main-navigation a::before {
  font-size: 1.375rem;
}

/* Horizontal menus use slightly smaller icons */
.mkt-location-list li > a::before,
.mkt-markets-list li > a::before {
  /*font-size: 1.375rem;*/
  /*margin-right: .25rem;*/
  color: rgb(var(--mkt-success));
}

/* Horizontal menus use slightly smaller icons */
.mkt-location-list li.mkt-locked > a::before,
.mkt-markets-list li.mkt-locked > a::before {
  /*font-size: 1.375rem;*/
  /*margin-right: .25rem;*/
  /*color: rgb(var(--mkt-error));*/
}


/* DEFAULT: 5-14 days old - Clock icon (applied to all items initially) */
.main-navigation .mkt-state-item > a::before,
.main-navigation .mkt-unlocked > a::before,
.mkt-location-list li > a::before,
.mkt-markets-list li > a::before {
  /*content: var(--mkt-mdi-recent);*/
  /*color: rgb(var(--mkt-success));*/
  /*opacity: 0.5;*/
}

/*.main-navigation .mkt-state-item > a:hover::before,*/
.main-navigation .mkt-recent > a:hover::before,
.main-navigation .mkt-unlocked > a:hover::before,
.mkt-location-list li > a:hover::before,
.mkt-markets-list li > a:hover::before {
  color: rgb(var(--mkt-success));
  /*opacity: 0.8;*/
}

/* RECENT-3: 4+ days - Star with low opacity (overrides default) */
.main-navigation .mkt-recent-3 > a::before,
.mkt-location-list .mkt-recent-3 > a::before,
.mkt-markets-list .mkt-recent-3 > a::before {
  content: var(--mkt-mdi-recent);
  /*color: rgb(var(--mkt-primary));*/
  opacity: 0.2;
}

/* RECENT-2: 4 days - Star with medium-low opacity */
.main-navigation .mkt-recent-2 > a::before,
.mkt-location-list .mkt-recent-2 > a::before,
.mkt-markets-list .mkt-recent-2 > a::before {
  content: var(--mkt-mdi-recent);
  /*color: rgb(var(--mkt-primary));*/
  opacity: 0.3;
}

/* RECENT-1: 3 days - Star with medium opacity */
.main-navigation .mkt-recent-1 > a::before,
.mkt-location-list .mkt-recent-1 > a::before,
.mkt-markets-list .mkt-recent-1 > a::before {
  content: var(--mkt-mdi-recent);
  /*color: rgb(var(--mkt-primary));*/
  opacity: 0.6;
}

/* RECENT: 1-2 days - Star with full opacity */
.main-navigation .mkt-recent > a::before,
.mkt-location-list .mkt-recent > a::before,
.mkt-markets-list .mkt-recent > a::before {
  content: var(--mkt-mdi-recent);
  /*color: rgb(var(--mkt-primary));*/
  opacity: 1;
}

/* FAVORITES/STARRED: Heart icon (overrides all freshness indicators) */
.main-navigation .mkt-favorite-item > a::before,
.main-navigation .mkt-starred > a::before,
.mkt-location-list .mkt-starred > a::before,
.mkt-markets-list .mkt-starred > a::before {
  /*content: var(--mkt-mdi-heart);*/
  /*color: rgb(var(--mkt-primary));*/
  /*opacity: 1;*/
}

/* LOCKED: Lock icon (HIGHEST priority - overrides everything) */
.main-navigation .mkt-locked > a::before,
.mkt-location-list .mkt-locked > a::before,
.mkt-markets-list .mkt-locked > a::before {
  content: var(--mkt-mdi-locked);
  color: rgb(var(--mkt-error));
  opacity: 1;
  /*color: rgb(var(--mkt-error, 153, 153, 153));*/
  /*opacity: 1;*/
  /*font-size: 1.2rem;*/
}

/* EXPIRED: No icon - just styling changes */
/*.main-navigation .mkt-expired > a::before,
.main-navigation .mkt-inactive > a::before,
.mkt-location-list .mkt-expired > a::before,
.mkt-markets-list .mkt-expired > a::before {
  content: none;
}*/

/* Expired/Inactive item styling */
.main-navigation .mkt-expired > a,
.main-navigation .mkt-inactive > a {
  color: rgb(var(--mkt-surface));
  opacity: 0.5;
}

.mkt-location-list .mkt-expired > a,
.mkt-markets-list .mkt-expired > a {
  color: rgba(var(--mkt-header-text), 0.5);
}

/* Locked item styling and hover states */
.main-navigation .mkt-locked > a,
.mkt-location-list .mkt-locked > a,
.mkt-markets-list .mkt-locked > a {
  /*opacity: 0.7;*/
  /*cursor: not-allowed;*/
}

.main-navigation .mkt-locked > a:hover::before,
.mkt-location-list .mkt-locked > a:hover::before,
.mkt-markets-list .mkt-locked > a:hover::before {
  color: rgb(var(--mkt-error, 211, 47, 47));
  opacity: 1;
}

/* Legacy support - specific starred items in show-locked context */
.main-navigation .mkt-show-locked .mkt-starred .mkt-unlocked.mkt-recent > a::before {
  margin-left: 0;
}

/* ===================================
   Desktop Navigation (960px+)
   =================================== */

@media screen and (min-width: 960px) {

  /* Hide mobile toggle button */
  .menu-toggle,
  .main-navigation .menu-toggle-container {
    display: none;
  }

  /* Show desktop menu */
  .primary-menu-container {
    display: block;
    position: static;
    box-shadow: none;
    background: rgb(var(--mkt-background));
  }

  .primary-menu {
    flex-direction: row;
    padding: 0;
    gap: 1.5rem;
  }

  .primary-menu li {
    border-top: none;
  }

  
  .primary-menu a {
    /*padding: 1.5rem;*/
  }

  .primary-menu a:hover,
  .primary-menu a:focus {
    color: rgb(var(--mkt-primary));
  }

  .main-navigation ul {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
  }



  .main-navigation li {
    background: rgb(var(--mkt-background));
  }
  
  /* Float top-level items horizontally */
  .main-navigation > div > ul > li {
    float: left;
    position: relative;
    background: rgb(var(--mkt-background));
  }
  
  /* Top-level link styling */
  .main-navigation > div > ul > li > a {
    padding: 1rem 1.25rem;
    border-radius: var(--mkt-border-radius);
    min-width: 12rem;
    text-align: left;
    color: rgb(var(--mkt-header-text));
    border-bottom: none;
    font-weight: 600;
  }

  .main-navigation > div > ul > li.menu-item-has-children > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  
  .main-navigation > div > ul > li > a:hover,
  .main-navigation > div > ul > li > a:focus {
    background: rgb(var(--mkt-secondary));
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Dropdown indicator for desktop */
  .main-navigation > div > ul > li.menu-item-has-children > a::after {
    content: '\F0140'; /* mdi-chevron-down */
    font-family: 'Material Design Icons';
    padding-left: 0.5rem;
    float: none;
    position: relative;
    top: 2px;
    font-size: 1.25em;
  }
  
  /* Remove rotation on desktop (dropdowns show on hover) */
  .main-navigation > div > ul > li.menu-item-has-children.focus > a::after,
  .main-navigation > div > ul > li.menu-item-has-children:hover > a::after {
    transform: none;
  }

  .main-navigation li li.menu-item-has-children > a::after {
    display: none;
  }
  
  /* ===================================
     Desktop Dropdown Submenus
     =================================== */
  
  .main-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    width: 100%;
    background: rgb(var(--mkt-primary));
    border: 0px solid rgb(var(--mkt-primary));
    border-radius: var(--mkt-border-radius);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    box-shadow: 0 4px 12px rgba(var(--mkt-primary), 0.15);
    padding: 0;
    padding-bottom: max(var(--mkt-border-radius, 0.5rem));
    margin-top: 0;
  }
  
  /* Bridge the gap between parent and submenu with pseudo-element */
  .main-navigation li.menu-item-has-children:hover::after,
  .main-navigation li.menu-item-has-children.focus::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 4px;
    background: transparent;
  }
  
  .main-navigation li:hover > a,
  .main-navigation li.focus > a {
    background: rgb(var(--mkt-secondary));
    color: rgb(var(--mkt-header-text));
  }

  /* Show dropdown on hover/focus */
  .main-navigation li:hover > ul,
  .main-navigation li.focus > ul,
  .main-navigation li:focus-within > ul {
    display: block;
  }
  
  /* Third-level dropdowns (to the right) */
  .main-navigation ul ul ul {
    top: calc(max(var(--mkt-border-radius, 0.5rem)) * -1);;
    right: 100%;
    margin-left: 0;
    margin-top: 0;
    padding-top: max(var(--mkt-border-radius, 0.5rem));
    border-top-left-radius: var(--mkt-border-radius);
    border-top-right-radius: var(--mkt-border-radius);
  }
  
  /* Submenu item styling */
  .main-navigation ul ul li {
    width: 100%;
    background: transparent;
  }
  
  .main-navigation ul ul a {
    padding: 0.625rem 1.25rem;
    text-align: left;
    border-bottom: none;
    transition: all 0.2s ease;
  }
  
  .main-navigation ul ul .mkt-locked > a,
  .main-navigation ul ul .mkt-recent > a {
    padding-left: 2rem;
  }

  .main-navigation ul ul a:hover,
  .main-navigation ul ul a:focus {
    background: rgb(var(--mkt-secondary));
    padding-left: 1.75rem;
  }

  .main-navigation ul ul .mkt-locked > a:hover,
  .main-navigation ul ul .mkt-recent > a:hover {
    padding-left: 2.5rem;
  }
  
  /* Remove mobile indentation prefix */
  .main-navigation ul ul li a::before {
    content: none;
  }
  
  /* Icon positioning for desktop dropdowns - reset to relative positioning */
  /*.main-navigation ul ul .mkt-favorite-item > a::before,
  .main-navigation ul ul .mkt-starred > a::before,
  .main-navigation ul ul .mkt-state-item > a::before,
  .main-navigation ul ul .mkt-unlocked > a::before,*/
  .main-navigation ul ul .mkt-recent > a::before,
  .main-navigation ul ul .mkt-recent-1 > a::before,
  .main-navigation ul ul .mkt-recent-2 > a::before,
  .main-navigation ul ul .mkt-recent-3 > a::before,
  .main-navigation ul ul .mkt-locked > a::before {
    /*position: relative;*/
    position: absolute;
    left: .375rem; /*0;*/
    top: .375rem;
    transform: none;
  }
  
  /* Parent items with children - smooth connection to dropdown */
  .main-navigation > div > ul > li.menu-item-has-children:hover > a,
  .main-navigation > div > ul > li.menu-item-has-children.focus > a {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: none;
  }
}

/* ===================================
   Horizontal Navigation Menus (Shared Styles)
   Location & Market Lists
   =================================== */

/* Navigation Container */
.mkt-location-nav {
  margin: 1rem 0;
  width: 100%;
}

/* Shared container styles for horizontal menus */
.mkt-location-list-container,
.mkt-markets-list-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

.mkt-location-list-container {
  margin-bottom: 1rem;
}

/* Shared list styles for horizontal menus */
.mkt-location-list,
.mkt-markets-list {
  list-style-type: none;
  white-space: nowrap;
  margin: 0;
  /*padding: 0;*/
  padding: 0.25em 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.mkt-location-list {
  /*padding: 0.25em 0;*/
}

/* Shared list item styles */
.mkt-location-list li,
.mkt-markets-list li {
  display: inline-block;
  list-style: none;
}

/* Shared link styles */
.mkt-location-list a,
.mkt-markets-list a {
  display: inline-block;
  padding: 0 1em;
  font-weight: 600;
  color: rgb(var(--mkt-header-text));
  text-decoration: none;
  border-radius: var(--mkt-border-radius);
  transition: all 0.2s ease;
  position: relative;
}

/*.mkt-location-list a {
  font-weight: 600;
}*/

/* Shared hover styles */
.mkt-location-list a:hover,
.mkt-location-list .mkt-expired > a:hover,
.mkt-markets-list a:hover {
  background: rgb(var(--mkt-secondary));
  color: rgb(var(--mkt-background));
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}

/* View label styling (— Feeder, — Replacement) */
.mkt-nav-view-label {
  opacity: 0.8;
  font-size: 0.9em;
}

/* ===================================
   Dark Mode Support
   =================================== */

   /*
body.dark-mode .main-navigation {
  background: rgb(var(--mkt-darkgray));
}

body.dark-mode .main-navigation a {
  color: rgb(var(--mkt-lightgray));
}

body.dark-mode .main-navigation a:hover,
body.dark-mode .main-navigation a:focus {
  background: rgb(var(--mkt-gray));
}

body.dark-mode .main-navigation .mkt-expired > a,
body.dark-mode .main-navigation .mkt-inactive > a {
  color: rgb(var(--mkt-gray));
  opacity: 0.6;
}

body.dark-mode .mkt-location-list a:hover,
body.dark-mode .mkt-markets-list a:hover {
  background: rgb(var(--mkt-gray));
}

body.dark-mode .mkt-location-list .mkt-expired > a,
body.dark-mode .mkt-markets-list .mkt-expired > a {
  color: rgb(var(--mkt-gray));
  opacity: 0.6;
}

@media screen and (min-width: 960px) {
  body.dark-mode .main-navigation ul ul {
    background: rgb(var(--mkt-darkgray));
    border-color: rgb(var(--mkt-gray));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  }
} */