/* site.css
   Shared across every page: the top menu bar (Chapter Index, Verse Index,
   Book Detail). Colors/typography match the sample templates' palette
   (Arial stack, #2c5f8a blue, #f7f5f0 background, #222 text). */

:root {
  /* Fixed, breakpoint-matched menu height so scroll-margin-top offsets
     (set in book_detail.css) always line up with the actual rendered
     header - see the max-width:600px override below and its mirror
     there. */
  --menu-height: 60px;
}

.site-menu {
  background-color: #2c5f8a;
  border-bottom: 3px solid #1e4160;
}

/* Only the Book Detail page's menu is sticky (data-scrollspy is only
   rendered there) - Chapter Index and Verse Index keep a normal
   in-flow header. Setting this in CSS rather than via JS means the
   browser already knows the header is sticky before it resolves an
   incoming #c1v6-style anchor, so scroll-margin-top below is honored
   correctly on the very first paint instead of racing a script. */
.site-menu[data-scrollspy="true"] {
  position: sticky;
  top: 0;
  z-index: 10;
}

.site-menu-bar {
  max-width: 900px;
  margin: 0 auto;
  min-height: var(--menu-height);
  box-sizing: border-box;
  display: grid;
  /* Book (left) / Chapter (center) / Verse (right). Equal 1fr side
     columns keep the center column truly centered regardless of how
     wide the book name or verse label are; the center column sizes to
     its content (auto) rather than stretching. Grid auto-placement
     puts however many menu items exist (1 on Chapter Index, 2 on Verse
     Index, 3 on Book Detail) into these columns in DOM order, so pages
     without a verse (or without a chapter) don't need placeholder
     elements to keep the book title pinned left. */
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  font-family: Arial, Helvetica, sans-serif;
}

.site-menu .menu-item {
  display: inline-flex;
  align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.03em;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: background-color 0.2s ease;
  white-space: nowrap;
}

.site-menu a.menu-item:hover,
.site-menu a.menu-item:focus {
  background-color: rgba(255, 255, 255, 0.2);
}

.site-menu .menu-item-book {
  justify-self: start;
}

.site-menu .menu-item-book::before {
  opacity: 0.8;
  margin-right: 0.15rem;
}

.site-menu .menu-item-chapter {
  justify-self: center;
}

.site-menu .menu-item-verse {
  justify-self: end;
  /* Verse is a live-updating label, not a link - no hover affordance. */
  background-color: transparent;
  font-weight: normal;
  opacity: 0.9;
}

@media (max-width: 600px) {
  :root {
    --menu-height: 52px;
  }

  .site-menu-bar {
    padding: 0.6rem 1rem;
    gap: 0.35rem;
  }

  .site-menu .menu-item {
    font-size: 0.9rem;
    padding: 0.3rem 0.6rem;
  }
}