/* ============================================================
   Scalarly content theme: elevates the Knowledge Hub, Blog,
   Case Studies and FAQ pages to the /pentest/ and /services/
   landing-page design language (sv-* system), without changing
   their HTML. Applied by scripts/inject_content_theme.css.py to
   every content page, injected just before </head> so these rules
   win over each page's own inline <style>.
   Palette: navy #02111B, accent #007EA7, ink #1f2937, body #374151.
   ============================================================ */

/* ---------- Shared heroes: one navy treatment with accent dots ---------- */
.ph-hero,
.kh-hero,
.blog-hero,
.blog-index-hero,
.cs-hero,
.cs-index-hero,
.faq-hero {
  background-color: #02111B !important;
  background-image:
    radial-gradient(circle at 10% 28%, rgba(0,126,167,0.35) 4px, transparent 5px),
    radial-gradient(circle at 88% 20%, rgba(255,255,255,0.05) 4px, transparent 5px),
    radial-gradient(circle at 24% 82%, rgba(255,255,255,0.04) 3px, transparent 4px),
    radial-gradient(circle at 80% 76%, rgba(0,126,167,0.25) 3px, transparent 4px) !important;
  position: relative;
}

/* article heroes a touch more generous */
.ph-hero, .blog-hero, .cs-hero { padding: 150px 0 64px !important; }
.kh-hero, .blog-index-hero, .cs-index-hero, .faq-hero { padding: 140px 0 72px !important; }

/* hero headings: bigger, HK Grotesk, crisp white */
.ph-hero h1,
.blog-hero h1,
.cs-hero h1 {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  font-size: 2.85rem !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
  max-width: 880px;
  margin-bottom: 1.1rem !important;
}
.kh-hero h1,
.blog-index-hero h1,
.cs-index-hero h1,
.faq-hero h1 {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  font-size: 3.3rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  color: #fff !important;
}
.kh-hero p, .blog-index-hero p, .cs-index-hero p, .faq-hero p {
  font-size: 1.15rem !important;
  color: rgba(255,255,255,0.72) !important;
  opacity: 1 !important;
}

/* hero eyebrow chips (category / industry tags) */
.blog-category-tag,
.industry-tag {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 2px !important;
  font-size: 0.7rem !important;
  color: #7fd3ec !important;
  background: rgba(0,126,167,0.18) !important;
  border: 1px solid rgba(0,126,167,0.5) !important;
  border-radius: 0 !important;
  padding: 6px 14px !important;
}
.blog-meta, .cs-meta, .ph-meta { color: rgba(255,255,255,0.6) !important; }

/* back links inside heroes stay legible */
.blog-hero a[href="/blog/"], .cs-hero a, .ph-hero .ph-meta a { color: rgba(255,255,255,0.75) !important; }

/* ---------- Body typography ---------- */
.ph-content p, .ph-content li,
.blog-body p, .blog-body li,
.cs-section p, .cs-section li {
  color: #374151 !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
}
.ph-content h2, .blog-body h2 {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  color: #02111B !important;
  font-size: 1.7rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.005em;
  margin: 2.75rem 0 1.1rem !important;
}
.ph-content h3, .blog-body h3 {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  color: #1f2937 !important;
  font-size: 1.2rem !important;
}

/* callouts to the accent-left style */
.ph-callout, .pillar-callout {
  background: #f8fafc !important;
  border-left: 4px solid #007EA7 !important;
  border-radius: 0 !important;
  padding: 1.25rem 1.5rem !important;
}

/* sticky TOC refinement (KH guides) */
.ph-toc h4 { letter-spacing: 2px !important; color: #6b7280 !important; }
.ph-toc ul li a:hover { color: #007EA7 !important; }

/* ---------- Cards: lift + shadow + accent on hover ---------- */
.kh-card, #case-studies-grid .card, .card.h-100 {
  border: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease !important;
}
.kh-card:hover, #case-studies-grid .card:hover, .card.h-100:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 30px -10px rgba(2,17,27,0.16) !important;
  border-color: #007EA7 !important;
}
.kh-card-img { background: #f8fafc !important; border-bottom: 1px solid #e5e7eb !important; }
.kh-tag, .cs-industry-label, .cs-svc-tag { letter-spacing: 1.6px !important; }
.kh-tag, .cs-industry-label { color: #007EA7 !important; }

/* related-reading inline cards (KH guides / xlink engine blocks) */
.ph-content a[style*="border:1px solid #ddd"]:hover { border-color: #007EA7 !important; }

/* ---------- Buttons: sharp, uppercase, accent ---------- */
.btn-book,
.btn-outline-dark.btn-book {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
}
/* primary CTAs in the dark CTA bands */
.ph-cta .btn, .blog-cta .btn, .cs-cta .btn-book, .faq-cta .btn-book, .kh-cta .btn {
  border-radius: 0 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
}
.ph-cta .btn-light, .blog-cta .btn-light {
  background: #007EA7 !important;
  color: #fff !important;
  border: 2px solid #007EA7 !important;
}
.ph-cta .btn-light:hover, .blog-cta .btn-light:hover { background: #006688 !important; border-color: #006688 !important; }

/* filter buttons (KH / blog index) */
.kh-filter-btn { border-radius: 0 !important; }
.kh-filter-btn.active { background: #02111B !important; border-color: #02111B !important; }

/* ---------- CTA bands: unify to navy with accent dots ---------- */
.ph-cta, .kh-cta, .blog-cta, .cs-cta, .faq-cta {
  background-color: #02111B !important;
  background-image:
    radial-gradient(circle at 10% 30%, rgba(0,126,167,0.4) 4px, transparent 5px),
    radial-gradient(circle at 90% 22%, rgba(255,255,255,0.05) 4px, transparent 5px),
    radial-gradient(circle at 82% 78%, rgba(0,126,167,0.28) 3px, transparent 4px) !important;
  position: relative;
}
.ph-cta .container, .kh-cta .container, .blog-cta .container,
.cs-cta .container, .faq-cta .container { position: relative; z-index: 1; }
.ph-cta h2, .kh-cta h2, .blog-cta h2, .cs-cta h2, .faq-cta h2 {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif !important;
  text-transform: uppercase !important;
  color: #fff !important;
}

/* ---------- Case study results + takeaways ---------- */
.cs-results { background: #f8fafc !important; }
.result-number { color: #007EA7 !important; font-family: 'HKGrotesk-Bold', -apple-system, sans-serif !important; }
.cs-takeaways { border-left: 3px solid #007EA7 !important; }

/* ---------- FAQ accent ---------- */
.faq-icon { color: #007EA7 !important; }

/* ---------- Responsive tightening ---------- */
@media (max-width: 767px) {
  .ph-hero h1, .blog-hero h1, .cs-hero h1 { font-size: 2rem !important; }
  .kh-hero h1, .blog-index-hero h1, .cs-index-hero h1, .faq-hero h1 { font-size: 2.1rem !important; }
  .ph-hero, .blog-hero, .cs-hero { padding: 120px 0 48px !important; }
}