/* Shared site chrome: header (klh-*), footer (klf-*), skip link, and the
   <main> landmark rule. Kept out of style.css because style.css also carries
   legacy TeleportHQ base styles (.button, .thq-*, Raleway) that must not reach
   the two standalone pages. Every page links this file; only the 22 exported
   pages link style.css as well. */

/* ==========================================================================
   Site header (klh-*) — replaces the legacy header20 component site-wide.
   Prefixed because the legacy stylesheet already defines .nav-link
   (width:100%; display:flex) which would flatten these links.

   Positioning note: the old header lived inside a custom element with no
   layout box, so it overlaid the page and every rebuilt page compensated
   with padding-top:138px. This one is a real sticky block that occupies
   flow, so that compensation is removed alongside it.

   Submenus open on hover AND on focus-within, so they are reachable by
   keyboard without any JavaScript; the script only adds Escape-to-close
   and the mobile toggle.
   ========================================================================== */

.klh {
  position: sticky;
  top: 0;
  z-index: 900;
  /* display:contents on the wrapper (below) makes this a direct flex item of the
     page container, which centres its items -- without these the header shrinks
     to content width and floats in the middle. Same fix the footer already uses. */
  width: 100%;
  align-self: stretch;
  flex: 0 0 auto;
  background: #ffffff;
  border-bottom: 1px solid #d3dbe4;
  font-family: "Public Sans", "Aptos", "Segoe UI", Arial, sans-serif;
}

.klh *,
.klh *::before,
.klh *::after { box-sizing: border-box; }

.klh a { text-decoration: none; }

.klh-shell {
  width: min(calc(100% - 40px), 1280px);
  margin-inline: auto;
}

