.header {
  align-items: center;
  background-color: var(--mod-heading-font-color);
  color: var(--text-2);
  display: grid;
  gap: 1rem;
  padding: 0 1rem;
}

div.site-title-section {
  box-sizing: border-box;
  display: grid;
  gap: 0.5em;
  grid-area: logo;
  grid-template-rows: subgrid;
  max-height: var(--header-height);
}

div.title-container {
  align-items: center; /* Vertically centers the content */
  box-sizing: border-box;
  display: flex;
  grid-column: 2/-1;
  grid-row: 1/-1;
  justify-content: center;
  max-height: var(--header-height);
}

span.site-title.spectrum-Heading {

  --mod-heading-margin-start: 0px;
  --mod-heading-margin-end: 0px;
  background-color: var(--mod-heading-font-color);
  box-sizing: border-box;
  color: var(--text-2);
}

@media (width <768px) {
  .header {
    grid-template-areas: "menu-button logo social";
    grid-template-columns: 1fr 4fr 1fr;
  }

  div.site-title-section {
    grid-template-columns: 1fr 5fr;
  }

  div.title-container {
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-xl);
    line-height: var(--spectrum-heading-line-height);
    text-align: center;
  }
}

@media (width >=768px) {
  .header {
    grid-template-areas: "logo navigation social";
    grid-template-columns: 2fr 4.5fr 0.5fr;
  }

  div.site-title-section {
    grid-template-columns: 2fr 4fr;
  }

  div.title-container {
    overflow: hidden;
    text-wrap: wrap;
    white-space: normal; /* Change from break-spaces */
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-m);
    line-height: var(--spectrum-heading-line-height);
    text-align: center; /* Change from right to center for better wrapping */
  }
}

@media (width >=900px) {
  .header {
    grid-template-areas: "logo navigation social";
    grid-template-columns: 2fr 4.2fr 0.8fr; /* Gradual transition */
  }

  div.site-title-section {
    grid-template-columns: 2fr 4fr;
  }
}

@media (width >=1016px) {
  .header {
    grid-template-areas: "logo navigation social";
    grid-template-columns: 2fr 4fr 1fr;
  }

  div.site-title-section {
    grid-template-columns: 2fr 4.5fr;
  }

  div.title-container {
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-l);
    line-height: var(--spectrum-heading-line-height);
    text-align: center;
  }
}

@media (width >=1055px) {
  .header {
    grid-template-areas: "logo navigation social";
    grid-template-columns: 2fr 4fr 1fr;
  }

  div.site-title-section {
    grid-template-columns: 1.25fr 4.75fr;
  }

  div.title-container {
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-l);
    line-height: var(--spectrum-heading-line-height);
    text-align: center;
  }
}

@media (width >=1100px) {
  .header {
    grid-template-areas: "logo navigation social";
    grid-template-columns: 2fr 4fr 1fr;
  }

  div.site-title-section {
    grid-template-columns: 2fr 5fr;
  }

  div.title-container {
    overflow: hidden;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-l);
    line-height: var(--spectrum-heading-line-height);
    text-align: center;
  }
}

@media (width >= 1286px) {
  div.site-title-section {
    grid-template-columns: 2fr 5fr;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-xl);
    line-height: var(--spectrum-heading-line-height);
  }
}

@media (width >= 1401px) {
  div.site-title-section {
    grid-template-columns: 1fr 6fr;
  }

  span.site-title.spectrum-Heading {
    font-size: var(--spectrum-heading-size-xxl);
    line-height: var(--spectrum-heading-line-height);
  }
}

div.logo-container {
  box-sizing: border-box;
  display: block;
  grid-column: 1 / -1;
  grid-row: 1/-1;
  margin: 2px 0;
  max-height: calc(var(--header-height) - 4px);
}

svg.site-logo {
  display: block;
  height: 90%;
  -o-object-fit: contain;
     object-fit: contain;
  width: auto;
}

a.site-title {
  --mod-link-text-color: var(--text-2);
  --mod-link-text-color-secondary-hover: var(--text-2);
  --mod-link-text-color-secondary-focus: var(--text-2);
}

.social {
  --social-icon-size: var(--size-7);
  --mod-heading-font-color: var(--text-2);
}

iconify-icon.social-icons.nav-item {
  height: var(--social-icon-size);
  width: var(--social-icon-size);
}

iconify-icon#github {
  color: var(--github-green);
}

/* Desktop layout: logo | navigation | social */
@media (width >= 768px) {
  .navigation {

    --mod-heading-font-color: var(--text-2);
    align-items: center;
    display: grid;
    gap: 1rem;
    grid-area: navigation;
    grid-auto-columns: 1fr; /* Each column takes equal space */
    grid-auto-flow: column; /* Flow items into columns, not rows */
  }

  .social {
    align-items: center;
    display: grid;
    grid-area: social;
    grid-auto-columns: 1fr;
    justify-content: end;
    margin: 2em;
  }

  .social-icon {
    justify-self: end;
  }

  .mobile-menu-button {
    display: none;
  }

  .mobile-menu, .mobile-menu-backdrop {
    display: none;
  }
}

/* Mobile layout: menu-button | logo | social

   `width < 768px`, not `width <= 767px`. The two are the same for whole pixels but not
   for the fractional widths a zoomed or scaled viewport reports: at 767.5px the
   grid-template-areas above (which use `width < 768px`) applied while these rules did
   not, so the hamburger lost its grid area and the desktop nav stayed visible inside a
   mobile grid. Both blocks now use the same comparison. */
@media (width < 768px) {
  .site-title-section {
    grid-area: logo;
  }

  .mobile-menu-button {
    grid-area: menu-button;
  }

  .social {
    grid-area: social;
    text-align: right;
  }

  .navigation {
    display: none;
  }
}

.mobile-menu {

  /* Was `background: white`, which made the drawer the one surface on the site that
     ignored the colour scheme. This is Spectrum's elevated-surface token, so the drawer
     follows .spectrum--light / .spectrum--dark like everything else. */
  background: var(--spectrum-background-layer-2-color);
  box-sizing: border-box;
  color: var(--spectrum-body-color);
  height: 100vh;
  left: -100%;
  overflow-y: auto;
  padding: var(--spectrum-spacing-400) var(--spectrum-spacing-300);
  position: fixed;
  top: 0;
  transition: left 0.3s ease;
  width: 80%;
  z-index: 1001;
}

.mobile-menu.active {
  left: 0;
}

/* Full-viewport backdrop, sitting under the drawer rather than beside it. The previous
   ::before covered only the 20% strip the drawer did not, which both looked like a bug
   and left the rest of the page apparently interactive while the drawer was open. */
.mobile-menu-backdrop {
  background: rgb(0 0 0 / 50%);
  inset: 0;
  position: fixed;
  z-index: 1000;
}

.mobile-menu-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: block;
  font-size: var(--spectrum-heading-size-l);
  line-height: 1;
  margin-inline-start: auto;
  padding: var(--spectrum-spacing-100);
}

.mobile-nav-sections {
  display: grid;
  gap: var(--spectrum-spacing-200);
  list-style: none;
  margin: 0;
  padding: 0;
}

/* The drawer gives the tree the whole width; the sidebar's 250px cap does not apply.
   Scoped to the socket, so the cap still holds while the same element sits in the
   sidebar. */
.mobile-nav-tree .spectrum-TreeView {
  max-inline-size: none;
}

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