/**
 * Hover Index List Styles
 * Displays project index when hovering navigation items
 */

/* ======================
   HOVER INDEX CONTAINER
   ====================== */

.hover-index-list {
  position: fixed;
  right: 0;
  top: 0;
  width: var(--hover-index-panel-width, 300px) !important;
  height: 100vh;
  background: transparent;
  visibility: hidden;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--hover-index-animation-speed) ease,
              transform var(--hover-index-animation-speed) ease,
              visibility 0s linear var(--hover-index-animation-speed);
  z-index: 1000;
  pointer-events: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: var(--nav-height);
  scrollbar-width: none; /* Firefox */
}

/* Hide scrollbar for Chrome, Safari, Edge */
.hover-index-list::-webkit-scrollbar {
  display: none;
}

/* Show with visible class (JavaScript-controlled) */
.hover-index-list.hover-index-list--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity var(--hover-index-animation-speed) ease,
              transform var(--hover-index-animation-speed) ease,
              visibility 0s linear 0s;
  pointer-events: auto;
}

/* Ensure nav-item is positioned for absolute children */
.nav-item {
  position: relative;
}

/* Inner container with padding */
.hover-index-list__inner {
  padding: 20px;
}

/* ======================
   PROJECT LIST
   ====================== */

.hover-index-list__projects {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hover-index-list__project-item {
  padding-top: calc(var(--hover-index-item-spacing, 20px) / 2);
  padding-bottom: calc(var(--hover-index-item-spacing, 20px) / 2);
  transition: opacity 0.2s ease;
}

.hover-index-list__project-item:hover {
  opacity: 0.7;
}

/* Divider between items */
.hover-index-list__project-item:not(:last-child) {
  border-bottom-width: calc(var(--hover-index-divider-width, 1px) * var(--hover-index-divider-enabled, 0));
  border-bottom-style: solid;
  border-bottom-color: var(--hover-index-divider-color, #e5e5e5);
}

.hover-index-list__project-link {
  display: block;
  text-decoration: none;
  color: var(--theme-text-color);
}

/* ======================
   PROJECT CONTENT
   ====================== */

.hover-index-list__project-title {
  font-family: var(--font-family-primary, var(--main-font-family));
  font-size: var(--typo-size-small, var(--font-size-small));
  font-weight: var(--font-weight-primary) !important;
  line-height: var(--typo-lh-small, 1.4);
  letter-spacing: var(--typo-ls-small, 0);
  margin: 0 0 4px 0;
  color: var(--theme-text-color);
  font-style: normal !important;
}

.hover-index-list__project-meta {
  font-family: var(--font-family-primary, var(--main-font-family));
  font-size: var(--typo-size-tiny, var(--font-size-tiny));
  line-height: var(--typo-lh-tiny, 1.4);
  letter-spacing: var(--typo-ls-tiny, 0);
  font-weight: var(--font-weight-primary);
  color: var(--theme-text-color);
  margin-top: 4px;
}

.hover-index-list__project-year {
  display: inline;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: inherit;
}

.hover-index-list__project-year::after {
  content: ' ';
  margin-right: 4px;
}

.hover-index-list__project-category {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  color: inherit;
}

.hover-index-list__project-category:not(:last-child)::after {
  content: ', ';
}

/* ======================
   EMPTY STATE
   ====================== */

.hover-index-list__empty {
  font-family: var(--main-font-family);
  font-size: var(--font-size-small);
  color: var(--theme-text-color);
  opacity: 0.5;
  font-style: italic;
}

/* ======================
   SCROLLBAR STYLING
   ====================== */

/* Scrollbar is hidden - see .hover-index-list declaration above */

/* ======================
   RESPONSIVE
   ====================== */

/* Hide on mobile and tablet */
@media (max-width: 768px) {
  .hover-index-list {
    display: none !important;
  }
}

/* ======================
   ACCESSIBILITY
   ====================== */

/* Ensure keyboard focus works */
.nav-item:focus-within .hover-index-list {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  transition: opacity var(--hover-index-animation-speed) ease,
              transform var(--hover-index-animation-speed) ease,
              visibility 0s linear 0s;
  pointer-events: auto;
}

/* Remove focus outlines to match site style */
.hover-index-list__project-link:focus {
  outline: none;
}

.hover-index-list__project-link:focus-visible {
  outline: none;
}