/**
 * SP Header 002
 * 
 * スマートフォン用のヘッダーセクション
 * - 固定配置（fixed）でトップに表示
 * - 76.8rem以上で非表示
 * - input checkboxでメニュー開閉（CSSのみ）
 * - WordPressのサブメニュー階層対応
 */

/* ヘッダーコンテナ */
:where(.sp-header-002) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--wp--custom--z-index--fixed, 1030);
  background-color: var(--wp--preset--color--white);
  border-bottom: 1px solid var(--wp--preset--color--gray-lighter);

  /* 76.8rem以上で非表示 */
  @media (min-width: 768px) {
    display: none;
  }
}

/* サイトタイトル（SEO用、非表示） */
:where(.sp-header-002__site-title) {
  padding: var(--wp--preset--spacing--2-xm, 0.8rem);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm, 0.8rem);
  background: var(--wp--preset--color--primary);
}

/* ヘッダーラッパー */
:where(.sp-header-002__wrapper) {
  position: relative;
  width: 100%;
  background-color: var(--wp--preset--color--white);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6rem;
  padding: 0 var(--wp--preset--spacing--base, 1.6rem);
}

/* インナーコンテナ */
:where(.sp-header-002__inner) {
  flex-grow: 1;
}

/* ロゴエリア */
:where(.sp-header-002__logo) {
  display: inline-block;
}
:where(.sp-header-002__logo-image) {
  height: 4rem;
}
:where(.sp-header-002__logo a) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--wp--preset--color--basic-text);
  transition: opacity var(--wp--custom--transition--duration--base, 300ms)
    var(--wp--custom--transition--timing--ease-out);
}

:where(.sp-header-002__logo a:active) {
  opacity: 0.8;
}

:where(.sp-header-002__logo-text) {
  font-size: var(--wp--preset--font-size--xl, 2rem);
  font-weight: var(--wp--custom--font-weight--bold, 700);
  line-height: 1;
  letter-spacing: var(--wp--custom--letter-spacing--xs, 0.015em);
}

:where(.sp-header-002__logo-subtext) {
  font-size: var(--wp--preset--font-size--sm, 0.8rem);
  font-weight: var(--wp--custom--font-weight--normal, 400);
  margin-top: var(--wp--preset--spacing--4-xs, 0.2rem);
  color: var(--wp--preset--color--gray-dark);
}

/* メニュー開閉用のチェックボックス（非表示） */
:where(.sp-header-002__menu-toggle) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ハンバーガーメニューボタン */
:where(.sp-header-002__menu-button) {
  position: fixed;
  top: 3.6rem;
  user-select: none;
  right: 0.8rem;
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  z-index: 2;
  background: var(--wp--preset--color--primary);
  * {
    transition: all 0.3s ease-in-out;
  }
}

:where(.sp-header-002__menu-button:hover) {
  opacity: 0.8;
}

/* ハンバーガーメニューアイコン */
:where(.sp-header-002__menu-icon) {
  display: block;
  width: 2.4rem;
  height: 0.1rem;
  background-color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border--radius--sm, 4px);
  transition: transform var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out),
    opacity var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out);
}
:where(.sp-header-002__menu-button .sp-header-002__menu-icon:nth-child(2)) {
  width: 1.6rem;
  position: relative;
  left: 0.4rem;
}
/* メニューが開いた時のアイコンアニメーション */
:where(
    .sp-header-002__menu-button.is-open .sp-header-002__menu-icon:nth-child(1)
  ) {
  transform: translateY(0.7rem) rotate(45deg);
  position: relative;
  top: -0.2rem;
}

:where(
    .sp-header-002__menu-button.is-open .sp-header-002__menu-icon:nth-child(2)
  ) {
  transform: translateY(-0.7rem) rotate(-45deg);
  width: 2.4rem;
  top: 0.5rem;
  left: 0;
  position: relative;
}

/* ナビゲーションエリア */
:where(.sp-header-002__nav) {
  position: fixed;
  top: 9rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--wp--preset--color--white);
  transform: translateX(100%);
  transition: transform var(--wp--custom--transition--duration--base, 300ms)
    var(--wp--custom--transition--timing--ease-out);
  overflow-y: auto;
  z-index: var(--wp--custom--z-index--modal, 1000);
}

/* メニューが開いた時のナビゲーション表示 */
:where(.sp-header-002__nav.is-open) {
  transform: translateX(0);
}

/* メニューリスト */
:where(.sp-header-002__menu) {
  list-style: none;
  margin: 0;
  padding: var(--wp--preset--spacing--lg, 2.4rem) 0;
}

/* メニューアイテム */
:where(.sp-header-002__menu li) {
  margin: 0;
  padding: 0;
  position: relative;
}

/* メニューリンク */
:where(.sp-header-002__menu a) {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--sm, 1.2rem);
  text-decoration: none;
  color: var(--wp--preset--color--basic-text);
  font-size: var(--wp--preset--font-size--lg, 1.8rem);
  font-weight: var(--wp--custom--font-weight--medium, 500);
  padding: var(--wp--preset--spacing--base, 1.6rem)
    var(--wp--preset--spacing--lg, 2.4rem);
  border-bottom: 1px solid var(--wp--preset--color--gray-lighter);
  transition: background-color
    var(--wp--custom--transition--duration--fast, 150ms)
    var(--wp--custom--transition--timing--ease-out);
}

