/* Keep the exported header's existing React menu, with the revised layout. */
@media (min-width: 768px) {
  header > div > .md\:grid {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
  }

  header > div > .md\:grid > a {
    order: -1;
    flex-shrink: 0;
  }

  header > div > .md\:grid > nav {
    margin-left: auto;
  }

}

@media (max-width: 767px) and (max-height: 700px) {
  header + .fixed.inset-0 {
    justify-content: flex-start;
    overflow-y: auto;
    padding-top: 6rem;
    padding-bottom: 1.5rem;
  }
}

/* SVG paths replace the exported decorative menu bars. */
header button[aria-label="Toggle menu"] {
  min-height: 44px;
}

header button[aria-label="Toggle menu"] > div {
  background: center / 24px 24px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M4 8h16M4 16h16'/%3E%3C/svg%3E");
}

header button[aria-label="Toggle menu"] > div:has(.rotate-45) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111827' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='m6 6 12 12M6 18 18 6'/%3E%3C/svg%3E");
}

header button[aria-label="Toggle menu"] > div > span {
  visibility: hidden;
}