/*
  Final header interaction contract.
  This file is intentionally loaded after page CSS so page-local header rules
  cannot break nav, logo, social, or dropdown hover behavior.
*/

body header .logo.logo-image {
  opacity: 1 !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

body header .logo.logo-image:hover,
body header .logo.logo-image.is-hovered {
  opacity: .84 !important;
}

body header .header-social {
  color: var(--header-nav-link-color) !important;
  transition: transform .18s ease, border-color .18s ease, color .18s ease !important;
}

body header .header-social:hover,
body header .header-social.is-hovered {
  transform: translateY(-1px) !important;
  border-color: var(--social-hover-border-color) !important;
  color: var(--social-hover-color) !important;
}

body header .header-social.soundcloud:hover,
body header .header-social.soundcloud.is-hovered {
  color: var(--social-soundcloud-color) !important;
}

body header .header-social.instagram:hover,
body header .header-social.instagram.is-hovered {
  color: var(--social-instagram-color) !important;
}

body header .header-social.tiktok:hover,
body header .header-social.tiktok.is-hovered {
  color: var(--social-tiktok-color) !important;
}

body header .header-social.youtube:hover,
body header .header-social.youtube.is-hovered {
  color: var(--social-youtube-color) !important;
}

body header .header-social.twitch:hover,
body header .header-social.twitch.is-hovered {
  color: var(--social-twitch-color) !important;
}

body header .header-social.facebook:hover,
body header .header-social.facebook.is-hovered {
  color: var(--social-facebook-color) !important;
}

body header .header-social.threads:hover,
body header .header-social.threads.is-hovered {
  color: var(--social-threads-color) !important;
}

body header .header-social.discord:hover,
body header .header-social.discord.is-hovered {
  color: var(--social-discord-color) !important;
}

body header nav {
  gap: clamp(.52rem, 1.28vw, 1.08rem) !important;
}

body header nav > a,
body header .nav-menu-trigger {
  font-size: clamp(1.17rem, 1.13vw, 1.42rem) !important;
}

body header nav a,
body header .nav-menu-trigger {
  color: var(--header-nav-link-color) !important;
  transition: color .18s ease, text-shadow .18s ease !important;
}

body header nav a:hover,
body header nav a.is-hovered,
body header .nav-menu-trigger:hover,
body header .nav-menu-trigger.is-hovered {
  color: var(--header-nav-hover-color) !important;
  text-shadow: var(--header-nav-hover-shadow) !important;
}

body header .logo.logo-image.is-hovered,
body header .header-social.is-hovered,
body header nav a.is-hovered,
body header .nav-menu-trigger.is-hovered {
  transition-duration: .18s !important;
}

body header .nav-menu::after {
  pointer-events: none !important;
}

body header .nav-menu {
  position: relative !important;
}

body header .nav-submenu {
  left: -.8rem !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: .1rem !important;
  min-width: max-content !important;
  overflow-x: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-.34rem) !important;
  transition: opacity .18s ease, transform .18s ease !important;
}

body header .nav-menu:not(.is-open):not(.is-hover-open) .nav-submenu {
  transition-duration: .12s !important;
}

body header .nav-menu.is-hover-open .nav-submenu,
body header .nav-menu.is-open .nav-submenu {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}

@media (max-width: 720px) {
  body header .nav-menu.is-hover-open .nav-submenu {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-.34rem) !important;
  }

  body header .nav-menu.is-open .nav-submenu,
  body header .nav-menu.is-open.is-hover-open .nav-submenu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
  }
}