/* ---- main row ---- */
.klh-row {
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.klh-brand { display: inline-flex; align-items: center; flex: none; }

.klh-brand img {
  display: block;
  width: 196px;
  max-height: 52px;
  object-fit: contain;
  object-position: left center;
}

/* ---- mobile toggle ---- */
.klh-toggle {
  min-width: 48px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 13px;
  color: #022c56;
  background: #ffffff;
  border: 1px solid #022c56;
  border-radius: 4px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.klh-toggle-icon { width: 21px; height: 17px; }

/* ---- nav: mobile first (stacked panel) ---- */
.klh-nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: #ffffff;
  border-bottom: 1px solid #d3dbe4;
  box-shadow: 0 18px 30px -22px rgba(2, 44, 86, 0.55);
}

.klh-nav.is-open { display: block; }

.klh-list {
  width: min(calc(100% - 40px), 1280px);
  margin: 0 auto;
  padding: 8px 0 20px;
  list-style: none;
}

.klh-item { border-bottom: 1px solid #e6ecf2; }

.klh-link {
  display: block;
  padding: 13px 2px;
  color: #022c56;
  font-size: 15px;
  font-weight: 700;
}

.klh-link:hover { color: #005ea2; }

.klh-link[aria-current="page"] { color: #005ea2; }

.klh-menu {
  margin: 0 0 10px;
  padding: 0 0 0 14px;
  list-style: none;
  border-left: 2px solid #d3dbe4;
}

.klh-menu-link {
  display: block;
  padding: 9px 2px;
  color: #4b5b70;
  font-size: 14px;
  font-weight: 600;
}

.klh-menu-link:hover { color: #005ea2; }
.klh-menu-link[aria-current="page"] { color: #005ea2; }

/* ---- desktop ---- */
@media (min-width: 1024px) {
  .klh-row { position: relative; }

  .klh-toggle { display: none; }

  .klh-nav {
    display: block;
    position: static;
    border-bottom: 0;
    box-shadow: none;
    background: transparent;
  }

  .klh-list {
    width: auto;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .klh-item {
    position: relative;
    border-bottom: 0;
  }

  .klh-link {
    padding: 26px 12px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
  }

  .klh-link[aria-current="page"],
  .klh-item:hover > .klh-link,
  .klh-item:focus-within > .klh-link {
    color: #005ea2;
    border-bottom-color: #005ea2;
  }

  /* submenu */
  .klh-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 264px;
    margin: 0;
    padding: 8px 0;
    background: #ffffff;
    border: 1px solid #d3dbe4;
    border-top: 3px solid #005ea2;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 22px 40px -22px rgba(2, 44, 86, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
  }

  .klh-item:hover > .klh-menu,
  .klh-item:focus-within > .klh-menu,
  .klh-item.is-open > .klh-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* Menus on the right-hand items would hang past the viewport edge -- and an
     absolutely-positioned menu still counts toward scrollWidth even while
     visibility:hidden, so this showed up as a 7px page overflow at 1100px.
     Anchor those panels to the right instead. */
  .klh-item:nth-child(n+3) > .klh-menu {
    left: auto;
    right: 0;
  }

  .klh-menu-link {
    padding: 10px 18px;
    font-size: 14.5px;
    white-space: nowrap;
  }

  .klh-menu-link:hover,
  .klh-menu-link:focus-visible {
    background: #f3f6f9;
    color: #005ea2;
  }
}

.klh :focus-visible {
  outline: 3px solid #2491ff;
  outline-offset: -3px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .klh-menu { transition: none; }
}

/* The legacy header20 lived inside a position:fixed wrapper (.<page>-container2),
   which is why every page padded its top. The new header is sticky and must sit in
   normal flow, so neutralise that wrapper wherever it still holds the header.
   Needs "body " for specificity: the per-page stylesheet loads after this one. */
body :has(> .klh) {
  position: static;
  display: contents;
}

/* position:sticky only travels inside its parent's box, and any ancestor with a
   non-visible overflow becomes its scrollport. The export gives us both problems:
   the header sits in a wrapper exactly its own height (so there is nowhere to
   travel) and the page wrapper is overflow:hidden. display:contents above drops
   the short wrapper's box entirely; overflow-x:clip below still prevents sideways
   scrolling but, unlike hidden, does not create a scroll container. */
body > div > div:has(.klh) {
  overflow: visible;
  overflow-x: clip;
}

/* ==========================================================================
   Site footer (klf-*) — replaces the legacy footer3 component site-wide.
   Ported from the standalone build's .site-footer, with the CSS custom
   properties resolved to literals since style.css has no --navy-deep/--sN.
   Prefixed for the same reason as the header: the legacy sheet owns a lot
   of generic names.
   ========================================================================== */

.klf {
  /* page wrappers are display:flex, so the footer was sized by its content
     (912px in a 1440px viewport) instead of spanning the page */
  width: 100%;
  align-self: stretch; /* klf */
  flex: 0 0 auto;
  padding-block: 64px 32px;
  background: #0d203b;
  color: #d4e0ea;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-family: "Public Sans", "Aptos", "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

.klf *,
.klf *::before,
.klf *::after { box-sizing: border-box; }

.klf a { color: #d4e0ea; text-decoration: underline; text-underline-offset: 0.15em; }
.klf a:hover { color: #ffffff; }

.klf-shell {
  width: min(calc(100% - 40px), 1280px);
  margin-inline: auto;
}

.klf-grid {
  display: grid;
  gap: 48px;
}

.klf-address {
  margin-top: 24px;
  color: #c7d5e1;
  font-style: normal;
}

.klf-address a { color: #ffffff; }

.klf-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}

.klf-nav h2 {
  margin: 0;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.klf-nav ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.klf-nav li + li { margin-top: 8px; }

.klf-nav a { font-size: 15px; }

.klf-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 28px;
  color: #afc3d4;
  font-size: 14px;
}

.klf-bottom p { margin: 0; }

.klf-links {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.klf-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .klf-nav { grid-template-columns: 1fr; }
}

@media (min-width: 900px) {
  .klf-grid { grid-template-columns: minmax(240px, 0.8fr) minmax(0, 1.2fr); }
  .klf-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.klf :focus-visible {
  outline: 3px solid #2491ff;
  outline-offset: 2px;
  border-radius: 2px;
}

/* WCAG 2.4.1 Bypass Blocks (Level A). Off-screen until focused, then pinned
   above the sticky header, which sits at z-index 900. */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1000;
  transform: translateY(-200%);
  padding: 12px 18px;
  background: #ffffff;
  color: #022c56;
  border: 2px solid #022c56;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { transform: translateY(0); }

/* The <main> landmark added for 508 is a flex child of the export page wrapper,
   which centres its items -- without this it shrinks to its content width and the
   whole page renders as a narrow centred column (GSA MAS was 996px of 1600).
   Same fix .klh and .klf already carry. */
body main#main {
  width: 100%;
  align-self: stretch;
  flex: 0 0 auto;
  min-width: 0;
}


/* The section a child page sits under, marked visually only. aria-current stays
   on the page's own link so screen readers are not told two things are current. */
.klh-link[data-ancestor="true"] { color: #005ea2; }

@media (min-width: 1024px) {
  .klh-link[data-ancestor="true"] { border-bottom-color: #9dc3e6; }
}