/**
 * Section: Treatment Navigation
 * 施術ナビゲーション（3軸検索セクション）
 */

@layer sections {
  /* セクション全体：背景のみ全幅表示 */
  :where(.s-treatment-nav-001) {
    background: linear-gradient(
      135deg,
      var(--wp--preset--color--primary-lightest) 0%,
      var(--wp--preset--color--white) 100%
    );
    padding: var(--wp--preset--spacing--xl) 0;
    border-bottom: 2px solid var(--wp--preset--color--primary-light);
  }

  /* コンテンツ領域：最大幅制限（ワイドコンテンツ幅） */
  :where(.s-treatment-nav-001__container) {
    max-width: var(--wp--style--global--wide-size); /* 1200px */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--preset--spacing--base);
    padding-right: var(--wp--preset--spacing--base);
  }

  @media (min-width: 768px) {
    :where(.s-treatment-nav-001__container) {
      padding-left: var(--wp--preset--spacing--2-xl);
      padding-right: var(--wp--preset--spacing--2-xl);
    }
  }

  /* タイトル */
  :where(.s-treatment-nav-001__title) {
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--sm);
    font-size: var(--wp--preset--font-size--xl);
    font-weight: var(--wp--custom--font-weight--bold);
    color: var(--wp--preset--color--primary-darker);
    margin: 0 0 var(--wp--preset--spacing--lg);
    padding-bottom: var(--wp--preset--spacing--sm);
    border-bottom: 2px solid var(--wp--preset--color--primary-light);
    line-height: var(--wp--custom--line-height--sm);
  }

  :where(.s-treatment-nav-001__title .material-symbols-outlined) {
    font-size: 2.8rem;
    color: var(--wp--preset--color--primary);
  }

  @media (min-width: 768px) {
    :where(.s-treatment-nav-001__title) {
      font-size: var(--wp--preset--font-size--2-xl);
      margin-bottom: var(--wp--preset--spacing--xl);
    }
  }
}