/**
 * Page-header surface — styles the Drupal-rendered context menu inside the
 * `#page-header` strip (blog-categories / service / contact menus). Markup is
 * the thin wrapper in page-header.twig; this file styles the `.menu`
 * descendants Drupal injects.
 *
 * Intentionally unlayered — see site-header/site-footer: targets
 * Drupal-rendered `.menu` descendants that don't carry our utility classes,
 * so unlayered wins over @layer legacy reliably. `#page-header` is the sole
 * consumer of this id (no competing rule in chrome.css/theme.css).
 */
#page-header {
  background: #efefef;
}

#page-header .menu {
  margin: 0 -15px;
  padding: 0;
  list-style: none;
}

#page-header .menu li {
  display: inline-block;
  margin: 0;
  color: var(--color-gray-900);
  font-weight: 500;
  font-size: 0.857rem;
  line-height: 1.286rem;
  letter-spacing: 0.0071rem;
  list-style: none;
}

#page-header .menu li a {
  display: block;
  width: auto;
  padding: 10px 10px;
  color: var(--color-text-muted);

  /* Legacy Materialize breakpoint (601px) preserved verbatim — changing it to
     a Tailwind step would shift where the padding bumps. */
  @media (min-width: 601px) {
    padding: 10.5px 15px;
  }
}

#page-header .menu li a.is-active {
  font-weight: 900;
  text-decoration: underline;
}