/* ********** editor textu v Texy syntaxi (components/editor.blade.php) **********

   Own file, not a section of style-ts.css: the editor is also used in the
   admin (profile on the biker card), which doesn't load the public styles.
   The public site always loads it (App\Support\Assets::STYLES), the admin
   only on pages with an editor (<x-layout-administrace :editor="true">).

   Barvy jsou z palety tohohle webu, ne z prototypu, ze kterého editor pochází:
   linky #d7d9da a text #2b2d2f jako u ostatních polí formuláře, zdůraznění
   #5f7212 (kontrast 5,38:1 na bílé, tedy nad hranicí 4,5:1, kterou si soubor
   hlídá i u .kf-napoveda) a #79900f na okraje, kde stačí 3:1.

   Všechno je pod .editor-obal: jména jako .editor nebo .syntaxe jsou obecná
   a tenhle stylopis sdílí i starý web.

   Rámečky jsou hranaté (border-radius: 0) – jako pole formuláře nad editorem,
   karty příspěvků a tabulka propozic. Zaoblení zůstává jen tlačítkům. */

.editor-obal .editor {
  border: 1px solid #d7d9da;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}

.editor-obal .editor:focus-within {
  border-color: #79900f;
}

.editor-obal .editor-listva {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 6px;
  border-bottom: 1px solid #d7d9da;
  background: #f4f5f6;
}

/* Lišta je do načtení editoru schovaná (data-az-po-startu + hidden). Pravidlo
   display: flex výš by [hidden] z výchozího stylu prohlížeče přebilo, proto
   se to musí říct zvlášť – a totéž platí u textarey a spodního pruhu. */
.editor-obal .editor-listva[hidden] {
  display: none;
}

.editor-obal .editor-listva button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 30px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #2b2d2f;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.editor-obal .editor-listva button:hover {
  border-color: #d7d9da;
  background: #fff;
}

.editor-obal .editor-listva button[aria-expanded='true'] {
  border-color: #79900f;
  background: #fff;
}

.editor-obal .editor-listva .oddelovac {
  width: 1px;
  height: 20px;
  margin: 0 5px;
  background: #d7d9da;
}

.editor-obal .editor textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  /* Obecné pravidlo dává textaree 7px okraje nahoře i dole; vizuál je nemá
     a editor by při přepnutí o 14 px poskočil. */
  margin: 0;
  min-height: 190px;
  padding: 10px 12px;
  border: 0;
  color: #2b2d2f;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  /* Bez úchytu na roztažení. Vizuální režim je jiný prvek se svou výškou
     (roste s obsahem), takže ručně zvětšená textarea při přepnutí
     poskočila zpátky a zase ven. Výšku určuje rows a min-height. */
  resize: none;
}

.editor-obal .editor textarea[hidden] {
  display: none;
}

/* Obtažení při zaměření zůstává, jen se sjednotí s vizuálním režimem: bez něj
   by nebylo poznat, kde je kurzor, u lidí, kteří chodí po klávesnici. Odstín
   i odsazení jsou tytéž, jaké má formulář u ostatních polí. */
.editor-obal textarea:focus-visible,
.editor-obal .vizual:focus-visible {
  outline: 2px solid #a5c016;
  outline-offset: -2px;
}

/* Vizuální režim – tentýž rám a odsazení jako textarea, ať se při přepnutí
   nic neposune. */
.editor-obal .vizual {
  /* border-box kvůli editor.js, který sem při přepnutí opisuje výšku
     textarey (offsetHeight, tedy i s odsazením) jako pevnou height.
     Delší obsah pak roluje uvnitř, stejně jako v textaree. */
  box-sizing: border-box;
  min-height: 190px;
  overflow-y: auto;
  padding: 10px 12px;
  color: #2b2d2f;
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: break-word;
}

.editor-obal .vizual[hidden] {
  display: none;
}

.editor-obal .vizual > :first-child {
  margin-top: 0;
}

.editor-obal .vizual > :last-child {
  margin-bottom: 0;
}

.editor-obal .vizual p {
  margin: 0 0 10px;
}

.editor-obal .vizual ul,
.editor-obal .vizual ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.editor-obal .vizual li {
  margin-bottom: 4px;
}

.editor-obal .vizual img {
  vertical-align: -3px;
}

