@charset "utf-8";

/* -----------------------------------------------
* Project: Burger Menu (SP overlay menu)
* ----------------------------------------------- */

/* 初期（非表示） */
.p-burger-menu {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 14px;
  font-weight: 500;
  font-feature-settings: "palt";
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* visibilityは遅延で切替 */
  transition: opacity .2s ease, visibility 0s linear .2s;
  /* local vars (scoped) */
  --_size: .6em;    /* caret size */
  --_stroke: 1px;  /* caret stroke */
  --_offset: .5em;  /* right offset */
}

/* 表示 */
.is-drawer-open .p-burger-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* 即座にvisibleへ */
  transition: opacity .2s ease, visibility 0s;
}

.p-burger-menu__panel {
  position: absolute;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 84px 35px 150px;
  overflow-y: auto;
}

/* CTA（主要導線） */
.p-burger-menu__cta-button {
  margin-top: 24px;
  margin-inline: auto;
  font-size: 1.6rem;
}

/* ユーティリティリンク（会員サイトなど） */
.p-burger-menu__utility-list {
  padding-block: 12px;
}

.p-burger-menu__utility-item {
  margin-top: 24px;
  text-align: center;
}

.p-burger-menu__nav {
  margin-top: 24px;
}

.p-burger-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.p-burger-menu__item {
  margin: 0;
  border-top: 1px solid var(--gaia-color-neutral-dark);

  &:last-child {
    border-bottom: 1px solid var(--gaia-color-neutral-dark);
  }
}

.p-burger-menu__link {
  background: none;
  border: none;
  text-align: left;
  display: flex;
  width: 100%;
  padding: 14px 2px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--gaia-color-neutral-dark);
  position: relative;
  padding-right: calc(var(--_offset) + var(--_size) + 12px);
  /* 右アイコン分 */

  &[aria-expanded="true"] {
    border-bottom: 1px solid var(--gaia-color-neutral-dark);

    &::after {
      transform: translateY(-30%) rotate(-45deg);
    }
  }
}

/* 既定: 子メニューを持たない項目は右向き矢印 */
.p-burger-menu__link::after {
  content: '';
  position: absolute;
  right: var(--_offset);
  top: 50%;
  width: var(--_size);
  height: var(--_size);
  border-top: var(--_stroke) solid currentColor;
  border-right: var(--_stroke) solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

/* caret 表示（下向き） */
.p-burger-menu__item:has(> .p-burger-menu__sublist)>.p-burger-menu__link:not([aria-expanded="true"])::after {
  content: '';
  position: absolute;
  right: var(--_offset);
  top: 50%;
  border: none; /* 既定の右向き矢印の境界線をリセット */
  width: var(--_size);
  height: var(--_size);
  border-right: var(--_stroke) solid currentColor;
  border-bottom: var(--_stroke) solid currentColor;
  transform: translateY(-70%) rotate(45deg); /* › を下向きにした形状 */
}

.p-burger-menu__sublist {
  list-style: none;
  padding-block: 11px;
}

.p-burger-menu__sublink {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  padding: 11px 2px;
  line-height: calc(20 / 14);
  color: var(--gaia-color-neutral-dark);
  text-decoration: none;
}

/* prevent body scroll & show states */
.is-drawer-open {
  overflow: hidden;
}

.is-drawer-open .p-burger-menu__panel {
  opacity: 1;
  visibility: visible;
}