/**
 * @file
 * MLT Modern — Breadcrumb (modern variant).
 *
 * Apply the .mlt-breadcrumb class to a wrapper. The parent flashyplus theme
 * ships its own breadcrumb.css component (which we don't disable), so this
 * is opt-in via the wrapping class rather than re-styling
 * .breadcrumb / .breadcrumb-list globally.
 *
 * Markup pattern (matches rewires.html):
 *   <nav class="mlt-breadcrumb" aria-label="Breadcrumb">
 *     <div class="mlt-breadcrumb__container">
 *       <ol class="mlt-breadcrumb__list">
 *         <li><a href="/">Home</a></li>
 *         <li><a href="/services">Services</a></li>
 *         <li aria-current="page">House Rewires</li>
 *       </ol>
 *     </div>
 *   </nav>
 */

.mlt-breadcrumb {
  background: var(--mlt-bg-soft);
  padding: 12px 0;
  border-bottom: 1px solid var(--mlt-border);
}

.mlt-breadcrumb__container {
  max-width: var(--mlt-container-max);
  margin: 0 auto;
  padding: 0 var(--mlt-container-pad);
}

.mlt-breadcrumb__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.mlt-breadcrumb__list li {
  color: var(--mlt-text-light);
}

.mlt-breadcrumb__list li:not(:last-child)::after {
  content: "›";
  margin: 0 10px;
  color: var(--mlt-text-light);
}

.mlt-breadcrumb__list a {
  color: var(--mlt-primary);
  text-decoration: none;
}

.mlt-breadcrumb__list a:hover {
  text-decoration: underline;
}

.mlt-breadcrumb__list li[aria-current="page"] {
  color: var(--mlt-text);
  font-weight: 600;
}