/* ==========================================================================
   BLOG POST — SUBSTACK-STYLE LIGHT THEME
   Loaded after styles.css on all /post/ pages.
   Hero stays dark; article body + related section switch to white.
   Uses !important to override inline <style> blocks in each post file.
   ========================================================================== */

/* ---------- PAGE BACKGROUND ---------- */
body:has(.article-body) {
  background: #ffffff !important;
}

/* Ensure footer stays dark */
.footer {
  background: var(--black-deep) !important;
}

/* ---------- ARTICLE BODY — LIGHT BACKGROUND ---------- */
.article-body {
  background: #ffffff !important;
  color: #1a1a1a !important;
  padding: 2.5rem 1.5rem 2rem;
  max-width: 780px;
  margin: 0 auto;
}

.article-body p {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #374151 !important;
  margin-bottom: 1.75rem;
}

.article-body h2 {
  color: #111827 !important;
  margin-top: 3.5rem;
  margin-bottom: 1.25rem;
}

.article-body h3 {
  color: #111827 !important;
}

.article-body strong {
  color: #111827 !important;
  font-weight: 600;
}

.article-body ul,
.article-body ol {
  padding-left: 1.5rem;
  margin-bottom: 1.75rem;
}

.article-body li {
  font-size: 1.1rem;
  line-height: 1.85;
  color: #374151 !important;
  margin-bottom: 0.5rem;
}

.article-body a {
  color: #2563eb !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.article-body a:hover {
  color: #8F74CE !important;
}

/* ---------- PULL QUOTE ---------- */
.pull-quote {
  margin: 3rem 0;
  padding: 2rem 0;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.pull-quote__text {
  color: #111827 !important;
}

/* ---------- HIGHLIGHT BOX ---------- */
.highlight-box {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-left: 3px solid #53CAFC !important;
  border-radius: 4px;
  padding: 1.75rem 2rem;
  margin: 2.5rem 0;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.highlight-box__label {
  color: #53CAFC !important;
}

.highlight-box p {
  color: #374151 !important;
  margin-bottom: 0;
}

/* ---------- SECTION DIVIDER ---------- */
.section-divider {
  background: linear-gradient(90deg, transparent, #e5e7eb 20%, #e5e7eb 80%, transparent) !important;
}

/* ---------- AUTHOR CARD ---------- */
.author-card {
  background: #ffffff !important;
}

.author-card__inner {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
}

.author-card__name {
  color: #111827 !important;
}

.author-card__role {
  color: #6b7280 !important;
}

.author-card__avatar {
  background: #0f1218 !important;
  background-image: url('/logos/blazon-logo.svg') !important;
  background-size: 70% auto !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  border: 1px solid #e5e7eb !important;
}

/* ---------- BREADCRUMBS ---------- */
.article-breadcrumbs {
  padding: 0 !important;
  margin: 0 0 1.5rem !important;
  font-size: 0.78rem;
  color: #9ca3af;
  letter-spacing: 0.01em;
}

.article-breadcrumbs a {
  color: #6b7280 !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-breadcrumbs a:hover {
  color: #2563eb !important;
}

.article-breadcrumbs__sep {
  margin: 0 0.4rem;
  color: #d1d5db;
}

/* Current page in breadcrumbs — subtle */
.article-breadcrumbs > span:last-child {
  color: #9ca3af !important;
}

/* ---------- RELATED ARTICLES — LIGHT ---------- */
.related {
  background: #ffffff !important;
}

.related__title {
  color: #6b7280 !important;
}

.related__card {
  background: #f8f9fa !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 4px;
  padding: 1.5rem;
  text-decoration: none;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.related__card:hover {
  border-color: #d1d5db !important;
  background: #f3f4f6 !important;
}

.related__card-tag {
  color: #53CAFC !important;
}

.related__card-title {
  color: #111827 !important;
}

.related__card-excerpt {
  color: #6b7280 !important;
}

/* ---------- SERVICE BANNER (bottom CTA) ---------- */
.service-banner {
  background: #ffffff !important;
  border-top: 1px solid #e5e7eb !important;
  border-bottom: 1px solid #e5e7eb !important;
  max-width: 780px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

.service-banner__label {
  color: #53CAFC !important;
}

.service-banner__sep {
  background: #d1d5db !important;
}

.service-banner__text {
  color: #374151 !important;
}

.service-banner__link {
  color: #111827 !important;
}

.service-banner__link:hover {
  color: #53CAFC !important;
}

/* ---------- CTA SECTION — stays dark ---------- */
.cta {
  background: var(--black-deep) !important;
}

.cta__title,
.cta__sub {
  color: #fff !important;
}

/* ---------- CONTACT SECTION — stays dark ---------- */
#contact,
.contact {
  background: var(--black-deep) !important;
}

/* ---------- DOCK (floating nav) stays dark ---------- */
.dock {
  /* Keep original dark styling */
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 768px) {
  .article-body {
    padding: 2rem 1.25rem 2rem;
  }

  .article-breadcrumbs {
    margin: 0 0 1rem !important;
  }

  .related {
    padding: 3rem 1.25rem;
  }
}