/* Category Navigation - JavaScript-free expandable navigation with hover effect */

/* Hide checkboxes visually but keep them accessible to screen readers */
.cat-toggle,
.subcat-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Universal selector for all toggle checkboxes at any level */
.wiki-category-nav input[type="checkbox"].cat-toggle {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Style the category navigation container */
.wiki-category-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.95em;
}

/* Category items at any nesting level */
.wiki-category-item {
  margin-bottom: 3px;
  border-radius: var(--radius-sm);
  position: relative;
}

/* Ensure all nested lists have consistent styling */
.wiki-category-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Container for category link and toggle button - works at all levels */
.wiki-category-container {
  display: flex;
  align-items: stretch;
  background-color: var(--off-white);
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
}

.wiki-category-container:hover {
  background-color: var(--light-gray);
}


/* Category link styling - applies to all depths */
.wiki-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  flex: 1;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.wiki-category-link.active {
  background-color: var(--gold-light);
}

.wiki-category-link:hover {
  background-color: var(--light-gray);
}

/* Toggle button styling - MOBILE ONLY (hidden on desktop) */
.toggle-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  cursor: pointer;
  border-left: 1px solid rgba(0,0,0,0.05);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background-color: rgba(0,0,0,0.02);
  transition: background-color var(--transition-fast);
}

.toggle-button:hover {
  background-color: rgba(0,0,0,0.08);
}

/* Only show toggle button for items with children */
.wiki-category-item:not(.has-children) .toggle-button {
  display: none !important;
}

/* Modern SVG-based icons */
.cat-toggle-icon,
.subcat-toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: rgba(0,0,0,0.05);
  transition: transform var(--transition-fast), background-color var(--transition-fast);
  position: relative;
}

.cat-toggle-icon::before,
.subcat-toggle-icon::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="6,9 12,15 18,9"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  color: #666;
  transition: transform var(--transition-fast);
}

.cat-goto-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background-color: rgba(0,0,0,0.05);
  color: #555;
  transition: all var(--transition-fast);
  position: relative;
}

.cat-goto-icon::before {
  content: '';
  display: block;
  width: 14px;
  height: 14px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14,2 14,8 20,8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.wiki-category-link:hover .cat-goto-icon {
  background-color: var(--accent-blue);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ENHANCED VISUAL HIERARCHY - Progressive depth refinement */
.wiki-subcategory-nav {
  border-left: 2px solid rgba(255, 255, 255, 0.15);
  margin-left: 8px !important;
  padding-left: 12px !important;
  position: relative;
}

/* Depth-aware styling - becomes more subtle at deeper levels */
.wiki-subcategory-nav .wiki-subcategory-nav {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  font-size: 0.95em;
  opacity: 0.95;
}

.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  border-left: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.9em;
  opacity: 0.9;
}

.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  border-left: 1px dotted rgba(255, 255, 255, 0.05);
  font-size: 0.88em;
  opacity: 0.85;
}

/* Apply consistent indentation to all nested ul elements */
.wiki-category-nav ul {
  border-left: 2px solid rgba(255, 255, 255, 0.1);
  margin-left: 8px !important;
  padding-left: 12px !important;
  margin-top: 5px;
  margin-bottom: 3px;
  position: relative;
}

/* Connection lines for better hierarchy visualization */
.wiki-subcategory-nav::before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(to bottom, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(255, 255, 255, 0.05) 100%
  );
  pointer-events: none;
}

/* Micro-interactions for depth awareness */
.wiki-subcategory-nav .wiki-category-item:hover {
  transform: translateX(2px);
  transition: transform var(--transition-fast);
}

.wiki-subcategory-nav .wiki-subcategory-nav .wiki-category-item:hover {
  transform: translateX(1px);
}

.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-category-item:hover {
  transform: translateX(0.5px);
}

/* All nested navigation lists - scalable for infinite recursion */
.wiki-subcategory-nav {
  list-style: none;
  margin: 5px 0 3px 0;
  position: relative;
  /* Default state handled by media queries */
}

/* Nested wiki-subcategory-nav at ANY depth */
.wiki-subcategory-nav .wiki-subcategory-nav,
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav,
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
  list-style: none;
  position: relative;
}

/* Toggle functionality - Click-based arrows for all devices */

/* UNIVERSAL: Hide subcategories by default, expand on checkbox click */
.wiki-subcategory-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out;
}

/* Expand when checkbox is checked OR on active path */
.cat-toggle:checked ~ .wiki-subcategory-nav,
.wiki-category-item.active-path > .wiki-subcategory-nav,
.wiki-category-item.current-page > .wiki-subcategory-nav {
  max-height: 2000px;
  overflow: visible;
}

