/**
 * ASL Jump Button Component
 * Path: /Assets/jump-button/css/jump-button.css
 * Version: 1.0 - Design System Integration
 */

/* ========================================
   SMOOTH SCROLL BEHAVIOR
   ======================================== */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Offset for fixed header */
}

/* ========================================
   BASE BUTTON STYLES (BEM)
   ======================================== */
.asl-jump-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--button-padding-nav);
  font-family: var(--font-body);
  font-size: var(--font-caption);
  font-weight: var(--weight-semibold);
  line-height: var(--line-height-button);
  letter-spacing: var(--letter-spacing-button);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--border-radius-full);
  transition: var(--transition-fast);
  cursor: pointer;
  white-space: nowrap;
}

/* ========================================
   MODIFIER: PRIMARY BUTTON
   ======================================== */
.asl-jump-button--primary {
  background: var(--button-primary-bg);
  color: var(--color-white) !important;
  border: none;
  box-shadow: var(--button-shadow);
}

.asl-jump-button--primary:hover {
  background: var(--button-primary-hover);
  color: var(--color-white) !important;
  transform: translateY(-2px);
  box-shadow: var(--button-shadow-hover);
}

.asl-jump-button--primary:active {
  transform: translateY(0);
  box-shadow: var(--button-shadow);
}

/* ========================================
   MODIFIER: SECONDARY BUTTON
   ======================================== */
.asl-jump-button--secondary {
  background: transparent;
  color: var(--color-navy) !important;
  border: var(--border-width) solid var(--color-navy);
}

.asl-jump-button--secondary:hover {
  background: transparent;
  color: var(--color-terracotta) !important;
  border-color: var(--color-terracotta);
  transform: translateY(-2px);
}

.asl-jump-button--secondary:active {
  transform: translateY(0);
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */
@media (max-width: 1024px) {
  .asl-jump-button {
    padding: var(--button-padding-tablet);
    font-size: var(--button-font-size-tablet);
  }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */
@media (max-width: 768px) {
  .asl-jump-button {
    padding: var(--button-padding-mobile);
    font-size: var(--button-font-size-mobile);
  }
}