/* navbar.css */
@import url('/tailwind.css');
@import url('/fonts.css');

:root {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 0 !important;
  font-variation-settings: normal !important;
  -webkit-tap-highlight-color: transparent !important;
  /* --font-inter: 'Inter', sans-serif !important; */
  --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;

  -webkit-text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
  -ms-text-size-adjust: 100% !important;

  perspective: 1000px !important;
  font-kerning: normal !important;
}

/*  */
/* Maybe play around with scrollbar? */
/*  */

html {
  overflow-x: hidden !important;
}

body {
  font-family: var(--font-inter) !important;
}

.header {
  position: sticky !important;
  z-index: 99999 !important;
  top: 0 !important; /* Offset, otherwise it won't stick! */
  left: 0 !important; /* Offset, otherwise it won't stick! */
  right: 0 !important; /* Offset, otherwise it won't stick! */
  bottom: 0 !important; /* Offset, otherwise it won't stick! */
}

* .header {
  margin: 0 !important;
  padding: 0 !important;
}

.container {
  height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

.logo-container {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  width: 50px !important;
  height: 50px !important;
  pointer-events: auto !important;
  /* z-index: 1001; */
}

.nav-links-container {
  position: absolute !important;
  top: 35px !important; /* Original size was 40px */
  right: 35px !important; /* Original size was 40px */
  pointer-events: auto !important;
  /* z-index: 1001 !important; */
}

.sound-footer {
  position: absolute !important;
  bottom: 35px !important; /* Original size was 40px */
  right: 31px !important; /* Original size was 35px */
  pointer-events: auto !important;
  transform: rotate(-90deg) !important;
  transform-origin: bottom right !important;
  display: flex !important;
  /* align-items: center !important; */
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-size: 0.875rem !important;
  margin-bottom: -725px !important;
  /* z-index: 7777 !important; */
}

/* Navigation Links Styling */
#navLinks {
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
}

#navLinks li {
  list-style: none !important;
  margin-bottom: 0.625rem !important;
}

#navLinks li::before {
  display: none !important;
  content: none !important;
}

/* Navigation rotation animation */
.link.nav-rotation {
  font-family: var(--font-inter) !important;
  display: inline-block !important;
  overflow: hidden !important;
  padding-right: 0.5em !important;
  -webkit-text-size-adjust: 100% !important;
  perspective: 1000px !important;
  text-shadow: 0 0 1px #00000003 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
}

.link.nav-rotation span {
  color: #4C4C4C !important;
  position: relative !important;
  display: inline-block !important;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), letter-spacing 0.3s ease !important;
  letter-spacing: 0 !important;
}

.link.nav-rotation span::before {
  position: absolute !important;
  white-space: nowrap !important;
  top: 100% !important;
  content: attr(data-hover) !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-weight: 500 !important;
  transform: translateZ(0) !important;
}

.link.nav-rotation:hover span,
.link.nav-rotation:focus span,
.link.nav-rotation.active span {
  transform: translateY(-100%) !important;
  color: #000000 !important;
}

/* Sound Toggle Styles */
.sound-text {
  color: #4C4C4C;
  cursor: pointer;
  transition: color 0.3s ease;
}

.sound-text:hover {
    color: #000000 !important;
}

.sound-link {
  display: inline-block !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  transform: translateZ(0) !important;
  width: auto !important;
  min-width: 40px !important;
  text-align: center !important;
  position: relative !important;
}

.sound-link span {
  position: relative !important;
  display: inline-block !important;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s ease !important;
  backface-visibility: hidden !important;
  will-change: transform !important;
  min-width: 40px !important;
  text-align: center !important;
  width: 100% !important;
}

.sound-link span::before {
  position: absolute !important;
  white-space: nowrap !important;
  top: 100% !important;
  content: attr(data-hover) !important;
  font-weight: 500 !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 100% !important;
  text-align: center !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateZ(0) !important;
}

.sound-link:hover span,
.sound-link:focus span,
.sound-link.active span {
  transform: translateY(-100%) !important;
  color: #000000 !important;
}