:where(.sp-header-002__menu a:active) {
  background-color: var(--wp--preset--color--gray-lightest);
}

/* 現在のページ */
:where(.sp-header-002__menu .current-menu-item > a),
:where(.sp-header-002__menu .current-menu-parent > a),
:where(.sp-header-002__menu .is-active > a) {
  color: var(--wp--preset--color--primary);
  background-color: var(--wp--preset--color--primary-lightest);
}

/* メニューアイコン */
:where(.sp-header-002__menu .material-symbols-outlined) {
  font-size: 2.4rem;
}

/* メニューコンテンツ */
:where(.sp-header-002__menu .menu-item-content) {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--3-xs, 0.25rem);
  flex-grow: 1;
}

/* メニュータイトル */
:where(.sp-header-002__menu .menu-item-title) {
  line-height: 1.2;
}

/* メニュー説明文 */
:where(.sp-header-002__menu .menu-item-description) {
  font-size: var(--wp--preset--font-size--xs, 1.2rem);
  color: var(--wp--preset--color--gray);
  line-height: 1.2;
}

/* バッジ */
:where(.sp-header-002__menu .menu-item-badge) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--wp--preset--spacing--4-xs, 0.2rem)
    var(--wp--preset--spacing--xs, 0.8rem);
  background-color: var(--wp--preset--color--error);
  color: var(--wp--preset--color--white);
  font-size: var(--wp--preset--font-size--sm, 0.8rem);
  font-weight: var(--wp--custom--font-weight--bold, 700);
  border-radius: var(--wp--custom--border--radius--full, 9999px);
}

/* サブメニュー開閉用のチェックボックス（非表示） */
:where(.sp-header-002__submenu-toggle) {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 子要素を持つメニューアイテムの+ボタン */
:where(.sp-header-002__menu .menu-item-has-children > a::after),
:where(.sp-header-002__menu .has-submenu > a::after) {
  content: "+";
  position: absolute;
  right: var(--wp--preset--spacing--lg, 2.4rem);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--2-xl, 2.4rem);
  font-weight: var(--wp--custom--font-weight--light, 300);
  width: 4.4rem;
  height: 4.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--wp--custom--transition--duration--fast, 150ms)
    var(--wp--custom--transition--timing--ease-out);
}

/* サブメニュー開いた時の+を-に変更 */
:where(
    .sp-header-002__submenu-toggle:checked + .menu-item-has-children > a::after
  ),
:where(.sp-header-002__submenu-toggle:checked + .has-submenu > a::after) {
  content: "-";
  transform: translateY(-50%) rotate(180deg);
}

/* サブメニュー */
:where(.sp-header-002__menu .sub-menu) {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: var(--wp--preset--color--gray-lightest);
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wp--custom--transition--duration--base, 300ms)
    var(--wp--custom--transition--timing--ease-out);
}

/* サブメニューの表示 */
:where(.sp-header-002__submenu-toggle:checked ~ .sub-menu) {
  max-height: 100vh;
}

/* サブメニューアイテム */
:where(.sp-header-002__menu .sub-menu li) {
  margin: 0;
}

:where(.sp-header-002__menu .sub-menu a) {
  padding-left: var(--wp--preset--spacing--3-xl, 5rem);
  font-size: var(--wp--preset--font-size--base, 1.6rem);
  font-weight: var(--wp--custom--font-weight--normal, 400);
  border-bottom-color: var(--wp--preset--color--gray-light);
}

/* メニュー開いた時の背景オーバーレイ */
:where(.sp-header-002__overlay) {
  position: fixed;
  top: 9rem;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--wp--custom--overlay--dark--5, rgba(0, 0, 0, 0.5));
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out),
    visibility var(--wp--custom--transition--duration--base, 300ms)
      var(--wp--custom--transition--timing--ease-out);
  z-index: var(--wp--custom--z-index--backdrop, 1040);
}

:where(.sp-header-002__menu-toggle:checked ~ .sp-header-002__overlay) {
  opacity: 1;
  visibility: visible;
}

/* お気に入りトリガーボタン */
:where(.sp-header-002__favorite-trigger) {
  background-color: transparent;
  border: none;
  cursor: pointer;
}

:where(.sp-header-002__favorite-icon) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

:where(.sp-header-002__favorite-icon-svg) {
  width: 2rem;
  height: 2rem;
  color: var(--wp--preset--color--secondary, #db57a5);
}

:where(.sp-header-002__favorite-badge) {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--wp--preset--spacing--3-xs, 0.25rem);
  background-color: var(--wp--preset--color--secondary, #db57a5);
  color: var(--wp--preset--color--white, #ffffff);
  font-size: var(--wp--preset--font-size--xs, 1.2rem);
  font-weight: var(--wp--custom--font-weight--semibold, 600);
  border-radius: var(--wp--custom--border--radius--full, 9999px);
  border: 2px solid var(--wp--preset--color--white, #ffffff);
}

:where(.sp-header-002__favorite-badge[data-count="0"]) {
  display: none;
}

/* ヘッダー固定時のbodyへのパディング調整 */
:where(body:has(.sp-header-002)) {
  @media (max-width: 768px) {
    padding-top: 6.5rem;
  }
}

/* スクロール時にbodyをロック */
@media (max-width: 768px) {
  body.menu-is-open {
    overflow: hidden;
  }
}