/* assets/css/ck-content-theme.css
   ============================================================
   Museum-brand styling for admin-authored rich content (CKEditor output)
   shown on the public site — artifact "Additional Information", event
   details, blog posts, bulk emails. Loaded AFTER the vendor
   ckeditor5-content.css so these rules win without editing that library
   file directly. Keeps typography, tables, blockquotes and images
   consistent with the rest of the site (serif headings, bronze accent,
   warm neutral palette) instead of CKEditor's generic default look.
   ============================================================ */

.ck-content {
  --ck-content-font-family: 'Manrope', 'Laila', system-ui, sans-serif;
  --ck-content-font-color: var(--ink, #171923);
  --ck-content-line-height: 1.8;
  font-size: 1rem;
}

.ck-content h1, .ck-content h2, .ck-content h3, .ck-content h4 {
  font-family: var(--serif, Georgia, serif);
  color: var(--ink, #171923);
  line-height: 1.3;
  margin: 1.6em 0 0.6em;
}
.ck-content h1:first-child, .ck-content h2:first-child, .ck-content h3:first-child { margin-top: 0; }
.ck-content h2 { font-size: 1.5rem; padding-bottom: 0.4em; border-bottom: 2px solid var(--gold, #F97316); display: inline-block; }
.ck-content h3 { font-size: 1.22rem; color: var(--gold-dk, #C2410C); }
.ck-content h4 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.8px; color: var(--grey, #5C6773); }

.ck-content p { margin: 0 0 1.1em; color: var(--ink, #171923); }
.ck-content a { color: var(--gold-dk, #C2410C); text-decoration: underline; text-underline-offset: 2px; }
.ck-content a:hover { color: var(--gold, #F97316); }

.ck-content ul, .ck-content ol { margin: 0 0 1.2em; padding-left: 1.4em; }
.ck-content li { margin-bottom: 0.45em; line-height: 1.75; }
.ck-content li::marker { color: var(--gold, #F97316); }

.ck-content blockquote {
  border-left: 3px solid var(--gold, #F97316);
  background: var(--cream, #FFF3E8);
  padding: 1em 1.4em;
  margin: 1.6em 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.08rem;
  color: var(--ink, #171923);
  border-radius: 0 4px 4px 0;
}

/* Tables (used heavily by imported CSV/Excel content) */
.ck-content .table,
.ck-content table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: 0.92rem;
  overflow-x: auto;
  display: block;
}
.ck-content table thead, .ck-content table tbody, .ck-content table tr { width: 100%; }
.ck-content table { display: table; }
.ck-content table th, .ck-content table td {
  border: 1px solid var(--border, rgba(23,25,35,0.12));
  padding: 10px 14px;
  text-align: left;
}
.ck-content table th {
  background: var(--ink, #171923);
  color: white;
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ck-content table tr:nth-child(even) td { background: var(--cream, #FFF3E8); }

/* Images (pasted/imported content, incl. from docx import) */
.ck-content img {
  max-width: 100%; height: auto; border-radius: 6px; margin: 0.4em 0;
  box-shadow: 0 4px 20px rgba(23,25,35,0.12);
}
.ck-content figure.image { margin: 1.8em 0; }
.ck-content figure.image figcaption {
  font-size: 0.82rem; color: var(--grey, #5C6773); text-align: center; margin-top: 8px; font-style: italic;
}

.ck-content hr { border: none; border-top: 1px dashed var(--border, rgba(23,25,35,0.12)); margin: 2em 0; }
.ck-content video {
  max-width: 100%; border-radius: 6px; margin: 1em 0; display: block;
  box-shadow: 0 4px 20px rgba(23,25,35,0.14); background: #000;
}
.ck-content code { background: var(--cream, #FFF3E8); color: var(--gold-dk, #C2410C); border-radius: 3px; padding: 0.15em 0.4em; }
.ck-content pre { background: var(--ink, #171923); color: #FFF3E8; border-radius: 6px; border: none; padding: 1.2em; }
.ck-content pre code { background: transparent; color: inherit; }

@media (max-width: 640px) {
  .ck-content h2 { font-size: 1.28rem; }
  .ck-content h3 { font-size: 1.1rem; }
  .ck-content blockquote { padding: 0.85em 1.1em; font-size: 1rem; }
  .ck-content table { font-size: 0.85rem; }
  .ck-content table th, .ck-content table td { padding: 8px 10px; }
}