/*
 * Styles for rendered ActionText content (and the Tiptap editing surface,
 * which carries the same .rich-text-content class). Editor chrome lives in
 * _tiptap_editor.scss.
*/
.rich-text-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word; }
  .rich-text-content * {
    box-sizing: border-box; }
  :where(.rich-text-content *) {
    margin: 0;
    padding: 0; }
  .rich-text-content h2 {
    color: #86846b;
    font-size: 19pt;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 9px;
    margin-top: 16px;
    clear: both;
  }
  .rich-text-content blockquote {
    border: 0 solid #ccc;
    border-left-width: 0.3em;
    margin-left: 0.3em;
    padding-left: 0.6em; }
  .rich-text-content [dir=rtl] blockquote,
  .rich-text-content blockquote[dir=rtl] {
    border-width: 0;
    border-right-width: 0.3em;
    margin-right: 0.3em;
    padding-right: 0.6em; }
  .rich-text-content li {
    margin-left: 1em; }
  .rich-text-content [dir=rtl] li {
    margin-right: 1em; }
  .rich-text-content pre {
    display: inline-block;
    width: 100%;
    vertical-align: top;
    font-family: monospace;
    font-size: 0.9em;
    padding: 0.5em;
    white-space: pre;
    background-color: #eee;
    overflow-x: auto; }
  .rich-text-content img {
    max-width: 100%;
    height: auto; }
  .rich-text-content .attachment {
    display: inline-block;
    position: relative;
    max-width: 100%; }
    .rich-text-content .attachment a {
      color: inherit;
      text-decoration: none; }
      .rich-text-content .attachment a:hover, .rich-text-content .attachment a:visited:hover {
        color: inherit; }
  .rich-text-content .attachment__caption {
    text-align: center; }
    .rich-text-content .attachment__caption .attachment__name + .attachment__size::before {
      content: ' \2022 '; }
  .rich-text-content .attachment--preview {
    width: 100%;
    text-align: center; }
    .rich-text-content .attachment--preview .attachment__caption {
      color: #666;
      font-size: 0.9em;
      line-height: 1.2; }
  .rich-text-content .attachment--file {
    display: block;
    margin: 0.75em 0;
    line-height: 1.3; }
    .rich-text-content .attachment--file .attachment__download {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      max-width: 22rem;
      padding: 0.6rem 0.85rem;
      border: 1px solid #d9d9d2;
      border-radius: 8px;
      background-color: #fafaf7;
      color: inherit;
      text-decoration: none;
      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; }
      .rich-text-content .attachment--file .attachment__download:hover {
        border-color: var(--nabu-blue, #bdbdb2);
        background-color: #f3f3ec;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); }
    .rich-text-content .attachment--file .attachment__icon {
      flex: 0 0 auto;
      width: 2.25rem;
      height: 2.75rem;
      background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2236%22%20height=%2244%22%20viewBox=%220%200%2040%2048%22%3E%3Cpath%20fill=%22%23ffffff%22%20stroke=%22%23c9c9c2%22%20stroke-width=%221.5%22%20d=%22M4%201h22l10%2010v32a3%203%200%200%201-3%203H4a3%203%200%200%201-3-3V4a3%203%200%200%201%203-3z%22/%3E%3Cpath%20fill=%22%23e4e4dc%22%20d=%22M26%201l10%2010H29a3%203%200%200%201-3-3z%22/%3E%3Crect%20x=%220%22%20y=%2226%22%20width=%2233%22%20height=%2214%22%20rx=%222.5%22%20fill=%22%23d4332a%22/%3E%3Ctext%20x=%2216.5%22%20y=%2236.3%22%20font-family=%22Arial,Helvetica,sans-serif%22%20font-size=%229%22%20font-weight=%22700%22%20fill=%22%23ffffff%22%20text-anchor=%22middle%22%3EPDF%3C/text%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain; }
    .rich-text-content .attachment--file .attachment__info {
      display: flex;
      flex-direction: column;
      min-width: 0; }
    .rich-text-content .attachment--file .attachment__name {
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .rich-text-content .attachment--file .attachment__meta {
      margin-top: 0.15rem;
      font-size: 0.85em;
      color: #6b6b62; }
      .rich-text-content .attachment--file .attachment__action {
        color: var(--nabu-blue, #004899); }
      .rich-text-content .attachment--file .attachment__action + .attachment__size::before {
        content: " \2022 "; }
  .rich-text-content .attachment-gallery {
    display: flex;
    flex-wrap: wrap;
    position: relative; }
    .rich-text-content .attachment-gallery .attachment {
      flex: 1 0 33%;
      padding: 0 0.5em;
      max-width: 33%; }
    .rich-text-content .attachment-gallery.attachment-gallery--2 .attachment, .rich-text-content .attachment-gallery.attachment-gallery--4 .attachment {
      flex-basis: 50%;
      max-width: 50%; }

/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.rich-text-content .attachment-gallery > action-text-attachment,
.rich-text-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}

.rich-text-content .attachment-gallery.attachment-gallery--2 > action-text-attachment,
.rich-text-content .attachment-gallery.attachment-gallery--2 > .attachment, .rich-text-content .attachment-gallery.attachment-gallery--4 > action-text-attachment,
.rich-text-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}

.rich-text-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}

.rich-text-content action-text-attachment {
  display: block;
}

.rich-text-content table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}

.rich-text-content th,
.rich-text-content td {
  border: 1px solid var(--nabu-lightgrey, #bdbdb2);
  padding: 0.4em 0.6em;
  vertical-align: top;
  text-align: left;
}

.rich-text-content th {
  font-weight: 700;
  background-color: var(--bs-body-bg-elevated, #f3f3ec);
}
