/* editor.css — CKEditor 5 themed to the parchment design system.
 *
 * Standalone: no @import, safe to <link> on its own inside an HTMX-loaded
 * edit-form partial. Reads the --v-* custom properties from victoria.css
 * (already on the page everywhere this is used) with hard-coded fallbacks
 * so the widget still looks right if victoria.css hasn't loaded yet.
 *
 * django-ckeditor-5's own stylesheet (django_ckeditor_5/dist/styles.css)
 * exposes CKEditor 5's standard --ck-* theme variables; overriding them here
 * re-skins every editor surface — toolbar, dropdowns, balloons, dialogs —
 * without fighting its selector specificity. See ARCHITECTURE.md §5 and
 * apps/common/sanitize.py for what the editor is allowed to emit; this file
 * only concerns look, not content policy.
 *
 * Height: the "page" and "event" CKEDITOR_5_CONFIGS (config/settings.py)
 * share one toolbar; the event config's compact editable area is opt-in via
 * the .v-editor--compact modifier below — wrap the widget's
 * `.ck-editor-container` (or an ancestor) in that class.
 */

:root {
  --ck-border-radius: var(--v-radius, 3px);

  --ck-color-base-foreground: var(--v-panel-dark, #241c17);
  --ck-color-base-background: var(--v-panel-dark, #241c17);
  --ck-color-base-border: var(--v-gold-dim, #8a7038);
  --ck-color-base-action: var(--v-gold, #c2a15a);
  --ck-color-base-focus: var(--v-gold, #c2a15a);
  --ck-color-base-text: var(--v-cream, #ece2cc);
  --ck-color-base-active: var(--v-gold, #c2a15a);
  --ck-color-base-active-focus: var(--v-gold-bright, #e3ca8d);

  --ck-color-text: var(--v-cream, #ece2cc);
  --ck-color-focus-border: var(--v-gold, #c2a15a);
  --ck-color-focus-outer-shadow: rgba(194, 161, 90, 0.35);
  --ck-color-shadow-drop: rgba(0, 0, 0, 0.45);
  --ck-color-shadow-drop-active: rgba(0, 0, 0, 0.6);
  --ck-color-shadow-inner: rgba(0, 0, 0, 0.3);

  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: rgba(194, 161, 90, 0.18);
  --ck-color-button-default-active-background: rgba(194, 161, 90, 0.28);
  --ck-color-button-default-disabled-background: transparent;
  --ck-color-button-on-background: rgba(194, 161, 90, 0.3);
  --ck-color-button-on-hover-background: rgba(194, 161, 90, 0.4);
  --ck-color-button-on-active-background: rgba(194, 161, 90, 0.46);
  --ck-color-button-on-disabled-background: rgba(194, 161, 90, 0.14);
  --ck-color-button-on-color: var(--v-gold-bright, #e3ca8d);
  --ck-color-button-action-background: var(--v-maroon-2, #6b2b2f);
  --ck-color-button-action-hover-background: var(--v-red, #8c2b26);
  --ck-color-button-action-active-background: var(--v-red-bright, #a8362f);
  --ck-color-button-action-text: var(--v-cream, #ece2cc);
  --ck-color-button-save: var(--v-green, #4f6b3a);
  --ck-color-button-cancel: var(--v-red, #8c2b26);

  --ck-color-toolbar-background: var(--v-panel-dark, #241c17);
  --ck-color-toolbar-border: var(--v-gold-dim, #8a7038);

  --ck-color-panel-background: var(--v-panel-dark-2, #2e241d);
  --ck-color-panel-border: var(--v-gold-dim, #8a7038);

  --ck-color-list-background: var(--v-panel-dark-2, #2e241d);
  --ck-color-list-button-hover-background: rgba(194, 161, 90, 0.18);
  --ck-color-list-button-on-background: rgba(194, 161, 90, 0.3);
  --ck-color-list-button-on-background-focus: rgba(194, 161, 90, 0.4);
  --ck-color-list-button-on-text: var(--v-gold-bright, #e3ca8d);

  --ck-color-input-background: rgba(0, 0, 0, 0.35);
  --ck-color-input-border: var(--v-gold-dim, #8a7038);
  --ck-color-input-text: var(--v-cream, #ece2cc);
  --ck-color-input-disabled-background: rgba(0, 0, 0, 0.5);
  --ck-color-input-disabled-border: var(--v-ink-3, #6d6151);
  --ck-color-input-disabled-text: var(--v-cream-2, #b9ab90);
  --ck-color-input-error-border: var(--v-red, #8c2b26);
  --ck-color-labeled-field-label-background: var(--v-panel-dark, #241c17);

  --ck-color-dropdown-panel-background: var(--v-panel-dark-2, #2e241d);
  --ck-color-dropdown-panel-border: var(--v-gold-dim, #8a7038);
  --ck-color-dialog-background: var(--v-panel-dark-2, #2e241d);
  --ck-color-dialog-form-header-border: var(--v-gold-dim, #8a7038);

  --ck-color-tooltip-background: var(--v-ink, #2b241c);
  --ck-color-tooltip-text: var(--v-cream, #ece2cc);

  --ck-color-link-default: #7a3a1e;
  --ck-color-link-selected-background: rgba(194, 161, 90, 0.25);
  --ck-color-link-fake-selection: rgba(194, 161, 90, 0.35);

  --ck-color-engine-placeholder-text: var(--v-ink-3, #6d6151);
  --ck-color-upload-bar-background: var(--v-gold, #c2a15a);

  --ck-color-widget-hover-border: var(--v-gold, #c2a15a);
  --ck-color-widget-blurred-border: rgba(194, 161, 90, 0.4);
  --ck-color-widget-editable-focus-background: rgba(255, 255, 255, 0.4);

  --ck-color-table-focused-cell-background: rgba(194, 161, 90, 0.16);

  --ck-font-face: var(--v-font-body, "EB Garamond", Georgia, serif);
}

/* --- Container & toolbar chrome ------------------------------------------ */

.ck-editor-container {
  border: 1px solid var(--v-gold-dim, #8a7038);
  border-radius: var(--v-radius, 3px);
  overflow: hidden;
  box-shadow: var(--v-shadow, 0 2px 10px rgba(0, 0, 0, 0.45));
}

.ck.ck-editor__top .ck-toolbar {
  border: 0;
  border-bottom: 1px solid var(--v-gold-dim, #8a7038);
  border-radius: 0;
  padding: 6px 8px;
}

.ck.ck-editor__top .ck-sticky-panel__content {
  border-bottom: 1px solid var(--v-gold-dim, #8a7038);
}

/* --- The parchment editable surface -------------------------------------- */

.ck.ck-content.ck-editor__editable {
  min-height: 360px;
  padding: var(--v-5, 24px) !important;
  font-family: var(--v-font-body, "EB Garamond", Georgia, serif);
  font-size: var(--v-fs-base, 1rem);
  line-height: 1.6;
  color: var(--v-ink, #2b241c);
  background-color: var(--v-paper, #ece2c9);
  background-image: var(--v-tex-paper, none);
  background-size: 520px;
  background-blend-mode: soft-light;
  border: 0;
  border-radius: 0;
}

.ck.ck-editor__editable_inline > :first-child { margin-top: 0; }
.ck.ck-editor__editable_inline > :last-child { margin-bottom: 0; }

/* Compact variant for event-length content (timeline events, era
   descriptions) — wrap the
   widget's container in .v-editor--compact to opt in. */
.v-editor--compact .ck.ck-content.ck-editor__editable {
  min-height: 160px;
}

/* --- Typography inside the editable area & sanitized read view ----------- */

.ck-content h2, .ck-content h3, .ck-content h4 {
  font-family: var(--v-font-display, "Cinzel", Georgia, serif);
  color: var(--v-ink, #2b241c);
  line-height: 1.2;
}
.ck-content h2 { font-size: var(--v-fs-xl, 1.75rem); margin: 1.2em 0 0.5em; }
.ck-content h3 { font-size: var(--v-fs-lg, 1.375rem); margin: 1.1em 0 0.5em; }
.ck-content h4 {
  font-size: var(--v-fs-md, 1.125rem);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 1em 0 0.4em;
}

.ck-content a { color: #7a3a1e; }

.ck-content blockquote {
  margin: 1em 0;
  padding: var(--v-2, 8px) var(--v-4, 16px);
  border-left: 3px solid var(--v-gold-dim, #8a7038);
  background: rgba(194, 161, 90, 0.1);
  font-style: italic;
  color: var(--v-ink-2, #4a4034);
}

.ck-content figure.image {
  margin: 1em 0;
}
.ck-content figure.image img { border-radius: var(--v-radius, 3px); }
.ck-content figure.image figcaption,
.ck-content .ck-figcaption {
  padding: var(--v-1, 4px) var(--v-2, 8px);
  font-family: var(--v-font-body, "EB Garamond", Georgia, serif);
  font-size: var(--v-fs-xs, 0.75rem);
  font-style: italic;
  text-align: center;
  color: var(--v-ink-3, #6d6151);
  background: rgba(43, 36, 28, 0.05);
}

.ck-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--v-fs-sm, 0.875rem);
}
.ck-content table th, .ck-content table td {
  padding: var(--v-2, 8px) var(--v-3, 12px);
  border: 1px solid rgba(43, 36, 28, 0.3);
}
.ck-content table th {
  font-family: var(--v-font-display, "Cinzel", Georgia, serif);
  font-size: var(--v-fs-xs, 0.75rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--v-ink-3, #6d6151);
  background: rgba(43, 36, 28, 0.06);
}

/* --- Word count footer ---------------------------------------------------- */

.ck-word-count {
  padding: var(--v-1, 4px) var(--v-3, 12px);
  font-family: var(--v-font-mono, monospace);
  font-size: var(--v-fs-xs, 0.75rem);
  color: var(--v-ink-3, #6d6151);
}