/* Guides: long articles on receipt paper. Loaded only by /guides/ and /fr/guides/ pages, after style.css. */

.guide-page { padding-top: 0; }
.guide-page .crumbs { padding-block: 28px 32px; }

.doc .doc-date {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 24px;
}
.doc .doc-date a { color: var(--plum); }

/* Short answer at the top */
.guide-summary {
  max-width: 66ch;
  margin: 0 0 8px;
  padding: 18px 20px 4px;
  border: 2px dashed var(--ink);
  background: #F2EFE4;
}
@media (min-width: 600px) { .guide-summary { padding: 22px 26px 8px; } }
.doc .guide-summary h2 { margin: 0 0 8px; }

/* Lists, tables, notes */
.doc ol { max-width: 66ch; padding-left: 1.4em; margin: 0 0 1em; }
.doc code {
  font-family: var(--mono);
  font-size: .9em;
  overflow-wrap: anywhere;
}

.checklist { list-style: none; padding-left: 0 !important; counter-reset: none; }
.checklist li {
  position: relative;
  padding: 8px 0 8px 4.5ch;
  margin: 0;
  border-bottom: 2px dotted var(--fade);
}
.checklist li:first-child { border-top: 2px dotted var(--fade); }
.checklist li::before {
  content: "[ ]";
  position: absolute;
  left: 0;
  top: 8px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--plum);
}

.table-wrap {
  max-width: 66ch;
  margin: 0 0 1em;
  overflow-x: auto;
}
.doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.doc caption {
  padding-bottom: 8px;
  text-align: left;
  font-family: var(--mono);
  font-size: .9375rem;
  color: var(--ink-soft);
}
.doc th, .doc td {
  padding: 8px 10px 8px 0;
  border-bottom: 2px dotted var(--fade);
  text-align: left;
  vertical-align: top;
}
.doc thead th { border-bottom: 2px solid var(--ink); font-family: var(--mono); font-weight: 600; }
.doc td.num, .doc th.num {
  font-family: var(--mono);
  text-align: right;
  white-space: nowrap;
  padding-right: 0;
  padding-left: 12px;
}
.doc tr.total td, .doc tr.total th { font-weight: 700; }

.guide-note {
  max-width: 66ch;
  margin: 28px 0 0;
  padding: 14px 18px;
  border-left: 4px solid var(--plum);
  background: #F2EFE4;
  font-size: 1rem;
}

.doc .sources { font-size: 1rem; }
.doc .sources li { overflow-wrap: anywhere; }

/* FAQ inside the paper: same component as the home page, ink colours */
.doc .faq { max-width: 66ch; margin-top: 8px; border-top-color: var(--fade); }
.doc .faq details { border-bottom-color: var(--fade); }
.doc .faq summary { font-size: 1.0625rem; padding: 16px 0; }
.doc .faq summary::after { color: var(--plum); }
.doc .faq summary:hover { color: var(--plum); }
.doc .faq details p { color: var(--ink); margin: -2px 0 20px; }

.guide-related { max-width: 66ch; margin-top: 40px; padding-top: 18px; border-top: 2px dashed var(--fade); }
.doc .guide-related h2 { margin-top: 0; }

/* Guides index */
.guide-index { padding-block: 0 104px; }
.guide-index .section-head { margin: 32px 0 48px; }
.guide-index h1 { margin-bottom: 18px; }
.guide-list {
  display: grid;
  gap: 48px;
  max-width: 820px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.guide-card {
  padding: 28px 22px 30px;
  filter: drop-shadow(0 18px 22px rgba(14, 4, 24, .3));
}
@media (min-width: 600px) { .guide-card { padding: 36px 40px 38px; } }
.guide-card h2 {
  margin-bottom: 10px;
  font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem);
}
.guide-card h2 a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: .18em; }
.guide-card h2 a:hover { color: var(--plum); }
.guide-card p { max-width: 62ch; }
.guide-card .guide-card__meta {
  margin: 0;
  font-family: var(--mono);
  font-size: .9375rem;
  color: var(--ink-soft);
}