/*
 * TJ-228 — one optical frame for the homepage command navigation.
 * Copy-only overlay loaded after the inherited TJ-227 balance rules.
 */

body.tj-os-page {
  --tj228-navigation-start: clamp(26px, 2.52vw, 40px);
  --tj228-navigation-end: clamp(30px, 2.82vw, 46px);
}

body.tj-os-page .tj-os-actions-right {
  margin-inline-end: var(--tj228-navigation-end) !important;
}

body.tj-os-page .tj-os-primary-nav {
  width: auto !important;
  max-width: none !important;
  justify-self: stretch !important;
  margin-inline-start: var(--tj228-navigation-start) !important;
  margin-inline-end: var(--tj228-navigation-end) !important;
}

body.tj-os-page .tj-os-primary-nav .tj-nav-title {
  align-self: stretch !important;
  text-align: center !important;
}

@media (min-width: 761px) and (max-width: 1439px) {
  body.tj-os-page .tj-os-primary-nav {
    grid-template-columns: repeat(4, max-content) !important;
    justify-content: space-between !important;
    padding-inline: 0 !important;
  }

  body.tj-os-page .tj-os-primary-nav a {
    padding-inline: 0 !important;
  }
}

@media (min-width: 1440px) {
  body.tj-os-page {
    --tj228-navigation-start: 0px;
    --tj228-navigation-end: 0px;
  }

  body.tj-os-page .tj-os-primary-nav {
    grid-template-columns: repeat(8, max-content) !important;
    justify-content: space-between !important;
    margin-inline: -8px !important;
    padding-inline: 8px !important;
  }

  body.tj-os-page .tj-os-primary-nav a {
    padding-inline: 0 !important;
  }

  body.tj-os-page .tj-os-primary-nav a:first-child {
    padding-inline-start: 6px !important;
  }
}

body.tj-os-page .tj-os-brand {
  width: max-content !important;
  min-width: 0 !important;
  margin-inline-start: max(0px, calc(var(--tj228-navigation-start) - 6px)) !important;
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease !important;
}

body.tj-os-page .tj-os-brand:hover,
body.tj-os-page .tj-os-brand:focus-visible {
  border-color: rgba(31, 151, 174, 0.25) !important;
  box-shadow: 0 12px 28px rgba(48, 94, 128, 0.11) !important;
  transform: translateY(-1px) !important;
}

@media (max-width: 720px) {
  body.tj-os-page {
    --tj228-navigation-start: 0px;
    --tj228-navigation-end: 0px;
  }

  body.tj-os-page .tj-os-brand {
    margin-inline-start: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tj-os-page .tj-os-brand {
    transition: none !important;
  }

  body.tj-os-page .tj-os-brand:hover,
  body.tj-os-page .tj-os-brand:focus-visible {
    transform: none !important;
  }
}