/*
 * Custom Navigation Styles for Stelvio Documentation
 * 
 * TYPE A (depth 1): Bold, uppercase (e.g., COMPONENTS)
 * TYPE A (depth 2): Normal weight, uppercase (e.g., AWS)
 * TYPE B (leaf items): Normal weight, normal case (e.g., Bucket)
 */

/* ============================================
   Custom Toggle Icons (Chevrons)
   ============================================ */

/* Container for toggle icons - inline after text */
.md-nav__toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  margin-left: 0.4em;
  color: inherit;
  flex-shrink: 0;
}

.md-nav__toggle-icon svg {
  width: 0.9em;
  height: 0.9em;
}

/* Default state: show collapsed icon, hide expanded icon */
.nav-icon-collapsed {
  display: inline-flex;
}

.nav-icon-expanded {
  display: none;
}

/* When checkbox is checked (expanded): show expanded icon, hide collapsed icon */
.md-nav__toggle:checked ~ label .nav-icon-collapsed,
.md-nav__toggle:checked ~ .md-nav__container label .nav-icon-collapsed {
  display: none;
}

.md-nav__toggle:checked ~ label .nav-icon-expanded,
.md-nav__toggle:checked ~ .md-nav__container label .nav-icon-expanded {
  display: inline-flex;
}

/* Hide the default expand icon since we're using custom chevrons */
.md-nav__item--nested > label > .md-nav__icon:last-child,
.md-nav__item--nested .md-nav__container label > .md-nav__icon:last-child {
  display: none;
}

/* ============================================
   TYPE A - Level 1: Bold Uppercase (COMPONENTS)
   ============================================ */

/* Target level-1 nested items (sections like COMPONENTS) */
.md-nav__item--level-1.md-nav__item--nested > label.md-nav__link,
.md-nav__item--level-1.md-nav__item--nested > .md-nav__container > label.md-nav__link,
.md-nav__item--level-1.md-nav__item--nested > .md-nav__container > a.md-nav__link {
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.md-nav__item--level-1.md-nav__item--nested > label.md-nav__link .md-ellipsis,
.md-nav__item--level-1.md-nav__item--nested > .md-nav__container > label.md-nav__link .md-ellipsis,
.md-nav__item--level-1.md-nav__item--nested > .md-nav__container > a.md-nav__link .md-ellipsis {
  text-transform: uppercase;
  font-weight: 700;
}

/* ============================================
   TYPE A - Level 2: Normal Weight Uppercase (AWS)
   ============================================ */

/* Target level-2 nested items (sub-sections like AWS) */
.md-nav__item--level-2.md-nav__item--nested > label.md-nav__link,
.md-nav__item--level-2.md-nav__item--nested > .md-nav__container > label.md-nav__link {
  text-transform: uppercase;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.md-nav__item--level-2.md-nav__item--nested > label.md-nav__link .md-ellipsis,
.md-nav__item--level-2.md-nav__item--nested > .md-nav__container > label.md-nav__link .md-ellipsis {
  text-transform: uppercase;
  font-weight: 400;
}

/* ============================================
   TYPE B - Leaf Items: Normal Case (Bucket, etc.)
   ============================================ */

/* Leaf items (non-nested) - ensure normal text style */
.md-nav__item:not(.md-nav__item--nested) > a.md-nav__link {
  text-transform: none;
  font-weight: 400;
}

.md-nav__item:not(.md-nav__item--nested) > a.md-nav__link .md-ellipsis {
  text-transform: none;
  font-weight: 400;
}

/* ============================================
   Collapsible Navigation Behavior
   ============================================ */

/* Hide nested nav content by default (collapsed state) */
.md-nav__item--nested > .md-nav {
  display: none;
  overflow: hidden;
}

/* Show nested nav content when checkbox is checked (expanded state) */
.md-nav__item--nested > .md-nav__toggle:checked ~ .md-nav {
  display: block;
}

/* Override the section behavior to make sections collapsible too */
.md-nav__item--section > .md-nav {
  display: none;
}

.md-nav__item--section > .md-nav__toggle:checked ~ .md-nav {
  display: block;
}

/* ============================================
   Additional Styling
   ============================================ */

/* Hierarchical Indentation */
/* Level 1 items (COMPONENTS, CONCEPTS) - no extra indent */
.md-nav__item--level-1 {
  padding-left: 0;
}

/* Level 2 items (AWS) - indent from level 1 */
.md-nav__item--level-2 {
  padding-left: 1rem;
}

/* Level 3 items (Function, Api, etc.) - indent from level 2 */
.md-nav__item--level-3,
.md-nav__item--level-2 > .md-nav > .md-nav__list > .md-nav__item {
  padding-left: 1rem;
}

/* Leaf items inside level 1 (like Linking under CONCEPTS) */
.md-nav__item--level-1 > .md-nav > .md-nav__list > .md-nav__item:not(.md-nav__item--nested) {
  padding-left: 1.5rem;
}

/* Reset nested padding */
.md-nav__item--nested .md-nav__list {
  margin-left: 0;
}

/* Active state styling for toggle icons */
.md-nav__item--active > label .md-nav__toggle-icon {
  color: var(--md-accent-fg-color);
}

/* Hover state for toggle labels */
.md-nav__item--nested > label.md-nav__link:hover .md-nav__toggle-icon {
  color: var(--md-accent-fg-color);
}

/* Style direct links (like Blog) to match section headers */
a.md-nav__link[href="/blog/"],
a.md-nav__link[href="/blog/"] .md-ellipsis {
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}