/* =================================================================
   CYBERSILO — BLOG CONTENT SUPPLEMENTARY STYLES
   File    : blog-content-styles.css
   Purpose : Styles for blog/compliance article body classes that are
             NOT present in compliance.css. Add this file AFTER
             compliance.css. Do NOT duplicate anything from compliance.css.
   Classes : .intro-section · .callout-box · .data-table family ·
             .process-list family · .blog-cta family · .blog-conclusion
   ================================================================= */


/* ================================================================
   1. INTRO SECTION
   Usage:
     <div class="intro-section">
       <p>Opening paragraph...</p>
     </div>
   ================================================================ */
.intro-section {
  max-width: 860px;
  margin: 56px auto 48px;
  padding: 36px 44px;
  background: #ffffff;
  border-left: 4px solid var(--cs-blue, #2b749e);
  border-radius: 0 14px 14px 0;
  box-shadow: 0 4px 24px rgba(43, 116, 158, 0.08);
  position: relative;
}
.intro-section::before {
  content: '\201C';
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 6rem;
  line-height: 1;
  color: rgba(43, 116, 158, 0.12);
  font-family: Georgia, serif;
  pointer-events: none;
}
.intro-section p {
  font-size: 1.08rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.85;
  margin: 0;
}


/* ================================================================
   2. CALLOUT BOX  (Key Takeaways)
   Usage:
     <div class="callout-box">
       <p><strong>Key Takeaways</strong></p>
       <ul>
         <li>...</li>
       </ul>
     </div>
   ================================================================ */
.callout-box {
  max-width: 860px;
  margin: 0 auto 52px;
  padding: 32px 36px 28px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f3fb 100%);
  border: 1px solid rgba(43, 116, 158, 0.22);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.callout-box::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee));
}
.callout-box p {
  margin: 0 0 16px;
}
.callout-box p strong {
  font-size: 1rem;
  font-weight: 800;
  color: var(--cs-blue, #2b749e);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout-box p strong::before {
  content: '';
  display: inline-block;
  width: 18px; height: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232b749e'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20A10 10 0 0 0 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E") center/contain no-repeat;
  flex-shrink: 0;
}
.callout-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callout-box ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.7;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  border: 1px solid rgba(43, 116, 158, 0.1);
}
.callout-box ul li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee));
  color: #fff;
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}


/* ================================================================
   3. DATA TABLE  (Comparison / Framework tables)
   Usage:
     <div class="data-table">
       <div class="table-header">
         <div class="cell">Col A</div>
         <div class="cell">Col B</div>
       </div>
       <div class="table-row">
         <div class="cell">...</div>
         <div class="cell cell-rating">
           <span class="rating-badge high">High</span>
         </div>
       </div>
     </div>
   ================================================================ */
