/* Careers only — linked AFTER ./assets/main.css (see vite.config.js) so these beat Tailwind layers + Jesper bundle.
   Source of truth for Helix header-two on careers; keep in sync with src/styles/header.css. */

/* common.css sets [data-ns-animate]{opacity:0}. The bar uses data-ns-animate; reveal/Lenis/ScrollTrigger often never
   reveals it on this page — nav stays invisible without this. */
body#body.careers-helix header .header-two[data-ns-animate] {
  opacity: 1 !important;
  filter: none !important;
}

/* Jesper page transition stack (z-index 99999) vs bar z-50 */
body#body.careers-helix header .header-two {
  z-index: 100001;
}

body#body.careers-helix header aside.sidebar {
  z-index: 100002;
}

/* At rest — from header.css */
html:not(.dark) body#body.careers-helix header .header-two.header-two-at-rest.header-home:not(.header-two-scroll) {
  background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

html:not(.dark) body#body.careers-helix header .header-two.header-two-at-rest:not(.header-home):not(.header-two-scroll) {
  background-color: color-mix(in srgb, var(--color-helix-blue-dark) 60%, transparent);
}

html.dark body#body.careers-helix header .header-two.header-two-at-rest:not(.header-two-scroll) {
  background-color: color-mix(in srgb, var(--color-background-7) 40%, transparent);
}

body#body.careers-helix header .header-two.header-two-scroll {
  top: 1rem;
  background-color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}

html.dark body#body.careers-helix header .header-two.header-two-scroll {
  background-color: color-mix(in srgb, var(--color-background-12) 10%, transparent);
}

/* Top-level bar links only — mega menu links live in #company-mega-menu-v2 (nested divs), not li > a */
body#body.careers-helix header .header-two nav > ul > li > a[aria-current='page'] {
  font-weight: 500;
  color: #fff !important;
}

body#body.careers-helix header .header-two nav > ul > li > a[aria-current='page']:hover,
body#body.careers-helix header .header-two nav > ul > li > a[aria-current='page']:focus {
  color: #fff !important;
}

html:not(.dark) body#body.careers-helix header .header-two.header-home:not(.header-two-scroll) nav > ul > li > a[aria-current='page'] {
  color: var(--color-accent) !important;
}

html:not(.dark) body#body.careers-helix header .header-two.header-home:not(.header-two-scroll) nav > ul > li > a[aria-current='page']:hover,
html:not(.dark) body#body.careers-helix header .header-two.header-home:not(.header-two-scroll) nav > ul > li > a[aria-current='page']:focus {
  color: var(--color-accent) !important;
}

body#body.careers-helix header .header-two > div:first-child > a {
  color: inherit;
  text-decoration: none;
  outline: none;
}

body#body.careers-helix header .header-two > div:first-child > a:hover,
body#body.careers-helix header .header-two > div:first-child > a:focus {
  color: inherit;
}

body#body.careers-helix header .header-two nav > ul > li > a {
  color: color-mix(in srgb, var(--color-accent) 60%, transparent);
  text-decoration: none;
  outline: none;
}

body#body.careers-helix header .header-two nav > ul > li > a:hover,
body#body.careers-helix header .header-two nav > ul > li > a:focus {
  color: var(--color-accent);
}

/* Mobile drawer links — Jesper global `a` color would override menu text */
body#body.careers-helix header aside.sidebar a {
  text-decoration: none;
  outline: none;
  color: color-mix(in srgb, var(--color-secondary) 60%, transparent);
}

html.dark body#body.careers-helix header aside.sidebar a {
  color: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

body#body.careers-helix header aside.sidebar a:hover,
body#body.careers-helix header aside.sidebar a:focus {
  color: var(--color-secondary);
}

html.dark body#body.careers-helix header aside.sidebar a:hover,
html.dark body#body.careers-helix header aside.sidebar a:focus {
  color: var(--color-accent);
}

/* Header CTA: Jesper bundle `a` / link color (--tt-link-color) overrides Tailwind @utility btn on careers */
html:not(.dark) body#body.careers-helix header .header-two a.btn {
  background-color: var(--color-background-6) !important;
  border-color: var(--color-stroke-7) !important;
  color: var(--color-accent) !important;
}

html:not(.dark) body#body.careers-helix header .header-two a.btn:hover,
html:not(.dark) body#body.careers-helix header .header-two a.btn:focus-visible {
  background-color: var(--color-background-1) !important;
  border-color: var(--color-stroke-3) !important;
  color: var(--color-secondary) !important;
}

html.dark body#body.careers-helix header .header-two a.btn {
  background-color: var(--color-background-1) !important;
  border-color: var(--color-stroke-3) !important;
  color: var(--color-secondary) !important;
}

html.dark body#body.careers-helix header .header-two a.btn:hover,
html.dark body#body.careers-helix header .header-two a.btn:focus-visible {
  background-color: var(--color-background-6) !important;
  border-color: var(--color-stroke-7) !important;
  color: var(--color-accent) !important;
}

/* Company mega menu spacing — careers-jesper-bundle.css sets `p { margin: 0 0 24px }` globally, which
   blows up rows vs the rest of the site (Tailwind preflight / no Jesper). Match main-site density. */
body#body.careers-helix header #company-mega-menu-v2 p {
  margin: 0;
}