/* A full-width, in-flow menu on phones: no detached side panel or empty column. */
.menu-page-arrow { display: none; }
@media (max-width: 900px) {
  .site-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    height: auto;
    min-height: 96px;
    gap: 0 12px;
    padding-block: 10px;
  }
  .site-header > .brand { grid-area: 1 / 1; margin: 0; min-width: 0; }
  .menu-toggle { grid-area: 1 / 2; margin: 0; min-height: 44px; gap: 9px; padding: 10px; border-radius: 5px; }
  .menu-icon { font-size: 20px; line-height: 1; min-width: 19px; }
  .site-header > .search-button { grid-area: 1 / 3; }
  #navigation {
    grid-area: 2 / 1 / 3 / -1;
    position: static;
    inset: auto;
    display: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #93b6cc;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 #fff, 0 3px 0 #b2cddd, 0 9px 16px #214d6524;
  }
  #navigation.is-open { display: block; }
  #navigation > ul { display: block; width: 100%; min-width: 0; margin: 0; padding: 0; }
  #navigation > ul > li { width: 100%; min-width: 0; border-bottom: 1px solid #b5cddb; }
  #navigation > ul > li:last-child { border-bottom: 0; }
  #navigation li > a, #navigation summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 46px;
    padding: 11px 13px;
    gap: 15px;
    font-size: 15px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  #navigation summary::after { margin-left: auto; flex-shrink: 0; font-size: 18px; }
  .menu-page-arrow { display: block; font-size: 18px; margin-left: auto; flex-shrink: 0; }
  #navigation details > div {
    position: static;
    inset: auto;
    width: auto;
    min-width: 0;
    max-width: calc(100% - 16px);
    margin: 0 8px 8px;
    padding: 2px 5px;
    border: 0;
    border-left: 2px solid #648ea7;
    border-radius: 0 4px 4px 0;
    box-shadow: none;
  }
  #navigation details > div > a {
    display: block;
    width: 100%;
    min-height: 43px;
    padding: 11px;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  body:not(.high-contrast) .menu-toggle { background: linear-gradient(180deg, #fff, #e2eef6); border: 1px solid #adc7d8; box-shadow: inset 0 1px 0 #fff, 0 2px 0 #c2d7e4; }
  body:not(.high-contrast) .menu-toggle[aria-expanded='true'] { background: linear-gradient(180deg, #366f8e, #16445e); border-color: #153f58; color: #fff; }
  body:not(.high-contrast) #navigation { background: linear-gradient(145deg, #fbfdff, #e0edf6); }
  body:not(.high-contrast) #navigation details > div { background: #ffffffb8; }
  body:not(.high-contrast) #navigation :is(li > a, summary):hover { background: #d1e5f2; text-decoration: none; }
  .high-contrast #navigation, .high-contrast #navigation details > div { background: #000; color: #fff; border-color: #fff; box-shadow: none; }
  .high-contrast #navigation > ul > li { border-color: #fff; }
  .high-contrast .menu-toggle { border: 1px solid #fff; background: #000; color: #fff; }
}
@media (max-width: 600px) {
  .site-header { min-height: 90px; gap: 0 7px; }
  .menu-toggle { padding: 9px 7px; font-size: 13px; gap: 7px; }
}
@media (max-width: 350px) {
  .brand > span { font-size: 9px; padding-left: 7px; }
  .brand { gap: 7px; }
  .brand > img { width: 79px; }
  .menu-toggle { padding-inline: 6px; gap: 5px; }
}
@media (max-width: 380px) {
  .large-text .brand > span { display: none; }
}