/* Inline expand/collapse cards for articles (เล่าประสบการณ์).

   Loaded on reflection pages only (via reflections/_metadata.yml). Two triggers:
     .pk-wlink  — an original-language word in the prose -> word-detail card
                  (.pk-exp .wexp) opens below the paragraph.
     .pk-vlink  — a scripture reference in a footnote -> passage card
                  (.pk-exp .pk-vc) opens in place, original on top / TCV below.

   Card internals (.wexp/.wd-*/.lx-*/.sym*/.iw/.gflow) mirror the reader's
   (#pk in index.qmd) but are scoped to .pk-exp so both can coexist until the
   reader adopts this stylesheet too. Site palette: #8B4513 / #FAF6F0 / #8C7A4E
   / #E0D6C8 / #2D2A26. */

/* ---- triggers ---- */
.pk-wlink, .pk-vlink { cursor: pointer; }
.pk-wlink[aria-expanded="true"], .pk-vlink[aria-expanded="true"] { background: #F7E9C9; border-radius: 3px; box-shadow: 0 0 0 2px #F7E9C9; }
.pk-vlink .pk-caret { font-size: .8em; display: inline-block; transition: transform .15s; }
.pk-vlink[aria-expanded="true"] .pk-caret { transform: rotate(180deg); }

/* inline scripture icon written in the prose (the 📖 emoji) — opens the quoted
   verse in a highlighted box below the paragraph. Plain emoji, NO button
   background (cleaner in running text). Distinct from word-links (italic translit)
   and footnote numbers, so the reader can tell "this is Scripture". */
.pk-verse { text-decoration: none; cursor: pointer; margin: 0 .1em; font-size: .9em; line-height: 1; }
.pk-verse:hover { opacity: .6; }
.pk-verse:focus-visible { outline: 2px solid #1D4ED8; outline-offset: 2px; border-radius: 3px; }
.pk-verse[aria-expanded="true"] { opacity: .55; }

/* ---- expand wrapper ---- */
.pk-exp { font-family: 'Noto Sans', 'Noto Sans Thai', 'Noto Sans Hebrew', sans-serif; color: #2D2A26; }
.pk-exp[hidden] { display: none; }

/* word-detail card, opened below the paragraph */
.pk-exp .wexp { box-sizing: border-box; width: 100%; margin: .55rem 0 .7rem; border: 1px solid #D8B25A; border-radius: .5rem; background: #FFFDF7; overflow: hidden; line-height: 1.5; }
.pk-exp .wexp .wd-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #F7E9C9; padding: .4rem .7rem; font-family: 'Noto Sans Thai', sans-serif; font-weight: 700; color: #8B4513; border-bottom: 1px solid #E8D49E; }
.pk-exp .wexp .wd-head .wd-gk { font-size: 1.15rem; }
.pk-exp .wexp .wd-head .wd-tr { color: #8C7A4E; font-weight: 400; font-size: .85rem; margin-left: .35rem; }
.pk-exp .wexp .wd-close { border: none; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: #8C7A4E; padding: 0 .2rem; border-radius: 5px; flex: none; }
.pk-exp .wexp .wd-close:hover, .pk-exp .wexp .wd-close:focus-visible { background: #E8D49E; color: #75380F; outline: none; }
.pk-exp .wexp .wd-body { padding: .55rem .8rem; }
.pk-exp .wd-meta { font-size: .8rem; color: #6B5D45; margin-bottom: .5rem; }
.pk-exp .wd-meta .wd-k { color: #8C7A4E; }
.pk-exp .wd-lex .wd-none { color: #A38A5C; font-style: italic; }

/* rendered lexicon content (Abbott-Smith + Strong's) */
.pk-exp .lx-block { margin: .2rem 0 .6rem; font-size: .9rem; line-height: 1.7; }
.pk-exp .lx-src { font-family: 'Noto Sans Thai', sans-serif; font-weight: 700; color: #8B4513; font-size: .8rem; margin: .2rem 0 .15rem; }
.pk-exp .lx-occ { font-size: .8rem; margin-bottom: .3rem; }
.pk-exp .occ-toggle { border: none; background: none; cursor: pointer; font: inherit; color: #8C7A4E; padding: 0; text-decoration: underline dotted; text-underline-offset: 2px; }
.pk-exp .occ-toggle:hover { color: #75380F; }
.pk-exp .occ-caret { font-size: .75em; }
.pk-exp .occ-refs { margin: .25rem 0 .15rem; line-height: 1.7; color: #8C7A4E; }
.pk-exp .occ-refs[hidden] { display: none; }
.pk-exp .lx-sense { display: block; margin: .12rem 0; }
.pk-exp .lx-row { margin: .1rem 0; }
.pk-exp .lx-k { color: #8C7A4E; font-size: .78rem; margin-right: .25rem; }
.pk-exp .lx-ref { color: #75380F; white-space: nowrap; }

/* grammar/emphasis symbol section inside the word card */
.pk-exp .symsec { margin: .1rem 0 .55rem; display: flex; flex-direction: column; gap: .4rem; }
.pk-exp .symrow { background: #F1EFE8; border-radius: 7px; padding: .45rem .6rem; }
.pk-exp .symrow .head { display: flex; align-items: center; gap: .4rem; }
.pk-exp .symrow .head .e { font-size: 1.05rem; }
.pk-exp .symrow .head .nm { font-weight: 700; font-size: .9rem; color: #2D2A26; font-family: 'Noto Sans Thai', sans-serif; }
.pk-exp .symrow .srow { font-size: .85rem; color: #5F5E5A; line-height: 1.6; margin-top: .35rem; }
.pk-exp .symrow .fcap { color: #8B4513; font-weight: 600; }
.pk-exp .symexp { background: none; border: none; color: #8B4513; font: inherit; font-size: .85rem; cursor: pointer; padding: .35rem 0 0; }
.pk-exp .symexp:hover { color: #75380F; }
.pk-exp .symdet { margin-top: 0; }
.pk-exp .symdet[hidden] { display: none; }
.pk-exp .symdet .ex { padding-left: .55rem; border-left: 2px solid #D8B25A; }
.pk-exp .symdet .ex .lbl { color: #8B4513; font-weight: 700; }

/* clickable blue ⓘ linking to the help page */
.pk-exp .helpi { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #1D4ED8; color: #1D4ED8; font: italic 700 10px/1 Georgia, serif; text-decoration: none; vertical-align: middle; margin-left: .25rem; }  /* #1D4ED8 ~6:1 (WCAG AA) */
.pk-exp .helpi:hover { background: #1D4ED8; color: #fff; }
.pk-exp .helpi:focus-visible { outline: 2px solid #8B4513; outline-offset: 1px; }  /* WCAG 2.4.7 */

/* ---- passage card (footnote reference): original on top, TCV below ---- */
.pk-exp .pk-vc { margin: .55rem 0 .7rem; border: 1px solid #D8B25A; border-left: 4px solid #8B4513; border-radius: .5rem; background: #FCFAF6; overflow: hidden; }
.pk-exp .pk-vc-sec { padding: .55rem .8rem; }
.pk-exp .pk-vc-sec + .pk-vc-sec { border-top: 1px solid #EFE6D6; }
.pk-exp .pk-vc-lbl { font-family: 'Noto Sans Thai', sans-serif; font-weight: 700; color: #8B4513; font-size: .82rem; margin: 0 0 .35rem; }
.pk-exp .pk-vc-txt { line-height: 1.75; font-size: 1rem; }
.pk-exp .pk-vc-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: #F7E9C9; padding: .35rem .7rem; }
.pk-exp .pk-vc-ref { font-family: 'Noto Sans Thai', sans-serif; font-weight: 700; color: #8B4513; font-size: .9rem; }
.pk-exp .pk-vc-close { border: none; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; color: #8C7A4E; padding: 0 .2rem; border-radius: 5px; }
.pk-exp .pk-vc-close:hover, .pk-exp .pk-vc-close:focus-visible { background: #E8D49E; color: #75380F; outline: none; }
.pk-exp .pk-vc-more { font-size: .8rem; }
.pk-exp .pk-vc-more a { color: #75380F; }
/* actions row: "show original" toggle + "read full" link; original collapsed */
.pk-exp .pk-vc-actions { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; align-items: center; font-size: .85rem; }
.pk-exp .pk-vc-orig-toggle { border: none; background: none; cursor: pointer; font: inherit; font-size: .85rem; color: #8B4513; padding: 0; text-decoration: underline dotted; text-underline-offset: 2px; }
.pk-exp .pk-vc-orig-toggle:hover { color: #75380F; }
.pk-exp .pk-vc-orig-toggle .pk-caret2 { display: inline-block; transition: transform .15s; }
.pk-exp .pk-vc-orig-toggle[aria-expanded="true"] .pk-caret2 { transform: rotate(180deg); }
.pk-exp .pk-vc-open { color: #75380F; }
.pk-exp .pk-vc-orig[hidden] { display: none; }

/* interlinear (shared by the passage card's original section) */
.pk-exp .gflow { display: flex; flex-wrap: wrap; align-items: flex-start; }
.pk-exp .gflow.rtl { direction: rtl; }
.pk-exp .gflow.rtl .iw { margin-left: .05rem; margin-right: .05rem; }
.pk-exp .gflow.rtl .iw:not(.jn) { margin-left: .42rem; }
.pk-exp .gflow.rtl .wexp { direction: ltr; text-align: left; }
.pk-exp .iw { display: inline-flex; flex-direction: column; align-items: center; text-align: center; vertical-align: top; margin: 0 .12rem .28rem; padding: .1rem .22rem; border-radius: 7px; cursor: pointer; }
.pk-exp .iw:hover { background: #F0E7D8; }
.pk-exp .iw:focus-visible { outline: 2px solid #8B4513; outline-offset: 2px; }
.pk-exp .iw.on { background: #F7E9C9; outline: 2px solid #D8B25A; }
.pk-exp .iw .gkln { display: inline-flex; align-items: center; gap: 1px; line-height: 1.25; }
.pk-exp .iw .gk { font-size: 1rem; color: #2D2A26; line-height: 1.25; }
.pk-exp .iw.emph .gk { color: #A33; font-weight: 700; }
.pk-exp .iw .sym { font-size: .8rem; line-height: 1; display: inline-flex; gap: 1px; }
.pk-exp .iw .gl { font-size: .72rem; color: #6B5D45; max-width: 13ch; line-height: 1.15; margin-top: .12rem; }
.pk-exp .iw .st, .pk-exp .iw .mo { display: none; }
.pk-exp sup.vn { color: #A33; font-weight: 700; font-size: .62em; margin-right: .15em; }
.pk-exp sup.gvn { align-self: flex-start; margin-top: .2rem; }

/* ---- responsive: everything is single-column and full width already; the
   interlinear wraps, so nothing scrolls horizontally on phones ---- */
@media (max-width: 560px) {
  .pk-exp .iw .gl { max-width: 11ch; }
}

/* ---- bblfig collapse card ({{< bblfig … collapse=true >}}): a brand summary bar
   that expands to the figure. Native <details>, brown-on-cream to match the site. ---- */
.pk-fig { border: 1px solid #E0D6C8; border-radius: .5rem; overflow: hidden; margin: .55rem 0 .9rem; }
.pk-fig > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .5rem;
  background: #FAF6F0; color: #8B4513; font-weight: 600; padding: .6rem .85rem; }
.pk-fig > summary::-webkit-details-marker { display: none; }
.pk-fig > summary::after { content: "▾"; margin-left: auto; font-size: .85em; transition: transform .15s; }
.pk-fig[open] > summary::after { transform: rotate(180deg); }
.pk-fig > figure { margin: 0; }

/* ---- bblfig inline marker (🗺️ mid-sentence) -> figure card (option 3) ---- */
.pk-figure { text-decoration: none; cursor: pointer; }
.pk-figure[aria-expanded="true"] { background: #F7E9C9; border-radius: 4px; box-shadow: 0 0 0 2px #F7E9C9; }
.pk-exp .pk-fc-img { display: block; width: 100%; height: auto; }
.pk-exp .pk-fc-credit { font-size: .78rem; color: #8C7A4E; padding: .4rem .7rem; }

/* ---- print / Save as PDF: the "บันทึกเป็น PDF" button expands every card first,
   so the cards SHOULD print (full document). Just drop their interactive chrome
   and avoid splitting a card across pages. ---- */
@media print {
  .pk-exp { break-inside: avoid; }
  .pk-exp .wd-close,
  .pk-exp .pk-vc-close,
  .pk-exp .pk-vc-more,
  .pk-exp .pk-vc-actions,
  .pk-caret { display: none !important; }
  /* the original-language section is collapsed on screen — force it open for the
     full PDF so "บันทึกเป็น PDF" includes the interlinear */
  .pk-exp .pk-vc-orig[hidden] { display: block !important; }
}