/* Ensure active paths work at all nesting levels */
.wiki-category-nav .active-path > .wiki-subcategory-nav,
.wiki-category-nav .current-page > .wiki-subcategory-nav,
.wiki-subcategory-nav .active-path > .wiki-subcategory-nav,
.wiki-subcategory-nav .current-page > .wiki-subcategory-nav {
  max-height: 2000px;
  overflow: visible;
  opacity: 1;
  visibility: visible;
}

/* Force-checked state for checkboxes in active parents at any depth */
li.active-path > input[type="checkbox"],
li.current-page > input[type="checkbox"] {
  opacity: 0.01;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Highlight current page at any depth */
li.current-page,
.wiki-category-item.current-page {
  background-color: rgba(255, 215, 0, 0.1);
}

/* Ensure current page link is highlighted at all depths */
.wiki-category-item.current-page > .wiki-category-container,
.wiki-subcategory-nav .wiki-category-item.current-page > .wiki-category-container {
  background-color: var(--gold-light) !important;
}

/* Active link highlighting at all depths */
.wiki-category-item.current-page > .wiki-category-container .wiki-category-link,
.wiki-subcategory-nav .wiki-category-item.current-page > .wiki-category-container .wiki-category-link {
  background-color: var(--gold-light) !important;
  font-weight: 600;
}

/* Highlight active links at any depth */
.wiki-category-nav a.active {
  background-color: rgba(255, 215, 0, 0.2) !important;
}

/* Force expansion of active paths */
.active-path > * ~ .wiki-subcategory-nav,
.current-page > * ~ .wiki-subcategory-nav {
  max-height: 5000px !important;
  overflow: visible !important;
  display: block !important;
}

/* Rotate toggle icons when expanded - works at any depth */
input[type="checkbox"]:checked + .wiki-category-container .cat-toggle-icon::before,
li.active-path > .wiki-category-container .cat-toggle-icon::before,
li.current-page > .wiki-category-container .cat-toggle-icon::before {
  transform: rotate(180deg);
}

input[type="checkbox"]:checked + .wiki-category-container .subcat-toggle-icon::before,
li.active-path > .wiki-category-container .subcat-toggle-icon::before,
li.current-page > .wiki-category-container .subcat-toggle-icon::before {
  transform: rotate(180deg);
}

/* Enhanced hover states for new icons */
.cat-toggle-icon:hover,
.subcat-toggle-icon:hover {
  background-color: rgba(0,0,0,0.1);
}

.cat-goto-icon:hover::before {
  filter: brightness(0) invert(1);
}

/* Remove duplicate rule */

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Focus styles for accessibility at any depth */
input[type="checkbox"]:focus + .wiki-category-container,
.wiki-category-nav a:focus,
.wiki-category-nav .toggle-button:focus {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
  outline-style: solid;
}

/* Enhanced focus visibility */
.wiki-category-nav a:focus {
  background-color: rgba(59, 130, 246, 0.1);
  border-radius: var(--radius-sm);
}

.wiki-category-nav .toggle-button:focus {
  background-color: rgba(59, 130, 246, 0.2);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* Keyboard navigation enhancements */
.wiki-category-nav [tabindex="0"]:focus-visible {
  outline: 3px solid var(--accent-blue);
  outline-offset: 2px;
}

/* Improved keyboard navigation at any depth */
.wiki-category-nav a:focus .cat-goto-icon {
  background-color: var(--accent-blue);
  color: white;
}

/* DESKTOP: REFINED STYLING FOR LARGER SCREENS */
@media (min-width: 769px) {
  /* Subtle styling for desktop */
  .toggle-button {
    cursor: pointer;
    transition: background-color var(--transition-fast);
  }
  
  .toggle-button:hover {
    background-color: rgba(0,0,0,0.08);
  }
  
  /* Clean visual separation */
  .wiki-category-container:hover {
    border-color: rgba(0,0,0,0.1);
  }
}
  
}

/* Remove specific subcategory styles - handled by universal selectors above */

/* MOBILE: LARGER TOUCH TARGETS AND VISUAL STYLING */
@media (max-width: 768px) {
  /* Larger touch targets for mobile */
  .wiki-category-item.has-children .toggle-button {
    min-width: 44px;
    min-height: 44px;
  }
  
  .wiki-category-nav a {
    padding: 12px;
    min-height: 44px;
  }
  
  /* More pronounced visual separation for touch */
  .wiki-category-container {
    border: 1px solid rgba(0,0,0,0.05);
  }
  
  .toggle-button {
    border-left: 2px solid rgba(0,0,0,0.1);
    background-color: rgba(0,0,0,0.03);
  }
  
  .toggle-button:active {
    background-color: rgba(0,0,0,0.1);
  }
  
  /* Larger icons for better touch */
  .cat-goto-icon,
  .cat-toggle-icon {
    width: 24px;
    height: 24px;
    font-size: 1em;
  }
  
  /* Visual feedback for expandable items */
  .wiki-category-item.has-children > .wiki-category-container {
    background: linear-gradient(to right, var(--off-white) calc(100% - 44px), rgba(0,0,0,0.02) calc(100% - 44px));
  }
}

/* Additional scalability rules for deep nesting */

/* Progressive indentation for visual hierarchy */
.wiki-category-nav > li > .wiki-subcategory-nav {
  padding-left: 12px !important;
}

.wiki-subcategory-nav > li > .wiki-subcategory-nav {
  padding-left: 16px !important;
}

.wiki-subcategory-nav .wiki-subcategory-nav > li > .wiki-subcategory-nav {
  padding-left: 20px !important;
}

/* After 3rd level, maintain consistent indentation */
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  padding-left: 20px !important;
}

