/*
  Fonte unica dell'aspetto del testo editoriale.

  .page-html e' il contenitore pubblico; .ProseMirror e' la radice editabile di
  Tiptap. Ogni regola del contenuto deve restare sotto questo doppio selettore.
*/

:is(.page-html, .ProseMirror) {
  --rich-text-border: var(--page-border, color-mix(in srgb, currentColor 22%, transparent));
  --rich-text-link: var(--page-link, currentColor);
  --rich-text-surface: var(--page-surface, color-mix(in srgb, currentColor 7%, transparent));
  --rich-text-accent: var(--accent-color, currentColor);

  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5em;
  max-inline-size: 65ch;
  overflow-wrap: break-word;
}

:is(.page-html, .ProseMirror) > :first-child {
  margin-block-start: 0;
}

:is(.page-html, .ProseMirror) > :last-child {
  margin-block-end: 0;
}

:is(.page-html, .ProseMirror) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading-secondary);
  line-height: 1.2;
  margin-block: 1.6em 0.55em;
  text-wrap: balance;
}

:is(.page-html, .ProseMirror) h1 {
  font-size: 1.9rem;
}

:is(.page-html, .ProseMirror) h2 {
  font-size: 1.6rem;
}

:is(.page-html, .ProseMirror) h3 {
  font-size: 1.35rem;
}

:is(.page-html, .ProseMirror) h4 {
  font-size: 1.15rem;
}

:is(.page-html, .ProseMirror) :is(h5, h6) {
  font-size: 1rem;
}

:is(.page-html, .ProseMirror) :is(p, ul, ol, blockquote, pre, figure, table) {
  margin-block: 0 1em;
}

:is(.page-html, .ProseMirror) :is(ul, ol) {
  padding-inline-start: 1.5em;
}

:is(.page-html, .ProseMirror) :is(ul, ol) :is(ul, ol) {
  margin-block: 0.35em 0;
}

:is(.page-html, .ProseMirror) li + li {
  margin-block-start: 0.35em;
}

:is(.page-html, .ProseMirror) li > p {
  margin-block: 0.2em;
}

:is(.page-html, .ProseMirror) a {
  color: var(--rich-text-link);
  overflow-wrap: anywhere;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

/*
  Evidenziatore editoriale intenzionalmente identico in light e dark mode.
  Il gradiente inclinato e i raggi asimmetrici rompono appena il contorno,
  mentre box-decoration-break conserva l'effetto sulle righe spezzate.
*/
:is(.page-html, .ProseMirror) .highlight {
  -webkit-box-decoration-break: clone;
  background: linear-gradient(
    178deg,
    transparent 0 7%,
    rgb(244 220 104 / 0.9) 8% 16%,
    #f4dc68 18% 84%,
    rgb(244 220 104 / 0.92) 86% 92%,
    transparent 93%
  );
  border-radius: 0.22em 0.08em 0.18em 0.06em / 0.12em 0.18em 0.08em 0.14em;
  box-decoration-break: clone;
  color: #211d00;
  margin-inline: -0.02em;
  padding: 0.04em 0.12em 0.06em;
  text-shadow: none;
}

:is(.page-html, .ProseMirror) blockquote {
  border-inline-start: 0.3rem solid var(--rich-text-accent);
  margin-inline: 0;
  padding: 0.2rem 0 0.2rem 1rem;
}

:is(.page-html, .ProseMirror) blockquote > :last-child {
  margin-block-end: 0;
}

:is(.page-html, .ProseMirror) :is(img, video, iframe) {
  block-size: auto;
  max-inline-size: 100%;
}

:is(.page-html, .ProseMirror) figure {
  max-inline-size: 100%;
}

:is(.page-html, .ProseMirror) figcaption {
  font-size: 0.9em;
  margin-block-start: 0.4rem;
}

:is(.page-html, .ProseMirror) table {
  border-collapse: collapse;
  display: block;
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
}

:is(.page-html, .ProseMirror) :is(th, td) {
  border: 1px solid var(--rich-text-border);
  padding: 0.4rem 0.6rem;
  text-align: start;
  vertical-align: top;
}

:is(.page-html, .ProseMirror) th {
  background: var(--rich-text-surface);
  font-family: var(--font-heading-secondary);
  font-weight: 700;
}

:is(.page-html, .ProseMirror) :is(th, td) > :last-child {
  margin-block-end: 0;
}

:is(.page-html, .ProseMirror) :not(pre) > code {
  background: var(--rich-text-surface);
  border-radius: 0.2rem;
  padding: 0.1em 0.25em;
}

:is(.page-html, .ProseMirror) pre {
  background: var(--rich-text-surface);
  border: 1px solid var(--rich-text-border);
  border-radius: 0.25rem;
  overflow-x: auto;
  padding: 0.8rem 1rem;
  white-space: pre-wrap;
}

:is(.page-html, .ProseMirror) pre code {
  background: transparent;
  padding: 0;
}

:is(.page-html, .ProseMirror) hr {
  border: 0;
  border-block-start: 1px solid var(--rich-text-border);
  margin-block: 1.6rem;
}

@media (forced-colors: active) {
  :is(.page-html, .ProseMirror) blockquote {
    border-inline-start-color: CanvasText;
  }

  :is(.page-html, .ProseMirror) .highlight {
    background: Mark;
    color: MarkText;
    forced-color-adjust: auto;
  }
}

@media (width <= 50rem) {
  .page-html {
    font-size: 1.25rem;
  }
}