/* =================================================================
   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 */
/* Increased specificity to override any other styles */
.site-header nav ul li.slick-tab a {
  background: var(--cta-gradient);
  color: rgba(255, 255, 255, 0.95);
  /* Slightly softer white for "Meet" */
  padding: 10px 24px;
  border-radius: 50px !important;
  /* Fully rounded pill shape */
  font-weight: 400;
  /* Regular weight for "Meet" */
  font-size: 15px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  /* Subtle glass border */
  box-shadow: 0 4px 15px rgba(var(--brand-pink-rgb), 0.4);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  display: inline-flex;
  /* Use flex to center text vertically */
  align-items: center;
  /* Fix for "cut line" / vertical alignment */
  text-decoration: none !important;
  /* Force remove any underline "squares" */
  outline: none !important;
  line-height: normal;
  /* Reset line-height to avoid clipping */
  margin-top: 4px;
  /* Breathing room for hover scale up */
  margin-bottom: 4px;
  /* Breathing room for hover scale down */
}

.site-header nav ul li.slick-tab a:hover {
  background: linear-gradient(135deg, #E91EC8, #AC25C7);
  /* Slightly lighter/vibrant on hover */
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(var(--brand-pink-rgb), 0.5);
  color: var(--white);
  text-decoration: none !important;
}

.brand-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  /* Black weight for maximum impact */
  letter-spacing: 0.5px;
  font-size: 1.1em;
  /* Slightly larger to pop */
  color: #ffffff;
  /* Pure white for "SLICK" */
  margin-left: 4px;
  /* Slight spacing from "Meet" */
}

nav li.slick-tab a:active {
  transform: translateY(0) scale(0.98);
}