/**
 * Term Hierarchy List Component (共通コンポーネント)
 * タームの階層構造リスト（折りたたみ式）
 * JavaScriptで制御（details/summary不使用）
 *
 * Modifiers:
 * - c-term-hierarchy--treatment: 施術用（ゴールド）
 * - c-term-hierarchy--nayami: 悩み用（ピンク）
 */

/* ========================================
   Base Styles (共通スタイル)
   ======================================== */

/* リストコンテナ */
.c-term-hierarchy-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--sm);
}

/* 折りたたみ要素（div） */
.c-term-hierarchy {
  border-radius: var(--wp--custom--border--radius--md);
  overflow: hidden;
  background: var(--wp--preset--color--white);
}


/* 親タームラベル（button） */
.c-term-hierarchy__parent {
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--wp--preset--spacing--xs);
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg);
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--font-weight--bold);
  color: inherit;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  user-select: none;
  transition: all var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing-ease);
}

/* 展開アイコン */
.c-term-hierarchy__icon {
  flex-shrink: 0;
  font-size: var(--wp--preset--font-size--lg);
  transition: transform var(--wp--custom--transition--duration--fast)
    var(--wp--custom--transition--timing-ease);
}

/* 展開時のアイコン回転 */
.c-term-hierarchy.is-open > .c-term-hierarchy__parent .c-term-hierarchy__icon {
  transform: rotate(180deg);
}

/* ターム名 */
.c-term-hierarchy__name {
  flex: 1;
  line-height: 1.5;
}

/* カウント表示（バッジスタイル） */
.c-term-hierarchy__count {
  flex-shrink: 0;
  min-width: var(--wp--preset--spacing--lg);
  height: var(--wp--preset--spacing--lg);
  padding: 0 var(--wp--preset--spacing--xs);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--wp--preset--font-size--xs);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--white);
  border-radius: var(--wp--custom--border--radius--full);
  line-height: 1;
}

/* コンテンツエリア（折りたたみ対象） */
.c-term-hierarchy__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--wp--custom--transition--duration--base)
    var(--wp--custom--transition--timing-ease);
}

/* 展開時のコンテンツエリア */
.c-term-hierarchy.is-open > .c-term-hierarchy__content {
  max-height: 10000px;
}

/* 2階層目: セクション（見出し + グリッド） */
.c-term-hierarchy__section {
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg);
  border-top: var(--wp--custom--border--width--1) solid
    var(--wp--preset--color--gray-light);
}

.c-term-hierarchy__section:first-child {
  border-top: none;
}

/* 2階層目: 見出し */
.c-term-hierarchy__heading {
  margin: 0 0 var(--wp--preset--spacing--sm) 0;
  font-size: var(--wp--preset--font-size--base);
  font-weight: var(--wp--custom--font-weight--bold);
  color: var(--wp--preset--color--basic-text);
}

/* 3階層目: 2列グリッド */
.c-term-hierarchy__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--wp--preset--spacing--xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 3階層目: グリッドアイテム */
.c-term-hierarchy__grid-item {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  color: var(--wp--preset--color--gray-dark);
  background: var(--wp--preset--color--gray-lightest);
  border-radius: var(--wp--custom--border--radius--sm);
}

/* 2階層目のみ（3階層目なし） */
.c-term-hierarchy__single-item {
  padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: var(--wp--custom--font-weight--medium);
  color: var(--wp--preset--color--basic-text);
}

/* ========================================
   Treatment Modifier (施術用 - ゴールド)
   ======================================== */

.c-term-hierarchy--treatment {
  border: var(--wp--custom--border--width--1) solid
    var(--wp--preset--color--tertiary-lighter);
}

.c-term-hierarchy--treatment.c-term-hierarchy--no-children {
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--tertiary-lightest);
}

.c-term-hierarchy--treatment .c-term-hierarchy__parent {
  color: var(--wp--preset--color--tertiary-dark);
  background: var(--wp--preset--color--tertiary-lightest);
}

.c-term-hierarchy--treatment .c-term-hierarchy__parent:hover {
  background: var(--wp--preset--color--white);
  opacity: 0.7;
}

.c-term-hierarchy--treatment .c-term-hierarchy__icon {
  color: var(--wp--preset--color--tertiary);
}

.c-term-hierarchy--treatment .c-term-hierarchy__count {
  background: var(--wp--preset--color--tertiary);
}

/* Treatment - 見出し色 */
.c-term-hierarchy--treatment .c-term-hierarchy__heading {
  color: var(--wp--preset--color--tertiary-dark);
}

/* Treatment - グリッドアイテム背景 */
.c-term-hierarchy--treatment .c-term-hierarchy__grid-item {
  background: var(--wp--preset--color--tertiary-lightest);
  color: var(--wp--preset--color--tertiary-dark);
}

/* ========================================
   Nayami Modifier (悩み用 - ピンク)
   ======================================== */

.c-term-hierarchy--nayami {
  border: var(--wp--custom--border--width--1) solid
    var(--wp--preset--color--primary-lighter);
}

.c-term-hierarchy--nayami.c-term-hierarchy--no-children {
  padding: var(--wp--preset--spacing--base) var(--wp--preset--spacing--lg);
  background: var(--wp--preset--color--primary-lightest);
}

.c-term-hierarchy--nayami .c-term-hierarchy__parent {
  color: var(--wp--preset--color--primary-dark);
  background: var(--wp--preset--color--primary-lightest);
}

.c-term-hierarchy--nayami .c-term-hierarchy__parent:hover {
  background: var(--wp--preset--color--white);
  opacity: 0.7;
}

.c-term-hierarchy--nayami .c-term-hierarchy__icon {
  color: var(--wp--preset--color--primary);
}

.c-term-hierarchy--nayami .c-term-hierarchy__count {
  background: var(--wp--preset--color--primary);
}

/* Nayami - 見出し色 */
.c-term-hierarchy--nayami .c-term-hierarchy__heading {
  color: var(--wp--preset--color--primary-dark);
}

/* Nayami - グリッドアイテム背景 */
.c-term-hierarchy--nayami .c-term-hierarchy__grid-item {
  background: var(--wp--preset--color--primary-lightest);
  color: var(--wp--preset--color--primary-dark);
}

/* ========================================
   Responsive: スマートフォン
   ======================================== */

@media (max-width: 768px) {
  .c-term-hierarchy__parent {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
    font-size: var(--wp--preset--font-size--sm);
  }

  .c-term-hierarchy__icon {
    font-size: var(--wp--preset--font-size--base);
  }

  .c-term-hierarchy__count {
    min-width: 2rem;
    height: 2rem;
    font-size: 1rem;
  }

  /* 2階層目: セクション */
  .c-term-hierarchy__section {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  }

  /* 2階層目: 見出し */
  .c-term-hierarchy__heading {
    font-size: var(--wp--preset--font-size--sm);
    margin-bottom: var(--wp--preset--spacing--xs);
  }

  /* 3階層目: 1列グリッド（スマホ） */
  .c-term-hierarchy__grid {
    grid-template-columns: 1fr;
  }

  /* 3階層目: グリッドアイテム */
  .c-term-hierarchy__grid-item {
    font-size: var(--wp--preset--font-size--xs);
  }

  /* 2階層目のみ */
  .c-term-hierarchy__single-item {
    font-size: var(--wp--preset--font-size--xs);
  }

  .c-term-hierarchy--treatment.c-term-hierarchy--no-children,
  .c-term-hierarchy--nayami.c-term-hierarchy--no-children {
    padding: var(--wp--preset--spacing--sm) var(--wp--preset--spacing--base);
  }
}