/* --------------------------------------------------------------------------------------------
   Site header (staging, 2026-09-27). One treatment on every page: a solid white bar in the page
   flow, navy logo and menu, the same 80rem width as the content and footer. It replaces a
   transparent header positioned over the first section (white or navy text per page), which
   made every first section pad its top to clear it; site-header-offsets.css takes that padding
   back out.
   ----------------------------------------------------------------------------------------- */
.site-header {
  position: relative;
  top: auto;
  padding: 0;
  background: #fff;
  border-bottom: 1px solid #D5DDE0;
  color: #0B272D;
}
.admin-bar .site-header {
  top: auto;
}
.site-header .announcement {
  margin-bottom: 0;
}

/* Same measure as .container everywhere else (was 82.5rem, so the logo sat 20px outside). */
.site-header .site-header__inner.container {
  max-width: 80rem;
  flex-wrap: nowrap;
  align-items: center;
  min-height: 5rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.site-header .site-branding {
  flex: none;
  width: 196px; /* was 152px; a logo this size carries 17px menu type */
  max-width: 196px;
  margin-right: auto;
}
.site-header .site-branding svg {
  width: 100%;
  height: auto;
}
.site-header .site-branding a,
.site-header .site-branding svg {
  display: block;
}

/* Two right-aligned rows: utility links + search, then the main menu. */
.site-header .site-navigation__wrapper {
  flex: 1 1 auto;
  max-width: none;
}
.site-header .main-navigation ul#courtesy-menu,
.site-header .main-navigation ul#primary-menu {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  max-width: none;
  margin: 0 0 0 auto;
  padding: 0;
}
.site-header .site-navigation__wrapper #site-navigation {
  display: block;
  padding-right: 0;
}
.site-header .main-navigation ul#courtesy-menu {
  gap: 1.75rem;
  margin-bottom: .25rem;
}
.site-header .main-navigation ul#courtesy-menu > li {
  margin: 0;
  padding: 0;
}
.site-header .main-navigation ul#courtesy-menu > li > a {
  font-size: .9375rem;
  font-weight: 500;
  color: #33474C;
}
.site-header .main-navigation ul#primary-menu {
  padding-right: 15px; /* room for the last item's dropdown chevron, which hangs off its right */
}
.site-header .main-navigation ul#primary-menu > li {
  opacity: 1;
  padding: .625rem 0 .25rem;
}
.site-header .main-navigation ul#primary-menu > li > a {
  font-size: 1.0625rem;
  color: #0B272D;
}
/* Dropdown chevrons: a small 7px caret in the text colour (was a 10px, 2px-stroke "V"). */
.site-header .main-navigation ul#primary-menu > li.menu-item-has-children:not(:last-child) {
  margin-right: 2.25rem;
}
header.site-header .main-navigation ul#primary-menu > li.menu-item-has-children::before,
header.site-header.dark-text .main-navigation ul#primary-menu > li.menu-item-has-children::before {
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  right: -15px;
  top: 50%;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: #0B272D;
  transform: translateY(-65%) rotate(45deg);
  transition: transform .2s ease, color .2s ease;
}
header.site-header .main-navigation ul#primary-menu > li.menu-item-has-children:hover::before,
header.site-header .main-navigation ul#primary-menu > li.menu-item-has-children:focus-within::before,
header.site-header.dark-text .main-navigation ul#primary-menu > li.menu-item-has-children:hover::before {
  top: 50%;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  color: #006FE6;
  transform: translateY(-25%) rotate(-135deg);
}
.site-header .main-navigation ul#courtesy-menu > li > a:hover,
.site-header .main-navigation ul#courtesy-menu > li > a:focus-visible,
.site-header .main-navigation ul#primary-menu > li:hover > a,
.site-header .main-navigation ul#primary-menu > li > a:focus-visible {
  color: #006FE6;
}
header.site-header.dark-text .main-navigation ul#primary-menu > li.menu-item-has-children::before {
  border-color: #0B272D;
}
header.site-header.dark-text .main-navigation ul#primary-menu > li.current-menu-item > a,
header.site-header.dark-text .main-navigation ul#primary-menu > li.current-menu-ancestor > a,
header.site-header.dark-text .main-navigation ul#primary-menu > li.current_page_item > a {
  color: #006FE6;
}

