/* ==========================================================================
   Managed Kubernetes RKE2 - Page-Specific Styles
   ========================================================================== */

/* Increased section spacing for better breathing room */
.section {
  padding-block: var(--space-16);
}

.section--dark {
  padding-block: var(--space-20);
}

@media (min-width: 1280px) {
  .section {
    padding-block: var(--space-20);
  }

  .section--dark {
    padding-block: var(--space-24);
  }
}

/* Solution section card styling */
#solution .card {
  padding: var(--space-8);
  height: 100%;
}

#solution .card ul {
  color: var(--text-secondary);
  font-size: var(--text-base);
}

#solution .card__title {
  color: var(--color-primary);
  font-size: var(--text-xl);
  font-weight: 600;
}

/* Alert box styling for nginx retirement */
[data-theme="light"] .alert--warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.1), rgba(255, 152, 0, 0.05));
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: var(--text-primary);
}

[data-theme="light"] .alert--warning .alert__icon svg {
  stroke: #ff9800;
}

/* Light mode: Fix featured pricing card background */
[data-theme="light"] .pricing-card--featured {
  background: rgba(0, 159, 227, 0.05);
  border: 2px solid var(--color-primary);
}

/* Note: Icon swapping for light mode is now handled in shared components.css */