/**
 * solutions.css — styles specific to the solutions page (solutions.html).
 *
 * Covers the audience tab buttons and their active state. The panel content
 * itself is styled with Tailwind utilities injected by src/js/solutions.js.
 * Global rules live in base.css.
 */

.sol-tab {
  padding: 0.6rem 1.25rem;
  border-radius: 9999px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #6b7280;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.sol-tab:hover {
  color: #EA4325;
  border-color: #FDE4DF;
}

.sol-tab.active {
  background: #EA4325;
  border-color: #EA4325;
  color: #fff;
}

/* Fade the panel in whenever its content is swapped */
.sol-panel-enter {
  animation: sol-fade 0.3s ease;
}

@keyframes sol-fade {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sol-panel-enter {
    animation: none;
  }
}