/* kx-header: the site header (Kairos Header widget, widgets/header). Depends on kx-tokens.
   Outer chrome mirrors site/Header.tsx in the design repo (Vercel): utility strip that collapses on
   scroll, solid navy bar that blurs once scrolled, page content below it. The mega panels follow the
   Figma "Menu Bar" component set (Template page, Web tab); their columns are Kairos Menu Column
   widgets (widgets/menu-column/menu-column.css) inside a saved Elementor template. */

/* The header is fixed; this in-flow spacer, printed just before it, keeps the page content below the bar. */
.kx-header__spacer { height: var(--kx-header-h); }
@media (min-width: 1024px) { .kx-header__spacer { height: var(--kx-header-h-lg); } }
.kx-header__spacer--announce { height: calc(var(--kx-header-h) + 2.25rem); }
@media (min-width: 1024px) { .kx-header__spacer--announce { height: calc(var(--kx-header-h-lg) + 2.25rem); } }

.kx.kx-header { position: fixed; inset-inline: 0; top: 0; z-index: 50; color: #fff; }
body.admin-bar .kx-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar .kx-header { top: 46px; } }
/* the theme paints every button a hover/focus colour; header controls are icon buttons */
.kx.kx-header button, .kx.kx-header button:hover, .kx.kx-header button:focus, .kx.kx-header button:active { background: transparent; border: 0; box-shadow: none; }

