/* Site-wide banner image (rendered by layouts/_default/baseof.html).
   Tight bottom margin so banner + header read as one masthead unit (#2).
   border:none + padding:0 overrides the theme's accent-bordered <img>
   rule so the hero renders flush instead of as a framed picture (#1). */
.site-banner {
  margin: 0 0 0.5rem;
}
.site-banner img {
  width: 100%;
  height: auto;
  display: block;
  border: none;
  padding: 0;
  border-radius: 0;
}

/* Inner-page banner: shorter so it doesn't eat the fold on long posts (#4).
   object-fit: cover preserves aspect by cropping. */
.site-banner--compact img {
  max-height: 220px;
  object-fit: cover;
  object-position: center;
}

/* Site subtitle (tagline) — right-aligned, between logo strip and menu.
   Consistent 0.5rem step with the surrounding header elements (#3). */
.site-subtitle {
  width: 100%;
  align-self: stretch;
  margin: 0.5rem 0 0;
  text-align: right;
  opacity: 0.75;
  font-style: italic;
}

/* Tighten the menu's default 20px top margin so the header rhythm is
   even (0.5rem step between logo strip / subtitle / menu) (#3).
   The theme's .navigation-menu__inner has flex:1, so right-aligning at
   the nav level alone has nothing to push. Push inside the inner ul. */
.navigation-menu {
  justify-content: flex-end;
  margin: 0.5rem 1px;
}
.navigation-menu__inner {
  justify-content: flex-end;
}

/* Footer social nav — now lives inside .footer__inner alongside the
   copyright. The theme's .footer__inner is already flex space-between,
   so the social nav lands at the right end automatically. */
.footer__social {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.footer__social a {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.footer__social svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* About-page Elsewhere list: horizontal row of icon+text links,
   distributed with space-between so the row fills the line width.
   The theme's post.css injects a "-" via ::before on every .post ul li;
   we suppress it here so the row doesn't look like a bulleted list. */
.social-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
}
.social-list li {
  margin: 0;
  padding: 0;
}
.post ul.social-list li:not(:empty)::before {
  content: none;
}
.social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}
.social-link svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: 0 0 1.1rem;
}

/* Footer alignment: copyright text flush left within its container.
   Parent .footer__inner is flex space-between, so copyright sits at
   the left end and the social nav sits at the right end. */
.footer .copyright {
  justify-content: flex-start;
}