/* ============================================================
   TrojAI global navigation  (Figma 26-Troj.AI-Website-Assets)
   Dark-green bar + 5 mega/dropdown menus + lime announcement bar
   + purple utility bar + full mobile accordion. Self-contained;
   does NOT touch the design-system stylesheet. Prefix: .tnav
   ============================================================ */
.tnav {
  --tnav-bg: #002017;
  --tnav-lime: #d5fe70;
  --tnav-purple: #6958ff;
  --tnav-green: #0a7d5c;       /* dropdown headers + arrows */
  --tnav-ink: #10231b;         /* dropdown body text */
  --tnav-line: rgba(0,0,0,0.10);
  --tnav-bar-h: 74px;
  --tnav-max: 80rem;           /* content max width */
  --tnav-pad: clamp(1rem, 3vw, 2.5rem);
  position: fixed; inset: 0 0 auto 0;
  z-index: 1000;
  font-family: "Zalando Sans", sans-serif;
  color: #fff;                 /* base nav text; panels/announce override per-context */
}
.tnav *, .tnav *::before, .tnav *::after { box-sizing: border-box; }
.tnav a { text-decoration: none; color: inherit; }
.tnav ul { list-style: none; margin: 0; padding: 0; }
.tnav button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---- announcement bar (lime) ---- */
.tnav_announce { background: var(--tnav-lime); color: #0a0a0a; }
.tnav_announce[hidden] { display: none; }
.tnav_announce_inner {
  max-width: var(--tnav-max); margin: 0 auto;
  padding: 0.5rem var(--tnav-pad);
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  position: relative; min-height: 38px;
}
.tnav_announce_link { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 0.9375rem; font-weight: 500; }
.tnav_announce_badge {
  background: #0a0a0a; color: var(--tnav-lime);
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.06em;
  padding: 0.15rem 0.5rem; border-radius: 4px; text-transform: uppercase;
}
.tnav_announce_text { text-decoration: underline; text-underline-offset: 2px; }
.tnav_announce_close {
  position: absolute; right: var(--tnav-pad); top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; display: grid; place-items: center; color: #0a0a0a;
}
.tnav_announce_close svg { width: 14px; height: 14px; }

/* ---- utility bar (purple) — hidden by default; remove [hidden] to enable ---- */
.tnav_utility { background: var(--tnav-purple); color: #fff; }
.tnav_utility[hidden] { display: none; }
.tnav_utility_inner {
  max-width: var(--tnav-max); margin: 0 auto; padding: 0.4rem var(--tnav-pad);
  display: flex; align-items: center; justify-content: flex-end; gap: 1.25rem; min-height: 34px;
}
.tnav_utility_link { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.875rem; }
.tnav_utility_link svg { width: 16px; height: 16px; }

/* ---- main bar ---- */
.tnav_bar { background: var(--tnav-bg); position: relative; z-index: 2; }  /* above the mobile drawer */
.tnav_bar_inner {
  max-width: var(--tnav-max); margin: 0 auto; padding: 0 var(--tnav-pad);
  height: var(--tnav-bar-h);
  display: flex; align-items: center; gap: clamp(0.5rem, 1.6vw, 1.5rem);
}
.tnav_logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* logo SVG is preserveAspectRatio="none" w/ % dims (no intrinsic ratio) →
   pin an explicit box at the viewBox ratio 94.705/28.533 so it isn't squished */
.tnav_logo img { height: 28px; width: 93px; max-width: none; object-fit: contain; display: block; }

.tnav_menu { display: flex; flex: 1 1 auto; justify-content: center; }
.tnav_list { display: flex; align-items: center; gap: clamp(0.05rem, 0.8vw, 1.1rem); }
.tnav_item { position: static; }      /* mega panels span the bar; simple panels re-anchor below */

.tnav_link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.6rem clamp(0.25rem, 0.6vw, 0.55rem); color: #fff;
  font-size: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem); line-height: 1; white-space: nowrap;
  border-radius: 8px; transition: color 0.2s ease;
}
.tnav_link_caret { width: 10px; height: 10px; transition: transform 0.25s ease; }
.tnav_item:hover .tnav_link, .tnav_item:focus-within .tnav_link { color: var(--tnav-lime); }
.tnav_item:hover .tnav_link_caret, .tnav_item.is-open .tnav_link_caret { transform: rotate(180deg); }

