/* =========================================================================
   HEADER
   Transparent overlay header with navigation and CTA
   ========================================================================= */

.header {
  position: fixed; /* Changed from absolute to fixed for sticky behavior */
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--z-sticky);
  background-color: transparent;
  /* 160px padding on 1920px screen = 8.33vw */
  padding-inline: clamp(20px, 8.33vw, 160px);
  padding-block: clamp(16px, 1.25vw, 24px);
  transition: background-color var(--transition-base), 
              backdrop-filter var(--transition-base), 
              box-shadow var(--transition-base), 
              padding-block var(--transition-base);
}

/* Scrolled State */
.header--scrolled {
  background-color: rgba(11, 20, 43, 0.8); /* #0B142BCC equals rgba(11, 20, 43, 0.8) */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.25); /* #00000040 equals rgba(0,0,0,0.25) */
  /* Slightly compress padding when scrolled to save vertical space */
  padding-block: clamp(12px, 0.83vw, 16px);
}

.nav__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: none;
  padding-inline: 0;
}

/* Logo */
.header__logo {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: auto;
  width: auto;
  max-height: clamp(40px, 4.16vw, 80px); 
}

/* Right Side (Menu + CTA) */
.header__right {
  display: flex;
  align-items: center;
  /* 40px gap between menu and CTA */
  gap: clamp(20px, 2.08vw, 40px); 
}

/* Navigation List */
.nav__list {
  display: flex;
  align-items: center;
  /* 32px between menu items */
  gap: clamp(16px, 1.66vw, 32px); 
}

.nav__link {
  position: relative;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: clamp(10px, 0.83vw, 16px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  transition: opacity var(--transition-fast);
  text-decoration: none;
}

.nav__link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

.nav__link:hover,
.nav__link:focus-visible {
  opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 1081px) {
  header.header {
    padding-inline: 20px !important;
  }

  header.header .nav__container {
    justify-content: center !important;
    display: flex !important;
  }

  header.header .header__right {
    display: none !important; 
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

@media (max-width: 1300px) and (min-width: 1082px) {
  .header {
    padding-inline: clamp(20px, 4.33vw, 160px);
  }
}