/* ============================================================
   quill-gazette.css — Tertulia gazette overrides for Quill snow
   Load AFTER quill.snow.css and gazette.css (needs its variables).
   The composer (.post-composer) draws the single outer ink border;
   Quill's own chrome goes borderless inside it.
   ============================================================ */

/* container + toolbar chrome: square corners, ink rules */
.ql-toolbar.ql-snow {
  border: none;
  border-bottom: 1px solid var(--ink-15);
  border-radius: 0;
  background: transparent;
  font-family: var(--font-meta);
  padding: 8px 10px;
}

.ql-container.ql-snow {
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: 1rem;
}

/* editor body */
.ql-editor {
  color: var(--ink);
  min-height: 96px;
  line-height: 1.72;
}

.ql-editor p { font-size: 1rem; margin: 0 0 0.65rem; }
.ql-editor p:last-child { margin-bottom: 0; }
.ql-editor strong { font-weight: 600; }
.ql-editor h1:first-child, .ql-editor h2:first-child, .ql-editor h3:first-child { margin-top: 0; }
.ql-editor ul, .ql-editor ol { margin: 1rem 0; padding-left: 1.5rem; }
.ql-editor li { font-size: 1rem; margin-bottom: 0.375rem; }
.ql-snow .ql-editor h1 { font-family: var(--font-body); font-size: 1.6rem; font-weight: 600; margin: 1.5rem 0 1rem; color: var(--ink); }
.ql-snow .ql-editor h2 { font-family: var(--font-body); font-size: 1.3rem; font-weight: 600; margin: 1.5rem 0 0.75rem; color: var(--ink); }
.ql-snow .ql-editor h3 { font-family: var(--font-body); font-size: 1.1rem; font-weight: 600; margin: 1rem 0 0.75rem; color: var(--ink); }

/* keep the placeholder copy: "Compose an epic..." */
.ql-editor.ql-blank::before {
  color: var(--ink-35);
  font-style: italic;
}

/* toolbar icons: quill draws these as SVG strokes/fills */
.ql-snow .ql-stroke        { stroke: var(--ink); }
.ql-snow .ql-fill          { fill: var(--ink); }
.ql-snow .ql-picker        { color: var(--ink); }

/* hover + active states go to red ink */
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke {
  stroke: var(--red);
}

.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill {
  fill: var(--red);
}

.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar button.ql-active {
  color: var(--red);
  background: var(--red-08);
  border-radius: 0;
}

/* pickers (Normal / Newsreader / size dropdowns) */
.ql-snow .ql-picker-label {
  font-family: var(--font-meta);
  font-size: 12px;
  letter-spacing: 0.04em;
  border: none;
}

.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: var(--red);
  border-color: transparent;
}

.ql-snow .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: var(--red);
}

.ql-snow .ql-picker-options {
  background: var(--paper);
  border: 1px solid var(--ink-35);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--red-08); /* riso drop, not a blur */
  font-family: var(--font-meta);
  font-size: 12px;
}

.ql-snow .ql-picker-item:hover,
.ql-snow .ql-picker-item.ql-selected {
  color: var(--red);
}

/* in-editor content styles, matching the feed */
.ql-editor blockquote {
  border-left: 3px solid var(--red);
  padding-left: 1.2rem;
  margin: 0.4rem 0 0.8rem;
  font-style: italic;
}

/* code blocks: snow.css paints these dark at .ql-snow .ql-editor
   specificity, so the two-ink override has to match it */
.ql-snow .ql-editor .ql-code-block-container {
  background: var(--paper-raised);
  color: var(--ink);
  border: 1px solid var(--ink-15);
  border-left: 3px solid var(--ink-35);
  border-radius: 0;
  padding: 0.75rem;
  margin: 0.75rem 0;
  font-family: var(--font-meta);
  font-size: 0.85rem;
  overflow: auto;
}
.ql-snow .ql-editor .ql-code-block { white-space: pre; color: var(--ink); }

/* the language picker riding the code block's corner */
.ql-snow .ql-code-block-container select.ql-ui {
  font-family: var(--font-meta);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-60);
  background: var(--paper);
  border: 1px solid var(--ink-35);
  border-radius: 0;
}

.ql-snow .ql-editor code,
.ql-editor pre.ql-syntax,
.ql-editor code {
  background: var(--ink-15);
  color: var(--ink);
  border-radius: 0;
  font-family: var(--font-meta);
  font-size: 0.85em;
}

.ql-editor a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-underline-offset: 3px;
}

/* in-editor images print in blue ink too */
.ql-editor img { filter: var(--ink-image-filter); opacity: 0.9; }
.ql-editor img.no-ink, .ql-editor img.gazette-emoji { filter: none; opacity: 1; }
.ql-editor .ql-video { width: 100%; min-height: 314px; margin: 0.75rem 0; }

/* link/formula tooltip popover */
.ql-snow .ql-tooltip {
  background: var(--paper);
  border: 1px solid var(--ink-35);
  border-radius: 0;
  box-shadow: 3px 3px 0 var(--red-08);
  color: var(--ink);
  font-family: var(--font-meta);
  font-size: 12px;
}

.ql-snow .ql-tooltip input[type='text'] {
  border: 1px solid var(--ink-35);
  border-radius: 0;
  background: var(--paper-raised);
  color: var(--ink);
  font-family: var(--font-meta);
}

.ql-snow .ql-tooltip a.ql-action,
.ql-snow .ql-tooltip a.ql-remove {
  color: var(--red);
}

/* selection inside the editor */
.ql-editor ::selection { background: var(--red); color: var(--paper); }

/* the customizable faces stay */
.ql-font-newsreader { font-family: var(--font-newsreader); }
.ql-font-garamond { font-family: var(--font-garamond); }
.ql-font-palatino { font-family: var(--font-palatino); }
.ql-font-caslon { font-family: var(--font-caslon); }
.ql-font-opensans { font-family: var(--font-opensans); }
.ql-font-lora { font-family: var(--font-lora); }

.ql-picker.ql-font .ql-picker-label[data-value="newsreader"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="newsreader"]::before { font-family: var(--font-newsreader); content: 'Newsreader'; }
.ql-picker.ql-font .ql-picker-label[data-value="garamond"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="garamond"]::before { font-family: var(--font-garamond); content: 'Garamond'; }
.ql-picker.ql-font .ql-picker-label[data-value="palatino"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="palatino"]::before { font-family: var(--font-palatino); content: 'Palatino'; }
.ql-picker.ql-font .ql-picker-label[data-value="caslon"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="caslon"]::before { font-family: var(--font-caslon); content: 'Caslon'; }
.ql-picker.ql-font .ql-picker-label[data-value="opensans"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="opensans"]::before { font-family: var(--font-opensans); content: 'Open Sans'; }
.ql-picker.ql-font .ql-picker-label[data-value="lora"]::before,
.ql-picker.ql-font .ql-picker-item[data-value="lora"]::before { font-family: var(--font-lora); content: 'Lora'; }