/* Authored mobile-only override. Keep the approved site.css byte-identical. */
@media (max-width: 960px) {
  #reference-root .site .header {
    --header-height: 80px;
    height: var(--header-height);
    padding-inline: 24px;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
  }
  #reference-root .site .header > a {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: 44px;
  }
  #reference-root .site .header .headerRight {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0;
  }
  /* Hide the original location even before the relocation script is ready. */
  #reference-root .site .headerRight > .languages { display: none; }
  #reference-root .site .headerRight > .primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-height: 44px !important;
    padding: 8px 12px !important;
  }
  #reference-root .site .header .menu {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    margin-left: 0;
    padding: 10px;
  }
  #reference-root .site .header > .nav {
    top: 100%;
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
  }
  #reference-root .site .header > .nav > .languages {
    display: flex;
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    align-self: stretch;
    gap: 8px;
    margin: 16px 0 0;
    padding: 12px 0 0;
    border-top: 1px solid var(--line);
    font-family: Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
  }
  #reference-root .site .header > .nav > .languages > a {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    border: 0;
    font-size: 12px;
  }
  #reference-root .site .header > .nav > .languages > a[aria-current="page"]::after {
    display: block;
    bottom: 6px;
    left: 8px;
    right: 8px;
    transform: none;
  }
}
@media (max-width: 760px) {
  #reference-root .site .header {
    --header-height: 76px;
    padding-inline: 20px;
  }
  #reference-root .site .header > a .logo {
    width: clamp(112px, 34vw, 143px) !important;
  }
  #reference-root .site .header .cta-long { display: none; }
  #reference-root .site .header .cta-short { display: inline; }
}
@media (max-width: 380px) {
  #reference-root .site .header { padding-inline: 14px; }
}