/* /css/menu-site.css */
:root { --menu-bar-height: 40px; }

/* Full-bleed bar */
#menu-site-all{
  width: 100%;
  height: var(--menu-bar-height, 40px);
  background: var(--color-nonact, #153b8e);
}

/* Constrained inner row */
#menu-site { height: 100%; }

/* Make the list a centered horizontal row */
#menu-site > ul{
  width: min(var(--site-max-width, 1000px), 100%);
  height: 100%;
  margin: 0 auto;
  padding: 0 2px;
  list-style: none;
  display: flex;
  align-items: center;         /* vertical center */
  justify-content: center;     /* center the set */
  gap: 12px;                   /* space between items */
  box-sizing: border-box;
}

/* Reset li (no width!) */
#menu-site > ul > li{ margin: 0; padding: 0; }

/* Click targets */
#menu-site > ul > li > a{
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  line-height: var(--menu-bar-height, 40px); /* nice big target */
  padding: 0 12px;
  white-space: nowrap;
}

/* Hover / focus / active */
#menu-site > ul > li > a:hover,
#menu-site > ul > li > a:focus-visible{
  background: var(--color-act, #0f2c6d);
  font-weight: 600;
  color: #fff;
  outline: none;
}