/* Codeblokken en inline code binnen artikel-content.
 *
 * Gedeeld door knowledge/detail.html en admin/article_preview.html — beide
 * renderen `article.content_html` in een `.content`-container met een eigen
 * inline style-blok. Zonder deze regels vallen `pre`/`code` terug op
 * browserdefaults: `white-space: pre` zonder overflow-afhandeling. Omdat
 * `.article` `overflow: hidden` heeft, wordt een te brede regel dan afgeknipt
 * in plaats van scrollbaar — op een telefoon verdween zo meer dan de helft van
 * een codeblok. Zie tasks/todo.md, 11-09-2026.
 *
 * De kleurtokens komen uit het :root-blok van het template; de fallbacks houden
 * dit bestand bruikbaar in een context die ze niet definieert.
 */

.content pre {
  /* De eigenlijke fix: horizontaal scrollen i.p.v. afknippen. */
  overflow-x: auto;
  max-width: 100%;
  background: var(--light-blue, #F1F5FF);
  border: 1px solid var(--border-blue, #D6E0FA);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 1.5rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  /* Voorkomt dat iOS de tekst in een scrollbaar blok opblaast. */
  -webkit-text-size-adjust: 100%;
}

.content pre code {
  /* Binnen een pre geen eigen achtergrond of padding — die zitten al op de pre. */
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: pre;
}

.content code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  background: var(--light-blue, #F1F5FF);
  border: 1px solid var(--border-blue, #D6E0FA);
  border-radius: 5px;
  padding: 1px 5px;
  font-size: 0.9em;
  /* Een lange identifier mag afbreken i.p.v. de regel oprekken. */
  overflow-wrap: break-word;
}