.data-table {
  max-width: 860px;
  margin: 32px auto 48px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--cs-border, #e2e8f0);
  box-shadow: 0 4px 24px rgba(43, 116, 158, 0.07);
}
.data-table .table-header {
  display: flex;
  background: linear-gradient(135deg, var(--cs-navy, #050c1a) 0%, var(--cs-navy2, #0a1f3c) 100%);
}
.data-table .table-header .cell {
  flex: 1;
  padding: 16px 20px;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--cs-cyan, #00b0ee);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.data-table .table-header .cell:last-child {
  border-right: none;
}
.data-table .table-row {
  display: flex;
  border-top: 1px solid var(--cs-border, #e2e8f0);
  transition: background 0.2s;
}
.data-table .table-row:nth-child(even) {
  background: #f8fbfd;
}
.data-table .table-row:hover {
  background: #eef4f9;
}
.data-table .table-row .cell {
  flex: 1;
  padding: 15px 20px;
  font-size: 0.88rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.6;
  border-right: 1px solid var(--cs-border, #e2e8f0);
  display: flex;
  align-items: center;
}
.data-table .table-row .cell:first-child {
  font-weight: 700;
  color: var(--cs-text, #1a365d);
  background: rgba(43, 116, 158, 0.03);
}
.data-table .table-row .cell:last-child {
  border-right: none;
}
/* Cell with a rating badge */
.data-table .cell-rating {
  justify-content: flex-start;
}
/* Rating badges */
.rating-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rating-badge.high {
  background: linear-gradient(135deg, #065f46, #10b981);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.35);
}
.rating-badge.medium {
  background: linear-gradient(135deg, #b45309, #f59e0b);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}
.rating-badge.low {
  background: linear-gradient(135deg, #be123c, #f43f5e);
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(244, 63, 94, 0.35);
}


/* ================================================================
   4. PROCESS LIST  (Step-by-step numbered guide)
   Usage:
     <div class="process-list">
       <div class="process-item">
         <div class="process-header">
           <div class="process-step">1</div>
           <h3 class="process-title">Step Title</h3>
         </div>
         <p>Description...</p>
       </div>
     </div>
   ================================================================ */
.process-list {
  max-width: 860px;
  margin: 32px auto 52px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
}
/* Vertical connector line */
.process-list::before {
  content: '';
  position: absolute;
  left: 26px;
  top: 52px;
  bottom: 52px;
  width: 2px;
  background: linear-gradient(to bottom, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee));
  opacity: 0.25;
  pointer-events: none;
}
.process-item {
  background: #ffffff;
  border: 1px solid var(--cs-border, #e2e8f0);
  border-radius: 16px;
  padding: 28px 32px 28px 28px;
  position: relative;
  transition: all 0.3s ease;
  box-shadow: 0 2px 12px rgba(43, 116, 158, 0.05);
}
.process-item:hover {
  transform: translateX(6px);
  border-color: rgba(43, 116, 158, 0.3);
  box-shadow: 0 8px 32px rgba(43, 116, 158, 0.12);
}
.process-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee));
  border-radius: 4px 0 0 4px;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}
.process-item:hover::before { transform: scaleY(1); }
.process-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 14px;
}
.process-step {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--cs-blue, #2b749e), var(--cs-navy2, #0a1f3c));
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 4px 14px rgba(43, 116, 158, 0.4);
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.process-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--cs-text, #1a365d);
  margin: 0;
  line-height: 1.3;
}
.process-item > p {
  font-size: 0.92rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.8;
  margin: 0;
  padding-left: 62px;
}


/* ================================================================
   5. BLOG CTA  (Inline CTA boxes inside content)
   Usage:
     <div class="blog-cta">
       <div class="cta-content">
         <h3>Headline</h3>
         <p>Supporting copy...</p>
         <div class="cta-buttons">
           <a href="/contact" class="cta-btn primary">Primary</a>
           <a href="/solutions" class="cta-btn secondary">Secondary</a>
         </div>
       </div>
     </div>
   ================================================================ */
.blog-cta {
  max-width: 860px;
  margin: 52px auto;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(135deg, #050c1a 0%, #0a1f3c 50%, #0d2848 100%);
  position: relative;
}
.blog-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 50%, rgba(0, 176, 238, 0.12) 0%, transparent 50%),
    radial-gradient(circle at 85% 20%, rgba(176, 53, 56, 0.10) 0%, transparent 45%);
  pointer-events: none;
}
/* Animated top border */
.blog-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(to right, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee), var(--cs-red, #b03538));
}
.cta-content {
  position: relative;
  z-index: 1;
  padding: 48px 52px;
  text-align: center;
}
.cta-content h3 {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px;
  line-height: 1.25;
}
.cta-content p {
  font-size: 0.97rem;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.75;
  margin: 0 auto 28px;
  max-width: 620px;
}
.cta-buttons {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
/* Primary CTA button */
.cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 30px;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.cta-btn.primary {
  background: linear-gradient(135deg, var(--cs-blue, #2b749e), var(--cs-blue2, #1a5276));
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(43, 116, 158, 0.55);
}
.cta-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(43, 116, 158, 0.75);
  color: #ffffff;
  text-decoration: none;
}
.cta-btn.secondary {
  background: rgba(255, 255, 255, 0.09);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.28);
}
.cta-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.17);
  border-color: rgba(255, 255, 255, 0.55);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
}


/* ================================================================
   6. BLOG CONCLUSION  (Final summary block)
   Usage:
     <div class="blog-conclusion">
       <h2>Our Conclusion &amp; Recommendation</h2>
       <div class="conclusion-divider"></div>
       <p>...</p>
       <p>...</p>
       <!-- optional nested .blog-cta -->
     </div>
   ================================================================ */
.blog-conclusion {
  max-width: 860px;
  margin: 60px auto 72px;
  padding: 44px 48px;
  background: #ffffff;
  border: 1px solid var(--cs-border, #e2e8f0);
  border-radius: 18px;
  box-shadow: 0 8px 40px rgba(43, 116, 158, 0.09);
  position: relative;
  overflow: hidden;
}
.blog-conclusion::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 4px;
  background: linear-gradient(to right, var(--cs-blue, #2b749e), var(--cs-red, #b03538));
}
.blog-conclusion h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.8rem);
  font-weight: 800;
  color: var(--cs-text, #1a365d);
  margin: 0 0 18px;
  line-height: 1.25;
}
.conclusion-divider {
  width: 56px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--cs-blue, #2b749e), var(--cs-red, #b03538));
  margin: 0 0 26px;
}
.blog-conclusion > p {
  font-size: 0.95rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.85;
  margin: 0 0 18px;
}
.blog-conclusion > p:last-of-type { margin-bottom: 36px; }
/* Nested CTA inside conclusion — override margins */
.blog-conclusion .blog-cta {
  margin: 28px 0 0;
}


/* ================================================================
   7. GENERAL PROSE — h2, h3, ul/li, p inside article body
      (Scoped so it won't pollute nav/footer styles from style.css)
   ================================================================ */
.intro-section ~ h2,
.callout-box ~ h2,
.process-list ~ h2,
.blog-cta ~ h2,
.data-table ~ h2 {
  max-width: 860px;
  margin: 52px auto 14px;
  font-size: clamp(1.4rem, 2.8vw, 2rem);
  font-weight: 800;
  color: var(--cs-text, #1a365d);
  line-height: 1.25;
  position: relative;
  padding-bottom: 14px;
}
.intro-section ~ h2::after,
.callout-box ~ h2::after,
.process-list ~ h2::after,
.blog-cta ~ h2::after,
.data-table ~ h2::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 44px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--cs-blue, #2b749e), var(--cs-red, #b03538));
}
/* h3 sub-headings */
.intro-section ~ h3,
.callout-box ~ h3 {
  max-width: 860px;
  margin: 36px auto 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cs-text, #1a365d);
  line-height: 1.3;
}
/* Body paragraphs */
.intro-section ~ p,
.callout-box ~ p,
.data-table ~ p,
.process-list ~ p,
.blog-cta ~ p {
  max-width: 860px;
  margin: 0 auto 20px;
  font-size: 0.97rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.85;
}
/* Inline links inside prose */
.intro-section ~ p a,
.callout-box ~ p a,
.data-table ~ p a,
.process-list ~ p a,
.blog-cta ~ p a {
  color: var(--cs-blue, #2b749e);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 116, 158, 0.3);
  transition: border-color 0.2s;
}
.intro-section ~ p a:hover,
.callout-box ~ p a:hover,
.data-table ~ p a:hover,
.process-list ~ p a:hover,
.blog-cta ~ p a:hover {
  border-color: var(--cs-blue, #2b749e);
}
/* Bullet lists in prose */
.intro-section ~ ul,
.callout-box ~ ul,
.data-table ~ ul,
.process-list ~ ul,
.blog-cta ~ ul {
  max-width: 860px;
  margin: 0 auto 28px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.intro-section ~ ul li,
.callout-box ~ ul li,
.data-table ~ ul li,
.process-list ~ ul li,
.blog-cta ~ ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.93rem;
  color: var(--cs-muted, #4a5568);
  line-height: 1.75;
  padding: 12px 16px;
  background: #f8fbfd;
  border: 1px solid rgba(43, 116, 158, 0.08);
  border-radius: 8px;
}
.intro-section ~ ul li::before,
.callout-box ~ ul li::before,
.data-table ~ ul li::before,
.process-list ~ ul li::before,
.blog-cta ~ ul li::before {
  content: '›';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px; height: 20px;
  background: linear-gradient(135deg, var(--cs-blue, #2b749e), var(--cs-cyan, #00b0ee));
  color: #fff;
  font-size: 0.85rem;
  font-weight: 900;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 1px;
}
.intro-section ~ ul li strong,
.callout-box ~ ul li strong,
.data-table ~ ul li strong,
.process-list ~ ul li strong,
.blog-cta ~ ul li strong {
  color: var(--cs-text, #1a365d);
  font-weight: 700;
}


/* ================================================================
   8. RESPONSIVE BREAKPOINTS (blog-specific only)
   ================================================================ */
@media (max-width: 768px) {
  .intro-section          { padding: 24px 22px; margin: 36px auto 32px; }
  .callout-box            { padding: 24px 22px; }
  .callout-box ul li      { padding: 10px 12px; }
  .data-table .table-header,
  .data-table .table-row  { flex-direction: column; }
  .data-table .table-header .cell,
  .data-table .table-row .cell {
    border-right: none;
    border-bottom: 1px solid var(--cs-border, #e2e8f0);
    padding: 10px 16px;
  }
  .data-table .table-header .cell:last-child,
  .data-table .table-row .cell:last-child { border-bottom: none; }
  .process-list::before   { display: none; }
  .process-item           { padding: 22px 22px; }
  .process-item > p       { padding-left: 0; }
  .cta-content            { padding: 32px 24px; }
  .cta-buttons            { flex-direction: column; align-items: center; }
  .cta-btn                { width: 100%; justify-content: center; }
  .blog-conclusion        { padding: 30px 24px; }
}
@media (max-width: 480px) {
  .intro-section          { border-radius: 0 8px 8px 0; }
  .callout-box            { border-radius: 10px; }
  .data-table             { border-radius: 10px; }
  .blog-cta               { border-radius: 12px; }
  .blog-conclusion        { border-radius: 12px; margin: 40px auto 48px; }
  .process-item:hover     { transform: none; }
}