/*
 * The link strip that sits under the site header.
 *
 * Shared by two blocks, because the mockup draws them identically and only
 * their contents and their positioning differ:
 *
 *   Role strip     the six Emeraude Experience pages, on a role page
 *   Section strip  this page's own sections, on a page with several
 *
 * Registered as the `emeraude-strip` handle in inc/blocks.php, and named in
 * both blocks' block.json alongside their own stylesheet, so it loads once on
 * a page carrying either and not at all on a page carrying neither.
 *
 * Positioning is not here. It belongs to each block, because the two differ:
 * see blocks/role-nav/style.css and blocks/section-nav/style.css.
 *
 * Every value is measured from the mockup bundle.
 */

.em-strip {
  background: var(--em-white);
  border-bottom: 1px solid var(--em-rule);
}

.em-strip__inner {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  max-width: var(--em-max);
  margin: 0 auto;
  padding: 0 var(--em-gutter);
  /* scrollbar-width: none; */
}

/* .em-strip__inner::-webkit-scrollbar { display: none; } */

.em-strip__link {
  position: relative;
  flex: 0 0 auto;
  padding: 13px 0;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--em-muted);
  white-space: nowrap;
  transition: color .16s;
}

.em-strip__link:hover,
.em-strip__link:focus-visible { color: var(--em-ink); }

.em-strip__link--current {
  font-weight: 600;
  color: var(--em-ink);
}

/* The 2px marker under the current link. A pseudo-element rather than a
   border, so it sits on the link's own width. */
.em-strip__link--current::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--em-accent);
}

@media (min-width: 921px) {
  .em-strip__inner {
    gap: 34px;
    justify-content: center;
  }

  .em-strip__link {
    padding: 18px 0;
    font-size: 13.5px;
  }
}