/*
  AimSight Design System — 08 Nav State Fix
  Final source-of-truth corrections for the header state.
  This file is loaded last so desktop and compact nav states are not affected by legacy absolute-position overrides.
*/

:root {
  --as-nav-control-size: 44px;
  --as-nav-dropdown-gap: 10px;
  --as-nav-panel-top: calc(
    var(--as-header-top) +
    ((var(--as-header-height) - var(--as-nav-control-size)) / 2) +
    var(--as-nav-control-size) +
    var(--as-nav-dropdown-gap)
  );
}

.as-header,
body.nav-open .as-header {
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/* Desktop header geometry: four real columns only.
   This cancels older absolute-position nav preferences that caused the moon to overlap Download. */
.as-header .as-nav,
body.nav-open .as-header .as-nav {
  display: grid !important;
  grid-template-columns: minmax(108px, 180px) minmax(0, 1fr) auto auto !important;
  align-items: center !important;
  justify-items: stretch !important;
  min-width: 0 !important;
  column-gap: clamp(16px, 2.2vw, 30px) !important;
  row-gap: 0 !important;
}

.as-brand,
body.nav-open .as-brand {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: start !important;
}

.as-nav-links,
body.nav-open .as-nav-links {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: static !important;
  transform: none !important;
  justify-self: center !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.as-nav-preferences,
body.nav-open .as-nav-preferences {
  grid-column: 3 !important;
  grid-row: 1 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  justify-self: end !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
}

.as-header-download,
body.nav-open .as-header-download {
  grid-column: 4 !important;
  grid-row: 1 !important;
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  justify-self: end !important;
  margin: 0 !important;
}

.as-menu-btn,
body.nav-open .as-menu-btn {
  display: none !important;
}

@media (max-width: 1180px) {
  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto !important;
    column-gap: 10px !important;
  }

  .as-nav-links,
  body.nav-open .as-nav-links {
    grid-column: 2 !important;
    justify-self: end !important;
    width: 0 !important;
  }

  .as-nav-links a:not(.as-download),
  body.nav-open .as-nav-links a:not(.as-download) {
    display: none !important;
  }

  .as-nav-preferences,
  body.nav-open .as-nav-preferences {
    grid-column: 3 !important;
  }

  .as-header-download,
  body.nav-open .as-header-download {
    grid-column: 4 !important;
  }

  .as-menu-btn,
  .as-menu-btn[aria-expanded="true"],
  body.nav-open .as-menu-btn,
  body.nav-open .as-menu-btn[aria-expanded="true"] {
    display: inline-flex !important;
    grid-column: 5 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    box-sizing: border-box !important;
    width: var(--as-nav-control-size) !important;
    min-width: var(--as-nav-control-size) !important;
    max-width: var(--as-nav-control-size) !important;
    height: var(--as-nav-control-size) !important;
    min-height: var(--as-nav-control-size) !important;
    max-height: var(--as-nav-control-size) !important;
    padding: 0 !important;
    border-radius: 15px !important;
  }

  .as-menu-btn .as-icon,
  .as-menu-btn[aria-expanded="true"] .as-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .as-nav-links.is-open,
  body.nav-open .as-nav-links.is-open {
    position: fixed !important;
    top: var(--as-nav-panel-top) !important;
    right: max(12px, calc((100vw - min(100vw - 24px, var(--as-container-wide))) / 2 + 12px)) !important;
    left: auto !important;
    width: min(260px, calc(100vw - 48px)) !important;
    z-index: 999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 16px !important;
    border: 1px solid var(--as-color-border) !important;
    border-radius: 22px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--as-shadow-lg) !important;
    backdrop-filter: blur(18px) !important;
  }

  .as-nav-links.is-open a:not(.as-download) {
    display: block !important;
    padding: 13px 14px !important;
    border-radius: 14px !important;
    text-align: left !important;
  }

  .as-nav-links.is-open .as-download {
    display: none !important;
  }
}

@media (max-width: 760px) {
  :root {
    --as-nav-control-size: 40px;
    --as-nav-dropdown-gap: 10px;
  }

  .as-menu-btn,
  .as-menu-btn[aria-expanded="true"],
  body.nav-open .as-menu-btn,
  body.nav-open .as-menu-btn[aria-expanded="true"] {
    border-radius: 14px !important;
  }

  .as-menu-btn .as-icon,
  .as-menu-btn[aria-expanded="true"] .as-icon {
    width: 18px !important;
    height: 18px !important;
  }

  .as-nav-links.is-open,
  body.nav-open .as-nav-links.is-open {
    right: 10px !important;
    left: auto !important;
    width: min(260px, calc(100vw - 20px)) !important;
  }
}

