/* ProjectAngelus.org prayer language picker: list and popover base styles.
   Ported from angelus-bell-chrome-extension PR #9,
   design/2026-10-hailmary-language/shared/language-picker.css. The trigger (the
   vernacular card heading), its placement and the parchment and sheet themes are
   in heading-picker.css. */

/* ---------- Popover ---------- */
.lp-pop {
  position: absolute;
  z-index: 50;
  width: 252px;
  padding: 6px;
  text-align: left;
  font-family: var(--font-sans), 'Noto Sans', sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.3;
  border-radius: 12px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}
.lp-pop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
.lp-pop.lp-instant { transition: none; }

.lp-head { padding: 8px 10px 8px; }
.lp-title {
  font-weight: 600;
  font-size: 0.62rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.lp-list {
  max-height: 318px;
  overflow-y: auto;
  outline: none;
  scrollbar-width: thin;
}
.lp-group {
  padding: 10px 10px 4px;
  font-weight: 600;
  font-size: 0.58rem;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.lp-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 6px 10px;
  border-radius: 7px;
  cursor: pointer;
}
.lp-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-tag {
  font-size: 0.58rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 1px 7px;
}
.lp-check { flex: 0 0 auto; visibility: hidden; }
.lp-opt.is-selected { font-weight: 500; }
.lp-opt.is-selected .lp-check { visibility: visible; }
.lp-list:focus-visible .lp-opt.is-active { outline-offset: -2px; }

.prayer-column .pa-src {
  margin: 1.25rem 0 0;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: right;
}

/* Card order (universal standard, locked by Mr. Egan):
   wide layouts put Latin LEFT and the vernacular RIGHT (its heading is the picker).
   Stacked layouts (700px and below, where the site's grid goes to one column)
   put the vernacular FIRST and Latin below it. The DOM keeps vernacular, then Latin. */
@media (min-width: 701px) {
  .prayer-container > .pa-latin { order: -1; }
}

/* ===== CJK and Vietnamese =====
   Inter and Cormorant Garamond cover Vietnamese through Google Fonts' vietnamese
   subset. CJK uses the reader's system fonts (no extra download). Inter stays first
   so V., R. and Latin letters match the rest of the page. */
:lang(zh-Hant) {
  --pa-cjk-serif: "Songti TC", "Noto Serif CJK TC", "Noto Serif TC", "PMingLiU", serif;
  --pa-cjk: "PingFang TC", "Noto Sans CJK TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
}
:lang(ja) {
  --pa-cjk-serif: "Hiragino Mincho ProN", "Noto Serif CJK JP", "Noto Serif JP", "Yu Mincho", serif;
  --pa-cjk: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans CJK JP", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif;
}
:lang(ko) {
  --pa-cjk-serif: "AppleMyungjo", "Noto Serif CJK KR", "Noto Serif KR", "Batang", serif;
  --pa-cjk: "Apple SD Gothic Neo", "Noto Sans CJK KR", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.prayer-column:lang(zh-Hant), .prayer-column:lang(ja), .prayer-column:lang(ko),
.lp-name:lang(zh-Hant), .lp-name:lang(ja), .lp-name:lang(ko) {
  font-family: 'Inter', var(--pa-cjk);
}
/* Headings are set in Cormorant, so CJK uses a serif (Mincho/Song) there. */
.prayer-column:lang(zh-Hant) h2, .prayer-column:lang(ja) h2, .prayer-column:lang(ko) h2 {
  font-family: 'Cormorant Garamond', var(--pa-cjk-serif);
}
.prayer-column:lang(zh-Hant) p, .prayer-column:lang(ja) p, .prayer-column:lang(ko) p {
  line-height: 1.95;
  letter-spacing: 0.02em;
}
.prayer-column:lang(zh-Hant), .prayer-column:lang(ja) { line-break: strict; }
.prayer-column:lang(ko) { word-break: keep-all; }
.prayer-column { overflow-wrap: break-word; }