/*
 * ChiefAI primary nav — typography pass that matches the editorial
 * design system (mono, uppercase, tracked) and reuses the .aaas-eyebrow
 * leading-orange-dash signature so the nav reads as part of the design
 * instead of as default Kadence.
 *
 * Loaded site-wide on rebuilt pages via functions.php, alongside
 * chiefai-design-system.css (which provides the --cai-* tokens and
 * the JetBrains Mono font).
 */

/* ============================================================
   PRIMARY NAV (desktop)
   Kadence's own header CSS targets nav items with deep selectors
   and inline customizer styles, so we override with explicit
   !important on the typography properties. Color stays free of
   !important so the transparent-header inversion below can win.
   ============================================================ */
body .site-header .main-navigation .menu > .menu-item > a,
body .header-navigation .menu > .menu-item > a,
body .main-navigation .menu > .menu-item > a {
  display: inline-flex !important;
  align-items: center !important;
  font-family: var(--cai-mono) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cai-navy);
  text-decoration: none;
  position: relative;
  transition: color 0.3s ease;
  line-height: 1.2 !important;
}

/* Hover (catch focus-within for keyboard users too).
   The base nav rule above is scoped via body+site-header+main-navigation
   for specificity, which beats a plain .menu-item:hover > a — so we use
   the same scope here to win the cascade. */
body .site-header .main-navigation .menu > .menu-item:hover > a,
body .site-header .main-navigation .menu > .menu-item:focus-within > a,
body .header-navigation .menu > .menu-item:hover > a,
body .main-navigation .menu > .menu-item:hover > a {
  color: var(--cai-orange);
}

/* Current page — Kadence assigns one or more of these classes when a
   menu item links to the current URL or one of its ancestors. */
body .site-header .main-navigation .menu > .menu-item.current_page_item > a,
body .site-header .main-navigation .menu > .menu-item.current-menu-item > a,
body .site-header .main-navigation .menu > .menu-item.current-menu-parent > a,
body .site-header .main-navigation .menu > .menu-item.current_page_ancestor > a,
body .main-navigation .menu > .menu-item.current_page_item > a,
body .main-navigation .menu > .menu-item.current-menu-item > a,
body .main-navigation .menu > .menu-item.current-menu-parent > a,
body .main-navigation .menu > .menu-item.current_page_ancestor > a {
  color: var(--cai-orange);
}

/* Orange dash — leading indicator for hover + current.
   Space is permanently reserved (18px dash + 10px gap) so the menu
   doesn't shift horizontally when an item is hovered. The dash itself
   starts at opacity 0 and fades to 1 on hover/active. The reserved
   leading space becomes part of the editorial signature — every item
   reads as "ready" for the dash mark. */
