/* Formátování obsahu příspěvku. Sdílené editorem (.ql-editor) i hotovým
   příspěvkem (.post-content), aby text vypadal po odeslání stejně jako při psaní. */

/* ---------- Velikosti písma ---------- */
.ql-editor .ql-size-10px, .post-content .ql-size-10px { font-size: 10px; }
.ql-editor .ql-size-12px, .post-content .ql-size-12px { font-size: 12px; }
.ql-editor .ql-size-14px, .post-content .ql-size-14px { font-size: 14px; }
.ql-editor .ql-size-16px, .post-content .ql-size-16px { font-size: 16px; }
.ql-editor .ql-size-18px, .post-content .ql-size-18px { font-size: 18px; }
.ql-editor .ql-size-20px, .post-content .ql-size-20px { font-size: 20px; }
.ql-editor .ql-size-24px, .post-content .ql-size-24px { font-size: 24px; line-height: 1.3; }
.ql-editor .ql-size-28px, .post-content .ql-size-28px { font-size: 28px; line-height: 1.25; }
.ql-editor .ql-size-32px, .post-content .ql-size-32px { font-size: 32px; line-height: 1.22; }
.ql-editor .ql-size-40px, .post-content .ql-size-40px { font-size: 40px; line-height: 1.18; }
.ql-editor .ql-size-48px, .post-content .ql-size-48px { font-size: 48px; line-height: 1.14; }
.ql-editor .ql-size-64px, .post-content .ql-size-64px { font-size: 64px; line-height: 1.1; }

/* ---------- Typ písma ---------- */
.ql-editor .ql-font-arial, .post-content .ql-font-arial { font-family: Arial, Helvetica, sans-serif; }
.ql-editor .ql-font-book-antiqua, .post-content .ql-font-book-antiqua { font-family: "Book Antiqua", Palatino, "Palatino Linotype", serif; }
.ql-editor .ql-font-courier-new, .post-content .ql-font-courier-new { font-family: "Courier New", Courier, monospace; }
.ql-editor .ql-font-georgia, .post-content .ql-font-georgia { font-family: Georgia, "Times New Roman", serif; }
.ql-editor .ql-font-tahoma, .post-content .ql-font-tahoma { font-family: Tahoma, Geneva, sans-serif; }
.ql-editor .ql-font-times-new-roman, .post-content .ql-font-times-new-roman { font-family: "Times New Roman", Times, serif; }
.ql-editor .ql-font-trebuchet-ms, .post-content .ql-font-trebuchet-ms { font-family: "Trebuchet MS", Helvetica, sans-serif; }
.ql-editor .ql-font-verdana, .post-content .ql-font-verdana { font-family: Verdana, Geneva, sans-serif; }

/* ---------- Inline kód ---------- */
.ql-editor code, .post-content code {
  padding: 0.1em 0.35em;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 4px;
  font-family: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.92em;
}

