/* Styling for Editor.js-rendered blocks on the live site.
   Include this <link> in any page that uses page-blocks-loader.js. */

/* Images */
[data-blocks-mount] figure { margin: 24px 0; }
[data-blocks-mount] figure img { width: 100%; height: auto; display: block; border-radius: 8px; }
[data-blocks-mount] figure figcaption {
  font-size: 13px; color: #666; text-align: center; margin-top: 8px; line-height: 1.4;
}
[data-blocks-mount] figure.has-border img { border: 1px solid #ddd; }
[data-blocks-mount] figure.has-bg { background: #f5f5f5; padding: 12px; border-radius: 8px; }
[data-blocks-mount] figure.is-stretched img { max-width: none; width: 100%; }

/* Tables */
[data-blocks-mount] .block-table-wrap { margin: 24px 0; overflow-x: auto; }
[data-blocks-mount] .block-table-wrap table {
  width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.5;
}
[data-blocks-mount] .block-table-wrap th,
[data-blocks-mount] .block-table-wrap td {
  border: 1px solid #e3e3e3; padding: 10px 14px; text-align: left; vertical-align: top;
}
[data-blocks-mount] .block-table-wrap th {
  background: #f7f7f7; font-weight: 700; color: #1a1a1a;
}

/* Checklist */
[data-blocks-mount] .block-checklist { list-style: none; padding-left: 0; margin: 16px 0; }
[data-blocks-mount] .block-checklist__item {
  display: flex; align-items: flex-start; gap: 10px; padding: 6px 0;
}
[data-blocks-mount] .block-checklist__box {
  flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #999; border-radius: 4px;
  margin-top: 2px; position: relative; background: #fff;
}
[data-blocks-mount] .block-checklist__item.is-checked .block-checklist__box {
  background: #32CD32; border-color: #32CD32;
}
[data-blocks-mount] .block-checklist__item.is-checked .block-checklist__box::after {
  content: ''; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
[data-blocks-mount] .block-checklist__item.is-checked .block-checklist__text {
  color: #888; text-decoration: line-through;
}

/* Quote */
[data-blocks-mount] .block-quote {
  margin: 24px 0; padding: 18px 24px; border-left: 4px solid #32CD32;
  background: #fafafa; font-style: italic; color: #333;
}
[data-blocks-mount] .block-quote p { margin: 0 0 8px; font-size: 17px; line-height: 1.6; }
[data-blocks-mount] .block-quote cite {
  display: block; font-style: normal; font-size: 13px; color: #888; letter-spacing: 0.5px;
}

/* Delimiter — three dots, classic Editor.js style */
[data-blocks-mount] .block-delimiter {
  border: 0; margin: 32px 0; height: auto;
  text-align: center; font-size: 24px; letter-spacing: 12px; color: #ccc;
}
[data-blocks-mount] .block-delimiter::after { content: '* * *'; }

/* Inline tools — make sure underline / mark / strikethrough render visibly */
[data-blocks-mount] u { text-decoration: underline; }
[data-blocks-mount] mark { background: #fff2a8; padding: 0 2px; border-radius: 2px; }
[data-blocks-mount] s, [data-blocks-mount] strike { text-decoration: line-through; color: #888; }