.main-navigation .menu > .menu-item > a::before {
  content: "";
  display: block;
  width: 18px;
  height: 1px;
  background: var(--cai-orange);
  margin-right: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.main-navigation .menu > .menu-item:hover > a::before,
.main-navigation .menu > .menu-item:focus-within > a::before,
.main-navigation .menu > .menu-item.current_page_item > a::before,
.main-navigation .menu > .menu-item.current-menu-item > a::before,
.main-navigation .menu > .menu-item.current-menu-parent > a::before,
.main-navigation .menu > .menu-item.current_page_ancestor > a::before {
  opacity: 1;
}

/* Dropdown chevron — inherit color so it goes orange on hover too */
.main-navigation .menu > .menu-item > a .dropdown-nav-toggle,
.main-navigation .menu > .menu-item > a .dropdown-nav-toggle svg {
  color: inherit;
  fill: currentColor;
  transition: color 0.3s ease;
}

/* Sub-menu items — same family, smaller, no dash */
.main-navigation .sub-menu .menu-item > a {
  font-family: var(--cai-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cai-navy);
  text-decoration: none;
  transition: color 0.3s ease;
}
.main-navigation .sub-menu .menu-item:hover > a,
.main-navigation .sub-menu .menu-item.current_page_item > a,
.main-navigation .sub-menu .menu-item.current-menu-item > a {
  color: var(--cai-orange);
}

/* ============================================================
   HEADER CTA — swap Kadence's outline button for a filled orange
   anchor that matches .aaas-btn-primary site-wide.
   Kadence's Customizer emits inline CSS at
       #main-header .header-button.button-style-outline { ... !important }
   (specificity 0,1,2,0) so we match that exact selector to win the
   cascade. chiefai-header.css now loads after kadence-header via the
   priority-999 enqueue + dependency in functions.php, so when both
   sides have !important and equal specificity, mine wins by load order.
   ============================================================ */
#main-header a.header-button,
#main-header a.header-button.button-style-outline,
#main-header .header-button-area a.header-button,
#main-header .header-button {
  background: var(--cai-orange) !important;
  background-color: var(--cai-orange) !important;
  color: #fff !important;
  border: 1.5px solid var(--cai-orange) !important;
  font-family: var(--cai-body, 'Inter', system-ui, sans-serif) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 13px 22px !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-decoration: none !important;
  transition: color 0.3s, border-color 0.3s;
}
/* Ink slide-up on hover, same as .aaas-btn-primary */
#main-header .header-button::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cai-ink, #0A0E17);
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
#main-header .header-button:hover::before {
  transform: translateY(0);
}
#main-header a.header-button:hover,
#main-header .header-button:hover {
  background: var(--cai-orange) !important;
  background-color: var(--cai-orange) !important;
  color: #fff !important;
  border-color: var(--cai-ink, #0A0E17) !important;
}

/* ============================================================
   TRANSPARENT-HEADER PAGES — Kadence flips text to white over
   image heroes; preserve that legibility by inverting the nav
   from navy to white when the header is transparent.
   ============================================================ */
.site-header.transparent-header .main-navigation .menu > .menu-item > a,
.transparent-header .main-navigation .menu > .menu-item > a {
  color: #fff;
}
.site-header.transparent-header .main-navigation .menu > .menu-item:hover > a,
.transparent-header .main-navigation .menu > .menu-item:hover > a {
  color: var(--cai-orange);
}

/* ============================================================
   MOBILE DRAWER — same typography signature, slightly looser
   tracking + larger size since drawer items have more room.
   The drawer panel renders on a near-black ground, so we invert
   the default item color to white (with .85 opacity) and keep
   the orange-on-active treatment that already reads well there.
   ============================================================ */
.drawer-navigation .menu .menu-item > a,
.popup-drawer .menu .menu-item > a,
#mobile-menu .menu-item > a,
#mobile-drawer .menu-item > a {
  font-family: var(--cai-mono) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.88) !important;
  text-decoration: none;
  transition: color 0.25s ease;
}
.drawer-navigation .menu .menu-item:hover > a,
.popup-drawer .menu .menu-item:hover > a,
#mobile-menu .menu-item:hover > a,
#mobile-drawer .menu-item:hover > a {
  color: var(--cai-orange) !important;
}
.drawer-navigation .menu .menu-item.current_page_item > a,
.drawer-navigation .menu .menu-item.current-menu-item > a,
.drawer-navigation .menu .menu-item.current-menu-parent > a,
.popup-drawer .menu .menu-item.current_page_item > a,
.popup-drawer .menu .menu-item.current-menu-item > a,
.popup-drawer .menu .menu-item.current-menu-parent > a,
#mobile-menu .menu-item.current_page_item > a,
#mobile-menu .menu-item.current-menu-item > a {
  color: var(--cai-orange) !important;
}
.drawer-navigation .sub-menu .menu-item > a,
.popup-drawer .sub-menu .menu-item > a,
#mobile-menu .sub-menu .menu-item > a {
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  color: rgba(255, 255, 255, 0.7) !important;
}