﻿:root {
  --post-space-1: 0.6rem;
  --post-space-2: 0.9rem;
  --post-space-3: 1.4rem;
  --post-space-4: 1.8rem;
  --post-space-5: 2.4rem;
}

.post-content {
  line-height: 1.75;
  font-size: 1.04rem;
  color: var(--dark);
}

/* Establish a clean vertical rhythm */
.post-content > * {
  margin-top: 0;
  margin-bottom: 0;
}

.post-content > * + * {
  margin-top: var(--post-space-3);
}

/* Add breathing room when content starts with plain text */
.post-content > p:first-child,
.post-content > ul:first-child,
.post-content > ol:first-child,
.post-content > blockquote:first-child {
  margin-top: var(--post-space-4);
}

.post-content h3 {
  margin-top: var(--post-space-5);
  margin-bottom: var(--post-space-2);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--dark);
}

.post-content h3:first-child {
  margin-top: var(--post-space-3);
}

.post-content h3 + p,
.post-content h3 + ul,
.post-content h3 + ol,
.post-content h3 + table,
.post-content h3 + .callout,
.post-content h4 + p {
  margin-top: var(--post-space-2);
}

.post-content h4 {
  margin-top: var(--post-space-4);
  margin-bottom: var(--post-space-1);
  line-height: 1.35;
}


.post-content p + p {
  margin-top: var(--post-space-3);
}

.post-content ul,
.post-content ol {
  padding-left: 1.3rem;
}

.post-content li + li {
  margin-top: 0.45rem;
}

.post-content a {
  color: var(--primary);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--post-space-2);
  border: 1px solid var(--border);
}

.post-content th,
.post-content td {
  padding: 0.65rem 0.7rem;
  vertical-align: top;
  border: 1px solid var(--border);
}

.post-content th {
  text-align: left;
  background: rgba(139, 90, 43, 0.08);
}

.callout {
  background: var(--card-bg);
  border-left: 4px solid var(--primary);
  padding: 1.1em 1em;
  margin: var(--post-space-4) 0;
  box-shadow: 0 4px 10px var(--shadow);
  border-radius: 6px;
}

.callout p {
  max-width: none;
}

.definition-list li {
  margin-bottom: 0.6em;
}

/* Used by post-8 */
.key-concept {
  background-color: rgba(139, 90, 43, 0.1);
  border-left: 4px solid var(--primary);
  padding: 15px;
  margin: var(--post-space-4) 0;
  border-radius: 0 5px 5px 0;
}

.key-concept h4 {
  margin-top: 0;
  color: var(--primary);
}

.fund-type {
  background-color: rgba(123, 31, 162, 0.05);
  border: 1px dashed var(--accent);
  padding: 15px;
  margin: var(--post-space-4) 0;
  border-radius: 5px;
}

.fund-type h4 {
  color: var(--accent);
  margin-top: 0;
}

/* Used by post-7 calculator */
.calculator {
  max-width: 700px;
  margin: var(--post-space-4) auto;
  padding: 20px;
  border-radius: 8px;
  background: var(--light);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px var(--shadow);
}

.calculator label {
  display: inline-block;
  margin-bottom: 0.35rem;
}

.calculator input {
  width: 100%;
  padding: 8px;
  margin: 0 0 12px;
  border-radius: 4px;
  border: 1px solid var(--border);
  background-color: #fff8f0;
}

.calculator button {
  margin-top: 0.4rem;
  padding: 10px 15px;
  background-color: var(--primary);
  color: var(--light);
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
}

.calculator button:hover {
  background-color: var(--primary-light);
}

.calculator table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.calculator table,
.calculator th,
.calculator td {
  border: 1px solid var(--border);
}

.calculator th {
  background-color: var(--secondary);
  color: var(--light);
  text-align: center;
  padding: 6px;
}

.calculator td {
  background-color: #fff8f0;
  color: var(--dark);
  text-align: center;
  padding: 6px;
}

.calculator h4 {
  color: var(--accent);
  text-align: center;
}

