/* Word by word, on the Quran page: under each verse when it's on
   (.is-word-by-word), each word with its transliteration, meaning, grammar
   and root (those two lines can be hidden). */

.qp-wbw { display: none; }
.quran-page.is-word-by-word .qp-wbw { display: block; }
.qp-verse.is-hidden .qp-wbw { display: none; }
.qp-wbw__loading { font-size: 13px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.qp-wbw__alert { margin: 0 0 8px; }

.wbw__words {
  list-style: none;
  margin: 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wbw__word {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 110px;
  max-width: 188px; /* three to a row in a verse on a laptop screen */
  text-align: center;
}
.wbw__word:hover { border-color: var(--ink); }
.wbw__word-ar {
  background: none;
  border: 0;
  padding: 0 4px;
  border-radius: 6px;
  color: var(--ink);
  font-size: 28px;
  line-height: 1.5;
  cursor: pointer;
}
.wbw__word-ar:hover, .wbw__word-ar:focus-visible { color: var(--clay); background: var(--clay-soft); }
.wbw__tr { font-size: 13px; color: var(--clay); font-style: italic; }
.wbw__en { font-size: 14px; font-weight: 600; }
.wbw__gr {
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-body);
  border-top: 1px solid var(--line);
  padding-top: 5px;
  margin-top: 2px;
}
.wbw__root { font-size: 15px; color: var(--green); text-decoration: none; }
a.wbw__root:hover { text-decoration: underline; }
.wbw__tools { margin-top: auto; padding-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; }
.wbw__tools .save-word { font-size: 12px; padding: 5px 10px; }
.wbw__lookup { font-size: 12px; color: var(--text-muted); }
.hide-transliteration .wbw__tr { display: none; }
.hide-grammar .wbw__gr, .hide-grammar .wbw__root { display: none; }

@media (max-width: 600px) {
  .wbw__word { flex: 1 1 120px; max-width: none; padding: 10px; }
}