@charset "UTF-8";
/**
 * CAI Site Header (cai_header widget).
 *
 * Structure from strategy prototype cai-prototype-v6.html (2026-07-14).
 * NOTE: the prototype's navy is var(--cai-color-navy, #1f3144), but the design-system hero navy is
 * var(--cai-color-navy, #1f3144) — flagged in NAVIGATION.md; using the prototype value until the
 * design file settles the header treatment. Container uses the site-wide
 * 1320px content token.
 */
/* Elementor's own `.e-con > .elementor-widget { max-width:100% }` leaves the
   widget wrapper at width:auto, which makes the 50% in the full-bleed calc
   below unreliable (the bands hung off the left edge). Force the wrapper
   itself full-width so the breakout math has a stable reference. */
.elementor-widget-cai_header {
  width: 100%;
}

/* Live-visible header height (eyebrow + bar). CSS defaults cover the common
   cases; header.js overwrites the value on :root from the real element so the
   eyebrow toggle and any bar-height change stay exact. Used for the content
   offset, the mega-panel height cap, and the mobile drawer height. */
:root {
  --cai-header-h: 85px;
}

/* Sticky header ⇒ push the page content down so it starts below the bar and
   scrolls *behind* the translucent header. Matched directly off the
   server-rendered .cai-siteheader-sticky class (present whenever the widget's
   "Sticky on scroll" setting is on) so the offset applies at first paint —
   no waiting on JS to measure and toggle a class, which used to cause a
   visible reflow as content shifted down after load. The Elementor editor
   canvas is excluded so the header never eats into the live edit area. */
body {
  padding-top: var(--cai-header-h, 85px);
}

/* Targets the first flexbox base container inside the header */
header .elementor .e-flexbox-base:first-of-type,
.elementor-location-header .e-flexbox-base:first-of-type {
  padding: 0 !important;
}

.cai-siteheader {
  /* Full-bleed breakout: the Theme Builder template renders this widget
     inside a boxed container; the band must span the viewport while
     .cai-siteheader-inner constrains children to the 1320 grid. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border-bottom: 1px solid #e9ecef;
  font-family: Arial, sans-serif;
  position: relative;
  z-index: 100;
}

.cai-siteheader-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Fixed + left/right:0 already spans the viewport, so drop the .cai-siteheader
     full-bleed breakout math (100vw would add scrollbar width and overflow). */
  width: auto;
  margin-left: 0;
}

/* Logged-in only: WordPress fixes its admin bar at top:0 and pushes content
   down via `html { margin-top }`, but our fixed header ignores that margin and
   would sit behind the bar. Drop it below the bar so the eyebrow isn't covered
   and the content lines up with the header bottom (no admin-bar-height gap).
   Matches WP's own 32px / 46px breakpoints; visitors (no .admin-bar) are
   unaffected. */
