.header {
  align-items: center;
  background-color: var(--swc-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.swc-Heading {

  --site-heading-margin-start: 0px;
  --site-heading-margin-end: 0px;
  background-color: var(--swc-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.swc-Heading {
    font-size: var(--swc-heading-size-xl);
    line-height: var(--swc-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.swc-Heading {
    font-size: var(--swc-heading-size-m);
    line-height: var(--swc-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.swc-Heading {
    font-size: var(--swc-heading-size-l);
    line-height: var(--swc-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.swc-Heading {
    font-size: var(--swc-heading-size-l);
    line-height: var(--swc-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.swc-Heading {
    font-size: var(--swc-heading-size-l);
    line-height: var(--swc-heading-line-height);
    text-align: center;
  }
}

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

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

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

  span.site-title.swc-Heading {
    font-size: var(--swc-heading-size-xxl);
    line-height: var(--swc-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 {
  /* On the anchor itself: gen2's .swc-Link--secondary sets these four on the element, so a
     value inherited from an ancestor would lose. This rule's higher specificity wins. The
     pressed state is left to --secondary, as it was before. */
  --swc-link-text-color-default: var(--text-2);
  --swc-link-text-color-hover: var(--text-2);
  --swc-link-text-color-focus: var(--text-2);
}

.social {
  --social-icon-size: var(--size-7);
  --swc-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 {

    --swc-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 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 {

    /* The header is dark; the button's default icon colour is dark and vanished into it
       (the previous hamburger was an unstyled grey UA button, which did not). */
    --swc-action-button-content-color-default: var(--text-2);
    --swc-action-button-content-color-hover: var(--text-2);
    --swc-action-button-content-color-focus: var(--text-2);
    --swc-action-button-content-color-down: var(--text-2);
    --swc-action-button-focus-indicator-color: var(--text-2);
    grid-area: menu-button;

    /* A grid item stretches to its cell, and the cell is a 1fr column; an icon button
       should be as wide as its icon. */
    justify-self: start;
  }

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

  .navigation {
    display: none;
  }
}

/* The drawer is <site-drawer> (lib/components/site-drawer.ts); its panel, backdrop and close
   button are styled in the element's own stylesheet. What is here is what the page has to
   say about it from outside.

   Until the element has upgraded it is an unknown inline element, and its panel content (the
   section list, the tree socket) would print into the header's grid. Hide everything but the
   opener until then. */
site-drawer:not(:defined) > :not([slot="toggle"]) {
  display: none;
}

/* Likewise an un-upgraded <swc-icon> shows its SVG at the browser default of 300x150. */
swc-icon:not(:defined) > svg {
  block-size: 1.25rem;
  inline-size: 1.25rem;
}

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

/* No tree has been moved in on pages without a sidebar, so the section, with its divider,
   would be an orphaned separator. The socket is kept literally empty to make this work
   (see partials/mobile_navigation.tt). */
.mobile-nav-tree-section:has(.mobile-nav-tree:empty) {
  display: none;
}