/* Research community + participant privacy pages (/join-research/,
   /participant-privacy/ and their /zh-hant/, /ko/, /vi/ equivalents).
   Injected by the inject-static-scripts transform when a page contains the
   `.jr-page` marker. Scoped under .jr-page so it never touches other pages.
   Reuses the site's Poppins headings from the retained Bricks stylesheets. */

.jr-page {
  --jr-coral: #fb4a2c;
  --jr-cyan: #10b7ef;
  --jr-ink: #0e1822;
  --jr-cream: #fcf4de;
  --jr-muted: #5a6672;
  --jr-line: #e6e9ec;
  --jr-maxw: 820px;

  color: var(--jr-ink);
  font-size: 18px;
  line-height: 1.65;
}
.jr-page * { box-sizing: border-box; }

/* Center every block in a readable column. */
.jr-wrap { max-width: var(--jr-maxw); margin: 0 auto; padding: 0 20px; }

.jr-page h1,
.jr-page h2,
.jr-page h3 {
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--jr-ink);
  line-height: 1.2;
  margin: 0 0 0.5em;
}
.jr-page h1 { font-size: clamp(30px, 6vw, 46px); font-weight: 700; }
.jr-page h2 { font-size: clamp(23px, 4.5vw, 30px); font-weight: 600; margin-top: 1.6em; }
.jr-page h3 { font-size: clamp(19px, 3.5vw, 22px); font-weight: 600; }
.jr-page p { margin: 0 0 1.1em; }
.jr-page a { color: var(--jr-coral); }

/* ---- Language switcher --------------------------------------------------- */
.jr-langbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 20px 0;
  max-width: var(--jr-maxw);
  margin: 0 auto;
}
.jr-lang {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--jr-line);
  border-radius: 999px;
  font-size: 15px;
  line-height: 1.3;
  text-decoration: none;
  color: var(--jr-ink);
  background: #fff;
  white-space: normal; /* let long KO/VI labels wrap cleanly on mobile */
}
.jr-lang:hover { border-color: var(--jr-cyan); }
.jr-lang.is-active {
  background: var(--jr-ink);
  border-color: var(--jr-ink);
  color: #fff;
  font-weight: 600;
}
.jr-lang:focus-visible { outline: 3px solid var(--jr-cyan); outline-offset: 2px; }

/* ---- Hero ---------------------------------------------------------------- */
.jr-hero {
  background: var(--jr-cream);
  padding: 40px 0 48px;
  margin-top: 16px;
}
.jr-hero h1 { margin-bottom: 0.4em; }
.jr-hero .jr-lede { font-size: clamp(19px, 3vw, 22px); color: var(--jr-ink); }

/* ---- Buttons ------------------------------------------------------------- */
.jr-btn {
  display: inline-block;
  background: var(--jr-coral);
  color: #fff !important;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 8px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.jr-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(251, 74, 44, 0.28); }
.jr-btn:focus-visible { outline: 3px solid var(--jr-cyan); outline-offset: 3px; }
.jr-cta { margin: 22px 0 10px; }
.jr-note { font-size: 15px; color: var(--jr-muted); margin: 0 0 6px; }
.jr-note--lang { font-weight: 600; color: var(--jr-ink); }

/* ---- Sections ------------------------------------------------------------ */
.jr-section { padding: 28px 0; }
.jr-section + .jr-section { border-top: 1px solid var(--jr-line); }

/* ---- How it works: numbered steps --------------------------------------- */
.jr-steps { list-style: none; counter-reset: jr; margin: 0; padding: 0; }
.jr-steps > li {
  counter-increment: jr;
  position: relative;
  padding: 0 0 4px 60px;
  margin: 0 0 22px;
  min-height: 44px;
}
.jr-steps > li::before {
  content: counter(jr);
  position: absolute;
  left: 0; top: 0;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  background: var(--jr-cyan);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  border-radius: 50%;
}
.jr-steps h3 { margin: 6px 0 4px; }
.jr-steps p { margin: 0; }

/* ---- FAQ: native disclosure --------------------------------------------- */
.jr-faq { border-bottom: 1px solid var(--jr-line); }
.jr-faq > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 44px 16px 0;
  position: relative;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--jr-ink);
}
.jr-faq > summary::-webkit-details-marker { display: none; }
.jr-faq > summary::after {
  content: "+";
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  font-size: 26px;
  line-height: 1;
  color: var(--jr-coral);
}
.jr-faq[open] > summary::after { content: "\2013"; } /* – */
.jr-faq > summary:focus-visible { outline: 3px solid var(--jr-cyan); outline-offset: 2px; }
.jr-faq > *:not(summary) { margin: 0 0 16px; }

/* ---- Privacy summary + notice body -------------------------------------- */
.jr-privacy-summary {
  background: #f4fbfe;
  border: 1px solid #cdeefb;
  border-radius: 10px;
  padding: 20px 22px;
}
.jr-privacy-summary h2 { margin-top: 0; }
.jr-back { display: inline-block; margin-top: 8px; font-weight: 600; }

@media (max-width: 600px) {
  .jr-page { font-size: 17px; }
  .jr-hero { padding: 28px 0 34px; }
  .jr-btn { display: block; text-align: center; }
}