/* ═══════════════════════════════════════════════
   ARTICLE STYLES — Celeste Omsorg
   Used by content/article pages
   ═══════════════════════════════════════════════ */

/* ─── ARTICLE CONTENT ────────────────────────── */
.article-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 140px 32px 80px;
}
.article-wrap h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5vw, 52px);
  font-weight: 300;
  color: var(--midnight);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin-bottom: 20px;
}
.article-wrap h1 em { font-style: italic; color: var(--celestial); }
.article-intro {
  font-size: 17px; line-height: 1.8;
  color: #666; font-weight: 300;
  margin-bottom: 48px;
  max-width: 600px;
}
.article-wrap h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 400;
  color: var(--midnight);
  margin: 48px 0 16px;
  line-height: 1.2;
}
.article-wrap h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400;
  color: var(--midnight);
  margin: 36px 0 12px;
  line-height: 1.3;
}
.article-wrap p {
  font-size: 15px; line-height: 1.8;
  color: #555; font-weight: 300;
  margin-bottom: 16px;
}
.article-wrap a {
  color: var(--celestial);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(84,128,184,.3);
  transition: text-decoration-color .2s;
}
.article-wrap a:hover {
  text-decoration-color: var(--celestial);
}

/* ─── HIGHLIGHT BOX ──────────────────────────── */
.highlight-box {
  background: linear-gradient(135deg, var(--mist) 0%, rgba(212,228,244,.5) 100%);
  border-left: 4px solid var(--celestial);
  border-radius: 0 16px 16px 0;
  padding: 28px 32px;
  margin: 32px 0 40px;
}
.highlight-box p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--midnight);
  font-weight: 400;
  margin-bottom: 0;
}
.highlight-box strong {
  font-weight: 500;
}

/* ─── FAQ ────────────────────────────────────── */
.faq-section { margin: 48px 0; }
.faq-item {
  border-bottom: 1px solid rgba(59,90,138,.08);
  padding: 24px 0;
}
.faq-item:last-child { border-bottom: none; }
.faq-q {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px; font-weight: 400;
  color: var(--midnight);
  margin-bottom: 8px;
}
.faq-a {
  font-size: 14px; line-height: 1.8;
  color: #666; font-weight: 300;
}
.faq-a a {
  color: var(--celestial);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(84,128,184,.3);
  transition: text-decoration-color .2s;
}
.faq-a a:hover {
  text-decoration-color: var(--celestial);
}

/* ─── CTA STRIP ──────────────────────────────── */
.cta-strip {
  background: linear-gradient(170deg, #3B5A8A 0%, #4A6FA5 100%);
  border-radius: 20px;
  padding: 48px 40px;
  text-align: center;
  margin: 60px 0 0;
}
.cta-strip h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 300;
  color: var(--warm-white);
  margin: 0 0 8px;
}
.cta-strip p {
  font-size: 14px; color: var(--mist);
  opacity: .7; margin-bottom: 24px;
}
.cta-strip .btn-primary {
  background: var(--warm-white);
  color: var(--midnight);
}

/* ─── FOOTER OVERRIDE ────────────────────────── */
.footer-inner {
  max-width: 960px;
  margin: 0 auto;
}

/* ─── RESPONSIVE ─────────────────────────────── */
@media (max-width: 640px) {
  .article-wrap { padding: 120px 20px 60px; }
}

/* ─── PRINT ──────────────────────────────────── */
@media print {
  .topbar, .overlay, .cta-strip, .site-footer,
  .back-to-top, .skip-link { display: none !important; }
  .article-wrap { padding: 0; max-width: 100%; }
  .article-wrap h1 { font-size: 28px; }
  .article-wrap h2 { font-size: 22px; margin-top: 24px; }
  .article-wrap p, .faq-a { font-size: 12px; color: #333; }
  .highlight-box { border-left-color: #333; background: #f5f5f5; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #666; }
  .faq-item { break-inside: avoid; }
}