/* Answer editor — admin only, and the answer styling used on the public page. */

.rich-editor {
  border: 1px solid #cfe0cd;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-top: .5rem;
}
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px;
  background: #f4f7f2;
  border-bottom: 1px solid #cfe0cd;
}
.rich-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #fff;
  color: #334d2a;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.rich-btn:hover { border-color: #334d2a; }
.rich-btn:active { background: #e8efe6; }
.rich-sep { width: 1px; height: 22px; background: #cfe0cd; margin: 0 4px; }
.rich-picker { display: inline-flex; align-items: center; }
.rich-swatches { display: inline-flex; gap: 3px; }
.rich-swatch {
  width: 22px; height: 22px;
  border: 1px solid #bbb;
  border-radius: 50%;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  color: #666;
}
.rich-swatch:hover { outline: 2px solid #334d2a; outline-offset: 1px; }

.rich-area {
  min-height: 220px;
  max-height: 60vh;
  overflow: auto;
  padding: 14px;
  border: 0 !important;
  border-radius: 0 !important;
  line-height: 1.7;
  outline: none;
}
.rich-area:focus { box-shadow: inset 0 0 0 2px rgba(51, 77, 42, .25); }
.rich-area:empty::before {
  content: "Write the answer here. Use the buttons above for bold, colour, lists and links.";
  color: #9aa49c;
}
textarea.rich-source { display: none !important; }

/* Shared answer styling: the editor and the public page look the same. */
.rich-area h3, .kb-answer h3 { font-size: 1.2rem; font-weight: 900; color: #334d2a; margin: 1rem 0 .4rem; }
.rich-area h4, .kb-answer h4 { font-size: 1.05rem; font-weight: 800; color: #334d2a; margin: .9rem 0 .35rem; }
.rich-area p, .kb-answer p { margin: 0 0 .8rem; }
.rich-area ul, .kb-answer ul { list-style: disc; padding-left: 1.5rem; margin: 0 0 .8rem; }
.rich-area ol, .kb-answer ol { list-style: decimal; padding-left: 1.5rem; margin: 0 0 .8rem; }
.rich-area li, .kb-answer li { margin: .2rem 0; }
.rich-area blockquote, .kb-answer blockquote {
  border-left: 4px solid #d4a437;
  background: #fbf7ec;
  padding: .7rem 1rem;
  margin: 0 0 .9rem;
  border-radius: 0 8px 8px 0;
}
.rich-area a, .kb-answer a { color: #1f4e79; text-decoration: underline; }
.kb-answer { line-height: 1.8; }
.kb-answer :last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .rich-toolbar { gap: 3px; padding: 6px; }
  .rich-btn { min-width: 30px; height: 30px; padding: 0 6px; }
  .rich-swatch { width: 20px; height: 20px; }
}