/* Layout and type for pranarhythm.com. Colours and scales come from tokens.css only. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Light only, on white (surface); the warmer bg colour marks cards. */
body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans Arabic", "Noto Sans Devanagari", "PingFang SC", "Hiragino Sans", "Apple SD Gothic Neo", "Noto Sans CJK SC", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
}

:lang(th) body, body:lang(th) { line-height: 1.8; }

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }

.page { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); }

.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding-bottom: var(--space-6); margin-bottom: var(--space-6); border-bottom: 1px solid var(--line);
}
.brand { direction: ltr; display: flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 18px; }
.brand img { width: 32px; height: 32px; }
.lang-switch { font-size: 15px; }

h1 { font-size: 32px; line-height: 1.25; margin: 0 0 var(--space-2); letter-spacing: -0.01em; }
h2 { font-size: 21px; line-height: 1.35; margin: var(--space-12) 0 var(--space-3); }
h3 { font-size: 17px; margin: var(--space-6) 0 var(--space-2); }
p, ul { margin: 0 0 var(--space-4); }
ul { padding-inline-start: var(--space-6); }
li { margin-bottom: var(--space-2); }

.meta { color: var(--ink-muted); font-size: 15px; margin-bottom: var(--space-8); }

.summary {
  background: var(--accent-tint); color: var(--accent-tint-ink);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-8);
}
.summary h2 { margin-top: 0; color: inherit; font-size: 18px; }
.summary ul { margin-bottom: 0; }

.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }

/* Text the developer must fill in before publishing. */
.todo { background: var(--caution-bg); color: var(--caution-ink); border-radius: var(--radius-xs); padding: 0 var(--space-1); }

.toc { font-size: 15px; columns: 2 220px; padding-inline-start: var(--space-5); }

.site-footer { margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid var(--line); color: var(--ink-muted); font-size: 15px; }
.site-footer a { color: var(--ink-muted); }

.hero { padding: var(--space-8) 0; }
.hero img { width: 72px; height: 72px; margin-bottom: var(--space-4); }
.hero p { color: var(--ink-muted); font-size: 19px; }

@media (max-width: 480px) {
  body { font-size: 16px; }
  h1 { font-size: 27px; }
  h2 { font-size: 19px; }
  .summary, .card { padding: var(--space-4); }
}

/* Support FAQ: native disclosure, no script. */
.faq { border: 1px solid var(--line); border-radius: var(--radius-md); margin-bottom: var(--space-3); background: var(--surface); }
.faq summary { cursor: pointer; padding: var(--space-4) var(--space-5); font-weight: 600; list-style-position: outside; margin-inline-start: var(--space-4); }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-md); }
.faq[open] summary { color: var(--accent-tint-ink); }
.faq > p, .faq > ul { margin: 0 var(--space-5) var(--space-4); }
.faq > ul { padding-inline-start: var(--space-5); }
.summary p:last-child { margin-bottom: 0; }

/* Language menu on the privacy pages. */
.langs { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 15px; margin: calc(-1 * var(--space-4)) 0 var(--space-8); }
.langs a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }