/* nd-legal.css — halaman legal (/faq, /privacy-policy, /eula, /refund-policy, /contact)
   dan halaman teks lain yang memakai shell .nd-legal.

   Masalah yang diperbaiki: tiap halaman legal punya blok <style> sendiri yang
   memakai @media (prefers-color-scheme) — artinya warnanya mengikuti setelan
   SISTEM, bukan toggle tema situs. Akibatnya halaman ini bisa tampil terang di
   tengah situs yang gelap (atau sebaliknya). Di sini semuanya diikat ke token,
   sehingga satu toggle mengendalikan seluruh situs.

   Dimuat SESUDAH blok <style> halaman supaya override-nya menang. */

body.nd-ui .nd-legal {
  max-inline-size: min(var(--nd-container, 1280px), 68rem);
  margin-inline: auto;
  padding-inline: var(--nd-sp-4);
  padding-block: var(--nd-sp-8) var(--nd-sp-12);
  color: var(--nd-t2);
  font: 400 var(--nd-fs-md) / var(--nd-lh-base, 1.6) var(--nd-font-text);
}

body.nd-ui .nd-legal h1 {
  font: 800 clamp(1.5rem, 4vw, 2.25rem) / var(--nd-lh-tight, 1.16) var(--nd-font-display);
  color: var(--nd-t1);
  margin: 0 0 var(--nd-sp-2);
}

body.nd-ui .nd-legal h2 {
  font: 700 clamp(1.0625rem, 2.2vw, 1.25rem) / var(--nd-lh-snug, 1.3) var(--nd-font-display);
  color: var(--nd-t1);
  margin: var(--nd-sp-8) 0 var(--nd-sp-3);
  padding-block-end: var(--nd-sp-2);
  border-block-end: 1px solid var(--nd-line-subtle);
}

body.nd-ui .nd-legal h3 {
  font: 700 var(--nd-fs-md) / var(--nd-lh-snug, 1.3) var(--nd-font-text);
  color: var(--nd-t1);
  margin: var(--nd-sp-5) 0 var(--nd-sp-2);
}

body.nd-ui .nd-legal p,
body.nd-ui .nd-legal li { color: var(--nd-t2); }
body.nd-ui .nd-legal p { margin: 0 0 var(--nd-sp-3); }
body.nd-ui .nd-legal ul,
body.nd-ui .nd-legal ol { margin: 0 0 var(--nd-sp-4); padding-inline-start: var(--nd-sp-5); }
body.nd-ui .nd-legal li { margin: 0 0 var(--nd-sp-2); }
body.nd-ui .nd-legal strong { color: var(--nd-t1); }

body.nd-ui .nd-legal .nd-legal-updated { /* nd-allow-ns: class ini SUDAH ADA di markup halaman legal — hanya di-restyle, bukan komponen baru */
  color: var(--nd-t3);
  font-size: var(--nd-fs-xs);
  margin: 0 0 var(--nd-sp-6);
}

body.nd-ui .nd-legal a {
  color: var(--nd-accent-ink, var(--nd-accent-400));
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-legal a:hover { border-block-end-color: currentColor; }

/* ---------- Akordeon FAQ ---------- */

body.nd-ui .nd-faq-item {
  background: var(--nd-s1);
  border-radius: var(--nd-r-3);
  margin-block-end: var(--nd-sp-2);
  overflow: hidden;
  transition: border-color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-faq-item[open] { border-color: var(--nd-line); }

body.nd-ui .nd-faq-item > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--nd-sp-3) var(--nd-sp-4);
  color: var(--nd-t1);
  font: 700 var(--nd-fs-md) / var(--nd-lh-snug, 1.3) var(--nd-font-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--nd-sp-3);
}
body.nd-ui .nd-faq-item > summary::-webkit-details-marker { display: none; }
body.nd-ui .nd-faq-item > summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--nd-t3);
  font-weight: 700;
  transition: transform var(--nd-dur-2) var(--nd-ease-out), color var(--nd-dur-1) var(--nd-ease-out);
}
body.nd-ui .nd-faq-item[open] > summary::after { content: "−"; color: var(--nd-accent-400); }
body.nd-ui .nd-faq-item > summary:hover { color: var(--nd-accent-ink, var(--nd-accent-400)); }

body.nd-ui .nd-faq-answer {
  padding: 0 var(--nd-sp-4) var(--nd-sp-4);
  color: var(--nd-t2);
}
body.nd-ui .nd-faq-answer p:last-child { margin-block-end: 0; }

/* Beri ruang di bawah supaya teks terakhir tidak tertutup bottom nav. */
@media (max-width: 1023.98px) {
  body.nd-ui .nd-legal { padding-block-end: var(--nd-sp-10); }
}