/**
 * @file
 * MLT Modern — Buttons.
 *
 * Scoped to .mlt-btn-* so they DON'T collide with the parent's .mt-button
 * (which the parent .theme file auto-applies via preprocess to many link
 * fields). If you want the rewires-style CTA on a Drupal link field, you
 * can override the preprocess class in mlt_modern.theme - left out of
 * Phase 1 to keep the diff small.
 *
 * Markup:
 *   <a href="#" class="mlt-btn-primary">📞 Call 01992 276087</a>
 *   <a href="#" class="mlt-btn-secondary">Get a Free Quote</a>
 */

.mlt-btn-primary,
.mlt-btn-secondary {
  padding: 16px 28px;
  border-radius: var(--mlt-radius-md);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: transform 0.15s, box-shadow 0.15s;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
}

.mlt-btn-primary {
  background: var(--mlt-accent);
  color: var(--mlt-accent-contrast);
}

.mlt-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px hsla(var(--mlt-accent-value), 0.4);
  text-decoration: none;
}

.mlt-btn-secondary {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.mlt-btn-secondary:hover {
  background: #fff;
  color: var(--mlt-primary);
  text-decoration: none;
}

/* Variant: dark-on-light secondary, when used outside a coloured hero. */
.mlt-btn-secondary--on-light {
  color: var(--mlt-primary);
  border-color: var(--mlt-primary);
}

.mlt-btn-secondary--on-light:hover {
  background: var(--mlt-primary);
  color: #fff;
}