/* Shared site header (logo + primary nav), used by every page so they stay identical.
   Dark mode: the homepage and blog index set html[data-mode="dark"]; posts set body.dark-mode. */

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-brand {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

/* Logo lockup, tinted to the text color via mask so one image serves both modes */
.site-logo {
  display: block;
  width: 188px;
  max-width: 100%;
  height: 36px;
  background-color: #000;
  -webkit-mask: url("/logo_wordmark.png") left center / contain no-repeat;
  mask: url("/logo_wordmark.png") left center / contain no-repeat;
  transition: background-color .4s ease;
}

.site-nav {
  display: inline-flex;
  flex: 0 0 auto;
  margin-left: 16px;
  gap: 26px;
  font-family: "Forum", Georgia, serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  -webkit-text-stroke: 0;
  /* Optically center on the "Abundant" lettering, not the whole logo image
     (the sunburst makes the image taller than the letters). */
  position: relative;
  top: -2px;
}
.site-nav a {
  color: #555;
  text-decoration: none;
  transition: color .15s ease;
}
.site-nav a:hover {
  color: #000;
  text-decoration: none;
}

html[data-mode="dark"] .site-logo,
body.dark-mode .site-logo { background-color: #f2f2f2; }
html[data-mode="dark"] .site-nav a,
body.dark-mode .site-nav a { color: #8a8a8a; }
html[data-mode="dark"] .site-nav a:hover,
body.dark-mode .site-nav a:hover { color: #f2f2f2; }

@media (max-width: 600px) {
  .site-nav { gap: 16px; }
  /* Keep logo + nav on one row down to ~300px wide screens */
  .site-logo { width: 150px; height: 29px; }
}