/* ── Ethics & Governance Series — shared article CSS ── */
/* Extends main hub.css — must be loaded after it */

.article-hero {
  background: var(--navy, #0A1628);
  padding: 80px 0 60px;
  position: relative;
  overflow: hidden;
}
.article-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0A1628 60%, #1B4F8A 100%);
  opacity: 0.97;
}
.article-hero-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 32px;
}
.article-series-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  color: #C8A94A;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.article-hero h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  color: #FFFFFF;
  line-height: 1.18;
  margin: 0 0 20px;
}
.article-hero .article-deck {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  color: #B8D8F5;
  line-height: 1.65;
  max-width: 680px;
  margin: 0 0 32px;
}
.article-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}
.article-meta span {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: #5BA8E8;
  letter-spacing: 0.08em;
}
.article-meta .meta-sep { color: #3A4A5C; }

/* ── Main content ── */
.article-body {
  max-width: 820px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.article-body p {
  font-family: 'Outfit', sans-serif;
  font-size: 1.05rem;
  color: #3A4A5C;
  line-height: 1.78;
  margin: 0 0 22px;
}
.article-body h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.65rem;
  color: #0A1628;
  margin: 48px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1B4F8A;
}
.article-body h3 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: #1B4F8A;
  font-style: italic;
  margin: 32px 0 12px;
}
.article-callout {
  background: #E8F2FB;
  border-left: 4px solid #1B4F8A;
  border-radius: 0 6px 6px 0;
  padding: 20px 24px;
  margin: 28px 0;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: #1B4F8A;
  line-height: 1.65;
  font-style: italic;
}
.article-refs {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 2px solid #C8A94A;
}
.article-refs h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.2rem;
  color: #0A1628;
  margin: 0 0 20px;
  border-bottom: none;
  padding-bottom: 0;
}
.ref-item {
  display: flex;
  gap: 14px;
  margin-bottom: 10px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.88rem;
  color: #3A4A5C;
  line-height: 1.55;
}
.ref-item .ref-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  color: #1B4F8A;
  font-weight: 700;
  min-width: 32px;
  padding-top: 1px;
}
.ref-item a { color: #2E7BC4; text-decoration: none; }
.ref-item a:hover { text-decoration: underline; }

/* ── Series nav ── */
.series-nav {
  background: #F8FAFC;
  border-top: 1px solid #B8D8F5;
  padding: 40px 32px;
}
.series-nav-inner {
  max-width: 820px;
  margin: 0 auto;
}
.series-nav h3 {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: #C8A94A;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 20px;
}
.series-nav-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.series-nav-card {
  background: #FFFFFF;
  border: 1px solid #B8D8F5;
  border-radius: 6px;
  padding: 14px 16px;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.series-nav-card:hover {
  border-color: #1B4F8A;
  box-shadow: 0 2px 8px rgba(27,79,138,0.1);
}
.series-nav-card.current {
  border-color: #C8A94A;
  background: #F8FAFC;
}
.series-nav-card .card-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  color: #C8A94A;
  display: block;
  margin-bottom: 6px;
}
.series-nav-card .card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  color: #0A1628;
  line-height: 1.4;
}
.series-nav-card.current .card-title { color: #1B4F8A; font-weight: 600; }

/* ── FAQ specific ── */
.faq-group { margin-bottom: 48px; }
.faq-group-title {
  font-family: 'DM Serif Display', serif;
  font-size: 1.4rem;
  color: #0A1628;
  margin: 0 0 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1B4F8A;
}
details.faq-item {
  border: 1px solid #B8D8F5;
  border-radius: 6px;
  margin-bottom: 10px;
  overflow: hidden;
}
details.faq-item summary {
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: #0A1628;
  font-weight: 600;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  transition: background 0.15s;
}
details.faq-item summary:hover { background: #E8F2FB; }
details.faq-item summary::after {
  content: '+';
  font-size: 1.3rem;
  color: #1B4F8A;
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 16px;
}
details.faq-item[open] summary::after { content: '−'; }
details.faq-item[open] summary { background: #E8F2FB; color: #1B4F8A; }
.faq-answer {
  padding: 16px 20px 20px;
  background: #F8FAFC;
  border-top: 1px solid #B8D8F5;
  font-family: 'Outfit', sans-serif;
  font-size: 0.97rem;
  color: #3A4A5C;
  line-height: 1.72;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
.faq-answer a { color: #2E7BC4; }

@media (max-width: 640px) {
  .article-hero { padding: 56px 0 40px; }
  .article-body { padding: 36px 20px 56px; }
  .series-nav { padding: 32px 20px; }
}