/* ============================================================
   DKG Editor - editor canvas styles only.

   Scoped to the CKEditor 5 contenteditable surface and nowhere
   else. Front-end styles live in the site theme.

   What the canvas draws is the design system's "Simple text
   (WYSIWYG)" frame, the same specification the front end applies
   from web/themes/custom/dkg_theme/css/src/style.css
   (.text-formatted) - that file is the source of truth for every
   value below.

   These rules restate it because the theme's stylesheet is not
   loaded here: CKEditor runs under the gin admin theme, so
   `ckeditor5-stylesheets` in dkg_theme.info.yml would never be
   read and this module's page_attachments hook is what puts
   styles on the canvas instead. The duplication - and the
   hard-coded hex values, since the theme's design tokens do not
   reach here either - is deliberate for that reason.

   The aim is recognition, not pixel parity: an editor needs to
   tell one notice variant from another and see the heading
   scale, not preview the page.

   The selectors are `.ck.ck-content`, not `.ck-content` alone.
   CKEditor 5 injects its own editor stylesheet into the page at
   runtime, after this file, and its `.ck-content hr`,
   `.ck-content blockquote` and heading rules carry the same
   specificity - so on load order alone they win. The editable
   root carries both classes, and the extra one settles it
   without reaching for `!important`.
   ============================================================ */

/* --- Headings ------------------------------------------------ */
.ck.ck-content h1,
.ck.ck-content h2,
.ck.ck-content h3,
.ck.ck-content h4,
.ck.ck-content h5,
.ck.ck-content h6 {
  margin: 24px 0;
  color: #131c34;
  font-weight: 700;
}

.ck.ck-content h1 {
  font-size: 30px;
  line-height: 36px;
}

.ck.ck-content h2 {
  font-size: 24px;
  line-height: 32px;
}

.ck.ck-content h3 {
  font-size: 20px;
  line-height: 28px;
}

.ck.ck-content h4 {
  font-size: 18px;
  line-height: 24px;
}

.ck.ck-content h5,
.ck.ck-content h6 {
  font-size: 16px;
  line-height: 24px;
}

/* --- Body copy, links and lists ------------------------------ */
.ck.ck-content p {
  margin: 0 0 24px;
  color: #314158;
  font-size: 16px;
  line-height: 24px;
}

.ck.ck-content a {
  color: #4a6fb4;
  font-weight: 700;
  text-decoration: underline;
}

.ck.ck-content ul,
.ck.ck-content ol {
  margin: 0 0 24px;
  padding-inline-start: 48px;
}

.ck.ck-content li {
  margin-bottom: 6px;
}

.ck.ck-content hr {
  height: 2px;
  margin: 40px 0;
  border: 0;
  background-color: #e2e8f0;
}

/* --- Quote and its attribution ------------------------------- */
.ck.ck-content blockquote {
  margin: 0 0 24px;
  padding: 0;
  border: 0;
  color: #4a6fb4;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px;
}

/* A quote written on a heading is still a quote - the same rule the front
   end applies, for the same reason: CKEditor 5's block quote wraps whatever
   block the cursor is in. Excluded are the block quotes the Style dropdown
   turns into an alert box or an accordion item, which draw their own. */
