/* alter-navbar.css */
@import url('/app/global.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', 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;
}

body {
  font-family: var(--font-inter) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
}

body.navbar-open .logo-container-records {
    display: none !important;
}

.alter-header[style*="display: none"] .logo-container-records {
  display: block !important;
  position: fixed !important;
  top: 20px !important;
  left: 20px !important;
  z-index: 100001 !important;
}

/* Hide the regular navbar by default - JavaScript will control visibility */
.header:not(.alter-header) {
  display: none;
}

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

/* Alternative Header Styles - BACK TO STICKY */
.alter-header {
  position: sticky !important;
  position: -webkit-sticky !important; /* Safari support */
  z-index: 99999 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  background-color: white !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 0 0 rgba(0, 0, 0, 0) !important;
}

/* SPOTLIGHT LAYOUT OVERRIDE - Make it ignore the sticky navbar */
.spotlight-layout {
  margin-top: 0px !important; /* Negative margin to pull it up behind the navbar */
  position: relative !important;
  z-index: 1 !important; /* Lower than navbar, so navbar stays on top */
  transition: none !important; /* No transition - instant change */
}

/* When menu is open, reset margin-top to 0 */
body:has(.navbar-overlay[style*="opacity: 1"]) .spotlight-layout,
body.navbar-open .spotlight-layout {
  margin-top: 0px !important;
  transition: none !important; /* Ensure no transition during menu state changes */
}

/* Force spotlight layout positioning with maximum specificity */
body .spotlight-layout,
html body .spotlight-layout {
  position: relative !important;
  transform: translateY(0) !important;
  top: 0 !important;
  transition: none !important;
}

/* Override any inline styles that might conflict */
.spotlight-layout[style*="transform"],
.spotlight-layout[style*="top"] {
  transform: translateY(0) !important;
  top: 0 !important;
}

/* Alternative: If you want to target specific elements within spotlight-layout */
.spotlight-layout .navbar-overlay {
  padding-top: 90px !important;
}

/* BANNER LAYOUT OVERRIDE - Make it ignore the sticky navbar */
.banner {
  margin-top: -90px !important; /* Negative margin to pull it up behind the navbar */
  position: relative !important;
  z-index: 1 !important; /* Lower than navbar, so navbar stays on top */
  transition: none !important; /* No transition - instant change */
}

/* When menu is open, reset margin-top to 0 */
body:has(.navbar-overlay[style*="opacity: 1"]) .banner,
body.navbar-open .banner {
  margin-top: 0px !important;
  transition: none !important; /* Ensure no transition during menu state changes */
}

/* Force banner layout positioning with maximum specificity */
body .banner,
html body .banner {
  position: relative !important;
  transform: translateY(0) !important;
  top: 0 !important;
  transition: none !important;
}

/* Override any inline styles that might conflict */
.banner[style*="transform"],
.banner[style*="top"] {
  transform: translateY(0) !important;
  top: 0 !important;
}

/* Alternative: If you want to target specific elements within banner-layout */
.banner .navbar-overlay {
  padding-top: 90px !important;
}

/* Alternative: If the loading bar has a specific height, use this approach */
.top-loading-bar ~ .alter-container {
  top: var(--loading-bar-height, -0.15rem) !important;
}

/* Drop shadow on scroll with backdrop blur */
.alter-header.scrolled {
  /* box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25) !important; */
  /* backdrop-filter: blur(10px) !important; */
  /* Safari support */
  /* -webkit-backdrop-filter: blur(10px) !important; */
}

.alter-container {
  height: 90px !important; /* orig: 100px */
  display: flex !important;
  align-items: flex-start !important; /* Change from center to flex-start */
  justify-content: space-between !important;
  padding: 0 !important; /* Remove all padding since we're using absolute positioning */
  position: relative !important;
  letter-spacing: 0;
  background-color: white;
}

/* Logo Container - match original navbar positioning exactly */
.alter-logo-container {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  width: 50px !important;
  height: 50px !important;
  pointer-events: auto !important;
  z-index: 100001 !important;
}

.alter-logo-container a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.alter-logo-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* Menu Button - position to match original navbar menu positioning */
.alter-menu-button {
  font-family: var(--font-inter) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  color: #4C4C4C !important;
  cursor: pointer !important;
  transition: color 0.3s ease !important;
  background: none !important;
  border: none !important;
  position: absolute !important;
  /*Orig: 20px*/
  /* top: 15px !important;  */
  top: 35px !important; 
  right: 44px !important; /* 20px + 24px (1.5rem) to move it left */
  z-index: 100001 !important;
  /* Match logo height for alignment */
  /* height: 60px !important;  */
  display: flex !important;
  align-items: center !important;
}

