/* =====================================================================
   St-Takla.org - Christian & Bible Quizzes - Q&A display (2026)
   One stylesheet, four display modes, picked by data-mode on .stq:
     reveal    = A  blurred answer, hover to peek, click to pin
     accordion = B  answer slides open under the question
     flip      = C  flash cards that flip over to the answer
     practice  = D  self-test: reveal, then mark "knew it / didn't"
   Sizes are in em so the site's A+/A- font buttons (#bodytext) still work.
   ASCII only - safe on the site's windows-1256 pages.
   ===================================================================== */

.stq {
  --stq-primary: #1d6b47;
  --stq-primary-dark: #14543a;
  --stq-primary-soft: #eaf4ee;
  --stq-accent: #b07f22;
  --stq-ink: #1e2227;
  --stq-muted: #6a6f76;
  --stq-line: #e3ddd0;
  --stq-card: #ffffff;
  --stq-paper: #faf8f3;
  --stq-good: #1f7a46;
  --stq-good-soft: #e6f4ea;
  --stq-bad: #b3362d;
  --stq-bad-soft: #fbeceb;
  --stq-radius: 14px;
  --stq-ui: "Segoe UI", Tahoma, "Noto Naskh Arabic", Arial, sans-serif;
  --stq-text: "Times New Roman", "Traditional Arabic", serif;

  direction: rtl;
  text-align: right;
  max-width: 920px;
  margin: 1.2em auto 1.6em;
  padding: 0 4px;
  color: var(--stq-ink);
  box-sizing: border-box;
}
.stq *, .stq *::before, .stq *::after { box-sizing: border-box; }

/* Pages carry a one-line head script that adds .stq-js to <html>: answers stay
   invisible until st-quiz.js has set the reader's chosen mode (no flash of
   answers on a slow connection). That script drops .stq-js again after 5 s if
   st-quiz.js never arrives, so the answers can never get stuck hidden. */
.stq-js .stq:not(.stq-ready) .stq-a { visibility: hidden; }

/* ---------- toolbar (built by st-quiz.js) ---------- */
.stq-toolbar {
  background: var(--stq-paper);
  border: 1px solid var(--stq-line);
  border-radius: var(--stq-radius);
  padding: .7em .8em;
  margin: 0 0 1.1em;
  font-family: var(--stq-ui);
  font-size: 1.05em;
}
.stq-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .6em; }

/* display-mode picker: a segmented control */
.stq-modes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45em .8em;
  padding-bottom: .7em; margin-bottom: .7em;
  border-bottom: 1px solid var(--stq-line);
}
.stq-modes-title { font-weight: 700; color: var(--stq-ink); white-space: nowrap; }
.stq-modes-list {
  display: inline-flex; flex-wrap: wrap; gap: 3px;
  background: #ece6d8;
  border-radius: 12px;
  padding: 3px;
}
.stq-mode-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  font: 600 .95em/1.2 var(--stq-ui);
  color: #5b5f66;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: .55em .9em;
  cursor: pointer;
  transition: background-color .15s, color .15s, box-shadow .15s;
  -webkit-tap-highlight-color: transparent;
}
.stq-mode-btn:hover { color: var(--stq-ink); background: rgba(255, 255, 255, .55); }
.stq-mode-btn[aria-pressed="true"] {
  background: #fff;
  color: var(--stq-primary-dark);
  box-shadow: 0 1px 3px rgba(30, 34, 39, .15);
}
.stq-mode-btn svg { width: 1.15em; height: 1.15em; flex: none; }
.stq-mode-btn:focus-visible { outline: 3px solid rgba(29, 107, 71, .45); outline-offset: 1px; }

.stq-toolbar .stq-status {
  margin-inline-start: auto;
  color: var(--stq-muted);
  font-size: .95em;
  white-space: nowrap;
}
.stq-status b { color: var(--stq-ink); }

