/* The forum theme includes this same stylesheet. Keep the bar in normal flow
   and let its background span the viewport while the links align with content. */
@media screen {
  html:has([data-site-header]) { scroll-padding-top: 88px; }
  .hysa-site-shell:has(> [data-site-header]) { display: contents; }
  html body header[data-site-header][class] {
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    max-width: none;
    min-height: 76px;
    margin: 0;
    padding: 0 max(24px, calc((100% - 1320px) / 2));
    border: 0;
    border-bottom: 1px solid #d9dfe3;
    border-radius: 0;
    background: #fff;
    font-family: var(--font-interface);
    line-height: 1.6;
  }
  html body header[data-site-header][class] > a {
    font: 650 2rem/1.1 var(--font-editorial);
    letter-spacing: -.035em;
  }
  html body header[data-site-header][class] > nav a { font-weight: 600; }
  html body header[data-site-header][class] summary {
    font: 600 1rem/1.6 var(--font-interface);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    list-style: none;
  }
  [data-site-header] summary::-webkit-details-marker { display: none; }
  [data-site-header] summary::before {
    content: "";
    margin: 0;
    width: 7px;
    height: 7px;
    border: solid currentColor;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
  }
  [data-site-header] details[open] summary::before { transform: rotate(45deg); }
  [data-site-header] > details { position: static; }
  [data-site-header] > details nav { max-height: calc(100dvh - 76px); overflow-y: auto; }
  html.anon body header[data-site-header] a[data-forum-member],
  html:not(.anon) body header[data-site-header] a[data-forum-guest] { display: none; }
  body > .skip:focus { z-index: 101; }
  @media (max-width: 1300px) {
    html body header[data-site-header][class] { min-height: 68px; }
    html:has([data-site-header]) { scroll-padding-top: 80px; }
    [data-site-header] > details nav { max-height: calc(100dvh - 68px); }
  }
  @media (max-width: 720px) {
    html body header[data-site-header][class] { padding-inline: 16px; }
    html body header[data-site-header][class] > a { font-size: 1.625rem; gap: 6px; }
    html body header[data-site-header][class] summary { padding-inline: 6px; }
    html body header[data-site-header][class] > a img { width: 24px; height: 30px; }
  }
}