/**
 * @file
 * MLT Modern — Sticky phone/CTA bar.
 *
 * Drupal usage: place a custom block in the "Slideout" or a header_top_*
 * region with the markup pattern below. The .mlt-sticky-bar class scopes
 * the styling so it doesn't fight existing header CSS.
 *
 * Markup pattern:
 *   <div class="mlt-sticky-bar">
 *     <a href="tel:..." class="mlt-sticky-bar__phone">📞 01992 276087</a>
 *     <a href="#quote" class="mlt-sticky-bar__cta">Get a Free Quote</a>
 *   </div>
 */

.mlt-sticky-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--mlt-primary);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.mlt-sticky-bar a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

.mlt-sticky-bar__phone {
  font-size: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.mlt-sticky-bar__phone:hover {
  text-decoration: underline;
}

.mlt-sticky-bar__cta {
  background: var(--mlt-accent);
  color: var(--mlt-accent-contrast);
  padding: 8px 18px;
  border-radius: var(--mlt-radius-sm);
  font-weight: 700;
  font-size: 14px;
}

.mlt-sticky-bar__cta:hover {
  background: var(--mlt-accent-dark);
}