/**
 * @file
 * MLT Modern — Top bar (phone + CTA contact strip).
 *
 * Full-width contact band placed in the `top_bar` region. Content stretches
 * edge-to-edge with simple horizontal padding — no inner container, no
 * max-width constraint (matches the rewires.html landing page).
 *
 * Markup pattern (paste into a Basic block, text format = Full HTML):
 *   <div class="mlt-top-bar">
 *     <a href="tel:01992276087" class="mlt-top-bar__phone">
 *       <i class="fas fa-phone"></i> 01992 276087
 *     </a>
 *     <a href="/contact" class="mlt-top-bar__cta">Get a Free Quote</a>
 *   </div>
 */

.mlt-top-bar {
  background: var(--mlt-primary);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}

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

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

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

.mlt-top-bar__phone i {
  font-size: 15px;
  /* Red phone icon (customer request). Uses the danger token so per-site
   * overrides can re-theme it without editing this file. */
  color: var(--mlt-danger);
}

/* CTA: dark text on yellow.
 *
 * The .mlt-top-bar a { color: #fff } rule above has specificity (0,0,1,1)
 * because of the descendant anchor. To beat it we qualify the CTA selector
 * with the anchor too, giving us (0,0,2,1).
 */
a.mlt-top-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;
  transition: background 0.15s;
}

a.mlt-top-bar__cta:hover {
  background: var(--mlt-accent-dark);
  color: var(--mlt-accent-contrast);
}

@media (max-width: 540px) {
  .mlt-top-bar {
    padding: 8px 14px;
  }
  .mlt-top-bar__phone {
    font-size: 15px;
  }
  .mlt-top-bar__cta {
    padding: 7px 12px;
    font-size: 13px;
  }
}