/* rolycall — additions the generated legal pages need on top of legal.css.
   legal.css is the design system for these documents and is not edited here; this file
   only supplies what the landing page defines inline (the top bar) plus the pieces the
   build introduces: per-document sub-heads on a multi-document page, the DRAFT badge,
   the fill-in tick box and the Order Form column widths. Tokens come from styles.css. */

/* ---- top bar ---- */
nav.top {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 48px; border-bottom: 1px solid var(--color-neutral-300, #d7d3d3);
}
nav.top .wordmark { color: inherit; text-decoration: none; display: inline-flex; }
nav.top .wordmark:hover { color: var(--color-accent, #ec3013); }

/* ---- the logo ----
   The wordmark is the site's own: the "o" of rolycall is a ring with an off-centre dot.
   It is inlined as SVG and sized in em, so it tracks whatever type size it sits in. */
.wm {
  font-family: var(--font-heading, 'Archivo', sans-serif); font-weight: 800;
  font-size: 21px; letter-spacing: -.03em; line-height: 1;
  display: inline-flex; align-items: baseline; white-space: nowrap;
}
.wm .wm-o { width: .73em; height: .73em; align-self: center; margin: .06em .015em 0; flex: none; }

/* masthead lockup: logo, hairline, section tag */
.doc-brand { display: flex; align-items: center; gap: 14px; margin: 0 0 20px; }
.doc-brand .wm { font-size: 27px; --wm-dot: var(--color-accent, #ec3013); }
.brand-tag {
  padding-left: 14px; border-left: 1px solid var(--color-neutral-300, #d7d3d3);
  font-size: 11.5px; font-weight: 600; letter-spacing: .19em; text-transform: uppercase;
  color: var(--color-accent, #ec3013);
}
.nav-links-r { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 18px; font-size: 13.5px; }

/* ---- masthead extras ---- */
.doc-draft {
  display: inline-block; margin: 0 0 22px; padding: 6px 12px;
  border: 2px solid var(--color-accent, #ec3013); color: var(--color-accent-700, #ae1800);
  font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.doc-meta a { color: inherit; }

/* Grid items default to min-width:auto, so a table wider than the column (the Order Form
   field tables, where the value column is pinned to 45%) stretches the whole grid and pushes
   the page sideways on a narrow screen. min-width:0 keeps the column at its share and lets
   .tablewrap scroll the table instead. */
.doc-grid > * { min-width: 0; }

/* A page without a table of contents (the archive index) must not keep the empty column */
.doc-toc:empty { display: none; }
.doc-grid:has(> .doc-toc:empty) { grid-template-columns: 1fr; }

/* ---- contents ---- */
.doc-toc ol + .k { margin-top: 22px; }

/* ---- a document inside a multi-document page ---- */
.prose .doc-sub { border-bottom: 2px solid var(--color-text, #201e1d); padding: 0 0 12px; margin: 0 0 26px; }
.prose .doc-sub .doc-kicker { margin-bottom: 8px; }
.prose .doc-sub-title { font-size: 32px; line-height: 1.08; letter-spacing: -.025em; margin: 0; padding: 0; border-bottom: 0; }
.bundle-doc + .bundle-doc { margin-top: 76px; }
.prose .doc-integrity { margin-top: 44px; }

/* ---- fill-in tick box (Order Form, Rate Card) ---- */
.tick {
  display: inline-block; width: 12px; height: 12px; vertical-align: -1px;
  border: 1px solid var(--color-neutral-700, #605d5d); background: #fff;
}

/* ---- hub ---- */
.hub-note { font-size: 13.5px; line-height: 1.6; max-width: 76ch; color: var(--color-neutral-800, #444141); }
.hub-table { margin: 8px 0 30px; }
.hub-table h2 {
  font-family: var(--font-heading, 'Archivo', sans-serif); font-weight: 800; font-size: 21px;
  letter-spacing: -.02em; margin: 0 0 14px; padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent, #ec3013);
}

.page-break { display: block; height: 0; }
@media print { .page-break { break-before: page; page-break-before: always; } }

/* Order Form field tables: the value column keeps at least 45% of the width on screen
   as well as in print. Markdown emits plain <td>/<th>, so the two-column field rows are
   selected structurally, scoped to the Order Form section. */
#order-form table td:first-child:nth-last-child(2),
#order-form table th:first-child:nth-last-child(2) { width: 45%; }
#order-form table td:nth-child(2):last-child,
#order-form table th:nth-child(2):last-child { width: 55%; }

@media (max-width: 960px) {
  .doc-cards { grid-template-columns: 1fr; }
}
/* ---- printed-column widths, also honoured on screen ----
   Markdown gives every table the same automatic layout, which squeezes the six-column
   Appendix into unreadably tall rows. The column count is set on the wrapper at build time. */
.cols-6 table { table-layout: fixed; }
.cols-6 th, .cols-6 td { overflow-wrap: break-word; }
.cols-6 :is(th, td):nth-child(1) { width: 23%; }
.cols-6 :is(th, td):nth-child(2) { width: 16%; }
.cols-6 :is(th, td):nth-child(3) { width: 12%; }
.cols-6 :is(th, td):nth-child(4) { width: 14%; }
.cols-6 :is(th, td):nth-child(5) { width: 11%; }
.cols-6 :is(th, td):nth-child(6) { width: 24%; }

@media (max-width: 520px) {
  .prose .doc-sub-title { font-size: 24px; }
  .wm { font-size: 19px; }
  .doc-brand .wm { font-size: 23px; }
}

.legal-index-row .k {
  font-weight: 600; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-neutral-600, #7d7979);
}