/* Rich text — TipTap-editor (sectie H, DSC-114/118).
 *
 * TipTap rendert een contenteditable met de klassen "tiptap ProseMirror";
 * descendant-selectors op die gegenereerde DOM kunnen niet met utilities in
 * de ERB. De inhoud zelf typografeert via .ds-prose (components/widget.css) —
 * hier staat alleen de editor-chrome: maatvoering, placeholder, geselecteerde
 * nodes en de weergave van inline afbeeldingen en YouTube-embeds. */

.ds-richtext .tiptap {
  min-height: 7.5rem;
  padding: 0.625rem 0.875rem;
  /* Geen eigen outline op de contenteditable: de wrapper draagt de ring. */
  outline: none;
}

/* DSC-114 — focus tijdens typen: de wrapper krijgt de standaard dikke
 * focus-ring (2px Almost Black, 2px offset, conform de tokens-laag) zodra
 * de contenteditable focus heeft; :has scopet het focus-within-patroon tot
 * het tekstvlak, zodat toolbar-knoppen alleen hun eigen ring tonen. */
.ds-richtext:has(.tiptap:focus) {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}
.on-dark .ds-richtext:has(.tiptap:focus) {
  outline-color: var(--color-offwhite);
}

.ds-richtext--compact .tiptap {
  min-height: 3.5rem;
}

/* Placeholder (extension-placeholder): alleen in een leeg document. */
.ds-richtext .tiptap p.is-editor-empty:first-child::before {
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color: var(--color-subtle);
}

/* Alleen-lezen editor: dezelfde inhoud, gedempte tekst. */
.ds-richtext .tiptap[contenteditable="false"] {
  color: var(--color-subtle);
  cursor: not-allowed;
}

/* Inline afbeeldingen (DSC-118) — ingevoegd na de upload. */
.ds-richtext .tiptap img {
  max-width: 100%;
  margin: 0.75em 0;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
}

/* YouTube-embed in het document (extension-youtube). */
.ds-richtext .tiptap div[data-youtube-video] {
  margin: 0.75em 0;
}
.ds-richtext .tiptap div[data-youtube-video] iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  background: var(--color-black);
}
/* FEEDBACK ronde 2 (R2-7): in de BEWERKBARE editor vangt de YouTube-iframe (eigen
 * browsing context) alle klikken op, waardoor ProseMirror de atomaire node niet
 * selecteert en je hem niet met Backspace/Delete kunt verwijderen. pointer-events:
 * none laat de klik op de node-wrapper landen -> NodeSelection + verwijderbaar. In
 * de gepubliceerde post is dit geen issue (daar staat de klik-om-te-laden-facade). */
.ds-richtext .tiptap[contenteditable="true"] div[data-youtube-video] iframe {
  pointer-events: none;
}

/* Geselecteerde atomaire node (afbeelding/embed): brand-outline. */
.ds-richtext .tiptap .ProseMirror-selectednode {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-md);
}

/* Gapcursor (StarterKit) — knipperende regel-cursor naast atomaire nodes. */
.ds-richtext .tiptap .ProseMirror-gapcursor {
  display: none;
  position: relative;
  pointer-events: none;
}
.ds-richtext .tiptap .ProseMirror-gapcursor::after {
  content: "";
  position: absolute;
  top: -2px;
  display: block;
  width: 20px;
  border-top: 1px solid var(--color-black);
  animation: ds-gapcursor-blink 1.1s steps(2, start) infinite;
}
.ds-richtext .tiptap.ProseMirror-focused .ProseMirror-gapcursor {
  display: block;
}
@keyframes ds-gapcursor-blink {
  to {
    visibility: hidden;
  }
}

/* @mention (jul 2026): de mention-node in de TipTap-editor. De sanitizer slaat
   nooit classes op, dus de opgeslagen <a data-mention> krijgt z'n stijl bij het
   renderen (PostsHelper::MENTION_CSS); in de editor stylen we 'm hier. */
.ds-richtext a[data-mention] {
  color: var(--color-brand);
  font-weight: 600;
}