/* ---------- Spoiler ---------- */
/* V editoru zůstává čitelný, jinak by autor neviděl, co píše. */
.ql-editor .post-spoiler {
  background: rgba(255, 255, 255, 0.14);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  padding: 0 0.15em;
}
/* V hotovém příspěvku je text zakrytý, dokud na něj čtenář neklikne. */
.post-content .post-spoiler {
  background: #2b2b2b;
  color: transparent;
  border-radius: 4px;
  padding: 0 0.25em;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.post-content .post-spoiler:hover { background: #343434; }
.post-content .post-spoiler.is-revealed {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
  cursor: auto;
  user-select: auto;
}

/* ---------- Vodorovná čára ---------- */
.ql-editor hr, .post-content hr {
  height: 0;
  margin: 1.1rem 0;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* ---------- Spoiler blok ---------- */
/* V editoru je otevřený a psatelný, jen vizuálně odlišený. Štítek „Spoiler"
   má první blok skupiny - blok, před kterým není jiný spoiler blok. */
.ql-editor .post-spoiler-block {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid #9b30ff;
  background: rgba(155, 48, 255, 0.09);
}
/* Štítek nese i nápovědu, jak blok v editoru sbalit. Šipka je větší glyph
   (▼/▶ místo ▾/▸), ať je na první pohled vidět, kam kliknout. Výška
   štítku (height + padding-top bloku) musí sedět se SPOILER_LABEL_PX
   v editor.js - ta určuje, po jakou výšku klik blok sbalí. */
.ql-editor .post-spoiler-block:first-child::before,
.ql-editor :not(.post-spoiler-block) + .post-spoiler-block::before {
  content: "▼  Spoiler · kliknutím sem blok sbalíš";
  display: block;
  height: 1.5rem;
  line-height: 1.5rem;
  margin-bottom: 0.15rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pojmenovaný blok (data-title) ukáže název stejně jako hotový příspěvek. */
.ql-editor .post-spoiler-block[data-title]:first-child::before,
.ql-editor :not(.post-spoiler-block) + .post-spoiler-block[data-title]::before {
  content: "▼  Spoiler: " attr(data-title) " · kliknutím sem blok sbalíš";
}

/* Sbalený spoiler v editoru (třída is-collapsed, dává ji editor.js):
   z první řádky zůstane jen štítek, ostatní bloky skupiny zmizí úplně.
   Obsah v DOM zůstává, jen je oříznutý - Quill o něm dál ví. */
.ql-editor .post-spoiler-block.is-collapsed {
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.ql-editor .post-spoiler-block.is-collapsed:first-child,
.ql-editor :not(.post-spoiler-block) + .post-spoiler-block.is-collapsed {
  height: auto;
  max-height: calc(1.5rem + 1rem);
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}
.ql-editor .post-spoiler-block.is-collapsed:first-child::before,
.ql-editor :not(.post-spoiler-block) + .post-spoiler-block.is-collapsed::before {
  content: "▶  Spoiler · sbaleno, kliknutím rozbalíš";
  margin-bottom: 0.5rem;
}
.ql-editor .post-spoiler-block.is-collapsed[data-title]:first-child::before,
.ql-editor :not(.post-spoiler-block) + .post-spoiler-block.is-collapsed[data-title]::before {
  content: "▶  Spoiler: " attr(data-title) " · sbaleno, kliknutím rozbalíš";
}

/* V hotovém příspěvku sbalený. Hlavička je kompaktní fialové tlačítko, ať je
   na první pohled jasné, že se dá kliknout; obsah se pod ním rozbalí v panelu. */
.post-content .spoiler-box {
  margin: 0.8rem 0;
}
.post-content .spoiler-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  padding: 0.45rem 0.95rem;
  background: #9b30ff;
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(155, 48, 255, 0.35);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.post-content .spoiler-toggle:hover {
  background: #ad52ff;
  box-shadow: 0 3px 12px rgba(155, 48, 255, 0.5);
}
.post-content .spoiler-toggle:active { transform: translateY(1px); }
.post-content .spoiler-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.post-content .spoiler-toggle::before {
  content: "▶";
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.85);
  transition: transform 0.15s;
}
.post-content .spoiler-box.is-open .spoiler-toggle::before { transform: rotate(90deg); }
.post-content .spoiler-body {
  margin-top: 0.5rem;
  padding: 0.6rem 0.85rem;
  border-left: 3px solid #9b30ff;
  border-radius: 0 8px 8px 0;
  background: rgba(155, 48, 255, 0.08);
}
.post-content .spoiler-box:not(.is-open) .spoiler-body { display: none; }

/* ---------- Ostatní obsah ---------- */
.post-content blockquote {
  margin-left: 0;
  padding-left: 0.9rem;
  border-left: 3px solid #4d6ee6;
  color: rgba(255, 255, 255, 0.72);
}
.post-content a { color: #4d6ee6; }
.post-content img, .post-content iframe {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.5rem 0;
  border-radius: 8px;
}
/* Zarovnání obrázku se řídí zarovnáním odstavce, ve kterém leží. */
.ql-editor .ql-align-center img, .post-content .ql-align-center img { margin-left: auto; margin-right: auto; }
.ql-editor .ql-align-right img, .post-content .ql-align-right img { margin-left: auto; margin-right: 0; }
/* Široká tabulka se roluje sama v sobě, ať nerozjede celou stránku. */
.post-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.post-content td { border: 1px solid rgba(255, 255, 255, 0.09); padding: 0.45rem 0.6rem; }
.post-content .ql-align-center { text-align: center; }
.post-content .ql-align-right { text-align: right; }
.post-content .ql-align-justify { text-align: justify; }

/* ---------- Bloková struktura z editoru ---------- */
/* Editor drží odstavce i nadpisy bez marginů a prázdný řádek ukládá jako
   <p><br></p>. Bez tohohle by hotový příspěvek měl mezery mezi odstavci
   jinak než to, co autor viděl při psaní. */
.post-content p,
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 { margin: 0; padding: 0; }
.post-content blockquote { margin: 0.6rem 0; }

/* Stránka příspěvku sjednocuje h1–h3 na jednu velikost kvůli titulku,
   uvnitř obsahu ale musí nadpisy zůstat odstupňované jako v editoru. */
.post-content h1 { font-size: 2em; }
.post-content h2 { font-size: 1.5em; }
.post-content h3 { font-size: 1.17em; }
.post-content h4 { font-size: 1em; }
.post-content h5 { font-size: 0.83em; }
.post-content h6 { font-size: 0.67em; }

/* ---------- Seznamy ---------- */
/* Quill ukládá odrážkový i číslovaný seznam stejně - jako <ol>, kde typ
   určuje atribut data-list a značka se kreslí do <span class="ql-ui">.
   Bez těchhle pravidel by se odrážkový seznam vykreslil jako číslovaný. */
.post-content ol, .post-content ul { margin: 0; padding-left: 1.5em; }
.post-content li[data-list] { list-style-type: none; padding-left: 1.5em; position: relative; }
.post-content li > .ql-ui { position: absolute; }
.post-content li > .ql-ui::before {
  display: inline-block;
  margin-left: -1.5em;
  margin-right: 0.3em;
  width: 1.2em;
  text-align: right;
  white-space: nowrap;
}
.post-content li[data-list="bullet"] > .ql-ui::before { content: "\2022"; }
.post-content li[data-list="checked"] > .ql-ui::before { content: "\2611"; }
.post-content li[data-list="unchecked"] > .ql-ui::before { content: "\2610"; }
.post-content li[data-list="checked"] > .ql-ui,
.post-content li[data-list="unchecked"] > .ql-ui { color: rgba(255, 255, 255, 0.52); }

/* ---------- Blok kódu ---------- */
.post-content pre,
.post-content .ql-code-block-container {
  margin: 0.8rem 0;
  padding: 0.7rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  background: #060606;
  color: #fff;
  font-family: 'IBM Plex Mono', ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  overflow-x: auto;
}
/* Uvnitř bloku kódu už je pozadí i písmo z rodiče, druhý rámeček by rušil. */
.post-content pre code,
.post-content .ql-code-block { padding: 0; background: none; border-radius: 0; font-size: inherit; white-space: pre-wrap; }
/* Přepínač jazyka patří jen do editoru. */
.post-content .ql-code-block-container > .ql-ui { display: none; }

/* ---------- Hlavička tabulky ---------- */
.post-content th {
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.45rem 0.6rem;
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  font-weight: 600;
}

/* ---------- Číslování a odsazení seznamů ---------- */
/* Číslovaný seznam si Quill počítá vlastními CSS countery, aby šlo
   zanořovat. Každá úroveň má svůj counter a svůj styl číslování. */
.post-content { counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.post-content p,
.post-content h1, .post-content h2, .post-content h3,
.post-content h4, .post-content h5, .post-content h6 { counter-reset: list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.post-content li[data-list] { counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-1 { counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-2 { counter-reset: list-3 list-4 list-5 list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-3 { counter-reset: list-4 list-5 list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-4 { counter-reset: list-5 list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-5 { counter-reset: list-6 list-7 list-8; }
.post-content li[data-list].ql-indent-6 { counter-reset: list-7 list-8; }
.post-content li[data-list].ql-indent-7 { counter-reset: list-8; }

.post-content li[data-list="ordered"] { counter-increment: list-0; }
.post-content li[data-list="ordered"] > .ql-ui::before { content: counter(list-0, decimal) ". "; }
.post-content li[data-list="ordered"].ql-indent-1 { counter-increment: list-1; }
.post-content li[data-list="ordered"].ql-indent-1 > .ql-ui::before { content: counter(list-1, lower-alpha) ". "; }
.post-content li[data-list="ordered"].ql-indent-2 { counter-increment: list-2; }
.post-content li[data-list="ordered"].ql-indent-2 > .ql-ui::before { content: counter(list-2, lower-roman) ". "; }
.post-content li[data-list="ordered"].ql-indent-3 { counter-increment: list-3; }
.post-content li[data-list="ordered"].ql-indent-3 > .ql-ui::before { content: counter(list-3, decimal) ". "; }
.post-content li[data-list="ordered"].ql-indent-4 { counter-increment: list-4; }
.post-content li[data-list="ordered"].ql-indent-4 > .ql-ui::before { content: counter(list-4, lower-alpha) ". "; }
.post-content li[data-list="ordered"].ql-indent-5 { counter-increment: list-5; }
.post-content li[data-list="ordered"].ql-indent-5 > .ql-ui::before { content: counter(list-5, lower-roman) ". "; }
.post-content li[data-list="ordered"].ql-indent-6 { counter-increment: list-6; }
.post-content li[data-list="ordered"].ql-indent-6 > .ql-ui::before { content: counter(list-6, decimal) ". "; }
.post-content li[data-list="ordered"].ql-indent-7 { counter-increment: list-7; }
.post-content li[data-list="ordered"].ql-indent-7 > .ql-ui::before { content: counter(list-7, lower-alpha) ". "; }
.post-content li[data-list="ordered"].ql-indent-8 { counter-increment: list-8; }
.post-content li[data-list="ordered"].ql-indent-8 > .ql-ui::before { content: counter(list-8, lower-roman) ". "; }

/* Odsazení: každá úroveň 3em, u položky seznamu navíc základních 1.5em. */
.post-content .ql-indent-1 { padding-left: 3em; }
.post-content li.ql-indent-1 { padding-left: 4.5em; }
.post-content .ql-indent-2 { padding-left: 6em; }
.post-content li.ql-indent-2 { padding-left: 7.5em; }
.post-content .ql-indent-3 { padding-left: 9em; }
.post-content li.ql-indent-3 { padding-left: 10.5em; }
.post-content .ql-indent-4 { padding-left: 12em; }
.post-content li.ql-indent-4 { padding-left: 13.5em; }
.post-content .ql-indent-5 { padding-left: 15em; }
.post-content li.ql-indent-5 { padding-left: 16.5em; }
.post-content .ql-indent-6 { padding-left: 18em; }
.post-content li.ql-indent-6 { padding-left: 19.5em; }
.post-content .ql-indent-7 { padding-left: 21em; }
.post-content li.ql-indent-7 { padding-left: 22.5em; }
.post-content .ql-indent-8 { padding-left: 24em; }
.post-content li.ql-indent-8 { padding-left: 25.5em; }

/* ---------- Přílohy: přehrávač skladby a odkaz na soubor ----------
   Platí pro editor (.ql-editor) i pro hotový příspěvek (.post-content),
   ať se při psaní vidí totéž, co uvidí čtenář. */

.ql-editor .post-audio,
.post-content .post-audio {
  display: block;
  width: 100%;
  max-width: 480px;
  height: 40px;
  margin: 0.9rem 0;
  border-radius: 999px;
}

/* Odkaz na přílohu je štítek se sponkou, ne obyčejný odkaz v textu -
   ať je na první pohled poznat, že za ním je soubor ke stažení. */
.ql-editor a.post-file,
.post-content a.post-file {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 100%;
  margin: 0.2rem 0;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  color: inherit;
  font-size: 0.88rem;
  text-decoration: none;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ql-editor a.post-file::before,
.post-content a.post-file::before {
  content: "";
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background: currentColor;
  opacity: 0.75;
  /* Sponka. Maskou, aby se ikona barvila textem a nebyl to další soubor. */
  -webkit-mask: var(--paperclip) center / contain no-repeat;
  mask: var(--paperclip) center / contain no-repeat;
}
.ql-editor a.post-file:hover,
.post-content a.post-file:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.09);
}

:root {
  --paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12.5 12.5 21a5.5 5.5 0 0 1-7.8-7.8l8.5-8.5a3.7 3.7 0 0 1 5.2 5.2l-8.5 8.5a1.8 1.8 0 0 1-2.6-2.6l7.9-7.9'/%3E%3C/svg%3E");
}


/* ---------- Živé barvy textu ----------
   Selektory jsou výčet známých tříd, ne hvězdičkový výběr podle předpony:
   sanitizer pustí každou třídu ql-*, a neznámá ql-glow-cokoli by dostala
   color: transparent bez gradientu - neviditelný text.
   Stejná technika jako efekty jména v name-effects.css: barva se maluje
   gradientem přes background-clip a gradient přejíždí. Každá barva jsou
   odstíny jednoho tónu (tmavý - základní - světlý - základní - tmavý),
   takže se text vlní, ale zůstává "tou" barvou. Třídy dává editor
   (atributor glow v editor.js), sanitizer je pouští jako ql-*. */
.ql-glow-ruby, .ql-glow-ember, .ql-glow-gold, .ql-glow-emerald, .ql-glow-teal,
.ql-glow-ice, .ql-glow-sapphire, .ql-glow-amethyst, .ql-glow-rose, .ql-glow-steel {
  /* Záloha pro prohlížeč bez background-clip: text a pro dobu, než se
     gradient vykreslí. */
  color: #e6e6e6;
  font-weight: inherit;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .ql-glow-ruby, .ql-glow-ember, .ql-glow-gold, .ql-glow-emerald, .ql-glow-teal,
  .ql-glow-ice, .ql-glow-sapphire, .ql-glow-amethyst, .ql-glow-rose, .ql-glow-steel {
    background-repeat: repeat;
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    /* Inline color by třídu přebil - editor ho sice odstraní, ale starý
       obsah nebo ruční zásah do zdroje by jinak gradient schoval. */
    color: transparent !important;
    animation: post-glow-sweep 5.5s linear infinite;
  }
}
.ql-glow-ruby     { background-image: linear-gradient(100deg, #9f1239, #f43f5e, #ffb3c1, #f43f5e, #9f1239); }
.ql-glow-ember    { background-image: linear-gradient(100deg, #c2410c, #fb923c, #ffe0b3, #fb923c, #c2410c); }
.ql-glow-gold     { background-image: linear-gradient(100deg, #b45309, #fbbf24, #fff3b0, #fbbf24, #b45309); }
.ql-glow-emerald  { background-image: linear-gradient(100deg, #15803d, #4ade80, #c6ffd9, #4ade80, #15803d); }
.ql-glow-teal     { background-image: linear-gradient(100deg, #0f766e, #2dd4bf, #c8fff7, #2dd4bf, #0f766e); }
.ql-glow-ice      { background-image: linear-gradient(100deg, #0e7490, #67e8f9, #eafeff, #67e8f9, #0e7490); }
.ql-glow-sapphire { background-image: linear-gradient(100deg, #1d4ed8, #60a5fa, #dbeafe, #60a5fa, #1d4ed8); }
.ql-glow-amethyst { background-image: linear-gradient(100deg, #6d28d9, #a78bfa, #f3ecff, #a78bfa, #6d28d9); }
.ql-glow-rose     { background-image: linear-gradient(100deg, #be185d, #f472b6, #ffe0f0, #f472b6, #be185d); }
.ql-glow-steel    { background-image: linear-gradient(100deg, #64748b, #cbd5e1, #ffffff, #cbd5e1, #64748b); }

@keyframes post-glow-sweep {
  from { background-position: 100% 50%; }
  to   { background-position: 0% 50%; }
}

/* Kdo nechce pohyb, dostane gradient zamrzlý uprostřed - text nezůstane
   useknutý na jediném tmavém odstínu. */
@media (prefers-reduced-motion: reduce) {
  .ql-glow-ruby, .ql-glow-ember, .ql-glow-gold, .ql-glow-emerald, .ql-glow-teal,
  .ql-glow-ice, .ql-glow-sapphire, .ql-glow-amethyst, .ql-glow-rose, .ql-glow-steel { animation: none; background-position: 50% 50%; }
}