/* ============================================================
   Trace fluid navigation ("tnav")
   x.ai-style hover nav: one shared panel that morphs between
   menus. Two themes: .tnav--light (dark text, for light pages)
   and .tnav--dark (white text, for dark/teal pages).
   No webflow.js dependency — plain CSS + /js/trace-nav.js.
   ============================================================ */

.tnav,
.tnav *,
.tnav *::before,
.tnav *::after { box-sizing: border-box; }

.tnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  font-family: Atak, sans-serif;
  font-size: 14px; /* keep em-scale identical to the old nav */
  line-height: 1.2;
  transition: transform .35s ease;
}

/* Hidden while scrolling down (js adds/removes); reappears on scroll-up. */
.tnav.is-hidden {
  transform: translateY(-100%);
  pointer-events: none;
}

/* ---- Bar ---------------------------------------------------- */

.tnav-bar {
  position: relative;
  z-index: 2; /* stay above the fixed mobile overlay */
  display: flex;
  justify-content: flex-start; /* logo + links grouped left; CTAs pushed right */
  align-items: center;
  padding: 0 10vw;
  border-bottom: 1px solid transparent;
  background-color: transparent;
  transition: background-color .25s ease, border-color .25s ease;
}

/* Bar fills on scroll (and behind the mobile overlay) — never on hover/open. */
.tnav--light.is-filled .tnav-bar,
.tnav--light.is-mobile-open .tnav-bar {
  background-color: #fff;
  border-bottom-color: #f0f0f0;
}