/* Prázdný editor si říká, co s ním – contenteditable placeholder neumí. */
.editor-obal .vizual:empty::before {
  content: attr(data-placeholder);
  color: #6b7075;
}

/* Panel se smajlíky – vyskočí pod tlačítkem, jako v texyle. */
.editor-obal .smajlici-obal {
  position: relative;
}

.editor-obal .smajlici {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 210px;
  padding: 8px;
  border: 1px solid #d7d9da;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.editor-obal .smajlici[hidden] {
  display: none;
}

.editor-obal .smajlici-hlava {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  color: #6b7075;
  font-size: 13px;
  font-weight: 600;
}

.editor-obal .smajlici-hlava button {
  width: 22px;
  height: 22px;
}

.editor-obal .smajlici-mrizka {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
}

.editor-obal .smajlici-mrizka button {
  width: 100%;
  height: 30px;
}

.editor-obal .smajlici-mrizka img {
  display: block;
}

/* Spodní pruh – přepínač režimů vlevo, nápověda vpravo. */
.editor-obal .editor-spodek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  border-top: 1px solid #d7d9da;
  background: #f4f5f6;
}

.editor-obal .editor-spodek[hidden] {
  display: none;
}

.editor-obal .editor-spodek button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid #d7d9da;
  border-radius: 4px;
  background: #fff;
  color: #2b2d2f;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.editor-obal .editor-spodek button:hover {
  border-color: #79900f;
  color: #5f7212;
}

.editor-obal .editor-spodek button[aria-pressed='true'] {
  border-color: #79900f;
  background: #f4f7ec;
  color: #5f7212;
}

/* Přepínač Texy / Vizuálně – dvě poloviny jednoho tlačítka. */
.editor-obal .prepinac {
  display: inline-flex;
  border: 1px solid #d7d9da;
  border-radius: 0;
  overflow: hidden;
}

.editor-obal .prepinac button {
  padding: 7px 14px;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: #6b7075;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.editor-obal .prepinac button + button {
  border-left: 1px solid #d7d9da;
}

.editor-obal .prepinac button:hover {
  color: #5f7212;
}

.editor-obal .prepinac button[aria-pressed='true'] {
  background: #5f7212;
  color: #fff;
}

/* Pole pro adresu odkazu – vyskočí z lišty jako panel smajlíků. */
.editor-obal .odkaz-obal {
  position: relative;
}

.editor-obal .odkaz-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 5;
  width: 290px;
  padding: 10px;
  border: 1px solid #d7d9da;
  border-radius: 0;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}

.editor-obal .odkaz-panel[hidden] {
  display: none;
}

.editor-obal .odkaz-panel label {
  display: block;
  margin-bottom: 5px;
  color: #6b7075;
  font-size: 13px;
  font-weight: 600;
}

.editor-obal .odkaz-radek {
  display: flex;
  gap: 6px;
}

.editor-obal .odkaz-panel input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 9px;
  border: 1px solid #d7d9da;
  border-radius: 4px;
  font: inherit;
  font-size: 14px;
}

/* Text odkazu stojí na vlastním řádku; adresa je níž v .odkaz-radek spolu
   s tlačítkem, proto se tyhle dva vstupy chovají jinak. */
.editor-obal .odkaz-panel input[data-link-label] {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 10px;
}

.editor-obal .odkaz-panel button {
  width: auto;
  height: auto;
  padding: 7px 12px;
  border: 0;
  border-radius: 4px;
  background: #5f7212;
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.editor-obal .odkaz-panel button:hover {
  background: #4e5d0f;
}

/* Nápověda k syntaxi – rozbaluje ji tlačítko ve spodním pruhu. */
.editor-obal .syntaxe {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid #d7d9da;
  border-radius: 0;
  background: #fafbfb;
}

.editor-obal .syntaxe[hidden] {
  display: none;
}

.editor-obal .syntaxe table {
  width: 100%;
  border-collapse: collapse;
}

.editor-obal .syntaxe td {
  padding: 5px 10px 5px 0;
  border-bottom: 1px solid #d7d9da;
  vertical-align: top;
}

.editor-obal .syntaxe tr:last-child td {
  border-bottom: 0;
}

.editor-obal .syntaxe code {
  color: #7a4a00;
  font: 13px/1.5 Consolas, 'Courier New', monospace;
  white-space: nowrap;
}