.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-xl);
    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-m);
    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-l);
    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-l);
    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-l);
    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-xl);
  }
}

@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-xxl);
  }
}

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 {
    display: none;
  }
}

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

@media (width <= 767px) {
  .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 {
  background: white;
  height: 100vh;
  left: -100%;
  overflow-y: auto;
  padding: 2rem 1rem;
  position: fixed;
  top: 0;
  transition: left 0.3s ease;
  width: 80%;
  z-index: 1000;
}

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

/* Overlay backdrop */

.mobile-menu.active::before {
  background: rgb(0 0 0 / 50%);
  content: "";
  height: 100vh;
  left: 80%;
  position: fixed;
  top: 0;
  width: 20%;
}