/* Header logo: centered on small screens only. Prebuilt index.css omits most lg: utilities,
   so Tailwind responsive classes on the header would not apply in the browser. */

@media (max-width: 1023px) {
  .site-header-inner {
    justify-content: flex-end;
  }

  .site-header-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
  }
}

@media (min-width: 1024px) {
  .site-header-inner {
    justify-content: space-between;
  }

  .site-header-logo {
    position: static;
    left: auto;
    top: auto;
    transform: none;
    z-index: auto;
  }
}