/**
 * @file
 * MLT Modern — Utility button classes.
 *
 * These are shorter-class alternatives to the component-style buttons in
 * buttons.css (.mlt-btn-primary, .mlt-btn-secondary). Designed for use
 * in hand-written HTML inside body fields, custom blocks, and other
 * "just dropping in a link" contexts where typing .mlt-btn-primary feels
 * heavy.
 *
 * Two variants:
 *
 *   .mt-button     - matches .mlt-btn-primary exactly (yellow CTA).
 *                    Just a shorter class name to type when writing
 *                    inline HTML in body fields.
 *
 *   .mlt-button    - BIGGER green call-to-action. Use for the primary
 *                    "do this thing now" action on a page — the one
 *                    you'd put at the end of a blog post or a service
 *                    description. Use sparingly so it retains weight.
 *
 * Both have optional icon modifiers:
 *
 *   .mt-button--icon-phone    .mlt-button--icon-phone
 *   .mt-button--icon-arrow    .mlt-button--icon-arrow
 *
 * Example markup:
 *
 *   <a href="#quote" class="mt-button">Get a free quote</a>
 *
 *   <a href="tel:01992276087" class="mt-button mt-button--icon-phone">
 *     Call 01992 276087
 *   </a>
 *
 *   <a href="/contact" class="mlt-button mlt-button--icon-arrow">
 *     Book your free home visit
 *   </a>
 */

/* =======================================================================
 * mt-button — alias of .mlt-btn-primary (yellow CTA)
 *
 * Same visual treatment as the existing component button. Defined here
 * with its own rules rather than @extend / multi-class so that any
 * future tweak to .mlt-btn-primary doesn't silently change .mt-button
 * (they should track each other, but consciously, not by accident).
 * ======================================================================= */
.mt-button {
  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;
  background: var(--mlt-accent);
  color: var(--mlt-accent-contrast);
}

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

.mt-button:focus-visible {
  outline: 2px solid var(--mlt-primary);
  outline-offset: 2px;
}

/* =======================================================================
 * mlt-button — bigger green call-to-action
 *
 * Use this for the SINGLE most important action on a page. Bigger
 * padding, larger font, full pill shape, slight shadow for prominence.
 * The success-green colour reads as "go / proceed" — strong but not
 * alarming.
 * ======================================================================= */
.mlt-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--mlt-success);
  color: #fff;
  padding: 18px 36px;
  border-radius: var(--mlt-radius-pill);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  /* Soft green shadow for depth — uses a slightly darker green at low
   * opacity so it reads as "this button is floating slightly above the
   * page". */
  box-shadow: 0 4px 14px rgba(29, 158, 117, 0.3);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}

.mlt-button:hover {
  background: #178a64; /* slightly darker green */
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(29, 158, 117, 0.4);
  text-decoration: none;
}

.mlt-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(29, 158, 117, 0.3);
}

.mlt-button:focus-visible {
  outline: 2px solid var(--mlt-primary);
  outline-offset: 3px;
}

/* =======================================================================
 * Optional icon modifiers
 *
 * Icons rendered via CSS pseudo-elements so the markup stays just text
 * — no extra spans or font-awesome dependency for the icon itself.
 *
 * To use, add the modifier class alongside the base:
 *   <a class="mt-button mt-button--icon-phone">...</a>
 *   <a class="mlt-button mlt-button--icon-arrow">...</a>
 * ======================================================================= */

/* Phone receiver icon, prepended. Uses an inline SVG via data URL so we
 * don't need Font Awesome to render the icon. */
.mt-button--icon-phone::before,
.mlt-button--icon-phone::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3E%3Cpath d='M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.58l2.2-2.21c.28-.27.36-.66.25-1.01C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  /* currentColor lets the SVG inherit the button's text colour, so the
   * icon stays in sync if the button colour ever changes. */
  color: inherit;
}

/* Arrow icon, appended (right side). */
.mt-button--icon-arrow::after,
.mlt-button--icon-arrow::after {
  content: "→";
  font-size: 1.2em;
  font-weight: 800;
  line-height: 1;
  /* Smooth slide-right on hover for "go" feedback. */
  transition: transform 0.2s ease;
}

.mt-button--icon-arrow:hover::after,
.mlt-button--icon-arrow:hover::after {
  transform: translateX(3px);
}

/* =======================================================================
 * Responsive — slightly smaller on phones so the big CTA doesn't
 * dominate the viewport.
 * ======================================================================= */
@media (max-width: 540px) {
  .mt-button {
    padding: 14px 22px;
    font-size: 15px;
  }

  .mlt-button {
    padding: 16px 28px;
    font-size: 16px;
  }
}