.shelf {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin: 30px 0;
}

.shelf-item {
  width: 80px;
  text-align: center;
}

.simple-divider {
  border: none;
  height: 2px;
  /* Set the hr color */
  color: #eee; /* old IE */
  background-color: #eee; /* Modern Browsers */
}

.top-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  border-bottom: 2px solid #eee;
  background-color: #f3cd8b;
}

.nav-item {
  flex: 1 1 33.33%;          /* each takes one-third of the width */
  display: flex;             /* make the link itself a flexbox */
  justify-content: center;   /* center text horizontally */
  align-items: center;       /* center text vertically */
  text-align: center;        /* extra safety */
  padding: 10px;
  text-decoration: none;
  color: #222;
  font-weight: 500;
  border-right: 1px solid #ddd;    /* optional: divider look */
  color: black;
  height: 20px;
}

.nav-item:hover {
  background-color: #ffd182;
}

.nav-item:last-child {
  border-right: none; /* remove border after the last item */
}

.verse-div {
  position: relative;
  border-bottom: 2px solid #afaeae;
  padding: 15px 15px;
  margin: 15px 0px;
}

.sans-text {
  text-align: center;
}

.bookref-marker {
  position: absolute;
  top: 0px;
  left: 0px;
  margin:0;
  color: #8c8c8c;
}

.verse-notes-div {
  cursor: pointer;
  margin-top: 1.2em;
  background-color: #f9f9f9;
  transition: background-color 0.3s ease;
  padding: 0.2em 0.7em;
  border-radius: 6px;
}

/* header */
.verse-notes-header {
  display: flex;
  align-items: center;
}

.verse-notes-collapsed-msg {
  color: #555;
  font-style: italic;
}

/* when expanded, push message to the right */
.verse-notes-div.expanded .verse-notes-collapsed-msg {
  color: #888;
}

/* notes paragraph */
.verse-notes {
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1.6;
  max-height: 0;              /* collapsed */
  overflow: hidden;
  transition: max-height 0.4s ease;
}