/* Hallmark · genre: modern-minimal · macrostructure: Long Document · design-system: design.md
 * Content pages (FAQ, legal, support, 404) + shared pieces:
 * page head, "Nesta página" index, document body, native <details> Q&A.
 * Typography only — rules, not cards.
 */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ---------- Page head ---------- */
.page-head { padding-block: var(--space-2xl) var(--space-xl); }
.page-head h1 { font-size: var(--text-display-s); max-width: 20ch; }
.page-head .lede { margin-top: var(--space-md); }
.page-head__terms { margin-top: var(--space-md); font-size: var(--text-xs); color: var(--color-neutral); max-width: var(--measure); }
.page-head__meta { margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }
@media (min-width: 60rem) { .page-head { padding-top: var(--space-3xl); } }

/* ---------- Document layout: index + body ---------- */
.doc { padding-bottom: var(--space-3xl); }
.doc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
.doc__body { max-width: 65ch; min-width: 0; }
@media (min-width: 64rem) {
  .doc__grid { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
  .toc { position: sticky; top: 5.5rem; }
}

/* "Nesta página" index */
.toc { border-top: var(--rule-strong); padding-top: var(--space-sm); }
.toc ol { list-style: none; margin: var(--space-xs) 0 0; padding: 0; display: grid; }
.toc a {
  display: block; padding: 0.4rem 0;
  border-bottom: var(--rule);
  font-size: var(--text-sm); line-height: 1.35; color: var(--color-muted); text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.toc a:hover { color: var(--color-accent); }
@media (max-width: 63.99rem) {
  .toc ol { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); column-gap: var(--space-md); }
}

/* Document sections: a heavy rule opens each one, like a form section */
.doc__section + .doc__section { margin-top: var(--space-2xl); }
.doc__section > h2 {
  font-size: var(--text-xl);
  border-top: var(--rule-strong);
  padding-top: var(--space-sm);
  margin-bottom: var(--space-md);
  scroll-margin-top: 5.5rem;
}
.doc__body p + p, .doc__body p + ul, .doc__body ul + p { margin-top: var(--space-sm); }
.doc__body ul { margin: var(--space-sm) 0 0; padding-left: 1.25rem; display: grid; gap: var(--space-2xs); }
.doc__body li::marker { color: var(--color-neutral); }
.doc__body a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.doc__body a:hover { text-decoration-thickness: 2px; }
.doc__updated { margin-top: var(--space-2xl); padding-top: var(--space-sm); border-top: var(--rule); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-neutral); }

/* ---------- Q&A (native <details>) ---------- */
.qa-list { border-top: var(--rule); max-width: 65ch; }
.qa { border-bottom: var(--rule); }
.qa summary {
  position: relative;
  display: block;
  padding: var(--space-sm) 2.25rem var(--space-sm) 0;
  font-weight: 600; line-height: 1.4;
  cursor: pointer; list-style: none;
  transition: color var(--dur-short) var(--ease-out);
}
.qa summary::-webkit-details-marker { display: none; }
/* plus → minus, drawn with two bars */
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 0.4rem; top: calc(var(--space-sm) + 0.7em);
  width: 0.875rem; height: 2px; background: var(--color-muted);
  transition: transform var(--dur-mid) var(--ease-out), opacity var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0deg); opacity: 0; }
.qa summary:hover { color: var(--color-accent); }
.qa summary:hover::before, .qa summary:hover::after { background: var(--color-accent); }
.qa summary:focus-visible { outline-offset: 2px; }
.qa__answer { padding: 0 0 var(--space-md); color: var(--color-muted); }
.qa__answer p + p { margin-top: var(--space-xs); }
.qa__answer a { color: var(--color-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.qa__answer a:hover { text-decoration-thickness: 2px; }

/* ---------- Not found (404) ---------- */
.notfound { padding-block: var(--space-2xl) var(--space-3xl); }
.notfound__code { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); font-weight: 500; }
.notfound h1 { margin-top: var(--space-xs); font-size: var(--text-display-s); max-width: 18ch; }
.notfound .lede { margin-top: var(--space-md); }
.notfound__links { margin-top: var(--space-xl); max-width: 40rem; border-top: var(--rule-strong); }
.notfound__links a {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-sm);
  padding: var(--space-sm) 0; border-bottom: var(--rule);
  text-decoration: none;
  transition: color var(--dur-short) var(--ease-out);
}
.notfound__links strong { font-family: var(--font-display); font-weight: 700; font-size: var(--text-md); letter-spacing: -0.01em; }
.notfound__links span { font-size: var(--text-sm); color: var(--color-neutral); text-align: right; }
.notfound__links svg { width: 1rem; height: 1rem; flex: none; align-self: center; color: var(--color-neutral); transition: transform var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.notfound__links a:hover { color: var(--color-accent); }
.notfound__links a:hover svg { color: var(--color-accent); transform: translateX(3px); }
@media (max-width: 30rem) { .notfound__links span { display: none; } }