body.admin-bar .cai-siteheader-sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .cai-siteheader-sticky {
    top: 46px;
  }
}
.cai-siteheader-inner {
  max-width: var(--cai-container-max-width, 1320px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* --- Utility eyebrow -------------------------------------------------- */
.cai-siteheader-eyebrow {
  background: var(--cai-color-action, #6A6BD4);
  color: #fff;
  font-size: 16px;
  line-height: 23px;
}

.cai-siteheader-eyebrow .cai-siteheader-inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  padding-block: 6px;
}

.cai-siteheader-eyebrow a {
  color: #fff;
  text-decoration: none;
}

.cai-siteheader-eyebrow a:hover {
  text-decoration: underline;
}

.cai-siteheader-dot {
  opacity: 0.55;
}

/* --- Main bar ---------------------------------------------------------- */
/* Direct-child selector on purpose: the flyout panels now live inside
   .cai-header-nav (right after their own trigger button, for keyboard tab
   order), which makes their own .cai-siteheader-inner wrapper a descendant
   of .cai-siteheader-bar too. A plain descendant selector here would also
   flex/height-clamp that wrapper down to the bar's row height, squashing
   the whole grid — scope this to the bar's actual direct-child wrapper. */
.cai-siteheader-bar > .cai-siteheader-inner {
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.cai-header-logo {
  display: flex;
  align-items: center;
  flex: none;
  line-height: 0;
}

.cai-header-logo svg {
  height: 57px;
  width: auto;
  display: block;
}

.cai-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.cai-header-topitem {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-family: Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--cai-color-ink, #141414);
  text-decoration: none;
  cursor: pointer;
}

.cai-header-topitem:hover,
.cai-header-topitem[aria-expanded=true] {
  background: #e9f2f8;
  color: var(--cai-color-navy, #1f3144);
}

.cai-header-caret {
  font-size: 10px;
  transition: transform 0.15s ease;
}

.cai-header-topitem[aria-expanded=true] .cai-header-caret {
  transform: rotate(180deg);
}

/* --- Search placeholder ------------------------------------------------ */
.cai-siteheader-tools {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: none;
}

.cai-header-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--cai-color-border, #dee2e6);
  border-radius: 8px;
  color: var(--cai-color-body-muted, #606d7b);
  font-size: 14px;
  min-width: 180px;
  transition: border-color 0.15s ease;
}

.cai-header-search:focus-within {
  border-color: var(--cai-color-action, #6A6BD4);
}

.cai-header-search__icon {
  display: inline-flex;
  flex: none;
}

.cai-header-search__icon svg {
  width: 18px;
  height: 18px;
}

.cai-header-search input[type=search] {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: var(--cai-color-ink, #141414);
}

.cai-header-search input[type=search]::placeholder {
  color: var(--cai-color-body-muted, #606d7b);
}

/* --- Utility buttons (repeater, shared .cai-btn styling) --------------- */
.cai-header-utility {
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.cai-header-utility .cai-btn {
  white-space: nowrap;
}

/* --- Collapsible search ------------------------------------------------- */
.cai-header-searchwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: none;
}

.cai-header-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--cai-color-border, #dee2e6);
  border-radius: 8px;
  color: var(--cai-color-body-muted, #606d7b);
  cursor: pointer;
  transition: border-color 0.15s ease, opacity 0.2s ease;
}
.cai-header-search-toggle svg {
  width: 18px;
  height: 18px;
}
.cai-header-search-toggle:hover {
  border-color: var(--cai-color-action, #6A6BD4);
}
.cai-header-search-toggle:focus-visible {
  outline: 2px solid var(--cai-color-action, #6A6BD4);
  outline-offset: 2px;
}

.cai-header-search--bar {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  min-width: 0;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
  background: var(--cai-color-white, #fff);
  transition: width 0.25s ease, opacity 0.2s ease;
}

.cai-siteheader-tools .cai-btn-wrap .cai-btn.cai-btn-primary {
  background-color: var(--cai-color-purple-dark);
}

.cai-siteheader-tools.is-search-open .cai-header-search--bar {
  width: 340px;
  max-width: min(340px, 60vw);
  opacity: 1;
  pointer-events: auto;
}
.cai-siteheader-tools.is-search-open .cai-header-search-toggle {
  opacity: 0;
  pointer-events: none;
}
.cai-siteheader-tools.is-search-open .cai-header-utility {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* --- Mega flyout panels ------------------------------------------------- */
.cai-header-flyout {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 95;
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  box-shadow: 0 24px 48px rgba(20, 30, 45, 0.14);
  /* When a mega panel is taller than the space under the header, scroll
     inside the panel rather than off the bottom of the viewport. */
  max-height: calc(100vh - var(--cai-header-h, 85px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cai-header-flyout .cai-siteheader-inner {
  padding-block: 34px 40px;
}

/* "View all {title}" — the top-level item's own URL, surfaced once per panel
   regardless of layout (divisions/bu/columns) since it's tied to the mega
   item itself, not any one division/column heading within it. */
.cai-header-flyouthead {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -24px;
}

.cai-header-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}

.cai-header-viewall:hover {
  text-decoration: underline;
}

.cai-header-viewall-arrow {
  transition: transform 0.15s ease;
  width: 20px;
  height: 20px;
}

.cai-header-viewall:hover .cai-header-viewall-arrow {
  transform: translateX(2px);
}

.cai-header-division {
  margin-bottom: 30px;
}

.cai-header-division:last-child {
  margin-bottom: 0;
}

.cai-header-divlabel {
  display: flex;
  align-items: center;
  gap: 8px;
  /* a11y: rem so it scales with the user's browser font size (was 12px). */
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cai-color-blue-brand, #0085ca);
  margin-bottom: 18px;
}

.cai-header-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px 28px;
  align-items: start;
}

.cai-header-colhead {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cai-color-ink, #141414);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e9f2f8;
}

.cai-header-coldesc {
  /* a11y: rem-based ~14px (was 12px) for legible descriptive copy. */
  font-size: 0.875rem;
  color: var(--cai-color-body-muted, #606d7b);
  line-height: 1.45;
  margin: -4px 0 14px;
}

.cai-header-linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cai-header-linklist a {
  display: block;
  padding: 7px 8px;
  margin: 0 -8px;
  border-radius: 6px;
  text-decoration: none;
}

.cai-header-linkname {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cai-color-action, #6A6BD4);
}

.cai-header-linkdesc {
  display: block;
  /* a11y: rem-based ~14px (was 12px) for legible descriptive copy. */
  font-size: 0.875rem;
  color: var(--cai-color-body-muted, #606d7b);
  margin-top: 2px;
  line-height: 1.4;
}

.cai-header-ext {
  /* a11y: rem-based ~14px (was 11px). */
  color: var(--cai-color-action, #6A6BD4);
  transform: rotate(-45deg) translateX(0);
  width: 20px;
  height: 20px;
}

.cai-header-linkname:hover .cai-header-ext {
  transform: rotate(-45deg) translateX(2px);
}

/* --- Mobile ------------------------------------------------------------- */
.cai-header-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--cai-color-border, #dee2e6);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

/* main.scss's global button:hover/:focus rule (meant for filled CTAs) paints
   this icon-only button dark-on-dark — the ink-colored bars vanish into it.
   On iOS Safari the :hover state also sticks after a tap, so the button just
   goes solid with no visible icon or open/close animation. Opt this button
   out and give it its own, lighter hover/focus treatment instead. */
.cai-header-hamburger:hover,
.cai-header-hamburger:focus {
  background: var(--cai-color-smoke, #f7f7f7);
  background-color: var(--cai-color-smoke, #f7f7f7) !important;
  color: inherit !important;
}

.cai-header-hamburger:focus-visible {
  outline: 2px solid var(--cai-color-action, #6A6BD4);
  outline-offset: 2px;
}

.cai-header-hamburger span {
  display: block;
  height: 2px;
  background: var(--cai-color-ink, #141414);
  border-radius: 1px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Animate the three bars into an X when open. The 7px shift = one bar height
   (2px) + one gap (5px), so the outer bars meet at the middle bar's line. */
.cai-header-hamburger[aria-expanded=true] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.cai-header-hamburger[aria-expanded=true] span:nth-child(2) {
  opacity: 0;
}

.cai-header-hamburger[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Open mobile nav: a panel pinned directly under the fixed bar that fills the
   rest of the viewport. The logo + hamburger stay fixed in the bar above; only
   this panel scrolls. Positioned absolute (not fixed) because .cai-siteheader's
   backdrop-filter makes it the containing block, so top:100% = just under the
   bar and the height cap fills to the viewport bottom. */
.cai-header-drawer {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: calc(100vh - var(--cai-header-h, 85px));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  box-shadow: 0 24px 48px rgba(20, 30, 45, 0.14);
  padding-bottom: 40px;
}

.cai-header-drawer-search {
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
}

.cai-header-drawer-search .cai-header-search {
  width: 100%;
  min-width: 0;
}

/* Utility links (Contact / Customer Portal) folded in from the eyebrow. */
.cai-header-drawer-utility {
  list-style: none;
  margin: 8px 0 0;
  padding: 12px 20px 0;
  border-top: 1px solid #e9ecef;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cai-header-drawer-utility a {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cai-color-action, #6A6BD4);
  text-decoration: none;
}

/* Utility buttons folded into the bottom of the drawer on mobile. */
.cai-header-drawer-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
  padding: 16px 20px 4px;
  border-top: 1px solid #e9ecef;
}
.cai-header-drawer-buttons .cai-btn {
  width: 100%;
  justify-content: center;
}

/* Lock body scroll while the mobile nav is open (header.js toggles the class);
   the drawer's own overscroll-behavior keeps its scroll from chaining out. */
html.cai-nav-open {
  overflow: hidden;
}

.cai-header-drawerlist {
  list-style: none;
  margin: 0;
  padding: 8px 20px;
}

.cai-header-drawerlist .cai-header-drawerlist {
  padding: 0 0 0 16px;
}

/* Mobile counterpart of .cai-header-flyouthead — the top-level item's own
   "View all {title}" link, shown first inside its <details> panel. */
.cai-header-drawerlist--viewall {
  padding: 0 0 4px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e9ecef;
}

.cai-header-drawer-viewall {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cai-header-drawerlist a,
.cai-header-drawerlist summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--cai-color-ink, #141414);
  text-decoration: none;
  cursor: pointer;
}

.cai-header-drawerlist a {
  color: var(--color-action, #6A6BD4);
}

/* <summary>'s native disclosure triangle relies on display:list-item, which
   the flex row above overrides — so browsers render no indicator at all.
   Add our own: a plus that rotates/fades into a minus on open, matching the
   FAQ accordion's expand indicator (see .cai-accordion__icon in accordion.scss). */
.cai-header-drawerlist summary::-webkit-details-marker {
  display: none;
}

.cai-header-drawer-navtext {
  flex: 1;
}

.cai-header-drawer-navicon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  margin-left: auto;
  width: 14px;
  height: 14px;
  color: currentColor;
  transition: transform 0.3s ease;
}

.cai-header-drawer-navbar {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: currentColor;
  border-radius: 1px;
}

.cai-header-drawer-navbar--chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  background: transparent;
  transform: rotate(-45deg);
  transition: transform 0.2s ease;
  margin-top: -4px;
}

.cai-header-drawerlist details[open] > summary .cai-header-drawer-navbar--chevron {
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .cai-header-drawer-navicon,
  .cai-header-drawer-navbar--h {
    transition: none;
  }
}
.cai-header-drawerlist .cai-header-drawerlist summary {
  font-weight: 400;
  color: var(--cai-color-navy, #1f3144);
}

@media (max-width: 1024px) {
  /* Eyebrow is folded into the drawer on mobile, so the header is just the
     bar. Keep this in sync with .cai-siteheader-bar height below; header.js
     still overrides :root with the measured value. */
  :root {
    --cai-header-h: 64px;
  }
  .cai-siteheader-eyebrow {
    display: none;
  }
  .cai-header-nav,
  .cai-header-search,
  .cai-header-searchwrap,
  .cai-header-utility {
    display: none;
  }
  /* ...but the search folded into the drawer must still show. */
  .cai-header-drawer .cai-header-search {
    display: flex;
  }
  .cai-header-hamburger {
    display: flex;
  }
  .cai-siteheader-bar > .cai-siteheader-inner {
    height: 64px;
  }
  .cai-siteheader-inner {
    padding-inline: 20px;
  }
  .cai-header-logo svg {
    height: 28px;
  }
}