.stq-btn {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .4em;
  font: inherit; font-family: var(--stq-ui); font-weight: 600;
  line-height: 1.2;
  color: var(--stq-primary-dark);
  background: #fff;
  border: 1px solid #cfd8d2;
  border-radius: 999px;
  padding: .5em 1em;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.stq-btn:hover { background: var(--stq-primary-soft); border-color: var(--stq-primary); }
.stq-btn:focus-visible, .stq [tabindex]:focus-visible, .stq-toggle:focus-visible {
  outline: 3px solid rgba(29, 107, 71, .45); outline-offset: 2px;
}
.stq-btn:disabled, .stq-btn:disabled:hover { opacity: .45; cursor: default; background: #fff; border-color: #cfd8d2; color: var(--stq-primary-dark); }
.stq-btn--solid:disabled, .stq-btn--solid:disabled:hover { background: var(--stq-primary); color: #fff; }
.stq-btn--solid { background: var(--stq-primary); color: #fff; border-color: var(--stq-primary); }
.stq-btn--solid:hover { background: var(--stq-primary-dark); color: #fff; }
.stq-btn[aria-pressed="true"] { background: var(--stq-primary); color: #fff; border-color: var(--stq-primary); }
.stq-btn svg { width: 1.05em; height: 1.05em; flex: none; }

/* ---------- a question card (shared by every mode) ---------- */
.stq-item {
  position: relative;
  background: var(--stq-card);
  border: 1px solid var(--stq-line);
  border-radius: var(--stq-radius);
  margin: 0 0 1em;
  box-shadow: 0 1px 2px rgba(30, 34, 39, .04), 0 6px 18px rgba(30, 34, 39, .05);
  scroll-margin-top: 90px; /* fixed navbar + #q11 deep links */
}
.stq-front { display: flex; align-items: flex-start; gap: .85em; padding: 1em 1.1em .9em; }
.stq-num {
  flex: none;
  min-width: 2.3em; height: 2.3em; padding: 0 .35em;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--stq-primary); color: #fff;
  font: 700 1.05em/1 var(--stq-ui);
  margin-top: .15em;
}
.stq-q {
  flex: 1; min-width: 0;
  font: 700 1.5em/1.75 var(--stq-text);
}
/* the site's common.css forces every link colour with !important, so these must too */
.stq-label, .stq .stq-label a, .stq .stq-label a:link, .stq .stq-label a:visited, .stq .stq-label a:hover {
  color: var(--stq-primary) !important; text-decoration: none;
}
.stq-a { padding: 0 1.1em 1em; }
.stq-a-label {
  font: 700 1.05em/1.4 var(--stq-ui);
  color: var(--stq-accent);
  margin-bottom: .25em;
}
.stq .stq-a-label a, .stq .stq-a-label a:link, .stq .stq-a-label a:visited, .stq .stq-a-label a:hover { color: inherit !important; text-decoration: none; }
.stq-a-text { font: 400 1.4em/1.85 var(--stq-text); }
.stq-a-text a { color: var(--stq-primary); }
/* multi-paragraph questions / answers (lettered lists etc.) */
.stq-q p, .stq-a-text p { margin: 0 0 .2em; }
.stq-q p:last-child, .stq-a-text p:last-child { margin-bottom: 0; }

/* text between cards that belongs to the page, e.g. [ www.St-Takla.org ] */
.stq-sep { text-align: center; margin: .2em 0 1em; }

/* Before st-quiz.js runs (or with JS off) every answer stays visible.
   All hiding below is scoped to .stq-ready, which the script adds. */

/* =====================================================================
   A. reveal - blurred answer; hover peeks, click/tap pins
   ===================================================================== */
.stq-ready[data-mode="reveal"] .stq-a {
  position: relative;
  margin: 0 1.1em 1em; padding: .7em .95em .8em;
  background: var(--stq-paper);
  border: 1.5px dashed #d6cdb8;
  border-radius: 11px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s;
  -webkit-tap-highlight-color: transparent;
}
.stq-ready[data-mode="reveal"] .stq-a-text { transition: filter .25s, opacity .25s; }
.stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a-text {
  filter: blur(7px); opacity: .5;
  -webkit-user-select: none; user-select: none;
}
.stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a::after {
  content: attr(data-hint);
  position: absolute; left: 50%; top: 58%;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, .96);
  color: var(--stq-primary-dark);
  border: 1px solid #cfd8d2;
  border-radius: 999px;
  padding: .35em 1em;
  font: 600 1em/1.3 var(--stq-ui);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
  pointer-events: none;
  transition: opacity .2s;
}
@media (hover: hover) and (pointer: fine) {
  .stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a:hover .stq-a-text { filter: none; opacity: 1; }
  .stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a:hover::after { opacity: 0; }
  .stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a:hover { border-color: var(--stq-accent); background: #fffdf7; }
}
.stq-ready[data-mode="reveal"] .stq-item.is-open .stq-a {
  border: 1.5px solid #bcd9c7;
  background: var(--stq-primary-soft);
}
.stq-pin {
  position: absolute; top: .55em; left: .7em;
  font: 600 .85em/1 var(--stq-ui);
  color: var(--stq-primary);
  opacity: 0; transition: opacity .2s;
}
.stq-ready[data-mode="reveal"] .stq-item.is-open .stq-pin { opacity: 1; }

/* =====================================================================
   B. accordion - answer slides open under the question
   ===================================================================== */
.stq-toggle {
  -webkit-appearance: none; appearance: none;
  display: inline-flex; align-items: center; gap: .45em;
  font: 600 1em/1.2 var(--stq-ui);
  color: var(--stq-primary-dark);
  background: var(--stq-primary-soft);
  border: 1px solid #c7ddd0;
  border-radius: 999px;
  padding: .45em 1em;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.stq-toggle:hover { border-color: var(--stq-primary); }
.stq-toggle svg { width: 1em; height: 1em; transition: transform .25s; }
.stq-item.is-open .stq-toggle { background: var(--stq-primary); color: #fff; border-color: var(--stq-primary); }
.stq-item.is-open .stq-toggle svg { transform: rotate(180deg); }
.stq-actions { padding: 0 1.1em .95em; padding-inline-start: calc(1.1em + 2.3em * 1.05 + .85em); }

.stq-ready[data-mode="accordion"] .stq-a,
.stq-ready[data-mode="practice"] .stq-a {
  display: grid; grid-template-rows: 0fr;
  padding: 0;
  transition: grid-template-rows .3s ease;
}
.stq-ready[data-mode="accordion"] .stq-a-wrap,
.stq-ready[data-mode="practice"] .stq-a-wrap { overflow: hidden; min-height: 0; }
.stq-ready[data-mode="accordion"] .stq-a-inner,
.stq-ready[data-mode="practice"] .stq-a-inner {
  margin: 0 1.1em 1em;
  padding: .75em 1em .85em;
  background: var(--stq-primary-soft);
  border-radius: 10px;
  border-inline-start: 4px solid var(--stq-primary);
}
.stq-ready[data-mode="accordion"] .stq-item.is-open .stq-a,
.stq-ready[data-mode="practice"] .stq-item.is-open .stq-a { grid-template-rows: 1fr; }
.stq-ready[data-mode="accordion"] .stq-front { cursor: pointer; }
.stq-ready[data-mode="accordion"] .stq-item.is-open { border-color: #bcd9c7; }

/* =====================================================================
   C. flip - flash cards
   ===================================================================== */
.stq-ready[data-mode="flip"] .stq-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1em;
}
.stq-ready[data-mode="flip"] .stq-sep { grid-column: 1 / -1; margin: 0; order: 1; } /* keep the card grid gap-free */
.stq-ready[data-mode="flip"] .stq-item {
  display: grid;
  margin: 0;
  background: transparent; border: 0; box-shadow: none;
  perspective: 1400px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.stq-ready[data-mode="flip"] .stq-card {
  display: grid;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.3, .7, .25, 1);
}
.stq-ready[data-mode="flip"] .stq-item.is-open .stq-card { transform: rotateY(180deg); }
.stq-ready[data-mode="flip"] .stq-face {
  grid-area: 1 / 1;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--stq-radius);
  border: 1px solid var(--stq-line);
  box-shadow: 0 1px 2px rgba(30, 34, 39, .05), 0 8px 22px rgba(30, 34, 39, .07);
  display: flex; flex-direction: column;
  min-height: 12em;
}
.stq-ready[data-mode="flip"] .stq-front {
  background: var(--stq-card);
  flex-direction: column; gap: .6em;
  padding: 1.1em 1.2em 1em;
}
.stq-ready[data-mode="flip"] .stq-front .stq-q { font-size: 1.4em; }
.stq-ready[data-mode="flip"] .stq-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #f1f8f3 0%, #e3f0e8 100%);
  border-color: #bcd9c7;
  padding: 1.1em 1.2em 1em;
}
.stq-ready[data-mode="flip"] .stq-back .stq-a-text { font-size: 1.35em; }
.stq-flip-hint {
  margin-top: auto;
  font: 600 .95em/1.3 var(--stq-ui);
  color: var(--stq-muted);
  display: flex; align-items: center; gap: .4em;
}
.stq-flip-hint svg { width: 1.1em; height: 1.1em; }
.stq-back-num { font: 700 .95em/1 var(--stq-ui); color: var(--stq-primary); margin-bottom: .5em; }

/* =====================================================================
   D. practice - reveal, then mark yourself
   ===================================================================== */
.stq-ready[data-mode="practice"] .stq-item { border-inline-start: 5px solid var(--stq-line); }
.stq-ready[data-mode="practice"] .stq-item.is-right { border-inline-start-color: var(--stq-good); }
.stq-ready[data-mode="practice"] .stq-item.is-wrong { border-inline-start-color: var(--stq-bad); }
.stq-mark {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5em;
  margin-top: .8em; padding-top: .7em;
  border-top: 1px dashed #c7ddd0;
  font: 600 1em/1.3 var(--stq-ui);
  color: var(--stq-muted);
}
.stq-mark .stq-btn { padding: .4em .9em; }
.stq-mark .stq-yes[aria-pressed="true"] { background: var(--stq-good); border-color: var(--stq-good); color: #fff; }
.stq-mark .stq-no[aria-pressed="true"]  { background: var(--stq-bad);  border-color: var(--stq-bad);  color: #fff; }
.stq-badge {
  position: absolute; top: .9em; left: 1em;
  font: 700 .85em/1 var(--stq-ui);
  padding: .35em .7em; border-radius: 999px;
  display: none;
}
.stq-item.is-right .stq-badge { display: inline-block; background: var(--stq-good-soft); color: var(--stq-good); }
.stq-item.is-wrong .stq-badge { display: inline-block; background: var(--stq-bad-soft); color: var(--stq-bad); }
.stq.is-filtered .stq-item:not(.is-wrong) { display: none; }

.stq-progress {
  flex-basis: 100%;
  display: flex; height: .55em; border-radius: 999px; overflow: hidden;
  background: #ebe6da;
}
.stq-progress span { display: block; height: 100%; transition: width .35s ease; }
.stq-progress .p-good { background: var(--stq-good); }
.stq-progress .p-bad { background: var(--stq-bad); }

.stq-result {
  text-align: center;
  background: var(--stq-paper);
  border: 1px solid var(--stq-line);
  border-radius: var(--stq-radius);
  padding: 1.1em 1em 1.2em;
  font-family: var(--stq-ui);
}
.stq-result .r-big { font-size: 2.1em; font-weight: 700; color: var(--stq-primary); line-height: 1.2; }
.stq-result .r-msg { font-size: 1.1em; margin: .3em 0 .8em; color: var(--stq-ink); }
.stq-result .stq-btn { margin: .2em; }

/* practice mode: keep the question text clear of the corner badge */
.stq-ready[data-mode="practice"] .stq-front { padding-left: 4.6em; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .stq { padding: 0; }
  .stq-front { padding: .85em .85em .75em; gap: .65em; }
  .stq-q { font-size: 1.35em; }
  .stq-a-text { font-size: 1.28em; }
  .stq-actions { padding: 0 .85em .85em; }
  .stq-ready[data-mode="reveal"] .stq-a { margin: 0 .85em .85em; }
  .stq-ready[data-mode="accordion"] .stq-a-inner,
  .stq-ready[data-mode="practice"] .stq-a-inner { margin: 0 .85em .85em; }
  .stq-ready[data-mode="flip"] .stq-cards { grid-template-columns: 1fr; }
  .stq-toolbar { padding: .6em; font-size: 1em; }
  .stq-toolbar .stq-status { margin-inline-start: 0; flex-basis: 100%; text-align: center; white-space: normal; }
  .stq-modes { flex-direction: column; align-items: stretch; gap: .45em; }
  .stq-modes-list { display: grid; grid-template-columns: 1fr 1fr; }
  .stq-mode-btn { padding: .65em .4em; }
  .stq-tools { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
  .stq-tools .stq-btn { justify-content: center; padding: .55em .5em; font-size: .92em; }
  .stq-tools .stq-status, .stq-tools .stq-progress { grid-column: 1 / -1; }
  .stq-ready[data-mode="reveal"] .stq-item:not(.is-open) .stq-a::after { white-space: normal; text-align: center; max-width: 88%; }
  /* the coloured edge already says right / wrong; give the text the room */
  .stq-badge { display: none !important; }
  .stq-ready[data-mode="practice"] .stq-front { padding-left: .85em; }
}
@media (max-width: 400px) {
  .stq-mode-btn { flex-direction: column; gap: .25em; font-size: .88em; padding: .55em .3em; }
}

@media (prefers-reduced-motion: reduce) {
  .stq *, .stq *::before, .stq *::after { transition: none !important; }
}

/* ---------- print: a clean worksheet; hidden answers become blank boxes ---------- */
@media print {
  .stq-toolbar, .stq-actions, .stq-mark, .stq-flip-hint, .stq-result, .stq-badge, .stq-pin { display: none !important; }
  .stq-item, .stq-ready[data-mode="flip"] .stq-face { box-shadow: none !important; break-inside: avoid; }
  .stq-ready[data-mode="flip"] .stq-cards { display: block; }
  .stq-ready[data-mode="flip"] .stq-item { display: block; margin: 0 0 .8em; }
  .stq-ready[data-mode="flip"] .stq-card { display: block; transform: none !important; }
  .stq-ready[data-mode="flip"] .stq-face { min-height: 0; border: 0; }
  .stq-ready[data-mode="flip"] .stq-back { transform: none; background: none; }
  .stq-ready .stq-a { display: block !important; }
  .stq-ready .stq-item:not(.is-open) .stq-a-text { filter: none !important; opacity: 1 !important; visibility: hidden; min-height: 3em; }
  .stq-ready .stq-item:not(.is-open) .stq-a { border: 1px solid #999 !important; border-radius: 6px; margin: 0 1em 1em; }
  .stq-ready .stq-item:not(.is-open) .stq-a::after { display: none; }
}
@media (max-width: 400px) {
  .stq-tools .stq-btn svg { display: none; }
}