/* Hover Effect Styles */

/* Fix for layout stability */
.navbar-nav {
  position: relative;
  /* Preserve existing styles */
  text-align: right;
}

.nav-item {
  position: relative;
  /* Add margin to prevent items from touching */
  margin: 0 5px;
  /* Prevent overflow that causes horizontal scrollbar */
  overflow: hidden;
  /* Prevent layout shifts */
  box-sizing: border-box;
}

/* Prevent layout shifts by isolating each nav item */
.navbar-nav .nav-link {
  position: relative;
  white-space: nowrap;
}

/* Base hover effect styles */
.hover-effect {
  position: relative;
  display: inline-block;
  /* Prevent layout shifts */
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-font-smoothing: subpixel-antialiased;
  /* Critical: Prevent text from wrapping or shifting */
  white-space: nowrap;
  /* Prevent any visual changes during text splitting */
  visibility: visible !important;
  text-align: center;
}

/* Allow footer links to wrap - use !important to override base styles */
.footer-nav-link.hover-effect {
  white-space: normal !important;
}

.hover-effect .word {
  white-space: nowrap;
  /* Prevent layout shifts */
  display: inline-block;
}

.hover-effect .char {
  position: relative;
  /* Prevent layout shifts */
  display: inline-block;
  transform: translateZ(0);
}

/* Cursor square effect */
.hover-effect--cursor-square .char {
  --opa: 0;
}

.hover-effect--cursor-square .char::after {
  content: '';
  width: 1ch;
  top: 0;
  left: 0;
  position: absolute;
  opacity: var(--opa);
  /* Prevent layout shifts */
  pointer-events: none;
  z-index: -1;
}

.hover-effect--cursor-square .char::after {
  background: currentColor;
  height: 100%;
}

/* Only apply hover effect on desktop */
@media (min-width: 992px) {
  /* Container for nav links to prevent layout shifts */
  .navbar-nav {
    display: flex;
    /* Center alignment for desktop */
    align-items: center;
  }

  .hover-effect {
    text-align: left;
  }
  
  /* Fix for nav items */
  .nav-item {
    /* Prevent layout shifts */
    transform: translateZ(0);
    will-change: transform;
  }
  
  /* Specific styles for nav links */
  .navbar-nav .nav-link.hover-effect {
    position: relative;
    white-space: nowrap;
    /* Prevent layout shifts */
    will-change: transform;
  }
  
  /* Fix for split characters */
  .hover-effect .char {
    /* Prevent layout shifts */
    will-change: transform, opacity;
    transform-style: preserve-3d;
  }
}