/* ===== LONG-FORM EDUCATIONAL CONTENT BLOCKS ===== */
/* Shared styling for per-calculator educational sections: formulas, examples, */
/* data tables, rule callouts, glossary, related calcs, FAQ, assumptions.      */

.calc-content {
  max-width: 880px;
  margin: var(--space-12) auto 0;
  padding: 0 var(--space-4);
}
.calc-content > section { margin-bottom: var(--space-12); }
.calc-content h2 {
  font-size: clamp(1.4rem, 2.8vw, 1.75rem);
  font-weight: 800;
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--c-border);
  color: var(--c-text);
}
.calc-content h3 {
  font-size: 1.125rem;
  font-weight: 700;
  margin: var(--space-6) 0 var(--space-3);
  color: var(--c-text);
}
.calc-content p { color: var(--c-text2); line-height: 1.7; margin-bottom: var(--space-4); }
.calc-content ul, .calc-content ol { color: var(--c-text2); padding-left: var(--space-6); margin-bottom: var(--space-4); }
.calc-content li { margin-bottom: var(--space-2); line-height: 1.65; }
.calc-content li strong { color: var(--c-text); }

/* ===== FORMULA BLOCK ===== */
.formula-block {
  background: linear-gradient(135deg, var(--c-primary-l) 0%, var(--c-bg2) 100%);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary);
  border-radius: var(--r-md);
  padding: var(--space-5) var(--space-6);
  margin: var(--space-4) 0;
}
.formula-block .formula {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--c-primary);
  text-align: center;
  padding: var(--space-3) 0;
  word-break: break-word;
}
.formula-block .vars { margin-top: var(--space-3); }
.formula-block .vars li { color: var(--c-text2); font-size: 0.95rem; }
.formula-block .vars code { font-family: var(--font-mono); color: var(--c-primary); background: var(--c-bg); padding: 1px 6px; border-radius: 4px; }

/* ===== RULE-OF-THUMB CALLOUT ===== */
.rule-callout {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin: var(--space-4) 0;
}
.rule-callout .rule-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--c-accent);
  margin-bottom: var(--space-2);
  display: flex; align-items: center; gap: var(--space-2);
}
.rule-callout .rule-title::before { content: '💡'; font-size: 1.125rem; }
.rule-callout p { color: var(--c-text2); margin-bottom: 0; font-size: 0.95rem; }

/* ===== GENERIC CALLOUT ===== */
.callout {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-text3);
  border-radius: var(--r-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0;
  font-size: 0.95rem;
}
.callout.info    { border-left-color: var(--c-primary); }
.callout.warning { border-left-color: var(--c-warning); }
.callout.success { border-left-color: var(--c-accent); }
.callout.danger  { border-left-color: var(--c-danger); }
.callout strong { color: var(--c-text); }

/* ===== WORKED EXAMPLE ===== */
.worked-example {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--space-6);
  margin: var(--space-4) 0;
  box-shadow: var(--shadow-sm);
}
.worked-example .example-title {
  font-weight: 700;
  color: var(--c-primary);
  margin-bottom: var(--space-3);
  font-size: 1rem;
}
.worked-example .example-title::before { content: '📘 '; }
.worked-example .step {
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--c-border);
}
.worked-example .step:last-of-type { border-bottom: none; }
.worked-example .answer {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 2px solid var(--c-primary);
  font-weight: 700;
  color: var(--c-primary);
  font-size: 1.1rem;
}

/* ===== DATA / REFERENCE TABLE ===== */
.data-table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--c-card);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
.data-table th, .data-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--c-border);
}
.data-table th {
  background: var(--c-bg2);
  font-weight: 700;
  color: var(--c-text);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-table td { color: var(--c-text2); }
.data-table tr:hover td { background: var(--c-bg2); }
.data-table td.num, .data-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.highlight td { background: var(--c-primary-l); font-weight: 600; color: var(--c-text); }

/* ===== GLOSSARY ===== */
.glossary { display: grid; gap: var(--space-4); }
.glossary dt {
  font-weight: 700;
  color: var(--c-text);
  font-size: 0.95rem;
  margin-bottom: var(--space-1);
}
.glossary dd {
  color: var(--c-text2);
  font-size: 0.925rem;
  margin-bottom: var(--space-3);
  padding-left: var(--space-4);
  border-left: 2px solid var(--c-border);
}

/* ===== RELATED CALCULATORS ===== */
.related-calcs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-3);
}
.related-calcs a {
  display: block;
  padding: var(--space-4);
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--c-text);
  transition: all var(--transition);
}
.related-calcs a:hover {
  border-color: var(--c-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
  color: var(--c-primary);
}
.related-calcs a .rc-icon { font-size: 1.25rem; margin-right: var(--space-2); }
.related-calcs a .rc-desc {
  display: block;
  font-size: 0.8rem;
  color: var(--c-text3);
  margin-top: 4px;
}

/* ===== ASSUMPTIONS / METHODOLOGY BOX ===== */
.assumptions-box {
  background: var(--c-bg2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--space-5);
  margin: var(--space-4) 0;
  font-size: 0.925rem;
}
.assumptions-box .assumptions-title {
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: var(--space-3);
  display: flex; align-items: center; gap: var(--space-2);
}
.assumptions-box .assumptions-title::before { content: '🔬'; }
.assumptions-box ul { padding-left: var(--space-5); margin: 0; }
.assumptions-box li { font-size: 0.9rem; margin-bottom: var(--space-1); color: var(--c-text2); }
.source-cite {
  font-size: 0.825rem;
  color: var(--c-text3);
  font-style: italic;
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px dashed var(--c-border);
}

/* ===== CONTENT FAQ (visible, accordion) ===== */
.content-faq .faq-item {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  margin-bottom: var(--space-3);
  background: var(--c-card);
  overflow: hidden;
}
.content-faq .faq-question {
  width: 100%;
  text-align: left;
  padding: var(--space-4) var(--space-5);
  background: transparent;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
}
.content-faq .faq-question:hover { background: var(--c-bg2); }
.content-faq .faq-chevron { transition: transform var(--transition); color: var(--c-text3); flex-shrink: 0; }
.content-faq .faq-item.open .faq-chevron { transform: rotate(180deg); }
.content-faq .faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow), padding var(--transition-slow);
  padding: 0 var(--space-5);
}
.content-faq .faq-item.open .faq-answer {
  max-height: 600px;
  padding: 0 var(--space-5) var(--space-5);
}
.content-faq .faq-answer p { color: var(--c-text2); font-size: 0.95rem; line-height: 1.65; }
.content-faq .faq-answer p:last-child { margin-bottom: 0; }

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  .calc-content { padding: 0 var(--space-3); margin-top: var(--space-8); }
  .calc-content > section { margin-bottom: var(--space-8); }
  .formula-block .formula { font-size: 1rem; }
  .data-table th, .data-table td { padding: var(--space-2) var(--space-3); font-size: 0.875rem; }
  .related-calcs { grid-template-columns: 1fr; }
}