.tnav_actions { flex: 0 0 auto; display: flex; align-items: center; }
/* reuse the design-system button (button_main_wrap) for Book a Demo */
.tnav_actions .button_main_wrap { white-space: nowrap; }

/* ---- dropdown panels ---- */
.tnav_panel {
  position: absolute; top: calc(100% - 4px); z-index: 5;
  background: #fff; color: var(--tnav-ink);
  border-radius: 14px; box-shadow: 0 24px 60px -20px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  /* CLOSE has a ~0.22s grace delay so the cursor can travel from the item
     into the panel without the dropdown snapping shut. Opening is instant
     (transition-delay:0 on the hover/open state below). */
  transition: opacity 0.2s ease 0.22s, transform 0.2s ease 0.22s, visibility 0s linear 0.42s;
  pointer-events: none;
}
/* invisible bridge over the gap between the bar and an open panel — keeps the
   pointer "inside" the hover region while travelling down */
.tnav_panel::before { content: ""; position: absolute; left: -8px; right: -8px; top: -18px; height: 20px; }
/* simple dropdowns anchor under their own item; mega panels center on the bar */
.tnav_item--simple { position: relative; }
.tnav_item--simple .tnav_panel { left: 50%; transform: translateX(-50%) translateY(8px); min-width: 240px; }
.tnav_item--mega .tnav_panel { left: 50%; transform: translateX(-50%) translateY(8px); }
.tnav_item:hover > .tnav_panel,
.tnav_item:focus-within > .tnav_panel,
.tnav_item.is-open > .tnav_panel {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition-delay: 0s;   /* open immediately — no grace delay on the way in */
}
.tnav_item--simple:hover > .tnav_panel,
.tnav_item--simple:focus-within > .tnav_panel,
.tnav_item--simple.is-open > .tnav_panel { transform: translateX(-50%) translateY(0); }
.tnav_item--mega:hover > .tnav_panel,
.tnav_item--mega:focus-within > .tnav_panel,
.tnav_item--mega.is-open > .tnav_panel { transform: translateX(-50%) translateY(0); }

/* link rows (label + arrow) used in every dropdown */
.tnav_col_title {
  margin: 0 0 1.1rem; color: var(--tnav-green);
  font-size: 1rem; font-weight: 700; letter-spacing: 0.01em;
}
.tnav_links { display: flex; flex-direction: column; }
.tnav_row {
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  padding: 0.55rem 0; color: var(--tnav-ink); font-size: 1rem; transition: color 0.18s ease;
}
.tnav_row svg { width: 18px; height: 18px; color: var(--tnav-green); flex: 0 0 auto; transition: transform 0.18s ease; }
.tnav_row:hover { color: var(--tnav-green); }
.tnav_row:hover svg { transform: translateX(3px); }

/* simple dropdown body */
.tnav_simple { padding: 1.6rem 1.75rem; }

/* mega: solutions (3 columns) */
.tnav_mega { display: grid; padding: 0; overflow: hidden; }
.tnav_mega--solutions { grid-template-columns: repeat(2, minmax(220px, 1fr)); min-width: 520px; }
.tnav_mega--solutions .tnav_megacol { padding: 2.25rem 2rem; }
.tnav_megacol + .tnav_megacol { border-left: 1px solid var(--tnav-line); }

