// A submenu column's floor. Wide enough that a two-word item does not wrap,
// and the one measure in this file no theme ramp covers.
$submenu-column-min-width: 200px;

.tmpl-menu {
  display: flex;
  height: $menu-size;
  position: relative;
  background-color: $background-medium;

  .tmpl-mainmenu {
    transition: background-color 0.25s ease-in;
    display: flex;
    align-items: center;

    &:has(.tmpl-mainmenu__items.visible) {
      background-color: $background-default;

      h2 {
        color: $text-danger-hover;
      }

      img {
        fill: $text-danger-hover;
      }
    }

    h2,
    img {
      line-height: $menu-size;
      color: $text-light;
      font-size: $font-size-lg;
      font-weight: $font-weight-semibold;
      font-family: $font-family-primary;
      display: inline-block;
      vertical-align: middle;
      cursor: pointer;
      padding: 0 $space-md;
    }

    .tmpl-mainmenu__items {
      position: absolute;
      left: 0;
      top: $menu-size;
      width: 100%;
      background-color: $background-default;
      z-index: 3;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.25s ease, visibility 0.25s ease;
      box-shadow: $shadow-lg;
      display: flex;
      gap: $space-xxl;
      flex-wrap: wrap;
      padding: $space-md;

      &.visible {
        opacity: 1;
        visibility: visible;
      }

      .tmpl-submenu {
        flex-grow: 0;
        flex-shrink: 0;
        min-width: $submenu-column-min-width;
        // No inset of its own. The panel above owns all four sides ($space-md),
        // and a column that added its own $space-md on top started its heading
        // 24px below a panel edge that is 12px from the sides.

        h5 {
          // The section pair the rest of the package uses, either side of the
          // rule: $space-sm from the heading text down to it, $space-md from
          // the rule down to the first item. It was $space-md twice, which put
          // the heading dead centre in 24px of space and read as a gap rather
          // than as a label attached to the list below it.
          padding: 0 0 $space-sm 0;
          margin: 0 0 $space-md 0;
          color: $background-medium;
          line-height: $line-height-lg;
          font-size: $font-size-lg;
          font-weight: $font-weight-semibold;
          border-bottom: $border-width-sm solid $border-secondary;
          cursor: pointer;
          font-family: $font-family-primary;
          &:hover {
            color: $background-dark;
          }
        }

        .tmpl-submenu__items {
          display: inline-flex;
          flex-direction: column;

          p {
            padding: $space-xs 0;
            margin: 0;
            color: $text-dark;
            line-height: $line-height-lg;
            font-size: $font-size-lg;
            font-weight: $font-weight-regular;
            transition: color 0.25s ease-in;
            cursor: pointer;
            display: inline-block;
            font-family: $font-family-primary;

            &:hover {
              color: $text-danger-hover;
            }
          }
        }
      }
    }
  }
}