/* Ensure proper stacking context for deeply nested elements */
.wiki-category-nav li {
  position: relative;
  z-index: 1;
}

.wiki-category-nav li li {
  z-index: 2;
}

.wiki-category-nav li li li {
  z-index: 3;
}

/* Font size adjustment for deep nesting */
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  font-size: 0.92em;
}

.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  font-size: 0.9em;
}

/* Prevent font from getting too small */
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  font-size: 0.9em;
}

/* CRITICAL: Universal rule for ALL .wiki-subcategory-nav at ANY depth */
.wiki-subcategory-nav {
  /* Ensure basic functionality at all depths */
  list-style: none !important;
  padding: 0;
  margin: 5px 0 3px 0;
  position: relative;
}

/* Universal expansion rule - this is the KEY fix */
.wiki-category-nav .cat-toggle:checked ~ .wiki-subcategory-nav,
.wiki-subcategory-nav .cat-toggle:checked ~ .wiki-subcategory-nav,
.wiki-subcategory-nav .wiki-subcategory-nav .cat-toggle:checked ~ .wiki-subcategory-nav,
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .cat-toggle:checked ~ .wiki-subcategory-nav,
/* This universal selector should catch ALL depths */
[class*="wiki"] .cat-toggle:checked ~ .wiki-subcategory-nav {
  max-height: 5000px !important;
  overflow: visible !important;
  display: block !important;
}

/* Performance optimization for deep trees */
.wiki-category-nav {
  will-change: height;
  contain: layout style;
}

.wiki-category-nav ul {
  will-change: max-height, opacity;
}

/* Optimize for deep nesting performance */
.wiki-subcategory-nav {
  contain: layout;
}

/* Reduce repaints for deeply nested items */
.wiki-category-item {
  transform: translateZ(0); /* Hardware acceleration hint */
}

/* ADVANCED PERFORMANCE OPTIMIZATIONS */

/* Virtual scrolling for extremely large trees */
.wiki-category-nav {
  contain: layout style;
  will-change: scroll-position;
  /* Enable hardware acceleration */
  transform: translateZ(0);
}

/* Optimize deep nesting rendering */
.wiki-subcategory-nav {
  contain: layout;
  /* Optimize repaints */
  backface-visibility: hidden;
}

/* Lazy loading for deeply nested items */
.wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  /* Beyond 5th level, defer rendering until needed */
  content-visibility: auto;
  contain-intrinsic-size: 0 40px;
  transition: max-height 0.15s ease-out;
}

/* Intersection observer targets for large trees */
.wiki-category-item[data-depth="5"],
.wiki-category-item[data-depth="6"],
.wiki-category-item[data-depth="7"] {
  /* These will be optimized by intersection observer if available */
  content-visibility: auto;
  contain-intrinsic-size: 0 35px;
}

/* Memory optimization for inactive deep branches */
.wiki-subcategory-nav:not(.active-path) .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  /* Limit memory footprint of inactive deep branches */
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

/* Re-enable when parent becomes active */
.wiki-subcategory-nav.active-path .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav,
.cat-toggle:checked ~ .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav .wiki-subcategory-nav {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Optimize icon rendering at scale */
.cat-toggle-icon::before,
.subcat-toggle-icon::before,
.cat-goto-icon::before {
  /* Optimize SVG rendering */
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

/* Ensure consistent behavior for all nested toggle icons */
.wiki-category-nav .cat-toggle-icon {
  font-size: 0.8em;
  transform: rotate(0);
  transition: transform var(--transition-fast);
  background-color: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
}

/* Consistent goto icon styling at all depths */
.wiki-category-nav .cat-goto-icon {
  font-size: 0.8em;
  background-color: rgba(0,0,0,0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  color: #555;
  transition: all var(--transition-fast);
}

.wiki-category-nav a:hover .cat-goto-icon {
  background-color: var(--accent-blue);
  color: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}