/* =================================================================
   SHARED COMPONENT STYLES
   - This file contains styles for UI components used across multiple pages.
   - Principle: Don't Repeat Yourself (DRY).
================================================================= */

/* --- Primary Call-to-Action (CTA) Button --- */
/* Used for "Get SLICK" in the main navigation */
nav li.slick-tab a {
  background: var(--cta-gradient);
  color: var(--white);
  padding: 12px 22px;
  border-radius: 12px; /* Elegant "squircle" shape */
  border: none;
  font-weight: 700;
  transition: transform 200ms ease, box-shadow 200ms ease;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(var(--brand-pink-rgb), 0.3), 0 1px 3px rgba(0,0,0,0.2);
}

nav li.slick-tab a:hover {
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--brand-pink-rgb), 0.35), 0 2px 5px rgba(0,0,0,0.25);
}