/* Search: an ordinary outlined field with a visible search button. */
.site-header .menu-item.search-toggle {
  margin-left: .25rem;
}
.site-header .menu-item.search-toggle form.search-form {
  position: relative;
  display: flex;
  margin: 0;
}
.site-header .menu-item.search-toggle form.search-form input.search-field {
  width: 14rem;
  max-width: none;
  height: 2.375rem;
  margin: 0;
  padding: 0 2.5rem 0 .75rem;
  border: 1px solid #B8C4C8;
  border-radius: 4px;
  background: #fff;
  color: #0B272D;
  font-size: .875rem;
  box-shadow: none;
}
.site-header .menu-item.search-toggle form.search-form input.search-field::placeholder {
  color: #5B6B70;
  opacity: 1;
}
.site-header .menu-item.search-toggle form.search-form input.search-field:focus {
  border-color: #006FE6;
  outline: 2px solid #006FE6;
  outline-offset: 0;
}
.site-header .menu-item.search-toggle form.search-form button[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  min-width: 0;
  max-width: none;
  height: 2.25rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: #33474C;
  font-size: .875rem;
  opacity: 1;
}
.site-header .menu-item.search-toggle form.search-form button[type=submit]:hover,
.site-header .menu-item.search-toggle form.search-form button[type=submit]:focus-visible {
  color: #006FE6;
  background: none;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid #006FE6;
  outline-offset: 3px;
}

/* Phones and tablets: logo and menu button on one line. */
@media screen and (max-width: 991px) {
  .site-header .site-header__inner.container {
    min-height: 4rem;
    padding: .625rem 1.25rem;
  }
  .site-header .site-branding {
    width: 148px;
    max-width: 148px;
  }
  .site-header button.off-canvas-open,
  .admin-bar .site-header button.off-canvas-open {
    position: relative;
    top: auto;
    right: auto;
    margin: 0;
    width: 44px;
    height: 44px;
    border-width: 2px;
  }
}

/* Phone menu drawer: stack from the top (it spread its four parts over the full screen height)
   and give the search the same plain white field as on desktop. */
.off-canvas-container {
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 1.5rem;
  overflow-y: auto;
}
.off-canvas-container > .site-branding,
.off-canvas-container > .search-form__wrapper,
.off-canvas-container > .off-canvas-content {
  margin: 0;
}
.off-canvas-container .search-form__wrapper .search-form {
  position: relative;
  display: flex;
  margin: 0;
}
.off-canvas-container .search-form__wrapper .search-form label {
  flex: 1 1 auto;
  width: 100%;
}
.off-canvas-container .search-form__wrapper input.search-field {
  width: 100%;
  height: 3rem;
  margin: 0;
  padding: 0 3rem 0 1rem;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #0B272D;
  font-size: 1rem;
}
.off-canvas-container .search-form__wrapper input.search-field::placeholder {
  color: #5B6B70;
  opacity: 1;
}
.off-canvas-container .search-form__wrapper button.search-submit {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  min-width: 0;
  height: 3rem;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0 4px 4px 0;
  background: none;
  color: #0B272D;
}
.off-canvas-container .search-form__wrapper button.search-submit svg {
  width: 18px;
  height: 18px;
}

/* Dropdowns are centred under their menu item. The menu now ends at the content's right edge, so
   the last item's panel (Resources) hung up to 50px past the window and made the page scroll
   sideways. It lines up with its item's right edge instead. */
@media screen and (min-width: 992px) {
  .main-navigation ul#primary-menu > li:last-child > ul.sub-menu {
    left: auto;
    right: 0;
    width: 17.5rem; /* the width the centred panels get; pinned to an edge, auto would shrink it */
    transform: none;
  }
}