.menu {
    margin-bottom: 1rem;
}

/* define layout variables for the switcher only */
.menu .switcher {
    /* width of menu items

       :: NOTE: When adding new menu items, you might need to change
       this value as well! If this value is not truly the maximum of
       all the elements minimum required space or more than that, then
       the layout will break. For example the breakage will be that
       there is some width, at which only one element floats to a new
       line, and the switcher does not yet switch to vertical mode.
   */
    --threshold: 45rem;
    /* space between menu items */
    --space: 1rem;
    /* Large value used for making menu switch between horizontal and
   vertical layout. See other explanations below. */
    --large-value: 9999999;
    /* font size of the menu items

       :: NOTE: When adjusting the font size, be aware, that the
       content of a menu item must still fit inside the --threshold,
       otherwise the layout breaks a little.
   */
    --menu-item-font-size: var(--navigation-font-size);
}

/* The switcher class is applied to the element containing the switcher. A wrapper element, what in itself should do nothing. */
.menu .switcher > * {
    display: flex;
    flex-wrap: wrap;
    /* Make the container wider than its parent, by using negative margin,
   but actually not wider, by reducing the width, that the children
   will fill, by adjusting their styling.

   Use half the margin, because children will have half the margin in
   each direction, summing up to the whole margin. By using half the
   margin, we are moving the children to the border of the container
   again. This is the amount of margin they would have in that
   direction. Use negative margin to pull the children elements
   further out.*/
    margin: calc(var(--space) / 2 * -1);
    /* overflow: hidden; */ /* might be needed */
}

.menu .switcher > * > * {
    /* Each element grows to take up an equal proportion of horizontal space. */
    flex-grow: 1;
    /*
      :: Version with plain values:
      (30rem - 100%)
      :: If the parent is wider than 30rem, then this will be negative.
      :: If the parent is thinner than 30rem then this will be positive.
      * 999
      :: Make it a large positive or negative value.
      :: A negative flex-basis value is invalid, and will be ignored.
      :: A high positive flex-basis value will cause there to be only 1 element on a row.

      :: Version with variables:

      :: (100% - var(--space))

      :: Only fill space less than the full space, to account for the
      gutters before first and after last element. The gutters are
      left and right of each element, and each gutter is only taking
      half of --space, adding up to --space.

      :: Still multiply with large value.
   */
    flex-basis: calc((var(--threshold) - (100% - var(--space))) * var(--large-value));
    /*
      :: Have half the margin on all sides, so that along each axis
      (width and height) it adds up the the whole gutter.
   */
    margin: calc(var(--space) / 2);
}

/*
  NOTE: Adding too many menu items can break the layout, as they all compete
  for the available space and might not have sufficient space and then
  float to the next line. To avoid this problem we declare, that a
  specific count of elements should consider all of the available
  horizontal space to grow. This way there is no more space for any
  additional menu items and the layout will switch to vertical mode,
  if more menu items are added, to comply with the rule of minimum
  required space as per --threshold value and flex-basis attribute.

  :nth-last-child(n+5)
  :: targets the element, which is 4 or more elements away from the end of the list

  :nth-last-child(n+5) ~ *
  :: ~ is the sibling selector.
  :: * selects any sibling.

  :: In total this selects all elements more than 4 elements from the
  :: end of the list of elements.
 */
.switcher > * > :nth-last-child(n+6),
.switcher > * > :nth-last-child(n+6) ~ * {
    flex-basis: 100%;
}


/* OTHER STYLING (not switcher component related) */

.menu {
    max-width: var(--nav-max-width);
    /* border: 1px solid #FF0000; */
}

.menu .menu-item {
    /*border-bottom: 4px solid var(--background-color);*/
    cursor: pointer;
    font-family: var(--menu-font-family);
    /* flex-direction: column; */
    /* justify-content: center; */
}

.menu ul {
    display: flex;
    flex-direction: column;

    list-style-type: none;
    padding-inline-start: 0px;
    margin-block-start: 0px;
}

.menu .menu-item a {
    /* The links inside the menu items are themselves flex items, so that we can */
    border-bottom: 4px solid var(--menu-item-underline-color);
    font-size: var(--menu-item-font-size);
    text-decoration: none;
    color: var(--menu-font-color);

    /* align text centered */
    flex-grow: 0;
    /* display: inline-block; */
    line-height: calc(var(--menu-item-font-size) * 1.25);
}

.menu .menu-item a:visited {
    color: var(--menu-font-color);
}

.menu .menu-item:hover a {
    border-bottom: 4px solid var(--menu-item-underline-hover-color);
}