/* mega: platform (featured card + product list) */
.tnav_mega--platform { grid-template-columns: 300px minmax(360px, 1fr); min-width: 720px; }
.tnav_feature {
  background: #045c43; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem;
  text-decoration: none; transition: background 0.2s ease;
}
/* beat `.tnav a { color: inherit }` so the card (now an <a>) text stays white */
.tnav a.tnav_feature { color: #fff; }
.tnav_feature:hover { background: #067151; }
.tnav_feature_img {
  flex: 1 1 auto; min-height: 150px; border-radius: 6px;
  background: rgba(255,255,255,0.06) url("/images/po3-asterisk.svg") center center / 76px 76px no-repeat;
}
.tnav_feature_kicker { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tnav_feature_more { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--tnav-lime); font-weight: 500; }
.tnav_feature_more svg { width: 18px; height: 18px; }
.tnav_platform_list { padding: 2.25rem 2.25rem 2.25rem 2.5rem; }

/* ---- burger (hidden on desktop) ---- */
.tnav_burger { display: none; }

/* ============================================================
   Mobile (≤ 991px): hamburger → full-screen nested accordion
   (dark level-1 rows w/ +/× → white sub-panels w/ green-arrow rows;
   Solutions nests a 2nd level). Matches Figma 2677-820 / 2686-3110.
   ============================================================ */
@media (max-width: 991px) {
  .tnav_menu, .tnav_actions { display: none; }
  .tnav_bar_inner { justify-content: space-between; }

  /* burger → lime X */
  .tnav_burger { display: block; position: relative; width: 30px; height: 30px; flex: 0 0 auto; }
  .tnav_burger span { position: absolute; left: 5px; right: 5px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s ease, background-color 0.2s ease, top 0.3s ease; }
  .tnav_burger span:nth-child(1) { top: 11px; }
  .tnav_burger span:nth-child(2) { top: 17px; }
  .tnav.is-mobile-open .tnav_burger span { background: var(--tnav-lime); top: 14px; }
  .tnav.is-mobile-open .tnav_burger span:nth-child(1) { transform: rotate(45deg); }
  .tnav.is-mobile-open .tnav_burger span:nth-child(2) { transform: rotate(-45deg); }

  .tnav_mobile {
    position: fixed; inset: 0;
    background: var(--tnav-bg); padding: var(--tnav-bar-h) 0 2rem;
    display: flex; flex-direction: column;
    transform: translateX(100%); transition: transform 0.35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; z-index: 1;
  }
  .tnav.is-mobile-open .tnav_mobile { transform: translateX(0); }
  .tnav.is-mobile-open .tnav_announce, .tnav.is-mobile-open .tnav_utility { display: none; }

  .tnav_m_list { flex: 1 1 auto; }
  .tnav_m_item { border-bottom: 1px solid rgba(255,255,255,0.14); }

  /* level-1 dark row */
  .tnav_m_toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    padding: 1.15rem var(--tnav-pad); color: #fff; font-size: 1.25rem; font-weight: 500; text-align: left;
  }
  .tnav_m_pm { width: 18px; height: 18px; flex: 0 0 auto; transition: transform 0.28s ease; }
  .tnav_m_item.is-open > .tnav_m_toggle .tnav_m_pm,
  .tnav_m_sub2.is-open > .tnav_m_toggle2 .tnav_m_pm { transform: rotate(45deg); }  /* + → × */

  /* expanded WHITE sub-panel */
  .tnav_m_panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.32s ease; background: #fff; color: var(--tnav-ink); }
  .tnav_m_item.is-open > .tnav_m_panel { grid-template-rows: 1fr; }
  .tnav_m_panel_inner, .tnav_m_panel2_inner { overflow: hidden; }
  .tnav_m_panel_inner { padding: 0 var(--tnav-pad); }   /* no vertical pad → collapses to 0 (rows carry the spacing) */

  /* link row (label + green arrow) */
  .tnav_m_row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 0.9rem 0; color: var(--tnav-ink); font-size: 1.0625rem; line-height: 1.3;
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }
  .tnav_m_panel_inner > .tnav_m_row:last-child { border-bottom: 0; }
  .tnav_m_row svg { width: 18px; height: 18px; color: var(--tnav-green); flex: 0 0 auto; }
  .tnav_m_row--green { color: var(--tnav-green); }
  .tnav_m_row--indent { padding-left: 0.25rem; font-size: 1rem; }

  /* nested level-2 accordion (By Use Case / Industry / Agent Type) */
  .tnav_m_sub2 { border-bottom: 1px solid rgba(0,0,0,0.08); }
  .tnav_m_panel_inner > .tnav_m_sub2:last-child { border-bottom: 0; }
  .tnav_m_toggle2 {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%;
    padding: 0.9rem 0; color: var(--tnav-ink); font-size: 1.0625rem; text-align: left;
  }
  .tnav_m_toggle2 .tnav_m_pm { color: var(--tnav-green); }
  .tnav_m_panel2 { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; }
  .tnav_m_sub2.is-open > .tnav_m_panel2 { grid-template-rows: 1fr; }
  .tnav_m_panel2_inner .tnav_m_row { border-bottom: 0; padding: 0.55rem 0; }

  .tnav_m_cta { padding: 1.75rem var(--tnav-pad) 0; }
  .tnav_m_cta .button_main_wrap { width: 100%; }
  body.tnav-lock { overflow: hidden; }
}
@media (min-width: 992px) { .tnav_mobile { display: none; } }