/* optional announcement strip above the utility row (Kairos > Header & Footer) */
.kx .kx-header__announce { background: var(--kx-blue); color: #fff; }
.kx .kx-header__announce .kx-shell { display: flex; min-height: 2.25rem; align-items: center; justify-content: center; padding-block: 0.375rem; text-align: center; }
.kx .kx-header__announce a, .kx .kx-header__announce p { font-size: 0.8125rem; line-height: 1.4; color: #fff; }
.kx .kx-header__announce a:hover { color: var(--kx-green); }

.kx .kx-header__utility {
  display: none; overflow: hidden; height: 2.25rem; opacity: 1;
  background: var(--kx-navy-deep); color: var(--kx-on-navy-faint);
  transition: height var(--kx-duration-slow) var(--kx-ease-signal), opacity var(--kx-duration-slow) var(--kx-ease-signal);
}
@media (min-width: 1024px) { .kx .kx-header__utility { display: block; } }
.kx .kx-header__utility .kx-shell { display: flex; height: 2.25rem; align-items: center; justify-content: flex-end; gap: 1.75rem; }
.kx .kx-header__utility a { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; transition: color var(--kx-duration-base); }
.kx .kx-header__utility a:hover { color: var(--kx-green); }
.kx.kx-header.is-scrolled .kx-header__utility { height: 0; opacity: 0; }

.kx .kx-header__bar {
  position: relative; z-index: 2; background: var(--kx-navy);
  transition: background-color var(--kx-duration-slow) var(--kx-ease-signal), box-shadow var(--kx-duration-slow) var(--kx-ease-signal);
}
.kx.kx-header.is-scrolled .kx-header__bar { background: rgb(4 49 75 / 0.92); box-shadow: 0 1px 0 rgb(255 255 255 / 0.08); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.kx.kx-header.has-panel .kx-header__bar { background: var(--kx-navy); box-shadow: none; } /* solid while a panel is open so the two navies meet cleanly */
.kx .kx-header__row { position: relative; display: flex; height: var(--kx-header-h); align-items: center; justify-content: space-between; gap: 2rem; }
.kx .kx-header__logo { flex: none; display: block; }
.kx .kx-header__logo img { height: 22px; width: auto; }

.kx .kx-header__nav { display: none; flex: none; } /* centred between logo and actions by the row's space-between, as Header.tsx */
@media (min-width: 1024px) { .kx .kx-header__nav { display: block; } }
.kx .kx-header__list { display: flex; align-items: center; gap: 2rem; }
@media (min-width: 1024px) and (max-width: 1279px) { .kx .kx-header__list { gap: 1.25rem; } }
.kx .kx-header__link { position: relative; display: block; padding-block: 0.5rem; font-size: 0.875rem; white-space: nowrap; color: var(--kx-on-navy-muted); transition: color var(--kx-duration-base); }
.kx .kx-header__link span { display: block; }
.kx .kx-header__link:hover, .kx .kx-header__link[aria-expanded="true"] { color: #fff; }
.kx .kx-header__link::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 1px; background: var(--kx-green); transform: scaleX(0); transform-origin: left; transition: transform var(--kx-duration-base) var(--kx-ease-kairos); }
.kx .kx-header__link:hover::after, .kx .kx-header__link[aria-expanded="true"]::after { transform: scaleX(1); }
.kx .kx-header__search { display: flex; width: 20px; height: 20px; align-items: center; justify-content: center; color: var(--kx-on-navy-muted); transition: color var(--kx-duration-base); }
.kx .kx-header__search:hover { color: #fff; }
.kx .kx-header__search svg { width: 14px; height: 15px; }
/* search bar: replaces the nav row while open, like the current site (white pill, icon left, cross right) */
.kx .kx-search { display: flex; align-items: center; height: 43px; border-radius: 50px; border: 1px solid #cdcdcd; background: #fff; color: #515962; }
.kx .kx-search[hidden] { display: none; }
.kx .kx-search__submit, .kx .kx-search__close { display: flex; flex: none; align-items: center; justify-content: center; height: 100%; color: var(--kx-navy); }
.kx .kx-search__submit { width: 48px; padding-left: 6px; }
.kx .kx-search__submit svg { width: 16px; height: 17px; }
.kx .kx-search__close { width: 48px; padding-right: 6px; }
.kx .kx-search__close svg { width: 18px; height: 18px; }
.kx .kx-search__input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 0.5rem 0 0; border: 0; background: transparent; font: inherit; font-size: 16px; color: inherit; outline: none; appearance: none; -webkit-appearance: none; }
.kx .kx-search__input::placeholder { color: #515962; opacity: 1; }
/* Keyboard focus: the input drops the UA outline, so the pill itself takes the Kairos ring while anything inside it has focus (visible on the navy bar and in the sheet; tracker L7). */
.kx .kx-search:focus-within { outline: 2px solid var(--kx-green); outline-offset: 3px; }
.kx .kx-search__input::-webkit-search-decoration, .kx .kx-search__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.kx .kx-header__searchbar { display: none; }
@media (min-width: 1024px) {
  .kx .kx-header__nav { transition: opacity var(--kx-duration-fast) var(--kx-ease-soft), visibility 0s linear 0s; }
  .kx.kx-header.is-search .kx-header__nav { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--kx-duration-fast) var(--kx-ease-soft), visibility 0s linear var(--kx-duration-fast); }
  .kx .kx-header__searchbar:not([hidden]) {
    display: flex; position: absolute; top: 50%; left: var(--kx-searchbar-left, 8rem); right: var(--kx-searchbar-right, 10rem);
    opacity: 0; transform: translateY(calc(-50% - 6px)); transition: opacity var(--kx-duration-base) var(--kx-ease-kairos), transform var(--kx-duration-base) var(--kx-ease-kairos);
  }
  .kx .kx-header__searchbar.is-visible { opacity: 1; transform: translateY(-50%); }
}
.kx .kx-header__sheet-search { margin-bottom: 0.5rem; }

.kx .kx-header__actions { display: flex; flex: none; align-items: center; gap: 0.75rem; }
.kx .kx-header__cta { display: inline-flex; } /* small pill with the shared 1px border so it measures like every other --sm button; shown on phones too (client feedback, tracker q13) */

.kx .kx-header__toggle { position: relative; width: 2.5rem; height: 2.5rem; }
@media (min-width: 1024px) { .kx .kx-header__toggle { display: none; } }
.kx .kx-header__toggle span { position: absolute; left: 50%; width: 1.25rem; height: 1px; background: #fff; transform: translateX(-50%); transition: top var(--kx-duration-base) var(--kx-ease-signal), transform var(--kx-duration-base) var(--kx-ease-signal); }
.kx .kx-header__toggle span:nth-child(1) { top: 17px; }
.kx .kx-header__toggle span:nth-child(2) { top: 23px; }
.kx .kx-header__toggle[aria-expanded="true"] span:nth-child(1) { top: 50%; transform: translateX(-50%) rotate(45deg); }
.kx .kx-header__toggle[aria-expanded="true"] span:nth-child(2) { top: 50%; transform: translateX(-50%) rotate(-45deg); }

/* mega panels: Navy #034D73, 1005px centred under the bar; Intelligence Hub spans the shell */
.kx .kx-header__panels { position: absolute; inset-inline: 0; top: 100%; z-index: 1; display: none; }
@media (min-width: 1024px) { .kx .kx-header__panels { display: block; } }
.kx .kx-header__panel {
  position: absolute; top: 0; left: 50%; width: min(1005px, 100%); transform: translate(-50%, -8px);
  background: var(--kx-navy-mid); color: #fff; border-radius: 0 0 8px 8px;
  padding: 78px 64px 74px 50px; opacity: 0;
  transition: opacity var(--kx-duration-fast) var(--kx-ease-soft), transform var(--kx-duration-fast) var(--kx-ease-soft);
}
.kx .kx-header__panel--wide { width: min(100%, var(--kx-shell)); }
.kx .kx-header__panel.is-visible { opacity: 1; transform: translate(-50%, 0); }
.kx .kx-header__panel-inner { display: flex; justify-content: space-between; align-items: flex-start; }
.kx .kx-header__panel--wide .kx-header__panel-inner { gap: 96px; }
/* panel content is a saved Elementor template: its document, container and widget wrappers are
   flattened so the Kairos Menu Column roots are the panel's flex items */
.kx .kx-header__panel-inner :is(.elementor, .e-con, .e-con-inner, .elementor-widget) { display: contents; }

/* mobile sheet (no mobile design yet: keeps the existing sheet, with each panel's links as an accordion) */
.kx .kx-header__sheet { position: relative; z-index: 2; overflow: hidden; max-height: 0; background: var(--kx-navy); transition: max-height var(--kx-duration-slow) var(--kx-ease-signal); }
@media (min-width: 1024px) { .kx .kx-header__sheet { display: none; } }
.kx.kx-header.is-open .kx-header__sheet { max-height: calc(100dvh - var(--kx-header-h)); overflow-y: auto; }
body.admin-bar .kx.kx-header.is-open .kx-header__sheet { max-height: calc(100dvh - var(--kx-header-h) - 46px); }
.kx .kx-header__sheet nav { display: flex; flex-direction: column; padding-block: 0.5rem 2rem; }
.kx .kx-header__sheet-item { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.kx .kx-header__sheet-link { display: block; padding-block: 1rem; color: #fff; }
.kx .kx-header__sheet-toggle { display: flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; color: #fff; }
.kx .kx-header__sheet-toggle svg { width: 1.25rem; height: 1.25rem; transition: transform var(--kx-duration-base) var(--kx-ease-signal); }
.kx .kx-header__sheet-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.kx .kx-header__sheet-sub { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.75rem; padding-bottom: 1.25rem; }
.kx .kx-header__sheet-sub[hidden] { display: none; }
.kx .kx-header__sheet-col-title { margin-top: 0.5rem; font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.012em; font-weight: 600; color: #fff; }
.kx .kx-header__sheet-group-label { font-size: var(--kx-text-label); line-height: 1.2; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(255 255 255 / 0.6); }
.kx .kx-header__sheet-links { display: flex; flex-direction: column; gap: 0.625rem; }
.kx .kx-header__sheet-links a { display: block; font-size: 0.9375rem; line-height: 1.45; color: rgb(255 255 255 / 0.9); }
.kx .kx-header__sheet-utility { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; margin-top: 1.5rem; }
.kx .kx-header__sheet-utility a { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kx-on-navy-muted); }
.kx .kx-header__sheet-cta { margin-top: 1.5rem; align-self: flex-start; } /* base pill size, same as the hero buttons */
body.kx-nav-open { overflow: hidden; }