/* PMC blog theme overrides: align blog pages with index.html visual language */
:root {
  --pmc-shell:#edf1f7;
  --pmc-surface:#f7f9fd;
  --pmc-surface-2:#f1f5fc;
  --pmc-line:#d7dfef;
  --pmc-text:#2f3f60;
  --pmc-muted:#6f7f9e;
  --pmc-navy:#1b2a52;
  --pmc-navy-deep:#111c3a;
  --pmc-coral:#e8654a;
  --pmc-coral-soft:#fbe3dd;
  --pmc-green:#2ecc8f;
}

body {
  background:linear-gradient(180deg, #eef2f8 0%, #f6f8fd 52%, #eef2f8 100%);
  color:var(--pmc-text);
}

nav {
  border-bottom:1px solid var(--pmc-line);
  background:rgba(255,255,255,0.96);
}

/* Hero: match the bold navy/coral PMC mood */
.blog-hero {
  padding:calc(126px + var(--blog-banner-height)) 24px 58px;
  border-bottom:0;
  background:
    radial-gradient(circle at 15% 10%, rgba(46,204,143,0.16) 0%, rgba(46,204,143,0) 34%),
    radial-gradient(circle at 88% 12%, rgba(232,101,74,0.18) 0%, rgba(232,101,74,0) 36%),
    linear-gradient(132deg, #081a3b 0%, #10244a 46%, #1c3567 100%);
}

.blog-hero::before {
  background:linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
}

.hero-inner {
  max-width:1180px;
  padding:8px 0 0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  backdrop-filter:none;
}

.hero-inner::after {
  display:none;
}

.back-link {
  color:rgba(255,255,255,0.78);
}

.back-link:hover {
  color:#ffffff;
}

.back-link span {
  color:var(--pmc-coral);
}

.label-pill {
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.18);
  color:#d7e0f2;
}

.blog-hero h1 {
  color:#ffffff;
  max-width:960px;
  letter-spacing:-0.03em;
}

.blog-hero h1 .hl {
  color:#35d59d;
}

.hero-sub {
  color:rgba(226,235,255,0.88);
  max-width:880px;
}

.meta-item {
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.16);
  color:rgba(220,232,255,0.8);
  box-shadow:none;
}

.meta-item span {
  color:#ffffff;
}

.btn-primary {
  background:var(--pmc-coral);
  box-shadow:0 12px 26px rgba(232,101,74,0.32);
}

.btn-primary:hover {
  background:#f1795e;
}

.btn-ghost {
  color:#ffffff;
  border-color:rgba(255,255,255,0.52);
}

.btn-ghost:hover {
  color:var(--pmc-navy);
  background:#ffffff;
}

/* Content shell */
.article-wrap {
  padding:42px 24px 86px;
}

.article-grid {
  max-width:1240px;
  gap:24px;
}

.article-card {
  background:#ffffff;
  border:1px solid var(--pmc-line);
  border-radius:22px;
  box-shadow:0 12px 34px rgba(17,28,58,0.08);
  padding:2.15rem 2rem;
}

.article {
  max-width:80ch;
}

.article p,
.article li,
.article td {
  color:#415172;
}

.article h2,
.article h3 {
  color:var(--pmc-navy);
}

.article h2 {
  margin-top:1.75rem;
}

.article .meta {
  color:#647392;
  border-bottom:1px solid #e2e8f5;
}

.article a {
  color:var(--pmc-coral);
}

.callout,
.article .vbox,
.article .warn,
.article .good,
blockquote,
.article .cta {
  border-radius:14px;
  border:1px solid #dbe3f2;
  border-left-width:4px;
  box-shadow:0 6px 18px rgba(17,28,58,0.05);
}

.callout,
.article .vbox,
blockquote,
.article .cta {
  background:linear-gradient(180deg, #f7f9fd 0%, #f2f6fc 100%);
}

.article .warn {
  background:#fff8ec;
  border-color:#f2d9aa;
}

.article .good {
  background:#effbf6;
  border-color:#bcead8;
}

.article .tbl th {
  background:#eef3fb;
}

.article .tbl td {
  background:#ffffff;
}

.article .tbl tr:nth-child(even) td {
  background:#f8faff;
}

.article .price-grid,
.article .stats,
.stat-row,
.table-scroll {
  border-radius:16px;
}

.article .price-card,
.article .stat,
.stat {
  padding:1.1rem;
}

.article .price-card.featured {
  background:linear-gradient(135deg, #fbe8e3 0%, #f6f9ff 100%);
  border:1px solid #f2b7a9;
}

/* Sidebar */
.article-grid aside {
  top:calc(108px + var(--blog-banner-height));
}

.toc,
.side-card {
  border-radius:18px;
  border:1px solid var(--pmc-line);
  box-shadow:0 10px 28px rgba(17,28,58,0.08);
  background:linear-gradient(180deg, #ffffff 0%, #f8faff 100%);
}

.toc a {
  color:#5a6a89;
}

.toc a:hover {
  background:#eef3fb;
  border-color:#d7e0f0;
}

.toc a.is-active {
  color:var(--pmc-navy);
  background:#eaf0fb;
  border-color:#d1dbef;
}

/* Related resources section should feel like index cards */
.related {
  border-top:1px solid var(--pmc-line);
  background:var(--pmc-shell);
}

.sec-inner {
  padding:66px 24px 74px;
}

.section-label {
  background:var(--pmc-coral-soft);
  border-color:#f5c9bf;
  color:var(--pmc-coral);
}

.section-title {
  color:var(--pmc-navy);
}

.section-sub {
  color:#586786;
}

.blog-grid {
  gap:22px;
  margin-top:2rem;
}

.blog-card {
  background:#ffffff;
  border:1px solid var(--pmc-line);
  border-radius:18px;
  box-shadow:0 10px 24px rgba(17,28,58,0.06);
}

.blog-card:hover {
  background:#ffffff;
  border-color:#f2b9ab;
  box-shadow:0 18px 34px rgba(17,28,58,0.11);
}

.blog-tag {
  background:#fff1ee;
  border-color:#f4c7be;
  color:var(--pmc-coral);
}

.blog-title {
  color:var(--pmc-navy);
}

.blog-excerpt {
  color:#556584;
}

.blog-meta {
  color:#7383a1;
}

.blog-arrow {
  color:var(--pmc-coral);
}

footer {
  background:linear-gradient(180deg, #17284f 0%, #111c3a 100%);
}

@media (max-width: 1100px) {
  .article-wrap {
    padding-top:36px;
  }

  .article-card {
    padding:1.8rem 1.5rem;
  }

  .sec-inner {
    padding-top:58px;
    padding-bottom:64px;
  }
}

@media (max-width: 900px) {
  .blog-hero {
    padding-top:calc(116px + var(--blog-banner-height));
    padding-bottom:44px;
  }

  .article-wrap {
    padding-top:30px;
    padding-bottom:68px;
  }
}

@media (max-width: 700px) {
  .blog-hero,
  .article-wrap,
  .sec-inner,
  footer {
    padding-left:16px;
    padding-right:16px;
  }

  .blog-hero h1 {
    font-size:clamp(1.95rem, 9vw, 2.9rem);
  }

  .hero-sub {
    font-size:1rem;
  }

  .article-card {
    border-radius:16px;
    padding:1.5rem 1rem;
  }

  .sec-inner {
    padding-top:48px;
    padding-bottom:52px;
  }
}