/**
 * Southern Sentinel Security - Dark Section Styles
 * Apply .sss-dark-section class to Group blocks for dark treatment
 */

/* ============================================
   Dark Section Container
   ============================================ */
.sss-dark-section {
  background: linear-gradient(180deg, #0b1723, #16324f);
  color: #f6fbff;
}

.sss-dark-section-alt {
  background:
    radial-gradient(circle at top left, rgba(65, 179, 211, 0.12), transparent 26%),
    radial-gradient(circle at top right, rgba(31, 157, 85, 0.14), transparent 24%),
    linear-gradient(180deg, #0b1723 0%, #071018 100%);
  color: #f6fbff;
}

/* ============================================
   Text Color Inversions
   ============================================ */
.sss-dark-section h1,
.sss-dark-section h2,
.sss-dark-section h3,
.sss-dark-section h4 {
  color: #ffffff;
}

.sss-dark-section p,
.sss-dark-section li,
.sss-dark-section span {
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================
   Component Overrides in Dark Context
   ============================================ */
.sss-dark-section .sss-eyebrow {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.78);
}

.sss-dark-section .sss-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.sss-dark-section .sss-card h2,
.sss-dark-section .sss-card h3,
.sss-dark-section .sss-card h4 {
  color: #ffffff;
}

.sss-dark-section .sss-card p {
  color: rgba(255, 255, 255, 0.78);
}

.sss-dark-section .sss-pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
}

.sss-dark-section .sss-pill span,
.sss-dark-section .sss-pill p {
  color: rgba(255, 255, 255, 0.70);
}

.sss-dark-section .sss-stat-number {
  color: var(--sss-primary);
}

.sss-dark-section .sss-chip {
  background: rgba(65, 179, 211, 0.14);
  border-color: rgba(65, 179, 211, 0.24);
  color: var(--sss-primary);
}

.sss-dark-section .sss-btn-secondary {
  background: rgba(255, 255, 255, 0.10);
  color: white;
  border-color: rgba(255, 255, 255, 0.18);
}

.sss-dark-section .sss-section-label {
  color: var(--sss-primary);
}

.sss-dark-section .sss-section-header h2 {
  color: #ffffff;
}

.sss-dark-section .sss-section-header p {
  color: rgba(255, 255, 255, 0.78);
}

/* ============================================
   Dark Section FAQ/Objection Overrides
   ============================================ */
.sss-dark-section .sss-faq,
.sss-dark-section .sss-objection-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.sss-dark-section .sss-faq h3,
.sss-dark-section .sss-objection-card h3 {
  color: #ffffff;
}

.sss-dark-section .sss-faq p,
.sss-dark-section .sss-objection p,
.sss-dark-section .sss-answer {
  color: rgba(255, 255, 255, 0.78);
}

.sss-dark-section .sss-objection-tag {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: var(--sss-primary);
}

/* ============================================
   Dark Section Service Cards
   ============================================ */
.sss-dark-section .sss-service-card {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.sss-dark-section .sss-service-card h3 {
  color: #ffffff;
}

.sss-dark-section .sss-service-card p {
  color: rgba(255, 255, 255, 0.70);
}

/* ============================================
   Dark Section Proof Points
   ============================================ */
.sss-dark-section .sss-proof-item {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.90);
}

/* ============================================
   Dark Section Mini Callouts
   ============================================ */
.sss-dark-section .sss-mini-callout {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.25);
}

.sss-dark-section .sss-mini-callout h4 {
  color: #ffffff;
}

.sss-dark-section .sss-mini-callout p {
  color: rgba(255, 255, 255, 0.70);
}

/* ============================================
   Dark Footer
   ============================================ */
.sss-footer {
  background: linear-gradient(180deg, #0a1520, #071018);
  color: rgba(255, 255, 255, 0.70);
  padding: 48px 0 24px;
}

.sss-footer a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.sss-footer a:hover {
  color: var(--sss-primary);
}

.sss-footer .sss-chip {
  background: rgba(65, 179, 211, 0.10);
  border-color: rgba(65, 179, 211, 0.18);
  color: var(--sss-primary);
}