/* ログアウト導線のメニュー項目(Figma: menu-item)
 * タイポグラフィは htdocs/lite/css/guest/typography.css のトークンを参照する
 * (default: guest/menu/default 16px / small: guest/menu/small 14px)
 *
 * 注意: font-weight は Figmaの名前付きスタイル(guest/menu/*)では Regular(400) だが、
 *       ノード側は Bold のフォントフェイスで描画されている(スタイルへのローカル上書き)。
 *       実際の見た目に合わせて bold にしている。デザイナー確認待ち。 */
.guest-menu-item,
.guest-menu-item:link,
.guest-menu-item:visited,
.guest-menu-item:focus,
.guest-menu-item:hover,
.guest-menu-item:active {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 16px;
  color: var(--guest-color-text-default);
  font-family: var(--guest-font-family);
  font-size: var(--guest-font-size-base);
  font-weight: var(--guest-font-weight-bold);
  line-height: var(--guest-line-height-heading);
  white-space: nowrap;
  text-decoration: none;
  word-break: break-word;
}

/* size=small: 縦積みメニュー用。下線で区切り、先頭に点を置く */
.guest-menu-item--small,
.guest-menu-item--small:link,
.guest-menu-item--small:visited,
.guest-menu-item--small:focus,
.guest-menu-item--small:hover,
.guest-menu-item--small:active {
  position: relative;
  justify-content: flex-start;
  width: 100%;
  height: auto;
  padding: 20px 0 20px 24px;
  border-bottom: 1px solid var(--guest-color-border-light-brown);
  font-size: var(--guest-font-size-sm);
  text-align: left;
}

/* 一覧の最後の項目には区切り線を引かない(Figma: menu / 4977-2115 の5項目め) */
.guest-menu-item--small:last-child {
  border-bottom: none;
}

/* 先頭の点。Figmaでは6pxの円のsvgが left:9px / 上下中央 に置かれているが、
 * 単純な円なので画像を使わずCSSで再現している。 */
.guest-menu-item--small::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

/* 点の色は3色を循環する。Figmaは各インスタンスが Ellipse3/4/5 を使い分けており、
 * 上から orange-200(#FFD092) → yellow-300(#FEF17E) → green-200(#B2E4A6) の順。
 * hgroupの3色の点と同じ組み合わせ。縦積みの中での位置で決まるので nth-child で出し分ける。 */
.guest-menu-item--small:nth-child(3n + 1)::before {
  background: var(--color-orange-200);
}

.guest-menu-item--small:nth-child(3n + 2)::before {
  background: var(--color-yellow-300);
}

.guest-menu-item--small:nth-child(3n)::before {
  background: var(--color-green-200);
}

@media (min-width: 1080px) {
  /* 横並びメニュー(ヘッダーナビ等)のホバー。PCのみ */
  .guest-menu-item:not(.guest-menu-item--small) {
    transition: opacity 0.3s;
  }

  .guest-menu-item:not(.guest-menu-item--small):hover {
    opacity: 0.6;
  }
}