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

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

.hover-index-list {
  position: fixed;
  top: var(--hover-index-position-top, 0);
  right: var(--hover-index-position-right, auto);
  bottom: var(--hover-index-position-bottom, auto);
  left: var(--hover-index-position-left, auto);
  width: var(--hover-index-width, var(--hover-index-panel-width, 300px)) !important;
  height: var(--hover-index-height, 100vh);
  background: var(--hover-index-background, transparent);
  visibility: hidden;
  opacity: 0;
  transform: var(--hover-index-transform-hidden, 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(--hover-index-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: var(--hover-index-transform-visible, translateX(0));
  transition: opacity var(--hover-index-animation-speed) ease,
              transform var(--hover-index-animation-speed) ease,
              visibility 0s linear 0s;
  pointer-events: none; /* Keep container non-interactive */
}

/* Enable pointer events only on the inner content */
.hover-index-list.hover-index-list--visible .hover-index-list__inner {
  pointer-events: auto;
}

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

/* Inner container with padding */
.hover-index-list__inner {
  padding: var(--hover-index-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: var(--hover-index-transform-visible, translateX(0));
  transition: opacity var(--hover-index-animation-speed) ease,
              transform var(--hover-index-animation-speed) ease,
              visibility 0s linear 0s;
  pointer-events: none; /* Keep container non-interactive */
}

/* Enable pointer events on inner content for keyboard focus */
.nav-item:focus-within .hover-index-list .hover-index-list__inner {
  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;
}

/* ======================
   DIRECTION VARIANTS
   ====================== */

/* Right (default) */
[data-hover-index-direction="right"] {
  --hover-index-position-top: 0;
  --hover-index-position-right: 0;
  --hover-index-position-bottom: auto;
  --hover-index-position-left: auto;
  --hover-index-width: var(--hover-index-panel-width, 300px);
  --hover-index-height: 100vh;
  --hover-index-transform-hidden: translateX(100%);
  --hover-index-transform-visible: translateX(0);
  --hover-index-padding-top: var(--nav-height);
}

/* Left */
[data-hover-index-direction="left"] {
  --hover-index-position-top: 0;
  --hover-index-position-right: auto;
  --hover-index-position-bottom: auto;
  --hover-index-position-left: 0;
  --hover-index-width: var(--hover-index-panel-width, 300px);
  --hover-index-height: 100vh;
  --hover-index-transform-hidden: translateX(-100%);
  --hover-index-transform-visible: translateX(0);
  --hover-index-padding-top: var(--nav-height);
}

/* Bottom */
[data-hover-index-direction="bottom"] {
  --hover-index-position-top: auto;
  --hover-index-position-right: 0;
  --hover-index-position-bottom: 0;
  --hover-index-position-left: 0;
  --hover-index-width: 100%;
  --hover-index-height: var(--hover-index-panel-width, 300px);
  --hover-index-transform-hidden: translateY(100%);
  --hover-index-transform-visible: translateY(0);
  --hover-index-padding-top: 20px;
}

/* Top */
[data-hover-index-direction="top"] {
  --hover-index-position-top: 0;
  --hover-index-position-right: 0;
  --hover-index-position-bottom: auto;
  --hover-index-position-left: 0;
  --hover-index-width: 100%;
  --hover-index-height: var(--hover-index-panel-width, 300px);
  --hover-index-transform-hidden: translateY(-100%);
  --hover-index-transform-visible: translateY(0);
  --hover-index-padding-top: var(--nav-height);
}

/* ======================
   DISABLED NAV LINK
   ====================== */

.nav-link--disabled {
  cursor: default;
  user-select: none;
}

/* Subtle visual indicator */
.nav-item.nav-link-disabled .nav-link--disabled {
  opacity: 0.9;
}

/* Ensure hover index still works when link is disabled */
.nav-item.nav-link-disabled[data-has-index]:hover .hover-index-list,
.nav-item.nav-link-disabled[data-has-index]:focus-within .hover-index-list {
  opacity: 1;
  visibility: visible;
  transform: var(--hover-index-transform-visible, translateX(0));
  pointer-events: none; /* Keep container non-interactive */
}

/* Enable pointer events on inner content for disabled link state */
.nav-item.nav-link-disabled[data-has-index]:hover .hover-index-list .hover-index-list__inner,
.nav-item.nav-link-disabled[data-has-index]:focus-within .hover-index-list .hover-index-list__inner {
  pointer-events: auto;
}