/*
/* Article Content Styling - Exact Duplicate */
/* Based on Abundance Institute article styling */

/* Font Import - IBM Plex Mono */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  src: url('https://fonts.gstatic.com/s/ibmplexmono/v19/Y_TKV6o8WovbUd3m_X9aAA.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 700;
  src: url('https://fonts.gstatic.com/s/ibmplexmono/v19/Y_TKV6o8WovbUd3m_X9aAA.woff2') format('woff2');
}

/* Main Article Container */
.article-content {
  font-family: 'IBM Plex Mono', monospace;
  word-break: break-word;
  color: #000;
  background-color: #ccc;
}

/* Headings */
.article-content h2 {
  font-size: clamp(30px, 3.90625vw, 45px);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.05;
  font-weight: 400;
  margin: 0.6em 0;
}

.article-content h3 {
  font-size: clamp(24px, 3.0729166667vw, 35px);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.5;
  font-weight: 400;
  margin: 1em 0 0.3em;
  color: red;
}

.article-content h3 + p {
  margin-top: 0.8em;
}

.article-content h4 {
  font-size: clamp(20px, 2.34375vw, 25px);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.5;
  font-weight: 400;
  margin: 1em 0 0.3em;
}

.article-content h4 + p {
  margin-top: 0.5em;
}

/* Paragraphs */
.article-content p {
  font-size: clamp(14px, 1.5625vw, 16px);
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
  max-width: 85ch;
  margin: 1.5em 0;
  line-height: 1.5;
}

/* Remove margin from empty paragraphs */
.article-content p:empty {
  margin: 0;
  display: none;
}

/* Adjust spacing when paragraphs are adjacent */
.article-content p + p {
  margin-top: 1.5em;
}

/* Links */
.article-content a:link {
  color: #0048ff;
  text-decoration: underline;
}

.article-content a:visited {
  color: #551a8b;
}

/* Lists */
.article-content ul {
  margin: 1.5em 0;
  padding-left: 3em;
  margin-left: 0;
  list-style: disc outside;
  font-size: clamp(14px, 1.5625vw, 16px);
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.5;
}

.article-content ul li {
  margin: 0.5em 0;
  padding-left: 0;
}

.article-content ul li p {
  margin: 0;
  display: inline;
}

/* Blockquotes */
.article-content blockquote,
.article-content blockquote p {
  font-size: clamp(16px, 1.875vw, 20px);
  line-height: 1.25;
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
}

.article-content blockquote {
  margin: 1em 0;
  border-left: 1px solid #000;
  padding: 1px 0 1px 1em;
}

.article-content blockquote p {
  max-width: 60ch;
}

/* Footnotes */
.article-content {
  counter-reset: prosemirror-footnote;
}

.article-content .footnote:link {
  text-decoration: none;
}

.article-content .footnote:before {
  content: counter(prosemirror-footnote);
  vertical-align: super;
  font-size: 70%;
  counter-increment: prosemirror-footnote;
}

.article-content .footnote-footer {
  margin-top: 1em;
  font-size: 14px;
  word-break: break-word;
}

.article-content .footnote-footer:before {
  content: "";
  display: block;
  height: 1px;
  width: 30%;
  background-color: #000;
  margin-bottom: 0.5em;
}

.article-content .footnote-foot {
  margin: 0.5em 0;
}

.article-content .footnote-foot .footnote:before {
  font-size: 100%;
  vertical-align: text-bottom;
  margin-right: 0.5em;
}

/* WordPress Editor Specific Classes */
.wp-block-quote {
  font-size: clamp(16px, 1.875vw, 20px);
  line-height: 1.25;
  font-weight: 400;
  font-family: 'IBM Plex Mono', monospace;
  margin: 1em 0;
  border-left: 1px solid #000;
  padding: 1px 0 1px 1em;
}

.wp-block-quote p {
  max-width: 60ch;
}

/* Ensure proper rendering in WordPress editor */
.editor-styles-wrapper .article-content,
.block-editor-writing-flow .article-content {
  font-family: 'IBM Plex Mono', monospace;
}

/* Strong/Bold text */
.article-content strong {
  font-weight: 700;
}

/* Emphasis/Italic text */
.article-content em {
  font-style: italic;
}

/* Code blocks (if needed) */
.article-content code {
  font-family: 'IBM Plex Mono', monospace;
  background-color: #f4f4f4;
  padding: 0.2em 0.4em;
  font-size: 0.9em;
}

.article-content pre {
  font-family: 'IBM Plex Mono', monospace;
  background-color: #f4f4f4;
  padding: 1em;
  overflow-x: auto;
  margin: 1.5em 0;
}

.article-content pre code {
  background-color: transparent;
  padding: 0;
}