/**
 * @file
 * Button Styles - ITU Branded
 *
 * Uses CSS variables from archive-modern.css design tokens.
 * Follows WCAG accessibility guidelines (min 44px touch targets).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BASE BUTTON STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

.button,
.btn,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  min-height: var(--min-touch, 44px);
  padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
  font-family: var(--font-family, 'Roboto', sans-serif);
  font-size: var(--text-base, 1rem);
  font-weight: var(--font-medium, 500);
  line-height: var(--leading-tight, 1.25);
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm, 0.25rem);
  cursor: pointer;
  transition: all var(--transition-fast, 150ms ease);
  -webkit-appearance: none;
  appearance: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMARY BUTTON (Filled - ITU Blue)
   ═══════════════════════════════════════════════════════════════════════════ */

.button--primary,
.btn-primary,
.form-submit,
input[type="submit"] {
  background-color: var(--itu-blue, #009EDB);
  border-color: var(--itu-blue, #009EDB);
  color: var(--color-white, #FFFFFF);
}

.button--primary:hover,
.btn-primary:hover,
.form-submit:hover,
input[type="submit"]:hover {
  background-color: var(--itu-blue-hover, #007AB8);
  border-color: var(--itu-blue-hover, #007AB8);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1));
}

.button--primary:active,
.btn-primary:active,
.form-submit:active,
input[type="submit"]:active {
  background-color: var(--itu-blue-active, #006699);
  border-color: var(--itu-blue-active, #006699);
  transform: translateY(0);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECONDARY BUTTON (Outline)
   ═══════════════════════════════════════════════════════════════════════════ */

.button--secondary,
.btn-secondary,
input[type="button"] {
  background-color: transparent;
  border-color: var(--itu-blue, #009EDB);
  color: var(--itu-blue, #009EDB);
}

.button--secondary:hover,
.btn-secondary:hover,
input[type="button"]:hover {
  background-color: var(--itu-blue-light, rgba(0, 158, 219, 0.1));
  border-color: var(--itu-blue-hover, #007AB8);
  color: var(--itu-blue-hover, #007AB8);
}

.button--secondary:active,
.btn-secondary:active,
input[type="button"]:active {
  background-color: var(--itu-blue-light, rgba(0, 158, 219, 0.1));
  border-color: var(--itu-blue-active, #006699);
  color: var(--itu-blue-active, #006699);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TERTIARY BUTTON (Text only)
   ═══════════════════════════════════════════════════════════════════════════ */

.button--tertiary,
.btn-tertiary,
.btn-link {
  background-color: transparent;
  border-color: transparent;
  color: var(--itu-blue, #009EDB);
  padding-left: var(--space-2, 0.5rem);
  padding-right: var(--space-2, 0.5rem);
}

.button--tertiary:hover,
.btn-tertiary:hover,
.btn-link:hover {
  background-color: var(--itu-blue-lighter, rgba(0, 158, 219, 0.05));
  color: var(--itu-blue-hover, #007AB8);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DANGER BUTTON
   ═══════════════════════════════════════════════════════════════════════════ */

.button--danger,
.btn-danger {
  background-color: var(--color-error, #dc2626);
  border-color: var(--color-error, #dc2626);
  color: var(--color-white, #FFFFFF);
}

.button--danger:hover,
.btn-danger:hover {
  background-color: #b91c1c;
  border-color: #b91c1c;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON SIZES
   ═══════════════════════════════════════════════════════════════════════════ */

.button--small,
.btn-sm {
  min-height: 36px;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  font-size: var(--text-sm, 0.875rem);
}

.button--large,
.btn-lg {
  min-height: 52px;
  padding: var(--space-4, 1rem) var(--space-8, 2rem);
  font-size: var(--text-lg, 1.125rem);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON STATES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Focus (Accessibility) */
.button:focus-visible,
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: var(--focus-ring, 2px solid #009EDB);
  outline-offset: var(--focus-offset, 2px);
}

/* Remove default focus outline */
.button:focus,
.btn:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none;
}

/* Disabled */
.button:disabled,
.btn:disabled,
button:disabled,
input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Loading state */
.button--loading,
.btn-loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.button--loading::after,
.btn-loading::after {
  content: '';
  position: absolute;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: button-spin 0.75s linear infinite;
}

@keyframes button-spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTON GROUPS
   ═══════════════════════════════════════════════════════════════════════════ */

.button-group,
.btn-group {
  display: inline-flex;
  gap: var(--space-2, 0.5rem);
}

.button-group--vertical {
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DRUPAL-SPECIFIC BUTTON OVERRIDES
   ═══════════════════════════════════════════════════════════════════════════ */

/* Action links */
.action-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  min-height: var(--min-touch, 44px);
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  background-color: var(--itu-blue, #009EDB);
  color: var(--color-white, #FFFFFF);
  border-radius: var(--radius-sm, 0.25rem);
  text-decoration: none;
  font-weight: var(--font-medium, 500);
  transition: all var(--transition-fast, 150ms ease);
}

.action-links a:hover {
  background-color: var(--itu-blue-hover, #007AB8);
  text-decoration: none;
}

/* Dropbutton */
.dropbutton-wrapper {
  min-height: var(--min-touch, 44px);
}

.dropbutton-widget {
  border-radius: var(--radius-sm, 0.25rem);
  overflow: hidden;
}