/* ==========================================================================
   Buttons - Puunjalostusinsinöörit
   ==========================================================================
   Button styles with color variants and outline options.
   Requires brand.css to be loaded first for CSS variables.
   ========================================================================== */


/* ==========================================================================
   BASE BUTTON
   ========================================================================== */

.btn {
  display: inline-block;
  padding: 0.85em 1.5em;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 0.25rem;
  transition: background-color var(--transition-speed) ease-out,
              color var(--transition-speed) ease-out,
              border-color var(--transition-speed) ease-out;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.btn:focus {
  outline: 0;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.25;
  cursor: not-allowed;
}


/* ==========================================================================
   SOLID BUTTON VARIANTS - DARK BACKGROUNDS (white text)
   ========================================================================== */

/* Primary - Dark blue background, white text */
.btn--primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-white);
}

/* Secondary - Brown background, white text */
.btn--secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.btn--secondary:hover,
.btn--secondary:focus {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
  color: var(--color-white);
}

/* Tertiary - Light teal background, dark blue text */
.btn--tertiary {
  background-color: var(--color-tertiary);
  border-color: var(--color-tertiary);
  color: var(--color-primary);
}

.btn--tertiary:hover,
.btn--tertiary:focus {
  background-color: var(--color-tertiary-dark);
  border-color: var(--color-tertiary-dark);
  color: var(--color-primary);
}

/* Primary Accent - Green background, white text */
.btn--primary-accent {
  background-color: var(--color-primary-accent);
  border-color: var(--color-primary-accent);
  color: var(--color-white);
}

.btn--primary-accent:hover,
.btn--primary-accent:focus {
  background-color: var(--color-primary-accent-dark);
  border-color: var(--color-primary-accent-dark);
  color: var(--color-white);
}

/* Secondary Accent - Red background, white text */
.btn--secondary-accent {
  background-color: var(--color-secondary-accent);
  border-color: var(--color-secondary-accent);
  color: var(--color-white);
}

.btn--secondary-accent:hover,
.btn--secondary-accent:focus {
  background-color: var(--color-secondary-accent-dark);
  border-color: var(--color-secondary-accent-dark);
  color: var(--color-white);
}

/* Tertiary Accent - Orange background, white text */
.btn--tertiary-accent {
  background-color: var(--color-tertiary-accent);
  border-color: var(--color-tertiary-accent);
  color: var(--color-white);
}

.btn--tertiary-accent:hover,
.btn--tertiary-accent:focus {
  background-color: var(--color-tertiary-accent-dark);
  border-color: var(--color-tertiary-accent-dark);
  color: var(--color-white);
}


/* ==========================================================================
   SOLID BUTTON VARIANTS - LIGHT BACKGROUNDS (dark text)
   ========================================================================== */

/* Primary Light - Light blue background, dark blue text */
.btn--primary-light {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary-light);
  color: var(--color-primary);
}

.btn--primary-light:hover,
.btn--primary-light:focus {
  background-color: var(--color-primary-light-dark);
  border-color: var(--color-primary-light-dark);
  color: var(--color-primary);
}

/* Secondary Light - Light brown background, dark blue text */
.btn--secondary-light {
  background-color: var(--color-secondary-light);
  border-color: var(--color-secondary-light);
  color: var(--color-primary);
}

.btn--secondary-light:hover,
.btn--secondary-light:focus {
  background-color: var(--color-secondary-light-dark);
  border-color: var(--color-secondary-light-dark);
  color: var(--color-primary);
}

/* Tertiary Light - Very light teal background, dark blue text */
.btn--tertiary-light {
  background-color: var(--color-tertiary-light);
  border-color: var(--color-tertiary-light);
  color: var(--color-primary);
}

.btn--tertiary-light:hover,
.btn--tertiary-light:focus {
  background-color: var(--color-tertiary-light-dark);
  border-color: var(--color-tertiary-light-dark);
  color: var(--color-primary);
}