.tnav--dark.is-filled .tnav-bar,
.tnav--dark.is-mobile-open .tnav-bar {
  background-color: var(--teal-50, #1f616d);
}

/* Hybrid: a dark nav on a page whose body ISN'T teal-50 (js adds the class).
   White text over the hero, then the light treatment once it's scrolled past.
   The mobile overlay stays teal in both themes, so the bar stays teal with it. */
.tnav--hybrid.is-filled:not(.is-mobile-open) .tnav-bar {
  background-color: #fff;
  border-bottom-color: #f0f0f0;
}
.tnav--hybrid.is-filled:not(.is-mobile-open) .tnav-logo,
.tnav--hybrid.is-filled:not(.is-mobile-open) .tnav-link {
  color: var(--teal-50, #1f616d);
}
.tnav--hybrid.is-filled:not(.is-mobile-open) .tnav-button--secondary {
  border-color: var(--teal-40, #18929a);
  color: var(--teal-40, #18929a);
}
.tnav--hybrid.is-filled:not(.is-mobile-open) .tnav-burger-box span {
  background-color: var(--teal-50, #1f616d);
}

.tnav-logo {
  aspect-ratio: 5;
  width: 85px;
  display: block;
  flex: none;
}
.tnav-logo svg { width: 100%; height: 100%; display: block; }
.tnav--light .tnav-logo { color: var(--teal-50, #1f616d); }
.tnav--dark .tnav-logo { color: #fff; }

.tnav-links {
  display: flex;
  align-items: center;
  margin-left: 24px; /* sit beside the logo, not centered */
}

.tnav-link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 30px 20px;
  font-family: inherit;
  font-size: 1.1em;
  font-weight: 400;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: opacity .15s ease;
}
.tnav--light .tnav-link { color: var(--teal-50, #1f616d); }
.tnav--dark .tnav-link { color: #fff; }
.tnav-link:hover { opacity: .72; }

.tnav-caret {
  width: 10px;
  height: 6px;
  flex: none;
  transition: transform .25s ease;
}
.tnav-trigger[aria-expanded="true"] .tnav-caret { transform: rotate(180deg); }

/* ---- CTA buttons -------------------------------------------- */

.tnav-ctas {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.tnav-button {
  background-color: var(--teal-10, #e7f8f5);
  color: var(--teal-50, #1f616d);
  border-radius: 50px;
  padding: 10px 18px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease;
}
.tnav-button:hover { transform: translateY(-1px); }

.tnav-button--secondary {
  background-color: transparent;
  border: 1px solid var(--teal-40, #18929a);
  color: var(--teal-40, #18929a);
}
.tnav--dark .tnav-button--secondary {
  border-color: #fff;
  color: #fff;
}

/* ---- Shared morphing panel ----------------------------------- */

.tnav-panel-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  pointer-events: none;
}

.tnav-panel {
  position: absolute;
  top: 8px;
  left: 0;
  width: 0;
  height: 0;
  border-radius: 20px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateX(0) translateY(-6px);
  transition:
    width .32s cubic-bezier(.4,0,.2,1),
    height .32s cubic-bezier(.4,0,.2,1),
    transform .32s cubic-bezier(.4,0,.2,1),
    opacity .2s ease;
}
.tnav.is-open .tnav-panel {
  opacity: 1;
  pointer-events: auto;
}

/* The panel is white in BOTH themes — only the bar itself is themed. */
.tnav-panel {
  background-color: #fff;
  border: 1px solid #f0f0f0;
}

/* Menus are stacked inside the panel; only the active one shows.
   They keep their natural size so JS can measure them. */
.tnav-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: max-content;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility 0s linear .18s;
}
.tnav-menu.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease .08s, visibility 0s;
}

/* ---- Explore mega menu --------------------------------------- */

.tnav-mega {
  display: flex;
  gap: 48px;
  padding: 24px;
}

.tnav-mega-list {
  display: flex;
  flex-direction: column;
  width: 300px;
  flex: none;
}

.tnav-mega-item {
  display: block;
  padding: 10px 14px;
  border-radius: 12px;
  text-decoration: none;
  transition: background-color .15s ease;
}
/* The item driving the preview is highlighted too — on open that's the first
   one, so the visual on the right always has a labelled source. */
.tnav-mega-item:hover,
.tnav-mega-item.is-previewing { background-color: #f5f5f5; }

/* Unreleased sports: listed for context, not interactive. */
.tnav-mega-item.is-soon { cursor: default; }
.tnav-mega-item.is-soon:hover { background-color: transparent; }
.tnav-mega-item.is-soon .tnav-mega-item-title { color: var(--charcoal-30, #7b7d7d); }

.tnav-mega-item-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -.02em;
}
.tnav-mega-item-title { color: var(--teal-50, #1f616d); }

.tnav-mega-item-desc {
  margin-top: 2px;
  font-family: Inter, sans-serif;
  font-size: .76em;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--charcoal-30, #7b7d7d);
}

.tnav-mega-footer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px 14px 2px;
  font-size: 1em;
  font-weight: 400;
  text-decoration: none;
}
.tnav-mega-footer { color: var(--teal-40, #18929a); }
.tnav-mega-footer:hover { text-decoration: underline; }

/* Preview pane: stacked media, crossfade on item hover */
.tnav-mega-preview {
  position: relative;
  width: 280px;
  height: 250px;
  flex: none;
  border-radius: 14px;
  overflow: hidden;
}
.tnav-mega-preview { background-color: var(--teal-10, #e7f8f5); }

.tnav-preview-media {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .25s ease;
}
.tnav-preview-media.is-active { opacity: 1; }
.tnav-preview-media video,
.tnav-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Sports (slim) menu -------------------------------------- */

.tnav-list {
  display: flex;
  flex-direction: column;
  padding: 10px;
  min-width: 230px;
}

/* Same text treatment as .tnav-mega-item-title so all dropdowns match. */
.tnav-list-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 1em;
  font-weight: 500;
  letter-spacing: -.02em;
  text-decoration: none;
  transition: background-color .15s ease;
}
.tnav-list-item { color: var(--teal-50, #1f616d); }
a.tnav-list-item:hover { background-color: #f5f5f5; }

.tnav-list-item.is-soon {
  cursor: default;
}
.tnav-list-item.is-soon { color: var(--charcoal-30, #7b7d7d); }

.tnav-soon-tag {
  font-family: Inter, sans-serif;
  font-size: .72em;
  font-weight: 500;
  letter-spacing: 0;
  padding: 3px 9px;
  border-radius: 50px;
  white-space: nowrap;
}
.tnav-soon-tag { background-color: var(--sand, #fcf8f4); color: var(--charcoal-30, #7b7d7d); border: 1px solid var(--light-stroke, #dfdfdf); }

/* ---- Hamburger / mobile -------------------------------------- */

.tnav-burger {
  display: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 10px 4px 10px 10px;
}
.tnav-burger-box {
  position: relative;
  width: 26px;
  height: 16px;
}
.tnav-burger-box span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  transition: transform .25s ease, top .25s ease;
}
.tnav--light .tnav-burger-box span { background-color: var(--teal-50, #1f616d); }
.tnav--dark .tnav-burger-box span { background-color: #fff; }
.tnav-burger-box span:nth-child(1) { top: 2px; }
.tnav-burger-box span:nth-child(2) { top: 12px; }
.tnav.is-mobile-open .tnav-burger-box span:nth-child(1) { top: 7px; transform: rotate(45deg); }
.tnav.is-mobile-open .tnav-burger-box span:nth-child(2) { top: 7px; transform: rotate(-45deg); }

.tnav-mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 96px 24px 40px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
}
.tnav--light .tnav-mobile { background-color: #fff; }
.tnav--dark .tnav-mobile { background-color: var(--teal-50, #1f616d); }
.tnav.is-mobile-open .tnav-mobile {
  opacity: 1;
  pointer-events: auto;
}

.tnav-mobile-section { border-bottom: 1px solid; }
.tnav--light .tnav-mobile-section { border-color: #f0f0f0; }
.tnav--dark .tnav-mobile-section { border-color: rgba(255,255,255,.12); }

.tnav-mobile-toggle,
.tnav-mobile-link {
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 2px;
  font-family: inherit;
  font-size: 1.5em;
  font-weight: 300;
  letter-spacing: -.02em;
  text-align: left;
  text-decoration: none;
}
.tnav--light .tnav-mobile-toggle, .tnav--light .tnav-mobile-link { color: var(--teal-50, #1f616d); }
.tnav--dark .tnav-mobile-toggle, .tnav--dark .tnav-mobile-link { color: #fff; }

.tnav-mobile-toggle .tnav-caret { width: 14px; height: 8px; }
.tnav-mobile-toggle[aria-expanded="true"] .tnav-caret { transform: rotate(180deg); }

.tnav-mobile-sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height .3s cubic-bezier(.4,0,.2,1);
}
.tnav-mobile-sub-inner { padding: 2px 2px 16px; display: flex; flex-direction: column; gap: 2px; }

.tnav-mobile-subitem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 1.15em;
  font-weight: 400;
  text-decoration: none;
}
.tnav--light .tnav-mobile-subitem { color: var(--teal-50, #1f616d); }
.tnav--dark .tnav-mobile-subitem { color: #fff; }
.tnav--light .tnav-mobile-subitem.is-soon { color: var(--charcoal-30, #7b7d7d); }
.tnav--dark .tnav-mobile-subitem.is-soon { color: rgba(255,255,255,.55); }

.tnav-mobile-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}
.tnav-mobile-ctas .tnav-button {
  text-align: center;
  padding: 14px 18px;
  font-size: 1.15em;
}
/* Mobile primary CTA ("Get Pricing") — themed fill + slightly taller.
   Colour tracks the PAGE, not the nav's text theme. Default is red/white,
   which covers light-nav pages AND dark-hero pages that use the white-text nav
   over a light body (trace-nav.js tags those .tnav--hybrid). Only genuinely
   dark pages — body painted teal-50, so no --hybrid — get yellow/teal-50.
   Sign In (--secondary) and desktop untouched. */
.tnav-mobile-ctas .tnav-button:not(.tnav-button--secondary) {
  padding-top: 17px;
  padding-bottom: 17px;
  background-color: var(--red, #f35c2b);
  color: #fff;
}
.tnav--dark:not(.tnav--hybrid) .tnav-mobile-ctas .tnav-button:not(.tnav-button--secondary) {
  background-color: var(--yellow, #f8fc52);
  color: var(--teal-50, #1f616d);
}

/* ---- Responsive ---------------------------------------------- */

@media (max-width: 991px) {
  .tnav-bar { padding: 0 24px; }
  .tnav-links, .tnav-panel-wrap { display: none; }
  .tnav-ctas .tnav-button--secondary { display: none; }
  /* Top-bar "Get Pricing" on mobile — matches the in-menu CTA. Red by default
     (light navs + --hybrid dark-hero light-body pages); yellow only on
     genuinely dark pages (teal-50 body, non-hybrid). */
  .tnav-ctas .tnav-button:not(.tnav-button--secondary) {
    padding-top: 13px;
    padding-bottom: 13px;
    background-color: var(--red, #f35c2b);
    color: #fff;
  }
  .tnav--dark:not(.tnav--hybrid) .tnav-ctas .tnav-button:not(.tnav-button--secondary) {
    background-color: var(--yellow, #f8fc52);
    color: var(--teal-50, #1f616d);
  }
  .tnav-burger { display: block; }
  .tnav-mobile { display: block; }
  .tnav-logo { width: 76px; }
  .tnav-bar { height: 64px; }
}

@media (min-width: 992px) {
  .tnav-mobile { display: none !important; }
}

/* Keyboard focus */
.tnav a:focus-visible,
.tnav button:focus-visible {
  outline: 2px solid var(--teal-40, #18929a);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .tnav *, .tnav { transition: none !important; }
}