/* The site header: one bar of section links, one bar of application
   links, identical on every page.

   It used to be two different headers -- the main page had section links,
   the application pages had a back arrow and a list of themselves -- so
   moving between them changed the furniture. This is the only copy; each
   page links it rather than keeping its own.

   Colours are stated with !important because every page sets a blanket
   `a { color: ... !important }` of its own, which would otherwise win. */

.cfnav {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 40;
  background-color: #06142A !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.cfnav .cfnav-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 22px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cfnav .cfnav-inner::-webkit-scrollbar { display: none; }

.cfnav .cfnav-row {
  display: flex;
  gap: 4px;
  width: max-content;
  margin: 0 auto;          /* centred while it fits, flush left once it scrolls */
}

.cfnav .cfnav-row .cfnav-link {
  flex: 0 0 auto;
  padding: 16px 15px;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none !important;
  color: #B9CBDE !important;
  border-bottom: 3px solid transparent;
}
.cfnav .cfnav-row .cfnav-link:hover { color: #FFFFFF !important; }
.cfnav .cfnav-row .cfnav-link-current {
  color: #F0B429 !important;
  border-bottom-color: #F0B429;
}
/* same trap as the pill below: :hover outranks this, so without saying so
   the page you are on would lose its gold the moment you pointed at it */
.cfnav .cfnav-row .cfnav-link-current:hover { color: #F7C64B !important; }

/* ---- the menu button, small screens only -------------------------------

   The eight links need 753px and fit down to a 768px screen; below about
   700 they ran off the edge with nothing to say so. Rather than hint that
   the strip scrolls, below 760 it stops being a strip.

   It is a real button with aria-expanded, not a div that toggles, so it
   works from the keyboard and is announced properly. The compact layout
   only applies once a script has run; without one the links stay as the
   strip they have always been. */
.cfnav .cfnav-toggle { display: none; }

@media (max-width: 760px) {
  /* Only once a script has run: without one the links stay as they are,
     a strip that scrolls, rather than disappearing behind a button that
     cannot open. */
  .cfjs .cfnav .cfnav-toggle {
    display: flex;
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    align-items: center;
    gap: 11px;
    padding: 15px 16px;
    font-family: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #B9CBDE !important;
    cursor: pointer;
    list-style: none;
  }
  .cfjs .cfnav .cfnav-toggle:focus-visible { outline: 2px solid #F0B429; outline-offset: -3px; }

  /* three bars, drawn rather than typed */
  .cfjs .cfnav .cfnav-bars {
    display: block;
    width: 19px; height: 2px;
    background: #F0B429;
    box-shadow: 0 6px 0 #F0B429, 0 -6px 0 #F0B429;
  }
  .cfjs .cfnav.cfnav-open .cfnav-bars {
    box-shadow: none;
    transform: rotate(45deg);
    position: relative;
  }
  .cfjs .cfnav.cfnav-open .cfnav-bars::after {
    content: ""; position: absolute; left: 0; top: 0;
    width: 19px; height: 2px; background: #F0B429;
    transform: rotate(-90deg);
  }

  .cfjs .cfnav:not(.cfnav-open) > .cfnav-inner { display: none; }
  .cfjs .cfnav > .cfnav-inner {
    padding: 0;
    overflow-x: visible;
    /* never taller than the screen, however many links there are */
    max-height: calc(100vh - 58px);
    overflow-y: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .cfjs .cfnav .cfnav-row {
    flex-direction: column;
    width: auto;
    gap: 0;
  }
  .cfjs .cfnav .cfnav-row .cfnav-link {
    padding: 14px 16px;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    border-left: 3px solid transparent;
  }
  .cfjs .cfnav .cfnav-row .cfnav-link:last-child { border-bottom: 0; }
  .cfjs .cfnav .cfnav-row .cfnav-link-current {
    border-bottom-color: rgba(255, 255, 255, 0.07);
    border-left-color: #F0B429;
  }
}

/* ---- the application links -------------------------------------------- */

.cfbar {
  background-color: #10294A !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.cfbar .cfbar-row {
  max-width: 1080px;
  margin: 0 auto;
  padding: 7px 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.cfbar .cfbar-row .cfbar-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #F0B429 !important;
}

.cfbar .cfbar-row .cfbar-link {
  flex: 0 0 auto;
  padding: 5px 15px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none !important;
  color: #F0B429 !important;
  border: 1px solid rgba(240, 180, 41, 0.5);
  border-radius: 999px;
}
.cfbar .cfbar-row .cfbar-link:hover {
  border-color: #F0B429;
  background-color: rgba(240, 180, 41, 0.12) !important;
}
.cfbar .cfbar-row .cfbar-link-current {
  color: #0A1E38 !important;
  background-color: #F0B429 !important;
  border-color: #F0B429;
}
/* A pseudo-class counts towards specificity, so the plain :hover rule
   above outranks the rule that fills this one in. Hovering the page you
   are already on therefore washed the gold out from under text that
   stayed dark, leaving navy on navy. It lifts instead of dropping. */
.cfbar .cfbar-row .cfbar-link-current:hover {
  color: #0A1E38 !important;
  background-color: #F7C64B !important;
  border-color: #F7C64B;
}

/* A field cleared in the editor leaves an element with nothing in it;
   content.js marks those, and here they take no room. */
.cfnav [data-cf-blank],
.cfbar [data-cf-blank] { display: none !important; }

@media (max-width: 640px) {
  .cfnav .cfnav-inner { padding: 0 12px; }
  .cfjs .cfnav .cfnav-inner { padding: 0; }
  .cfbar .cfbar-row { padding: 7px 10px; gap: 7px; }
  .cfbar .cfbar-row .cfbar-label { width: 100%; text-align: center; font-size: 12px; }
  .cfbar .cfbar-row .cfbar-link { padding: 7px 10px; font-size: 12px; }
}

/* ---- back to top ------------------------------------------------------- */

.cftop {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(240, 180, 41, 0.55);
  border-radius: 999px;
  background-color: #0A1E38 !important;
  box-shadow: 0 6px 20px rgba(6, 20, 42, 0.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.cftop.cftop-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.cftop:hover { background-color: #10294A !important; border-color: #F0B429; }

/* the arrowhead, drawn rather than typed, so no font has to carry it */
.cftop::before {
  content: "";
  width: 11px;
  height: 11px;
  margin-top: 4px;
  border-left: 2px solid #F0B429;
  border-top: 2px solid #F0B429;
  transform: rotate(45deg);
}

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