/* Primary Accent Light - Light green background, dark blue text */
.btn--primary-accent-light {
  background-color: var(--color-primary-accent-light);
  border-color: var(--color-primary-accent-light);
  color: var(--color-primary);
}

.btn--primary-accent-light:hover,
.btn--primary-accent-light:focus {
  background-color: var(--color-primary-accent-light-dark);
  border-color: var(--color-primary-accent-light-dark);
  color: var(--color-primary);
}

/* Secondary Accent Light - Light red/pink background, dark blue text */
.btn--secondary-accent-light {
  background-color: var(--color-secondary-accent-light);
  border-color: var(--color-secondary-accent-light);
  color: var(--color-primary);
}

.btn--secondary-accent-light:hover,
.btn--secondary-accent-light:focus {
  background-color: var(--color-secondary-accent-light-dark);
  border-color: var(--color-secondary-accent-light-dark);
  color: var(--color-primary);
}

/* Tertiary Accent Light - Light orange background, dark blue text */
.btn--tertiary-accent-light {
  background-color: var(--color-tertiary-accent-light);
  border-color: var(--color-tertiary-accent-light);
  color: var(--color-primary);
}

.btn--tertiary-accent-light:hover,
.btn--tertiary-accent-light:focus {
  background-color: var(--color-tertiary-accent-light-dark);
  border-color: var(--color-tertiary-accent-light-dark);
  color: var(--color-primary);
}

/* White - White background, dark blue text */
.btn--white {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-primary);
}

.btn--white:hover,
.btn--white:focus {
  background-color: var(--color-gray-200);
  border-color: var(--color-gray-200);
  color: var(--color-primary);
}


/* ==========================================================================
   OUTLINE BUTTON VARIANTS
   ========================================================================== */

/* Outline Light - White outline, white text (for dark backgrounds) */
.btn--outline-light {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}

.btn--outline-light:hover,
.btn--outline-light:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  color: var(--color-white);
}

/* Outline Dark - Dark blue outline, dark blue text (for light backgrounds) */
.btn--outline-dark {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--outline-dark:hover,
.btn--outline-dark:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Outline Secondary - Brown outline, brown text */
.btn--outline-secondary {
  background-color: transparent;
  border-color: var(--color-secondary);
  color: var(--color-secondary);
}

.btn--outline-secondary:hover,
.btn--outline-secondary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}


/* ==========================================================================
   BUTTON SIZES
   ========================================================================== */

.btn--sm {
  padding: 0.6em 1em;
  font-size: 0.875rem;
}

.btn--lg {
  padding: 1em 2em;
  font-size: var(--font-size-base);
}

.btn--block {
  display: block;
  width: 100%;
}

@media (max-width: 49.99em) {
  .btn {
    padding-left: 1em;
    padding-right: 1em;
  }
}


/* ==========================================================================
   BUTTON WITH ARROW
   ========================================================================== */

.btn--arrow::after {
  content: '\203A';
  display: inline-block;
  margin-left: var(--spacing-sm);
  font-size: 1.25em;
  line-height: 1;
  transition: transform var(--transition-speed);
}

.btn--arrow:hover::after {
  transform: translateX(0.25rem);
}


/* ==========================================================================
   LEGACY SUPPORT
   ==========================================================================
   These maintain compatibility with existing .button classes from Foundation
   ========================================================================== */

/* Override Foundation's .button.primary */
.button.primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.button.primary:hover,
.button.primary:focus {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

/* Override Foundation's .button.secondary */
.button.secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.button.secondary:hover,
.button.secondary:focus {
  background-color: var(--color-secondary-dark);
  border-color: var(--color-secondary-dark);
}

/* Override Foundation's .button.hollow */
.button.hollow {
  background-color: transparent;
  border: 2px solid var(--color-white);
  color: var(--color-white);
}

.button.hollow:hover,
.button.hollow:focus {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: var(--color-white);
  color: var(--color-white);
}