/* ============================================================================
 * PAGE BASE — privasi.html and dukung.html only.
 *
 * The last tie to the old wing. Both pages were ported onto the new navbar
 * and footer (css/chrome.css) but kept linking style.css + css/legacy-bridge.css
 * for four things style.css alone provided: the self-hosted Plus Jakarta Sans
 * @font-face, the global box-model/margin reset, base body/h1-h3/p/a
 * typography, and (dukung.html only) the .other-ways / .faq-section /
 * .faq-item / .donate-page / .donate-intro component rules. This file is
 * that, reimplemented on tokens, so both pages can drop style.css and
 * legacy-bridge.css and demolition of the old wing (alat-gambar.html) is no
 * longer blocked by these two. NOT scaffolding — this is the two pages' real
 * base layer now, meant to stay.
 *
 * Loaded after css/tokens.css (needs its vars). Order relative to
 * css/chrome.css does not matter — no selector overlap: chrome.css owns
 * .ld-*/.pg-wrap/.pg-btn, this file owns body/headings/paragraphs/links and
 * the two pages' own prose component classes.
 * ==========================================================================*/

/* ---- FONT FACE — self-hosted, ported byte-for-byte from style.css's
   src urls. Without this, removing style.css drops Plus Jakarta Sans
   entirely and both pages silently fall back to the OS sans-serif; nothing
   else in either page's own <style> block or in chrome.css declares it. ---- */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/plusjakartasans-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/plusjakartasans-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/plusjakartasans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/plusjakartasans-700.woff2') format('woff2');
}

/* ---- RESET — style.css's `*, *::before, *::after { box-sizing: border-box;
   margin: 0; padding: 0; }`, ported as-is. Everything in chrome.css and both
   pages' own <style> blocks (padding-including widths, zeroed heading/list
   margins) has been rendering under this reset via style.css; dropping it
   without replacement would grow every padded box by its own padding and
   bring back the UA default margins on h1/p/ul. ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ---- BASE TYPOGRAPHY — body/h1-h3/p/a, ported from style.css. html's own
   font-size is deliberately NOT hardcoded to 16px here the way style.css did
   it (index.html, the current reference implementation, does not do that
   either) — hardcoding it overrides a user's browser-level text-size
   preference, which rem-based tokens should instead scale with. ---- */
body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  transition: background-color .3s ease, color .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}

h1, h2, h3 { font-weight: 600; line-height: 1.3; }
/* Only h1 gets a font-size here: every h2/h3 on both pages is reached
   through a more specific selector that sets its own (.privacy-section h2,
   .donate-section h2, .other-ways h2, .faq-section h2, .faq-item h3) — a
   bare h2/h3 size is not exercised by current markup, so it is not written
   speculatively. --fs-4 (33.2px) is the closest token to style.css's 2rem
   (32px), one step below tokens.css's own "H1 on inner pages lives in 5..8"
   note — that range is a larger jump from the current 32px than this
   demolition pass is meant to make; changing it is a taste call for the
   design-system owner, not this cleanup. */
h1 { font-size: var(--fs-4); }

p { color: var(--muted); }

a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s ease;
}
a:hover { color: var(--accent-down); }

/* ---- DUKUNG.HTML COMPONENTS — .other-ways, .faq-section, .faq-item,
   .donate-page, .donate-intro. privasi.html's .privacy-* classes are already
   fully self-contained in its own <style> block and need nothing here. ---- */

/* .donate-page's own <style> block sets max-width (900px) and margin; these
   two properties are the rest of style.css's rule, at the same specificity,
   so both apply together. */
.donate-page { padding: var(--sp-64) var(--sp-24); text-align: center; }
.donate-page h1 { margin-bottom: var(--sp-24); }

.donate-intro {
  /* --fs-1 (19.2px) over the nearer-by-raw-pixels --fs-0 (16px): tokens.css
     names --fs-1 "nav link, LEAD PARAGRAPH" specifically, and a lead
     paragraph rendering the same size as body text stops reading as one. */
  font-size: var(--fs-1);
  line-height: 1.7;
  margin-bottom: var(--sp-48);
}

.other-ways { text-align: left; margin-bottom: var(--sp-48); }
.other-ways h2 { font-size: var(--fs-1); margin-bottom: var(--sp-16); }
.other-ways ul { list-style: none; }
.other-ways li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-16);
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--line);
}
.other-ways li:last-child { border-bottom: none; }
.other-ways li span:first-child { font-size: var(--fs-1); }

.faq-section { text-align: left; margin-bottom: var(--sp-48); }
.faq-section h2 { font-size: var(--fs-1); margin-bottom: var(--sp-24); }
.faq-item { margin-bottom: var(--sp-24); }
.faq-item h3 { font-size: var(--fs-0); margin-bottom: var(--sp-8); }
.faq-item p { font-size: var(--fs-0); line-height: 1.6; }