.alter-menu-button:hover {
  color: #000000 !important;
  font-weight: 500 !important;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), letter-spacing 0.3s ease !important;
}






































/* Making alter-navbar.css responsive on all devices */

/* Desktop | 1281px - 1440px  */
@media (max-width: 1280px) {
  /* None, coded on macbook m1 pro */
}

/* Medium Laptop/Desktop | 1515px - 1920px */
@media (max-width: 1515px) {
 /* None, coded on macbook m1 pro */
}

/* Small Laptop/Desktop | 1024px - 1280px */
@media (max-width: 1024px) {
  /* None, coded on macbook m1 pro */
}

/* Mobile Small Portrait | up to 480px */
@media (max-width: 480px) and (orientation: portrait) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

 .header:not(.alter-header) { /*Show ONLY alter navbar at first*/
   display: none !important;
 }

 .navbar-open .header:not(.alter-header) { /*Show navbar when I click on MENU*/
   display: block !important;
 }

 .navbar-open button#alterMenuButton.alter-menu-button { /*Remove that "MENU" when navbar is open*/
  display: none !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container {
   display: flex !important;
   position: fixed !important;

   top: 25px !important;
   right: 25px !important;
 }

  .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
  .navbar-open .header:not(.alter-header) .nav-links-container a:active {
    background-color: transparent; /*Playing around making hover to touch (.js > function initMobileNavBehavior and openNavbar fiexd it)*/
  }

  /* ADJUST EACH PAGE INDIVIDUALLY HERE TO GET RID OF BUGS */

  .navbar-open .spotlight-left-panel { /* Space between header and clicked image */
    margin-top: 60px;
  }

  .navbar-open .music-black-bar-submenu.active {
    padding-right: 0px !important;
  }

 .logo-container {
   display: none !important;
 }

 .navbar-open .sound-footer {
   margin-bottom: -750px !important;
   margin-right: -5px !important;
   z-index: 100 !important;
 }

 .navbar-open #navLinks {
  z-index: 100 !important;
 }
 
  body {
    max-height: 100vh !important;
  }
  
  .alter-header {
    background-color: transparent !important;
    height: 0px !important;
  }
 
 .alter-container {
   height: 0px !important;
   background-color: transparent !important;
 }
 
  .alter-logo-container {
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Only on /records pages, make it wider */
  [class*="records-page"] .alter-logo-container {
    top: 20px !important;
    left: 20px !important;
    width: 120px !important;
    height: 40px !important;
  }
 
 .alter-menu-button {
   top: 7px !important;
   right: 35px !important;
   font-size: 0.875rem !important;
   height: 55px !important;
 }
 
 .spotlight-layout {
   margin-top: -70px !important;
 }
 
 .banner {
   margin-top: -70px !important;
 }

 /* Mobile Menu Content */
 .navbar-open .alter-header {
   display: block !important;
   background-color: white !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
 }

 .navbar-open span.submenu-separator {
  margin: 0 !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a {
   font-family: var(--font-inter) !important;
   font-size: 0.875rem !important;
   font-weight: 400 !important;
   color: #4C4C4C !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   letter-spacing: 0.025em !important;
   transition: color 0.3s ease !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a.active {
   color: #000000 !important;
   font-weight: 500 !important;
 }
}

/* Mobile Large Portrait | 481px - 600px */
@media (min-width: 481px) and (max-width: 600px) and (orientation: portrait) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

 .header:not(.alter-header) {
   display: none !important;
 }

 .navbar-open .header:not(.alter-header) {
   display: block !important;
 }

 .navbar-open button#alterMenuButton.alter-menu-button {
  display: none !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container {
   display: flex !important;
   position: fixed !important;
   top: 28px !important;
   right: 28px !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a:active {
   background-color: transparent;
 }

 .navbar-open .music-black-bar-submenu.active {
   padding-right: 0px !important;
 }

 .logo-container {
   display: none !important;
 }

 .navbar-open .sound-footer {
   margin-bottom: -750px !important;
   margin-right: -5px !important;
   z-index: 100 !important;
 }

 .navbar-open #navLinks {
  z-index: 100 !important;
 }
 
 .alter-header {
   display: block !important;
   height: 0px !important;
   background-color: transparent !important;
 }
 
 .alter-container {
   height: 0px !important;
   background-color: transparent !important;
 }
 
  .alter-logo-container {
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Only on /records pages, make it wider */
  [class*="records-page"] .alter-logo-container {
    top: 20px !important;
    left: 20px !important;
    width: 120px !important;
    height: 40px !important;
  }
 
 .alter-menu-button {
   top: 8px !important;
   right: 38px !important;
   font-size: 0.85rem !important;
   height: 58px !important;
 }
 
 .spotlight-layout {
   margin-top: -75px !important;
 }
 
 .banner {
   margin-top: -75px !important;
 }

 .navbar-open .alter-header {
   display: block !important;
   background-color: white !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
 }

 .navbar-open span.submenu-separator {
  margin: 0 !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a {
   font-family: var(--font-inter) !important;
   font-size: 0.9rem !important;
   font-weight: 400 !important;
   color: #4C4C4C !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   letter-spacing: 0.025em !important;
   transition: color 0.3s ease !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a.active {
   color: #000000 !important;
   font-weight: 500 !important;
 }

  /* ADJUST EACH PAGE INDIVIDUALLY HERE TO GET RID OF BUGS */

  .navbar-open .spotlight-left-panel {
    margin-top: 3.95rem;
  }
}

/* Mobile Small Landscape | up to 950px */
@media (max-width: 950px) and (orientation: landscape) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

 .header:not(.alter-header) {
   display: none !important;
 }

 .navbar-open .header:not(.alter-header) {
   display: block !important;
 }

 .navbar-open button#alterMenuButton.alter-menu-button {
  display: none !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container {
   display: flex !important;
   position: fixed !important;
   top: 22px !important;
   right: 22px !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a:active {
   background-color: transparent;
 }

 .navbar-open .music-black-bar-submenu.active {
   padding-right: 0px !important;
 }

 .logo-container {
   display: none !important;
 }

 .navbar-open .sound-footer {
   margin-bottom: -650px !important;
   margin-right: -5px !important;
   z-index: 100 !important;
 }

 .navbar-open #navLinks {
  z-index: 100 !important;
 }
 
 .alter-header {
   display: block !important;
   height: 0px !important;
   background-color: transparent !important;
 }
 
 .alter-container {
   height: 0px !important;
   background-color: transparent !important;
 }
 
  .alter-logo-container {
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Only on /records pages, make it wider */
  [class*="records-page"] .alter-logo-container {
    top: 20px !important;
    left: 20px !important;
    width: 120px !important;
    height: 40px !important;
  }
 
 .alter-menu-button {
   top: 10px !important;
   right: 30px !important;
   font-size: 0.75rem !important;
   height: 50px !important;
 }
 
 .spotlight-layout {
   margin-top: -65px !important;
 }
 
 .banner {
   margin-top: -65px !important;
 }

 .navbar-open .alter-header {
   display: block !important;
   background-color: white !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
 }

 .navbar-open span.submenu-separator {
  margin: 0 !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a {
   font-family: var(--font-inter) !important;
   font-size: 0.8rem !important;
   font-weight: 400 !important;
   color: #4C4C4C !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   letter-spacing: 0.025em !important;
   transition: color 0.3s ease !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a.active {
   color: #000000 !important;
   font-weight: 500 !important;
 }

  /* ADJUST EACH PAGE INDIVIDUALLY HERE TO GET RID OF BUGS */

  .navbar-open .spotlight-left-panel {
    margin-top: 1.68rem;
  }

  .navbar-open .spotlight-right-panel {
    margin-top: 1.68rem;
  }
}

/* Tablet Portrait | 601px - 1024px */
@media (min-width: 601px) and (max-width: 1024px) and (orientation: portrait) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

 .header:not(.alter-header) {
   display: none !important;
 }

 .navbar-open .header:not(.alter-header) {
   display: block !important;
 }

 .navbar-open button#alterMenuButton.alter-menu-button {
  display: none !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container {
   display: flex !important;
   position: fixed !important;
   top: 30px !important;
   right: 30px !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a:active {
   background-color: transparent;
 }

 .navbar-open .music-black-bar-submenu.active {
   padding-right: 0px !important;
 }

 .logo-container {
   display: none !important;
 }

 .navbar-open .sound-footer {
   margin-bottom: -850px !important;
   margin-right: -5px !important;
   z-index: 100 !important;
 }

 .navbar-open #navLinks {
  z-index: 100 !important;
 }
  
 .alter-header {
   display: block !important;
   height: 0px !important;
   background-color: transparent !important;
 }
 
 .alter-container {
   height: 0px !important;
   background-color: transparent !important;
 }
 
  .alter-logo-container {
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Only on /records pages, make it wider */
  [class*="records-page"] .alter-logo-container {
    top: 20px !important;
    left: 20px !important;
    width: 120px !important;
    height: 40px !important;
  }
 
 .alter-menu-button {
   top: 12px !important;
   right: 40px !important;
   font-size: 0.9rem !important;
   height: 50px !important;
 }
 
 .spotlight-layout {
   margin-top: -80px !important;
 }
 
 .banner {
   margin-top: -80px !important;
 }

 .navbar-open .alter-header {
   display: block !important;
   background-color: white !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
 }

 .navbar-open span.submenu-separator {
  margin: 0 !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a {
   font-family: var(--font-inter) !important;
   font-size: 0.95rem !important;
   font-weight: 400 !important;
   color: #4C4C4C !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   letter-spacing: 0.025em !important;
   transition: color 0.3s ease !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a.active {
   color: #000000 !important;
   font-weight: 500 !important;
 }

  /* ADJUST EACH PAGE INDIVIDUALLY HERE TO GET RID OF BUGS */

  .navbar-open .spotlight-left-panel {
    margin-top: 3.95rem;
  }
}

/* Tablet Landscape | 951px - 1366px */
@media (min-width: 951px) and (max-width: 1366px) and (orientation: landscape) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

 .header:not(.alter-header) {
   display: none !important;
 }

 .navbar-open .header:not(.alter-header) {
   display: block !important;
 }

 .navbar-open button#alterMenuButton.alter-menu-button {
  display: none !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container {
   display: flex !important;
   position: fixed !important;
   top: 32px !important;
   right: 32px !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a:active {
   background-color: transparent;
 }

 .navbar-open .music-black-bar-submenu.active {
   padding-right: 0px !important;
 }

 .logo-container {
   display: none !important;
 }

 .navbar-open .sound-footer {
   margin-bottom: -700px !important;
   margin-right: -5px !important;
   z-index: 100 !important;
 }

 .navbar-open #navLinks {
  z-index: 100 !important;
 }
  
 .alter-header {
   display: block !important;
   height: 0px !important;
   background-color: transparent !important;
 }
 
 .alter-container {
   height: 0px !important;
   background-color: transparent !important;
 }
 
  .alter-logo-container {
    top: 15px !important;
    left: 15px !important;
    width: 40px !important;
    height: 40px !important;
  }

  /* Only on /records pages, make it wider */
  [class*="records-page"] .alter-logo-container {
    top: 20px !important;
    left: 20px !important;
    width: 120px !important;
    height: 40px !important;
  }
 
 .alter-menu-button {
   top: 13px !important;
   right: 40px !important;
   font-size: 0.85rem !important;
   height: 50px !important;
 }
 
 .spotlight-layout {
   margin-top: -85px !important;
 }
 
 .banner {
   margin-top: -85px !important;
 }

 .navbar-open .alter-header {
   display: block !important;
   background-color: white !important;
   box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
 }

 .navbar-open span.submenu-separator {
  margin: 0 !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a {
   font-family: var(--font-inter) !important;
   font-size: 0.85rem !important;
   font-weight: 400 !important;
   color: #4C4C4C !important;
   text-decoration: none !important;
   text-transform: uppercase !important;
   letter-spacing: 0.025em !important;
   transition: color 0.3s ease !important;
 }

 .navbar-open .header:not(.alter-header) .nav-links-container a:hover,
 .navbar-open .header:not(.alter-header) .nav-links-container a.active {
   color: #000000 !important;
   font-weight: 500 !important;
 }

  /* ADJUST EACH PAGE INDIVIDUALLY HERE TO GET RID OF BUGS */

  .navbar-open .spotlight-left-panel {
    margin-top: 27px;
  }

  .navbar-open .spotlight-right-panel {
    margin-top: 27px;
  }
}

/* Fallback for any touch device */
@media (hover: none) and (pointer: coarse) {

  /* adding '.records-page' applies the color change to '/records' only */

  .records-page .alter-menu-button {
    color: #B3B3B3 !important;
  }

  .records-page .alter-menu-button:hover {
    color: white !important;
  }

  .records-page span.smoothen-text-animated::before {
    content: "" !important; /* This is required */
    color: black !important;
  }

  /**************************************************/

  .header:not(.alter-header) {
    display: none !important;
  }
  
  .alter-header {
    display: block !important;
  }
}