.ck.ck-content blockquote:not([class]) h1,
.ck.ck-content blockquote:not([class]) h2,
.ck.ck-content blockquote:not([class]) h3,
.ck.ck-content blockquote:not([class]) h4,
.ck.ck-content blockquote:not([class]) h5,
.ck.ck-content blockquote:not([class]) h6 {
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.ck.ck-content cite,
.ck.ck-content .quote-author {
  display: block;
  color: #314158;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 16px;
}

/* Tables are deliberately absent here. CKEditor draws its own on
   the canvas - shaded header row, column resize handles, cell
   selection - through rules built around the `figure.table`
   wrapper it inserts, at a specificity that restating the
   design's padding and borders would mean out-competing for no
   gain. Those affordances are what an editor needs while
   editing; the frame's table is drawn on the front end. */

/* --- Style templates: highlighted text ----------------------- */
.ck.ck-content .highlight {
  background-color: transparent;
  color: #9a4b06;
}

/* --- Style templates: notices --------------------------------
   One line of text in a coloured box. The canvas draws no icon
   - the glyph is a CSS mask on the front end and carries no
   meaning an editor needs while writing - so the box, its
   colour and a left rule stand in for it.
   ------------------------------------------------------------ */
.ck.ck-content .notice-info,
.ck.ck-content .notice-warning,
.ck.ck-content .notice-tip,
.ck.ck-content .notice-danger,
.ck.ck-content .notice-success {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 20px;
}

.ck.ck-content .notice-info {
  border-color: #b8e6fe;
  background-color: #f0f9ff;
  color: #1f2f50;
}

.ck.ck-content .notice-warning {
  border-color: #fff085;
  background-color: #fefce8;
  color: #714f11;
}

.ck.ck-content .notice-tip {
  border-color: #e2e8f0;
  background-color: #f9fafb;
  color: #131c34;
}

.ck.ck-content .notice-danger {
  border-color: #ffc9c9;
  background-color: #fef2f2;
  color: #82181a;
}

.ck.ck-content .notice-success {
  border-color: #a4f4cf;
  background-color: #ecfdf5;
  color: #004f3b;
}

/* --- Style templates: check list -----------------------------
   The front end draws a check-circle glyph per row from a CSS
   mask. A text marker stands in for it here, so the list still
   reads as the check list rather than as an unmarked stack.

   The row is a flex line because `ckeditor5_list.multiBlock` is
   on for this format: CKEditor wraps each item's content in a
   block, which would otherwise drop the text below the marker.
   ------------------------------------------------------------ */
.ck.ck-content ul.check-list {
  padding-inline-start: 24px;
  list-style: none;
}

.ck.ck-content ul.check-list > li {
  display: flex;
  gap: 6px;
  align-items: baseline;
}

.ck.ck-content ul.check-list > li::before {
  flex: none;
  color: #62748e;
  content: "\2713";
}

/* --- Style templates: the alert box --------------------------------
   The frame's "Alert variant Complex", written as a block quote
   carrying one of the five notice classes. On the front end
   EditorBlocksFilter turns it into an <aside> whose heading is a
   paragraph; here it is still the quote the editor typed, so the
   selectors name that and the box colours are restated on it.

   The canvas draws no glyph, as with the one-line notices above: the
   box, its colour and the left rule are what tell one variant from
   another while writing.
   ------------------------------------------------------------------ */
.ck.ck-content blockquote.notice-info,
.ck.ck-content blockquote.notice-warning,
.ck.ck-content blockquote.notice-tip,
.ck.ck-content blockquote.notice-danger,
.ck.ck-content blockquote.notice-success {
  margin: 0 0 24px;
  padding: 16px;
  border: 1px solid;
  border-left-width: 4px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.ck.ck-content blockquote.notice-info h1,
.ck.ck-content blockquote.notice-info h2,
.ck.ck-content blockquote.notice-info h3,
.ck.ck-content blockquote.notice-info h4,
.ck.ck-content blockquote.notice-info h5,
.ck.ck-content blockquote.notice-info h6,
.ck.ck-content blockquote.notice-warning h1,
.ck.ck-content blockquote.notice-warning h2,
.ck.ck-content blockquote.notice-warning h3,
.ck.ck-content blockquote.notice-warning h4,
.ck.ck-content blockquote.notice-warning h5,
.ck.ck-content blockquote.notice-warning h6,
.ck.ck-content blockquote.notice-tip h1,
.ck.ck-content blockquote.notice-tip h2,
.ck.ck-content blockquote.notice-tip h3,
.ck.ck-content blockquote.notice-tip h4,
.ck.ck-content blockquote.notice-tip h5,
.ck.ck-content blockquote.notice-tip h6,
.ck.ck-content blockquote.notice-danger h1,
.ck.ck-content blockquote.notice-danger h2,
.ck.ck-content blockquote.notice-danger h3,
.ck.ck-content blockquote.notice-danger h4,
.ck.ck-content blockquote.notice-danger h5,
.ck.ck-content blockquote.notice-danger h6,
.ck.ck-content blockquote.notice-success h1,
.ck.ck-content blockquote.notice-success h2,
.ck.ck-content blockquote.notice-success h3,
.ck.ck-content blockquote.notice-success h4,
.ck.ck-content blockquote.notice-success h5,
.ck.ck-content blockquote.notice-success h6,
.ck.ck-content blockquote.notice-info > :first-child,
.ck.ck-content blockquote.notice-warning > :first-child,
.ck.ck-content blockquote.notice-tip > :first-child,
.ck.ck-content blockquote.notice-danger > :first-child,
.ck.ck-content blockquote.notice-success > :first-child {
  margin: 0 0 8px;
  color: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 16px;
}

.ck.ck-content blockquote.notice-info p,
.ck.ck-content blockquote.notice-warning p,
.ck.ck-content blockquote.notice-tip p,
.ck.ck-content blockquote.notice-danger p,
.ck.ck-content blockquote.notice-success p {
  margin: 0 0 8px;
  color: inherit;
  font-size: 14px;
  line-height: 20px;
}

.ck.ck-content blockquote.notice-info {
  border-color: #b8e6fe;
  background-color: #f0f9ff;
  color: #1f2f50;
}

.ck.ck-content blockquote.notice-warning {
  border-color: #fff085;
  background-color: #fefce8;
  color: #714f11;
}

.ck.ck-content blockquote.notice-tip {
  border-color: #e2e8f0;
  background-color: #f9fafb;
  color: #131c34;
}

.ck.ck-content blockquote.notice-danger {
  border-color: #ffc9c9;
  background-color: #fef2f2;
  color: #82181a;
}

.ck.ck-content blockquote.notice-success {
  border-color: #a4f4cf;
  background-color: #ecfdf5;
  color: #004f3b;
}

/* The gin admin theme draws a 4px blue rule down the left of every
   block quote on the canvas, from a `::before` of its own. On a quote
   that reads as a quote; on these two it reads as a stray bar beside a
   box that already has a border, so it is taken off them only. */
.ck.ck-content blockquote.notice-info::before,
.ck.ck-content blockquote.notice-warning::before,
.ck.ck-content blockquote.notice-tip::before,
.ck.ck-content blockquote.notice-danger::before,
.ck.ck-content blockquote.notice-success::before,
.ck.ck-content blockquote.accordion-item::before {
  display: none;
}

/* --- Style templates: the accordion item ---------------------------
   Written as a block quote whose first block is the item's title - a
   heading or an ordinary paragraph, whichever the editor typed.
   EditorBlocksFilter turns that pair into <details> / <summary> on the
   front end; the canvas shows the card and the title, because a
   disclosure an editor cannot see inside is not what they need while
   writing. The title is drawn from `:first-child` as well as from the
   heading elements, so the line that will become the summary reads as
   the title here too.
   ------------------------------------------------------------------ */
.ck.ck-content blockquote.accordion-item {
  margin: 0 0 16px;
  padding: 20px 24px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background-color: #ffffff;
  color: #314158;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

.ck.ck-content blockquote.accordion-item h1,
.ck.ck-content blockquote.accordion-item h2,
.ck.ck-content blockquote.accordion-item h3,
.ck.ck-content blockquote.accordion-item h4,
.ck.ck-content blockquote.accordion-item h5,
.ck.ck-content blockquote.accordion-item h6,
.ck.ck-content blockquote.accordion-item > :first-child {
  margin: 0 0 12px;
  color: #131c34;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.ck.ck-content blockquote.accordion-item p {
  margin: 0 0 12px;
  font-size: 16px;
  line-height: 24px;
}

/* --- Style templates: the table subline ----------------------------
   The second line of a table caption. CKEditor draws the caption
   itself; only the subline's own type is restated, so that the two
   lines read as a name and its description rather than as one run.
   ------------------------------------------------------------------ */
.ck.ck-content .table-subline {
  display: block;
  color: #314158;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}