/* ==========================================
   Rich Content Styles — dark theme
   ========================================== */

.block-rich-content,
.prose,
.prose-invert,
.rich-content {

  /* ---- Headings ---- */
  h1 { font-size: 1.5rem; font-weight: 800; color: #fff; margin-bottom: 1rem; line-height: 1.4; border-bottom: 1px solid rgb(71 85 105 / 0.3); padding-bottom: 0.5rem; }
  h2 { font-size: 1.3rem; font-weight: 700; color: #fff; margin-bottom: 0.75rem; margin-top: 1.5rem; line-height: 1.4; }
  h3 { font-size: 1.15rem; font-weight: 600; color: #e2e8f0; margin-bottom: 0.6rem; margin-top: 1.25rem; line-height: 1.4; }
  h4 { font-size: 1.05rem; font-weight: 600; color: #cbd5e1; margin-bottom: 0.5rem; }
  h5, h6 { font-size: 0.95rem; font-weight: 500; color: #94a3b8; margin-bottom: 0.5rem; }

  /* ---- Paragraph & Text ---- */
  p { color: #cbd5e1; margin-bottom: 1rem; line-height: 1.9; font-size: 0.9375rem; }
  strong, b { color: #f1f5f9; font-weight: 700; }
  em, i { font-style: italic; color: #e2e8f0; }
  u { text-decoration: underline; text-underline-offset: 2px; }
  s, strike, del { text-decoration: line-through; color: #64748b; }
  small { font-size: 0.8rem; color: #94a3b8; }
  sub, sup { font-size: 0.75em; }
  mark { background: rgb(250 204 21 / 0.2); color: #fde68a; padding: 0.1em 0.3em; border-radius: 3px; }

  /* ---- Links ---- */
  a { color: #818cf8; text-decoration: underline; text-underline-offset: 2px; transition: color 0.15s; }
  a:hover { color: #a5b4fc; }

  /* ---- Blockquote ---- */
  blockquote {
    border-right: 3px solid #6366f1;
    background: rgb(99 102 241 / 0.08);
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    border-radius: 0 8px 8px 0;
    color: #cbd5e1;
    line-height: 1.8;
  }
  blockquote p:last-child { margin-bottom: 0; }

  /* ---- Lists ---- */
  ul, ol { margin: 0.75rem 0 1rem 0; padding-right: 1.5rem; color: #cbd5e1; line-height: 1.8; }
  ul { list-style-type: disc; }
  ol { list-style-type: decimal; }
  li { margin-bottom: 0.35rem; padding-right: 0.25rem; }
  li::marker { color: #64748b; }
  li:last-child { margin-bottom: 0; }

  /* ---- Horizontal Rule ---- */
  hr {
    border: none;
    height: 1px;
    background: linear-gradient(to left, transparent, rgb(71 85 105 / 0.4), transparent);
    margin: 1.5rem 0;
  }

  /* ---- Images ---- */
  img { max-width: 100%; height: auto; border-radius: 10px; display: block; margin: 1.25rem 0; }
  img + em, img + small { display: block; text-align: center; color: #64748b; font-size: 0.8rem; margin-top: 0.25rem; }

  /* ---- Figure & Figcaption ---- */
  figure { margin: 1.25rem 0; }
  figure img { margin-bottom: 0.5rem; }
  figcaption { text-align: center; color: #64748b; font-size: 0.8rem; }

  /* ---- Code (inline) ---- */
  code {
    font-family: 'Fira Code', 'Cascadia Code', monospace;
    background: rgb(30 41 59 / 0.7);
    color: #f472b6;
    padding: 0.15em 0.4em;
    border-radius: 4px;
    font-size: 0.85em;
    border: 1px solid rgb(71 85 105 / 0.3);
    direction: ltr;
    display: inline-block;
  }

  /* ---- Pre / Code Block ---- */
  pre {
    background: #0f172a;
    border: 1px solid rgb(71 85 105 / 0.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
    line-height: 1.6;
    font-size: 0.85rem;
  }
  pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
    border: none;
    font-size: inherit;
    display: block;
  }

  /* ---- Tables ---- */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.875rem;
    color: #cbd5e1;
  }
  thead { background: rgb(30 41 59 / 0.6); }
  th {
    padding: 0.7rem 1rem;
    text-align: right;
    font-weight: 700;
    color: #e2e8f0;
    font-size: 0.85rem;
    border: 1px solid rgb(71 85 105 / 0.3);
  }
  td {
    padding: 0.6rem 1rem;
    border: 1px solid rgb(71 85 105 / 0.25);
    vertical-align: middle;
  }
  tbody tr:hover { background: rgb(51 65 85 / 0.3); }

  /* ---- Video / Audio / Embed ---- */
  video, audio { max-width: 100%; border-radius: 10px; margin: 1rem 0; }
  iframe { max-width: 100%; border-radius: 10px; margin: 1rem 0; border: 1px solid rgb(71 85 105 / 0.3); }

  /* ---- Details / Summary ---- */
  details {
    background: rgb(30 41 59 / 0.4);
    border: 1px solid rgb(71 85 105 / 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin: 1rem 0;
    color: #cbd5e1;
  }
  summary {
    font-weight: 600;
    color: #e2e8f0;
    cursor: pointer;
    user-select: none;
  }
  details[open] summary { margin-bottom: 0.5rem; }

  /* ---- Keyboard ---- */
  kbd {
    background: rgb(51 65 85 / 0.8);
    color: #e2e8f0;
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.8em;
    border: 1px solid rgb(71 85 105 / 0.5);
    box-shadow: 0 1px 0 rgb(71 85 105 / 0.4);
  }

  /* ---- Abbr ---- */
  abbr[title] {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    cursor: help;
  }

  /* ---- Form elements inside content ---- */
  input, textarea, select, button {
    background: rgb(30 41 59 / 0.6);
    border: 1px solid rgb(71 85 105 / 0.3);
    color: #e2e8f0;
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
  }

  /* ---- Misc ---- */
  address { font-style: normal; color: #94a3b8; }
  cite { font-style: italic; color: #94a3b8; }
  dfn { font-style: italic; border-bottom: 1px dotted #64748b; }
  var { font-style: italic; color: #fde68a; }
  samp { font-family: monospace; background: rgb(30 41 59 / 0.5); padding: 0.1em 0.3em; border-radius: 3px; }

  /* ---- Inserted / Deleted ---- */
  ins { text-decoration: none; background: rgb(34 197 94 / 0.15); color: #86efac; padding: 0.05em 0.2em; border-radius: 3px; }

  /* ---- Definition List ---- */
  dl { margin: 1rem 0; color: #cbd5e1; }
  dt { font-weight: 700; color: #e2e8f0; margin-top: 0.75rem; }
  dd { margin-right: 1.25rem; margin-top: 0.25rem; color: #94a3b8; font-size: 0.9rem; line-height: 1.7; }

  /* ---- Fieldset / Legend ---- */
  fieldset { border: 1px solid rgb(71 85 105 / 0.3); border-radius: 10px; padding: 1rem 1.25rem; margin: 1.25rem 0; }
  legend { color: #e2e8f0; font-weight: 700; padding: 0 0.5rem; font-size: 0.95rem; }
  label { display: block; color: #94a3b8; font-size: 0.85rem; margin-bottom: 0.25rem; }

  /* ---- Meter / Progress ---- */
  meter { width: 100%; height: 1rem; border-radius: 8px; }
  meter::-webkit-meter-bar { background: rgb(30 41 59 / 0.6); border: 1px solid rgb(71 85 105 / 0.3); border-radius: 8px; }
  meter::-webkit-meter-optimum-value { background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 8px; }
  meter::-webkit-meter-suboptimum-value { background: linear-gradient(90deg, #f59e0b, #d97706); border-radius: 8px; }
  meter::-webkit-meter-even-less-good-value { background: linear-gradient(90deg, #ef4444, #dc2626); border-radius: 8px; }
  progress { width: 100%; height: 1rem; border-radius: 8px; overflow: hidden; }
  progress::-webkit-progress-bar { background: rgb(30 41 59 / 0.6); border: 1px solid rgb(71 85 105 / 0.3); border-radius: 8px; }
  progress::-webkit-progress-value { background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 8px; }
  progress::-moz-progress-bar { background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 8px; }

  /* ---- Ruby Annotations ---- */
  ruby { font-size: 1rem; }
  rt { font-size: 0.6rem; color: #94a3b8; }
  rp { display: none; }

  /* ---- Time ---- */
  time { color: #94a3b8; font-size: 0.85rem; }

  /* ---- BDI / BDO ---- */
  bdi, bdo { unicode-bidi: isolate; }

  /* ---- Table Caption & Colgroup ---- */
  caption { caption-side: bottom; padding: 0.5rem; color: #64748b; font-size: 0.8rem; text-align: center; }

  /* ---- Image Map ---- */
  map area { cursor: pointer; }

  /* ---- Canvas ---- */
  canvas { max-width: 100%; border-radius: 8px; border: 1px solid rgb(71 85 105 / 0.3); }

  /* ---- Embed / Object ---- */
  embed, object { max-width: 100%; border-radius: 10px; border: 1px solid rgb(71 85 105 / 0.3); }

  /* ---- Semantic Sections ---- */
  article, aside, section, nav, header, footer, hgroup, main { display: block; }
  header, footer { margin: 1rem 0; }

  /* ---- Dialog ---- */
  dialog { background: #1e293b; border: 1px solid rgb(71 85 105 / 0.3); border-radius: 12px; color: #cbd5e1; padding: 1.5rem; }
  dialog::backdrop { background: rgb(0 0 0 / 0.6); }

  /* ---- Menu ---- */
  menu { margin: 0.75rem 0; padding-right: 1.5rem; color: #cbd5e1; }
  menuitem { display: list-item; }

  /* ---- Select inside content ---- */
  select { cursor: pointer; }
  optgroup { font-weight: 700; color: #e2e8f0; }
  option { color: #e2e8f0; background: #1e293b; }
  output { color: #e2e8f0; font-weight: 600; }

  /* ---- Textarea ---- */
  textarea { resize: vertical; min-height: 80px; font-family: inherit; }

  /* ---- Icon classes (FontAwesome, Bootstrap Icons, Froala) ---- */
  .icon, .bi { font-size: inherit; vertical-align: middle; }
  .fa, .fas, .far, .fal, .fab, .fa-solid, .fa-regular, .fa-brands { font-size: inherit; vertical-align: middle; }
  .fr-emoticon { height: 1.2em; width: 1.2em; vertical-align: middle; display: inline-block; }
  .fr-inner { display: block; }

  /* ---- SVG path / line ---- */
  svg { max-width: 100%; height: auto; }
  path, line { stroke: currentColor; }

  /* ---- Alignment helpers ---- */
  .text-left { text-align: left; }
  .text-center { text-align: center; }
  .text-right { text-align: right; }
  .text-justify { text-align: justify; }
}