/* ==========================================================================
   1. GLOBAL STYLING SYSTEM RESET
   ========================================================================== */
.navigation-bar,
.navigation-bar ul,
.navigation-bar li {
  list-style: none !important;
  list-style-type: none !important;
  padding: 0 !important;
  margin: 0 !important;
  font-family: system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

/* Clear formatting properties from the loose structural triangle containers */
.navigation-bar > ul > li > span {
  font-size: 11px !important;
  color: #64748b !important;
}

/* Hide all submenus universally at page load startup */
.navigation-bar ul ul {
  display: none !important;
}

/* ==========================================================================
   2. DESKTOP HOVER SYSTEM (SCREENS 769px OR WIDER / DEVICES WITH A MOUSE)
   ========================================================================== */
@media (min-width: 769px) {
  .navigation-bar {
    display: flex !important;
    flex-direction: row !important;
    gap: 12px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 12px 20px !important;
    position: relative !important;
    z-index: 99999 !important;
  }

  .navigation-bar > ul {
    position: relative !important;
  }

  /* The Merged Header Button Layout Structure (Accessories & Bikes) */
  .navigation-bar > ul > li {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 16px !important;
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    user-select: none !important;
    font-size: 15px !important;
    font-weight: 600 !important;
  }

  /* Toggle dark mode color themes when main category heading is hovered */
  .navigation-bar > ul > li:hover {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
  }

  .navigation-bar > ul > li:hover > span {
    color: #ffffff !important;
  }

  /* Float Level 1 dropdown columns absolutely on computer screens */
  .navigation-bar > ul > li > ul {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 250px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    padding: 8px 0 !important;
    z-index: 100000 !important;
    margin-top: 0 !important; /* Close gap prevents vanishing sub-panels */
    border-radius: 4px !important;
  }

  /* Reveal Level-1 sub-lists on mouse hover tracks */
  .navigation-bar > ul > li:hover > ul {
    display: block !important;
  }

  .navigation-bar > ul > li > ul > li {
    position: static !important; /* Vital constraint keeping right flyouts aligned */
    padding: 10px 20px !important;
    color: #333 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }

  .navigation-bar > ul > li > ul > li:hover {
    background-color: #e8f0fe !important;
    color: #1a73e8 !important;
  }

  /* Float Level 2 side-panels out seamlessly adjacent to right edge */
  .navigation-bar .subcats {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important; /* Stretches box height flush to copy main menu column height */
    left: 100% !important;
    width: 260px !important;
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    padding: 8px 0 !important;
    z-index: 101000 !important;
    overflow-y: auto !important; /* Internal scroll handle safe fallback for massive lists */
    border-radius: 4px !important;
  }

  /* Reveal deep flyout columns on row container hovers */
  .navigation-bar > ul > li > ul > li:hover > .subcats {
    display: block !important;
  }

  .navigation-bar .subcat {
    display: block !important;
    padding: 8px 20px !important;
    color: #555 !important;
    font-size: 14px !important;
  }

  .navigation-bar .subcat:hover {
    background-color: #f4f4f4 !important;
    color: #000 !important;
  }
  
  /* Force-closes the desktop menu immediately when an item is clicked */
  .navigation-bar > ul > li.force-close > ul,
  .navigation-bar > ul > li.force-close .subcats {
    display: none !important;
  }

}

/* ==========================================================================
   3. MOBILE ACCORDION CONFIGURATION (SCREENS 768px OR NARROWER)
   ========================================================================== */
@media (max-width: 768px) {
  /* Collapse rows into stacked categories on mobile screens */
  .navigation-bar {
    display: block !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 15px !important;
  }

  .navigation-bar > ul {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important; /* Space between closed tab button sets */
  }

  /* Main Category Button Strip Layout Row */
  .navigation-bar > ul > li {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    color: #1e293b !important;
    background-color: #f1f5f9 !important;
    border-radius: 6px !important;
    border: 1px solid #e2e8f0 !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
  }

  .navigation-bar > ul > li > span {
    float: right !important; /* Anchors dropdown arrow cleanly to the right edge */
    line-height: 18px !important;
  }

  /* Toggle dark highlight mode color theme directly via JavaScript script class */
  .navigation-bar > ul > li.js-open {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: #0f172a !important;
    border-radius: 6px 6px 0 0 !important; /* Flattens base corners when dropdown expands */
  }
  
  .navigation-bar > ul > li.js-open > span {
    color: #ffffff !important;
  }

  /* Level 1 Submenu: Drops open vertically inline beneath the header button container */
  .navigation-bar > ul > li.js-open > ul {
    display: block !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    background: #ffffff !important;
    padding: 4px 0 !important;
    border-radius: 0 0 6px 6px !important; /* Rounds base corners of expanded card block box */
  }

  .navigation-bar > ul > li > ul > li {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    color: #333333 !important;
    font-weight: 500 !important;
    font-size: 15px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    cursor: pointer !important;
  }
  
  /* Cleans trailing border line on final rows */
  .navigation-bar > ul > li > ul > li:last-child {
    border-bottom: none !important;
  }

  /* Level 2 Subcats Inline Reveal: Triggered via script class matching */
  .navigation-bar > ul > li > ul > li.js-open > .subcats {
    display: block !important;
    width: 100% !important;
    position: static !important;
    box-shadow: none !important;
    border: none !important;
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 8px !important;
    padding: 4px 0 !important;
    background: #fafafa !important; /* Tinted background for the inner options track list */
  }

  .navigation-bar .subcat {
    display: block !important;
    padding: 10px 16px 10px 24px !important; /* Left padding indent alignment */
    color: #555555 !important;
    font-size: 14px !important;
  }
}