/*
  Colordance shared CSS
  Purpose: global header/menu/footer behavior only.
  Do NOT put page-specific rules here unless they are safely scoped and intentionally consolidated.
*/

:root {
  --header-h: 74px;
  --footer-h: 86px;
  --gold: #d6aa62;
  --nav-font: "Montserrat", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
  --body-font: "Inter", "Helvetica Neue", Arial, sans-serif;
}

.site-header {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: var(--header-h) !important;
  z-index: 20 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: clamp(18px, 3.6vw, 58px) !important;
  padding-right: clamp(18px, 3.6vw, 58px) !important;
  background: linear-gradient(to bottom, rgba(3,3,3,.78), rgba(3,3,3,.34) 72%, rgba(3,3,3,0)) !important;
  backdrop-filter: blur(10px) !important;
  overflow: visible !important;
}

.header-brand {
  position: absolute !important;
  left: clamp(18px, 3.6vw, 58px) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 1px !important;
  font-family: var(--nav-font) !important;
  font-weight: 600 !important;
  letter-spacing: .095em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.76) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.72) !important;
  line-height: 1.04 !important;
  user-select: none !important;
  pointer-events: none !important;
  white-space: nowrap !important;
  z-index: 12 !important;
}

.header-brand .brand-top,
.header-brand .brand-bottom {
  font-size: 12px !important;
  letter-spacing: .095em !important;
  color: rgba(255,255,255,.76) !important;
  line-height: 1.04 !important;
}

.header-brand-cn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  letter-spacing: .12em !important;
  text-transform: none !important;
}

.header-brand-cn span {
  font-size: 15px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.primary-nav {
  position: absolute !important;
  left: 50% !important;
  top: 0 !important;
  height: var(--header-h) !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  max-width: calc(100vw - 430px) !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(22px, 4.2vw, 78px) !important;
  font-family: var(--nav-font) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

.nav-item,
.nav-item.has-dropdown,
.nav-item .nav-link,
.primary-nav > .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.nav-link,
.language-toggle a {
  color: rgba(255,255,255,.90) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.70) !important;
}

.nav-link {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  padding: 26px 0 23px !important;
}

.nav-link::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 17px !important;
  height: 2px !important;
  background: var(--gold) !important;
  transform: scaleX(0) !important;
  transform-origin: center !important;
  transition: transform .18s ease !important;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after {
  transform: scaleX(1) !important;
}

.primary-nav:hover .nav-link.is-active::after {
  transform: scaleX(0) !important;
}

.primary-nav:hover .nav-link:hover::after,
.primary-nav:hover .nav-link:focus-visible::after,
.primary-nav:hover .nav-link.is-active:hover::after,
.primary-nav:hover .nav-link.is-active:focus-visible::after {
  transform: scaleX(1) !important;
}

.site-header > .language-toggle {
  position: absolute !important;
  right: clamp(18px, 3.6vw, 58px) !important;
  top: 0 !important;
  height: var(--header-h) !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-family: var(--nav-font) !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: .045em !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.64) !important;
  z-index: 20 !important;
}

.site-header > .language-toggle a,
.site-header > .language-toggle span {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

.primary-nav .language-toggle {
  display: none !important;
}

.nav-item.has-dropdown {
  position: relative !important;
}

.films-dropdown {
  position: absolute !important;
  left: 50% !important;
  top: calc(100% - 14px) !important;
  transform: translateX(-50%) translateY(8px) !important;
  min-width: 190px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(210,160,74,.35) !important;
  border-radius: 10px !important;
  background: rgba(6,5,4,.88) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.36) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.nav-item.has-dropdown:hover .films-dropdown,
.nav-item.has-dropdown:focus-within .films-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

.films-dropdown a {
  display: block !important;
  padding: 8px 10px !important;
  color: rgba(255,255,255,.82) !important;
  text-decoration: none !important;
  font-size: 12px !important;
  letter-spacing: .04em !important;
  white-space: nowrap !important;
}

.films-dropdown a:hover {
  color: #fff !important;
}

.site-footer {
  position: fixed !important;
  z-index: 20 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  min-height: var(--footer-h) !important;
  display: grid !important;
  justify-items: center !important;
  gap: 10px !important;
  padding: 12px 18px 18px !important;
  background: linear-gradient(to top, rgba(3,3,3,.90), rgba(3,3,3,.58) 72%, rgba(3,3,3,0)) !important;
  font-family: var(--body-font) !important;
}

.social-links {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(26px, 5vw, 58px) !important;
}

.social-link {
  width: 25px !important;
  height: 25px !important;
  display: grid !important;
  place-items: center !important;
  color: rgba(214,170,98,.72) !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease !important;
}

.social-link svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  display: block !important;
}

.social-link:hover,
.social-link:focus-visible {
  color: #f0c879 !important;
  transform: translateY(-1px) !important;
}

.copyright {
  font-size: 12px !important;
  letter-spacing: .04em !important;
  color: rgba(255,255,255,.38) !important;
  text-align: center !important;
  font-weight: 300 !important;
}

.copyright a {
  color: inherit !important;
  text-decoration: none !important;
}

@media (max-width: 1100px), (max-aspect-ratio: 4/5) {
  .header-brand,
  .header-brand-cn {
    display: none !important;
  }

  .site-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .primary-nav {
    left: 50% !important;
    right: auto !important;
    width: auto !important;
    max-width: calc(100vw - 120px) !important;
    transform: translateX(-50%) !important;
    justify-content: center !important;
    font-size: 13px !important;
    gap: clamp(18px, 3.2vw, 34px) !important;
    letter-spacing: .012em !important;
  }

  .site-header > .language-toggle {
    right: 8px !important;
    font-size: 13px !important;
    gap: 3px !important;
  }
}

@media (max-width: 760px) {
  .primary-nav {
    left: calc(50% - 12px) !important;
    max-width: calc(100vw - 96px) !important;
    font-size: 12px !important;
    gap: clamp(10px, 2.2vw, 20px) !important;
    letter-spacing: .004em !important;
  }

  .site-header > .language-toggle {
    font-size: 12px !important;
    right: 7px !important;
  }
}

@media (max-width: 560px) {
  .primary-nav {
    left: calc(50% - 14px) !important;
    max-width: calc(100vw - 82px) !important;
    font-size: 10.8px !important;
    gap: clamp(5px, 1.2vw, 10px) !important;
  }

  .site-header > .language-toggle {
    font-size: 10.8px !important;
    right: 5px !important;
    gap: 2px !important;
  }
}

@media (max-width: 420px) {
  .primary-nav {
    left: calc(50% - 16px) !important;
    max-width: calc(100vw - 74px) !important;
    font-size: 9.7px !important;
    gap: 3px !important;
    letter-spacing: 0 !important;
  }

  .site-header > .language-toggle {
    font-size: 9.7px !important;
    right: 4px !important;
    gap: 1px !important;
  }
}