/* conform.md — static explainer site
 *
 * Direction: "registry ink on official paper". The reader is a notary's
 * assistant, and the page has to sit comfortably next to the documents they
 * already handle — Monitorul Oficial extracts, acts, dossier printouts.
 * So: paper ground, offset-black text, a transitional serif for the prose,
 * a grotesque for chrome and metadata, and exactly one accent — the
 * violet-blue of a notarial seal — spent on links, the legal-basis box, and
 * the verification endorsement. No gradients, no motion, no gloss.
 *
 * SELF-CONTAINED BY REQUIREMENT. The live vhost sends
 *   default-src 'self'; font-src 'self'; img-src 'self' data:
 * so there is no at-rule import, no webfont, no CDN and no remote image
 * anywhere in this file, and there must never be one. The verifier greps
 * this file for those tokens, so do not reintroduce them even in a comment.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Paper is warm-neutral, not cream: a shade of office bond, one step off
     white, so long serif text does not glare. */
  --paper:      #fbfaf7;
  --paper-sunk: #f2f1ec;
  --ink:        #1c1d21;
  --ink-soft:   #55575f;
  --rule:       #d9d7cf;
  --seal:       #3b2e6e;
  --seal-tint:  #edebf4;

  /* Charter and Cambria are the two best text serifs that ship with an OS.
     Liberation/Nimbus cover Linux; Times is the floor. */
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria,
           "Liberation Serif", "Nimbus Roman", "Times New Roman", serif;
  --grot:  system-ui, -apple-system, "Segoe UI", Roboto, "Liberation Sans",
           Arial, sans-serif;

  --measure: 34rem;   /* ~68 characters of Romanian prose */
  --step:    1.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #16171a;
    --paper-sunk: #1e2025;
    --ink:        #e7e6e1;
    --ink-soft:   #a0a2aa;
    --rule:       #33353b;
    --seal:       #a99be8;
    --seal-tint:  #23213a;
  }
}

/* ----------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;      /* 17px — dense legal prose read at length */
  line-height: 1.7;
  text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------------ a11y */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--seal);
  color: #fff;
  padding: 0.6rem 1rem;
  font-family: var(--grot);
  font-size: 0.9rem;
  z-index: 10;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

/* ----------------------------------------------------------- page frame */

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.masthead {
  border-bottom: 1px solid var(--rule);
  padding: 1.1rem 0;
  margin-bottom: 2.75rem;
}

.wordmark {
  font-family: var(--grot);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark:hover { color: var(--seal); }

main { display: block; }

/* -------------------------------------------------------------- headings */

h1, h2, h3 {
  font-family: var(--grot);
  color: var(--ink);
  line-height: 1.25;
  text-wrap: balance;
}

h1 {
  font-size: 1.95rem;
  font-weight: 650;
  letter-spacing: -0.019em;
  margin: 0 0 1.1rem;
}

h2 {
  font-size: 1.22rem;
  font-weight: 620;
  letter-spacing: -0.008em;
  margin: 3rem 0 0.85rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

h3 {
  font-size: 1.02rem;
  font-weight: 620;
  margin: 2rem 0 0.6rem;
}

p { margin: 0 0 1.15rem; }

strong { font-weight: 600; }

a {
  color: var(--seal);
  text-decoration: underline;
  text-underline-offset: 0.14em;
  text-decoration-thickness: 0.055em;
}
a:hover { text-decoration-thickness: 0.13em; }

/* --------------------------------------------- the verification endorsement
 *
 * The signature element, and it is not decoration: every page's second line
 * is its own "Verificat la: DD.MM.YYYY", the freshness signal the content
 * system treats as load-bearing. Set as a registry endorsement — bordered,
 * letterspaced, in the seal ink — so it reads the way a date stamp reads on
 * a document, which is exactly what it is.
 *
 * Deliberately NOT a round seal, not rotated, no coat of arms: this is OUR
 * verification date, and it must never be mistakeable for a state mark.
 */

article > p:first-of-type {
  display: inline-block;
  margin: 0 0 2rem;
  padding: 0.34rem 0.85rem;
  border: 1px solid var(--seal);
  border-bottom-width: 3px;
  font-family: var(--grot);
  font-size: 0.735rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--seal);
  background: var(--seal-tint);
}
article > p:first-of-type strong { font-weight: 600; }

/* ------------------------------------------------------------ quote boxes
 *
 * Every blockquote on this site is primary-source material: the legal-basis
 * box at the top, then verbatim Romanian from the acts. One treatment for
 * all of them — sunk ground, seal rule — because they are all the same kind
 * of thing. Upright, never italic: italic wrecks Romanian diacritics at
 * length (ș, ț, ă, î descend and collide).
 */

blockquote {
  margin: 1.6rem 0;
  padding: 1.05rem 1.25rem 0.4rem;
  border-left: 3px solid var(--seal);
  background: var(--paper-sunk);
  font-size: 0.99rem;
}

blockquote p { margin-bottom: 0.75rem; }

/* Only where the source put a bold label on its own line — see
   tag_labelled_quotes() in build-site.py. Never on a quote that merely opens
   with a bold letter, like „**j)** avocații…". */
blockquote.labelled > p:first-child > strong:first-child {
  display: block;
  font-family: var(--grot);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.35rem;
}

/* ------------------------------------------------------------------ lists */

ul, ol { margin: 0 0 1.15rem; padding-left: 1.35rem; }
li { margin-bottom: 0.45rem; }
li > ul, li > ol { margin-top: 0.45rem; }

/* ----------------------------------------------------------------- tables
 *
 * The scroll container is a wrapper the builder adds; without it a wide
 * comparison table forces the whole page to scroll sideways on a phone.
 */

.table-scroll {
  overflow-x: auto;
  margin: 1.6rem 0;
  border: 1px solid var(--rule);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-family: var(--grot);
  font-size: 0.855rem;
  line-height: 1.55;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid var(--rule);
}

thead th {
  background: var(--paper-sunk);
  font-weight: 640;
  font-size: 0.735rem;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
}

tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------- rule
 * One <hr> per page: it separates the disclaimer footer from the body. */

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.75rem 0 1.5rem;
}

