/* ===========================================
  Font Awesome風アイコン呼び出し (SVGローカルファイル版)
  -------------------------------------------
  - HTMLは <span class="icon-1"> など短く書ける
  - CSSにアイコンのパスを変数化して集約管理
  - 色やサイズはCSSで動的に変更可能
  =========================================== */

  .fontawesome-wrapper {
    /* ------------------------------------------
    共通の変数
    ------------------------------------------ */
    --icon-size: 2.5em;            /* アイコンの表示サイズ（em単位で可変） */
    --icon-color: currentColor;    /* アイコンの色。currentColorにすると親のcolorを継承 */

    /* ------------------------------------------
    各アイコンごとの変数
    - フルURLをそのまま変数に入れる
    - ディレクトリとファイル名を分けての連結は不可（黒四角になる原因）
    - 差し替えたい場合はこの行だけ修正すればOK
    ------------------------------------------ */
    --icon-utensils: url("/wp-content/themes/swell_child/images/icon/utensils-solid-full.svg");
    --icon-mug:      url("/wp-content/themes/swell_child/images/icon/mug-hot-solid-full.svg");
    --icon-location: url("/wp-content/themes/swell_child/images/icon/location-dot-solid-full.svg");

    /* ------------------------------------------
    オプション: カラーやサイズのバリエーション
    - 必要に応じてwrapperにクラスを付ければ一括変更可
    ------------------------------------------ */
    &.is-accent { --icon-color: #e76f51; }  /* 強調色（例: オレンジ系） */
    &.is-lg     { --icon-size: 2rem; }      /* 大きめアイコン */
  
    /* ------------------------------------------
       共通スタイル
       - .icon-* クラスを持つ要素に ::before 擬似要素を生成
       - ここでアイコンを描画する
       ------------------------------------------ */
    [class^="icon-"], [class*=" icon-"] {
      &::before {
        /*display: inline-block;               /* インライン要素として横並び */
        display: block;               /* ブロック要素として縦並び */
        width: var(--icon-size);             /* 共通サイズを適用 */
        height: var(--icon-size);
        /* margin-right: .5em;                  /* テキストとの間隔 */
        margin: auto;                         /* 中央配置 */
        background-color: var(--icon-color); /* アイコン色（=マスク塗りの色） */
        content: "";                         /* 擬似要素を生成するために必須 */
  
        vertical-align: -0.125em;            /* テキストと高さを揃える微調整 */
        -webkit-mask-position: center;
        mask-position: center;
  
        /* マスク設定（SVGの形状を抜き型にして背景色で塗る） */
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
      }
    }
  
    /* ------------------------------------------
       個別アイコン指定
       - ここで参照するURL変数を切り替えるだけ
       - 変数は上で定義済み
       ------------------------------------------ */
    .icon-1::before {
      -webkit-mask-image: var(--icon-utensils);
      mask-image: var(--icon-utensils);
    }
  
    .icon-2::before {
      -webkit-mask-image: var(--icon-mug);
      mask-image: var(--icon-mug);
    }
  
    .icon-3::before {
      -webkit-mask-image: var(--icon-location);
      mask-image: var(--icon-location);
    }
  }