/* ----------------- HEADER ----------------- */

.site-header {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 999;

  padding: 1.5rem 0;

  background:
    rgba(13,27,42,0.55);

  backdrop-filter: blur(18px);

  border-bottom:
    1px solid rgba(201,168,76,0.08);

  transition: var(--transition-default);

}

/* ----------------- HEADER SCROLLED ----------------- */

.site-header.scrolled {

  padding: 0.9rem 0;

  background:
    rgba(8,16,28,0.84);

  backdrop-filter:
    blur(22px);

  border-bottom:
    1px solid rgba(201,168,76,0.14);

  box-shadow:

    0 10px 40px rgba(0,0,0,0.18),

    0 1px 0 rgba(255,255,255,0.02) inset;

}

/* ----------------- HEADER WRAPPER ----------------- */

.header-wrapper {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

/* ----------------- LOGO ----------------- */

.site-logo img {

  height: clamp(36px, 4vw, 42px);

  width: auto;

  display: block;

  transition: var(--transition-default);

}

.site-header.scrolled .site-logo img {

  height: 34px;

  opacity: 0.96;

}

/* ----------------- NAVIGATION ----------------- */

.main-navigation ul {

  display: flex;

  align-items: center;

  gap: 2.5rem;

}

/* ----------------- DROPDOWN ----------------- */

.nav-dropdown {

  position: relative;

}

.nav-dropdown__toggle {

  display: inline-flex;

  align-items: center;

  gap: 0.45rem;

  color: inherit;

  font-family: inherit;

}

.nav-dropdown__toggle::before {

  content: '';

  width: 0.32rem;

  height: 0.32rem;

  border-right:
    1px solid currentColor;

  border-bottom:
    1px solid currentColor;

  transform:
    rotate(45deg)
    translateY(-1px);

  order: 2;

  opacity: 0.75;

  transition: var(--transition-default);

}

.nav-dropdown:hover .nav-dropdown__toggle::before,
.nav-dropdown:focus-within .nav-dropdown__toggle::before,
.nav-dropdown.active .nav-dropdown__toggle::before {

  transform:
    rotate(225deg)
    translateY(-1px);

}

.nav-dropdown__menu {

  position: absolute;

  top: 100%;
  right: 0;

  min-width: 220px;

  padding: 0.75rem 0;

  background:
    rgba(8,16,28,0.96);

  box-shadow:
    0 22px 55px rgba(0,0,0,0.28);

  opacity: 0;

  visibility: hidden;

  transform:
    translateY(0.5rem);

  transition: var(--transition-default);

}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.active .nav-dropdown__menu {

  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

}

.nav-dropdown__link {

  display: block;

  font-size: 0.72rem;

  padding: 0.55rem 0.9rem;

  color: var(--color-gray-light);

  text-align: right;

  text-transform: uppercase;

  white-space: nowrap;

}

.nav-dropdown__link + .nav-dropdown__link {

  border-top:
    1px solid rgba(201,168,76,0.08);

}

.nav-dropdown__link::after {

  display: none;

}

.nav-dropdown__link:hover {

  color: var(--color-gold-light);

}

/* ----------------- LINKS ----------------- */

.main-navigation .nav-link {

  position: relative;

  color: var(--color-gray-light);

  font-size: 0.72rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

  transition: var(--transition-default);

}

/* UNDERLINE */

.main-navigation .nav-link::after {

  content: '';

  position: absolute;

  left: 0;

  bottom: -0.5rem;

  width: 100%;

  height: 1.5px;

  background: var(--color-gold);

  transform: scaleX(0);

  transform-origin: left;

  transition: var(--transition-default);

}

.main-navigation .nav-link:hover::after {

  transform: scaleX(1);

}

/* HOVER */

.main-navigation .nav-link:hover {

  color: var(--color-gold-light);

}

/* CTA */

.nav-cta {

  padding: 0.9rem 1.4rem;

  border:
    var(--border-gold-soft);

  border-radius: 999px;

}


/* ----------------- ACTIVE NAV ----------------- */

.nav-link.active {

  color: var(--color-gold-light);

}

.nav-link.active::after {

  transform: scaleX(1);

}


/* ----------------- MOBILE TOGGLE ----------------- */

.mobile-toggle {

  display: none;

  position: relative;

  width: 35px;

  height: 44px;

}

.mobile-toggle span {

  position: absolute;

  left: 0;

  width: 70%;

  height: 1px;

  background: var(--color-white);

  transition: var(--transition-default);

}

.mobile-toggle span:first-child {

  top: 16px;

}

.mobile-toggle span:last-child {

  top: 26px;

}

/* ----------------- MOBILE MENU ----------------- */

.mobile-menu {

  position: fixed;

  inset: 0;

  z-index: 998;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  background:
    rgba(13,27,42,0.98);

  opacity: 0;

  visibility: hidden;

  transition: var(--transition-default);

}

.mobile-menu.active {

  opacity: 0.95;

  visibility: visible;

}

.mobile-menu nav {

  width: 100%;

  padding-right: 8vw;
  
  padding-top: 25vw;

}

.mobile-menu nav ul {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.9rem;

}

.mobile-menu__group {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.7rem;

  padding-block: 0.4rem;

}

.mobile-menu__label {

  display: inline-flex;

  align-items: center;

  gap: 0.55rem;

  color: var(--color-gold-light);

  font-size: 0.62rem;

  letter-spacing: 0.22em;

  text-transform: uppercase;

}

.mobile-menu__label::after {

  content: '';

  width: 0.34rem;

  height: 0.34rem;

  border-right:
    1px solid currentColor;

  border-bottom:
    1px solid currentColor;

  transform:
    rotate(45deg)
    translateY(-1px);

  transition: var(--transition-default);

}

.mobile-menu__group.active .mobile-menu__label::after {

  transform:
    rotate(225deg)
    translateY(-1px);

}

.mobile-menu__submenu {

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.85rem;

  max-height: 0;

  padding-top: 0;

  overflow: hidden;

  transition: var(--transition-default);

}

.mobile-menu__group.active .mobile-menu__submenu {

  max-height: 8rem;

  padding-top: 0.35rem;

}

.mobile-menu__submenu .nav-link {

  font-size: 0.68rem;

  opacity: 0.82;

}

.mobile-menu a {

  position: relative;

  color: var(--color-white);

  font-size: 0.72rem;

  letter-spacing: 0.18em;

  text-transform: uppercase;

}

/* MOBILE UNDERLINE */

.mobile-menu a::after {

  content: '';

  position: absolute;

  right: 0;

  bottom: -0.45rem;

  width: 0;

  height: 1px;

  background: var(--color-gold);

  transition: var(--transition-default);

}

.mobile-menu a:hover::after {

  width: 100%;

}

/* TOGGLE ACTIVE */

.mobile-toggle.active span:first-child {

  transform: rotate(45deg);

  top: 21px;

}

.mobile-toggle.active span:last-child {

  transform: rotate(-45deg);

  top: 21px;

}


/* ----------------- SCROLL PROGRESS ----------------- */

.scroll-progress {

  position: fixed;

  top: 0;
  left: 0;

  width: 0;

  height: 1px;

  z-index: 1001;

  background:
    linear-gradient(
      90deg,
      var(--color-gold),
      var(--color-gold-light)
    );

}


/* ----------------- HEADER LIGHT LINE ----------------- */

.site-header::after {

  content: '';

  position: absolute;

  left: 50%;

  bottom: 0;

  transform: translateX(-50%);

  width: min(1200px, 90vw);

  height: 1px;

  background:

    linear-gradient(
      90deg,
      transparent,
      rgba(201,168,76,0.16),
      transparent
    );

}