hr + p, hr ~ p em {
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-style: normal;
}
hr ~ p { color: var(--ink-soft); font-size: 0.9rem; }

/* -------------------------------------------------------------- the index */

.lede {
  font-size: 1.16rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
}

.guides { list-style: none; margin: 0; padding: 0; }

.guides li {
  margin: 0;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.guides li:last-child { border-bottom: 1px solid var(--rule); }

.guides a {
  font-family: var(--grot);
  font-size: 1.06rem;
  font-weight: 620;
  letter-spacing: -0.008em;
  line-height: 1.35;
  display: inline-block;
  margin-bottom: 0.4rem;
  text-decoration: none;
}
.guides a:hover { text-decoration: underline; text-underline-offset: 0.14em; }

.guides p { margin: 0 0 0.5rem; font-size: 0.97rem; color: var(--ink-soft); }

.stamp {
  font-family: var(--grot);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.075em;
  text-transform: uppercase;
  color: var(--seal);
}

/* ------------------------------------------------------------------ footer */

.sitefoot {
  margin-top: 4.5rem;
  padding: 2rem 0 3.5rem;
  border-top: 1px solid var(--rule);
  font-family: var(--grot);
  font-size: 0.875rem;
  color: var(--ink-soft);
}

.sitefoot h2 {
  font-size: 0.72rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 0;
  padding: 0;
  margin: 0 0 0.75rem;
}

.sitefoot ul { list-style: none; margin: 0; padding: 0; }
.sitefoot li { margin-bottom: 0.4rem; line-height: 1.45; }
.sitefoot a { color: var(--ink-soft); text-decoration: none; }
.sitefoot a:hover { color: var(--seal); text-decoration: underline; }

/* ------------------------------------------------------------------- print
 * This audience prints. Black ink, no chrome, keep the quote boxes legible
 * as boxes rather than as grey blocks that eat toner. */

@media print {
  :root {
    --paper: #fff; --paper-sunk: #fff; --ink: #000;
    --ink-soft: #333; --rule: #999; --seal: #000; --seal-tint: #fff;
  }
  .masthead, .sitefoot, .skip { display: none; }
  body { font-size: 11pt; }
  .wrap { max-width: none; padding: 0; }
  blockquote { border: 1px solid #999; border-left-width: 3px; }
  .table-scroll { overflow: visible; }
  h2, h3, blockquote, table { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
  a { color: #000; }
}

/* ------------------------------------------------------------ small screens */

@media (max-width: 34rem) {
  body { font-size: 1.02rem; }
  h1 { font-size: 1.6rem; }
  .wrap { padding: 0 1rem; }
}