/* --- Base Button Style --- */
/* This class should be applied to all new buttons.
   It contains all shared styles like font, padding, and animation.
*/
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  font-family: var(--header-font-family);
  font-weight: var(--font-weight-medium);
  font-size: var(--header-font-size);
  text-transform: var(--header-text-transform);
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  border: 2px solid transparent; 
  border-radius: 0; 
  text-decoration: none;
  
  /* Animation Setup */
  transition: all var(--transition-speed) ease-in-out;
}

/* --- Button 1: "SOLUTIONS" Style --- */
.button1 {
  background-color: var(--color-scalefree-purple);
  color: var(--color-scalefree-white);
  box-shadow: var(--box-shadow);
}

.button1:hover:not(.glowing) {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-hover);
}

/* --- Button 2: "TRAININGS" Style --- */
.button2 {
  background-color: var(--color-scalefree-teal);
  color: var(--color-scalefree-white);
  box-shadow: var(--box-shadow);
}

.button2:hover:not(.glowing) {
  transform: translateY(-3px);
  box-shadow: var(--box-shadow-hover);
}

.button3 {
  background-color: var(--color-scalefree-white);
  color: var(--color-scalefree-darkBlue-primary);
  border-color: var(--color-scalefree-darkBlue-primary);
}

.button3:hover:not(.glowing) {
  background-color: var(--color-scalefree-darkBlue-primary);
  color: var(--color-scalefree-white);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(30%);
  transform: none;
  box-shadow: none;
  background-image: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15),
    rgba(0, 0, 0, 0.05)
  );
  transition: all var(--transition-speed) ease-in-out;
}

.btn.glowing {
  animation: button-glow 2s ease-in-out infinite;
}

@keyframes button-glow {
  0%, 100% {
    transform: translateY(-1px);
    box-shadow: var(--box-shadow), 0 0 0.2rem 0.05rem var(--color-scalefree-lightBlue-primary);
  }
  50% {
    transform: translateY(-3px);
    box-shadow: var(--box-shadow-hover), 0 0 0.4rem 0.1rem var(--color-scalefree-lightBlue-primary);
  }
}