/* Submenu Styles */
.nav-item-with-submenu {
  white-space: nowrap !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

.nav-item-with-submenu:hover .music-black-bar-submenu {
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}

/* Responsive Design */
/* @media (max-width: 768px) {
  .logo-container {
      top: 16px !important;
      left: 16px !important;
      width: 50px !important;
      height: 50px !important;
  }

  .nav-links-container {
      top: 20px !important;
      right: 20px !important;
  }

  .sound-footer {
      bottom: 20px !important;
      right: 20px !important;
      margin-bottom: 80px !important;
  }
} */

/* Submenu Styles */
.music-black-bar-submenu {
  position: absolute !important;
  transform: translateY(-6%) !important; /* Adjust submenu up and down */
  top: 0 !important;
  right: 110% !important;
  visibility: hidden !important;
  /* z-index: 30 !important; */
  overflow: hidden !important;
  padding-right: 10px !important; /* Keep consistent padding */
}

.music-black-bar-submenu.active {
  visibility: visible !important;
  opacity: 1 !important;
}

.nav-item-with-submenu:hover .music-black-bar-submenu {
  visibility: visible !important;
  opacity: 1 !important;
  transition-delay: 0s !important;
}

.music-submenu-black-bar {
  background-color: black !important;
  height: 22px !important;
  padding: 0 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  white-space: nowrap !important;
  transform: translateX(110%) !important; /* Start off-screen */
  transition: transform 0.5s cubic-bezier(1,0,0,1) !important;
  will-change: transform !important;
}

/* When active, slide in from right to left */
.music-black-bar-submenu.active .music-submenu-black-bar {
  transform: translateX(0) !important;
}

/* When closing, slide back out to the right */
.music-black-bar-submenu.closing .music-submenu-black-bar {
  transform: translateX(110%) !important;
}

.music-black-bar-submenu.closing {
  visibility: visible !important;
  opacity: 1 !important;
}

.music-submenu-content {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Submenu links styling with animation */
.submenu-link {
  color: #B2B2B2 !important;
  margin: 0 0.15rem !important;
  transition: color 0.3s ease !important;
  text-decoration: none !important;
  font-weight: 400 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  overflow: hidden !important;
}

/* New rotation animation for submenu links */
.submenu-link.submenu-rotation {
  display: inline-block !important;
  overflow: hidden !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}

.submenu-link.submenu-rotation span {
  position: relative !important;
  display: inline-block !important;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), color 0.3s ease !important;
  color: #B2B2B2 !important;
  overflow: visible !important; /* Prevent text cutoff */
  padding-right: 1px !important; /* Ensure full visibility */
}

.submenu-link.submenu-rotation span::before {
  position: absolute !important;
  white-space: nowrap !important;	
  top: 100% !important;
  left: 0 !important;
  content: attr(data-hover) !important;
  font-weight: 500 !important;
  transform: translateZ(0) !important;
  color: #FFFFFF !important;
  width: 100% !important;
  padding-right: 1px !important;
}

.submenu-link.submenu-rotation:hover span {
  transform: translateY(-100%) !important;
  color: #FFFFFF !important;
}

.submenu-separator {
  margin: 0 0.25rem !important;
  color: #B2B2B2 !important;
  font-weight: 500 !important;
  opacity: 1 !important;
}

/* Hover bridge styles */
.hover-bridge {
  position: absolute !important;
  width: 10px !important;
  height: 100% !important;
  /* z-index: 25 !important; */
  background-color: transparent !important;
  pointer-events: auto !important;
  left: -10px !important;
  top: 0 !important;

  visibility: hidden !important;
  opacity: 0 !important;
}

.nav-item-with-submenu:hover .hover-bridge {
  visibility: visible !important;
  opacity: 1 !important;
}

/* General Layout Styles */
.top-0 {
  top: 0 !important;
}

.top-5 {
  top: 1.25rem !important;
}

.left-5 {
  left: 1.25rem !important;
}

.right-0 {
  right: 0 !important;
}

.right-9 {
  right: 2.25rem !important;
}

.bottom-5 {
  bottom: 1.25rem !important;
}

.z-40 {
  z-index: 40 !important;
}

.z-50 {
  z-index: 50 !important;
}

.h-screen {
  height: 100vh !important;
}

.w-fit {
  width: fit-content !important;
}

.flex {
  display: flex !important;
}

.inline-block {
  display: inline-block !important;
}

.inline-flex {
  display: inline-flex !important;
}

.flex-col {
  flex-direction: column !important;
}

.items-end {
  align-items: flex-end !important;
}

.items-center {
  align-items: center !important;
}

.justify-between {
  justify-content: space-between !important;
}

/* .space-y-2\.5 > * + * {
  margin-top: 0.625rem !important;
} */

.space-y-2\.5 {
    --tw-space-y-reverse: 0;
}

.space-y-2\.5 > * + * {
    margin-top: 0.625rem; /* 10px - consistent spacing */
    margin-bottom: 0;
}

.nav-spacing > * + * {
    margin-top: 0.2rem;
    margin-bottom: 0;
}

.space-y-4 > * + * {
  margin-top: 1rem !important;
}

.ml-2\.5 {
  margin-left: 0.625rem !important;
}

.pr-10 {
  padding-right: 2.5rem !important;
}

.pt-10 {
  padding-top: 2.5rem !important;
}

.pb-10 {
  padding-bottom: 2.5rem !important;
}

.text-sm {
  font-size: 0.875rem !important;
}

.uppercase {
  text-transform: uppercase !important;
}

.tracking-wide {
  letter-spacing: 0.025em !important;
}

.tracking-wider {
  letter-spacing: 0.05em !important;
}

.text-\[\#4c4c4c\] {
  color: #4c4c4c !important;
}

.text-black {
  color: #000000 !important;
}

.font-avant-garde {
  font-family: 'Avant Garde', sans-serif !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

.relative {
  position: relative !important;
}

.text-center {
  text-align: center !important;
}