/* Legacy content helpers: sidenote & admonition (Asciidoctor-like) */
/* Also supports Obsidian-style callouts */

/* Sidenote: lightweight inline note — less emphasis than admonition */
.post-content .sidenote {
  margin: 12px 0;
  padding: 10px 14px;
  background: #fffdf3; /* lighter, subtle */
  /* removed left border to reduce visual weight and separate from admonition style */
  border-radius: 4px;
  color: #4a5568;
  /* ~13% smaller than paragraph, reduced by 5% more */
  font-size: 0.96em;
}

.post-content .sidenote p {
  font-size: inherit; /* prevent global .post-content p from upscaling */
  line-height: inherit;
}

.post-content .sidenote p:last-child { margin-bottom: 0; }

.post-content .sidenote .sidenote-symbol {
  margin-right: 6px;
  font-weight: 600;
  color: #b08900; /* tone down main text, keep visual cue */
}

/* Admonition blocks (note variant) */
.post-content .admonitionblock {
  margin: 28px 0; /* more separation from body */
  border: 1px solid #e5e7eb; /* add outer border */
  border-left: 6px solid #9ca3af; /* accent bar (variant overrides below) */
  background: #f6f8fa; /* stronger than sidenote */
  border-radius: 6px;
  padding: 14px 16px 0; /* remove bottom padding */
  font-size: 0.95em; /* shrink block typography by ~5% */
}

.post-content .admonitionblock .content {
  padding: 14px 16px 0; /* remove bottom padding inside content */
}

.post-content .admonitionblock p {
  font-size: inherit; /* keep 0.95em scale for paragraphs inside block */
  line-height: inherit;
}

.post-content .admonitionblock .content .title {
  font-weight: 800;
  font-size: 1.3em; /* stronger emphasis than body */
  margin-bottom: 8px;
  color: #1f2937;
}

.post-content .admonitionblock .icon {
  display: block; /* show label area */
  margin-bottom: 8px;
}

.post-content .admonitionblock .icon .title {
  display: inline-block;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e5e7eb; /* default; overridden by variants */
  color: #1f2937;
  /* Align pill 16px to the right to match content's left padding */
  margin-left: 16px;
}

.post-content .admonitionblock.note {
  border-left-color: #2b6cb0;
  background: #ebf5ff; /* light blue */
}
.post-content .admonitionblock.note .icon .title {
  background: #dbeafe; /* blue-100 */
  color: #1e40af;      /* blue-800 */
}

/* Additional variants for clarity */
.post-content .admonitionblock.tip {
  border-left-color: #16a34a; /* green */
  background: #ecfdf5; /* mint */
}
.post-content .admonitionblock.tip .icon .title {
  background: #d1fae5; /* green-100 */
  color: #065f46;      /* green-800 */
}

.post-content .admonitionblock.warning,
.post-content .admonitionblock.important {
  border-left-color: #f59e0b; /* amber */
  background: #fff7ed; /* warm */
}
.post-content .admonitionblock.warning .icon .title,
.post-content .admonitionblock.important .icon .title {
  background: #fde68a; /* amber-200 */
  color: #92400e;      /* amber-900 */
}

/* Obsidian-style callouts (shares styling with admonition blocks) */
.post-content blockquote.callout {
  margin: 28px 0;
  border: 1px solid #e5e7eb;
  border-left: 6px solid #9ca3af;
  background: #f6f8fa;
  border-radius: 6px;
  padding: 20px;
  font-size: 0.95em;
}

.post-content blockquote.callout p {
  font-size: inherit;
  line-height: inherit;
  margin-bottom: 16px;
}

.post-content blockquote.callout p:last-child {
  margin-bottom: 0;
}

.post-content blockquote.callout .callout-title {
  font-weight: 700;
  font-size: 1.15em;
  margin-bottom: 12px;
  color: #1f2937;
}

/* Callout type variants */
.post-content blockquote.callout[data-type="note"] {
  border-left-color: #2b6cb0;
  background: #ebf5ff;
}

.post-content blockquote.callout[data-type="tip"] {
  border-left-color: #16a34a;
  background: #ecfdf5;
}

.post-content blockquote.callout[data-type="warning"],
.post-content blockquote.callout[data-type="important"] {
  border-left-color: #f59e0b;
  background: #fff7ed;
}

.post-content blockquote.callout[data-type="caution"],
.post-content blockquote.callout[data-type="danger"] {
  border-left-color: #dc2626;
  background: #fef2f2;
}

/* Mobile-specific styles for admonition */
@media (max-width: 640px) {
  .post-content .admonitionblock {
    /* Remove left border and reduce padding on mobile */
    border-left: none;
    padding-left: 6px;
    padding-right: 6px;
    /* -5% from 0.95em */
    font-size: 0.9em;
  }
  
  .post-content .admonitionblock .content {
    padding-left: 6px;
    padding-right: 6px;
  }
  
  .post-content .admonitionblock .icon .title {
    /* Match the margin-left with padding */
    margin-left: 6px;
  }
  
  /* Also apply to callouts on mobile */
  .post-content blockquote.callout {
    border-left: none;
    padding: 12px;
    font-size: 0.9em;
  }
}