/* ============================================================================
   BUTTONS COMPONENT

   Reusable button styles for CTAs and interactive elements.

   Purpose: Provide consistent, accessible button styling across all pages.

   Required HTML Structure:

   <a href="#" class="cta-button">Button Text</a>

   Or with a button element:
   <button class="cta-button">Button Text</button>

   Available Modifiers:
   - .cta-button--secondary     # Alternative color scheme (future)
   - .cta-button--large         # Larger size (future)
   - .cta-button--small         # Smaller size (future)

   Accessibility:
   - Buttons have sufficient contrast (white bg, navy text)
   - Hover states provide clear visual feedback
   - Transform on hover indicates interactivity
   - Box shadow provides depth and prominence

   Notes:
   - Default style: White background, navy text
   - Smooth transitions on hover
   - Lift effect (translateY) on hover for tactile feel
   ============================================================================ */

.cta-button {
  display: inline-block;
  background: var(--white);
  color: var(--navy-light);
  padding: 15px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--transition-normal);
  box-shadow: var(--shadow-md);
  border: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  line-height: 1.5;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Focus state for keyboard accessibility */
.cta-button:focus {
  outline: 2px solid var(--sky-blue);
  outline-offset: 2px;
}

/* Active/pressed state */
.cta-button:active {
  transform: translateY(0);
}

/* Disabled state */
.cta-button:disabled,
.cta-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}