@media (max-width: 430px) {
  :root {
    --as-nav-control-size: 36px;
    --as-nav-dropdown-gap: -6px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto var(--as-nav-control-size) !important;
    padding-right: 7px !important;
  }

  .as-menu-btn,
  .as-menu-btn[aria-expanded="true"],
  body.nav-open .as-menu-btn,
  body.nav-open .as-menu-btn[aria-expanded="true"] {
    border-radius: 13px !important;
  }

  .as-nav-links.is-open,
  body.nav-open .as-nav-links.is-open {
    top: var(--as-nav-panel-top) !important;
    right: 8px !important;
    width: min(250px, calc(100vw - 16px)) !important;
  }
}

@media (max-width: 360px) {
  :root {
    --as-nav-control-size: 34px;
    --as-nav-dropdown-gap: -6px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    grid-template-columns: auto minmax(0, 1fr) auto auto var(--as-nav-control-size) !important;
    padding-right: 6px !important;
  }

  .as-menu-btn,
  .as-menu-btn[aria-expanded="true"],
  body.nav-open .as-menu-btn,
  body.nav-open .as-menu-btn[aria-expanded="true"] {
    border-radius: 12px !important;
  }

  .as-nav-links.is-open,
  body.nav-open .as-nav-links.is-open {
    top: var(--as-nav-panel-top) !important;
    right: 8px !important;
    width: min(236px, calc(100vw - 16px)) !important;
  }
}

html[data-theme="dark"] .as-nav-links.is-open {
  border-color: var(--as-dark-border) !important;
  background: rgba(13, 16, 41, 0.96) !important;
}

/*
  Final nav conformance pass.
  This intentionally lives at the end of the last-loaded nav CSS file so every
  nav state uses one spacing rhythm instead of mixing legacy absolute-position
  rules with the design-system grid.
*/
:root {
  --as-nav-action-gap: 10px;
  --as-nav-dropdown-gap: 10px;
}

.as-header .as-nav,
body.nav-open .as-header .as-nav {
  column-gap: var(--as-nav-action-gap) !important;
}

.as-nav-preferences,
body.nav-open .as-nav-preferences {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--as-nav-action-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-left: 0 !important;
}

.as-language-menu,
.as-language-trigger,
.as-theme-toggle,
.as-menu-btn,
.as-menu-btn[aria-expanded="true"],
body.nav-open .as-menu-btn,
body.nav-open .as-menu-btn[aria-expanded="true"] {
  box-sizing: border-box !important;
  width: var(--as-nav-control-size) !important;
  min-width: var(--as-nav-control-size) !important;
  max-width: var(--as-nav-control-size) !important;
  height: var(--as-nav-control-size) !important;
  min-height: var(--as-nav-control-size) !important;
  max-height: var(--as-nav-control-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 var(--as-nav-control-size) !important;
  align-self: center !important;
}

.as-language-menu {
  display: inline-flex !important;
  position: relative !important;
}

.as-language-trigger,
.as-theme-toggle,
.as-menu-btn,
.as-menu-btn[aria-expanded="true"],
body.nav-open .as-menu-btn,
body.nav-open .as-menu-btn[aria-expanded="true"] {
  align-items: center !important;
  justify-content: center !important;
}

.as-language-panel {
  top: calc(100% + var(--as-nav-dropdown-gap)) !important;
}

.as-nav-links.is-open,
body.nav-open .as-nav-links.is-open {
  top: var(--as-nav-panel-top) !important;
  transform: none !important;
}

.as-header-download,
body.nav-open .as-header-download {
  margin: 0 !important;
  align-self: center !important;
  justify-self: end !important;
}

.as-theme-toggle .as-icon,
.as-menu-btn .as-icon,
.as-menu-btn[aria-expanded="true"] .as-icon {
  margin: 0 auto !important;
}

@media (max-width: 1180px) {
  :root {
    --as-nav-action-gap: 10px;
    --as-nav-dropdown-gap: 10px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    column-gap: var(--as-nav-action-gap) !important;
  }
}

@media (max-width: 760px) {
  :root {
    --as-nav-control-size: 40px;
    --as-nav-action-gap: 8px;
    --as-nav-dropdown-gap: 10px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    column-gap: var(--as-nav-action-gap) !important;
  }
}

@media (max-width: 430px) {
  :root {
    --as-nav-control-size: 36px;
    --as-nav-action-gap: 6px;
    --as-nav-dropdown-gap: 10px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    column-gap: var(--as-nav-action-gap) !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto var(--as-nav-control-size) !important;
    padding-right: 8px !important;
  }
}

@media (max-width: 360px) {
  :root {
    --as-nav-control-size: 34px;
    --as-nav-action-gap: 5px;
    --as-nav-dropdown-gap: 8px;
  }

  .as-header .as-nav,
  body.nav-open .as-header .as-nav {
    column-gap: var(--as-nav-action-gap) !important;
    padding-right: 7px !important;
  }
}