/* sv-editor.css - include on every page that renders post HTML,
 * not only pages with an editor. Quill's ql-align-* classes are meaningless
 * outside the editor without these rules. */

/* --- alignment (Quill emits classes, we keep classes through bleach) --- */
.ql-align-center { text-align: center; }
.ql-align-right  { text-align: right; }
.ql-align-justify{ text-align: justify; }

/* --- spoiler ----------------------------------------------------------- */
.sv-spoiler {
  position: relative;
  border-left: 3px solid #8a8578;
  padding: .5em .75em;
  margin: .5em 0;
  background: rgba(0,0,0,.06);
}
/* hidden state only outside the editor */
:not(.ql-editor) > .sv-spoiler:not(.open) {
  color: transparent;
  user-select: none;
  cursor: pointer;
}
:not(.ql-editor) > .sv-spoiler:not(.open)::after {
  content: "▨ Spoiler - klikni pre odhalenie";
  position: absolute; inset: 0;
  display: flex; align-items: center; padding: 0 .75em;
  color: #6d6d6d; font-style: italic;
}
:not(.ql-editor) > .sv-spoiler:not(.open) * { visibility: hidden; }

/* --- char counter ------------------------------------------------------ */
.sv-charcount { font-size: .85em; text-align: right; color: #6d6d6d; margin-top: .25em; }
.sv-charcount.warn { color: #b5651d; }
.sv-charcount.over { color: #a33; font-weight: bold; }

/* --- editor chrome: toolbar + content as ONE rounded, single-bordered box -
 * Quill's snow CSS loads after this file, so the shared border needs
 * !important; the corner radius, header tint and flex-fill are ours alone. */
.ql-toolbar.ql-snow {
  border: 1px solid var(--line, #d9d2c4) !important;
  border-bottom: 0 !important;
  border-radius: 10px 10px 0 0;
  background: #f5f0e8;
}
.ql-container.ql-snow {
  border: 1px solid var(--line, #d9d2c4) !important;
  border-radius: 0 0 10px 10px;
  display: flex;
  flex-direction: column;
}
/* Editable area fills the whole box, so a click anywhere below the last line
 * still starts typing (no dead zone between text and the bottom border). */
.ql-container.ql-snow .ql-editor { flex: 1 1 auto; }

/* --- custom toolbar buttons -------------------------------------------- */
.ql-toolbar .sv-tbtn { width: auto !important; padding: 0 .4em; font-size: .9em; }

/* --- mention autocomplete + hover card --------------------------------- */
.sv-mention-dd {
  position: absolute; z-index: 50;
  background: #fff; border: 1px solid #ccc; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  display: flex; flex-direction: column; min-width: 180px;
}
.sv-mention-dd button {
  border: 0; background: none; text-align: left; padding: .4em .7em; cursor: pointer;
}
.sv-mention-dd button:hover { background: #f0ede4; }

a.sv-mention { font-weight: 600; text-decoration: none; border-bottom: 1px dotted currentColor; }

.sv-char-card {
  position: absolute; z-index: 60;
  background: #fff; border: 1px solid #ccc; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.2);
  padding: .6em .8em; max-width: 260px; font-size: .9em;
}