/* ============================================================
   block-styles.css
   Gutenberg ブロックスタイル（is-style-*）の CSS 定義
   フロントエンド・エディタ両方で読み込む

   対象
     core/heading : centered / underline / number / plain / rule
     core/button  : primary / secondary / text / invert / arrow
   ============================================================ */

@layer gutenberg {

  /* ==========================================================
     HEADING  (core/heading)
     .wp-block-heading に is-style-{name} が付与される
     ========================================================== */

  /*
   * ① h2 デフォルト(bar)・h3 デフォルト(square)・h4 デフォルト(border-left)
   *    が typography.css で定義されている。
   * ② is-style-* が付くと、それらを適宜上書きして新しい装飾を適用する。
   * ③ h3 は display:flex でデザインされているため、
   *    bar/centered/underline/number/plain すべてで display:block にリセットする。
   */

  /* ── 共通リセット（is-style-* が付いたあらゆる見出しレベルを均す） ── */
  .wp-block-heading.is-style-centered,
  .wp-block-heading.is-style-underline,
  .wp-block-heading.is-style-number,
  .wp-block-heading.is-style-plain,
  .wp-block-heading.is-style-rule {
    display: block;   /* h3 の flex を解除 */
  }

  /* ── 縦線（デフォルト）: is-style-bar ───────────────────── */
  /* h2 のデフォルト装飾を他レベルでも再現したい場合に使用 */
  .wp-block-heading.is-style-bar {
    position: relative;
    padding-left: 0.9em;
    display: block;
  }
  .wp-block-heading.is-style-bar::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.25em;
    bottom: 0.25em;
    width: 3px;
    height: auto;
    background: var(--c-accent);
    transform: none;
    border: none;
    border-radius: 0;
    flex-shrink: unset;
  }

  /* ── 中央寄せ ＋ 下線: is-style-centered ─────────────────── */
  .wp-block-heading.is-style-centered {
    text-align: center;
    padding-left: 0;
    padding-bottom: 0.75em;
    position: relative;
  }
  .wp-block-heading.is-style-centered::before {
    content: "";
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
    width: 2.5em;
    height: 1px;
    background: var(--c-accent);
    border: none;
    border-radius: 0;
    flex-shrink: unset;
  }

  /* ── 下線のみ: is-style-underline ───────────────────────── */
  .wp-block-heading.is-style-underline {
    padding-left: 0;
    padding-bottom: 0.65em;
    position: relative;
  }
  .wp-block-heading.is-style-underline::before {
    content: "";
    position: absolute;
    left: 0;
    top: auto;
    bottom: 0;
    width: 2.5em;
    height: 2px;
    background: var(--c-accent);
    transform: none;
    border: none;
    border-radius: 0;
    flex-shrink: unset;
  }

  /* ── 番号付き（ステップ）: is-style-number ───────────────── */
  /*
   * CSS カウンターで自動連番。
   * カウンターは .wp-block-post-content または body でリセットされる。
   * ※ 手動番号にしたい場合は HTML 属性 data-number="01" を使う旧方式を推奨。
   */
  .wp-block-post-content,
  .entry-content,
  .editor-styles-wrapper {
    counter-reset: block-heading-number;
  }
  .wp-block-heading.is-style-number {
    padding-left: 0;
    position: relative;
    counter-increment: block-heading-number;
  }
  .wp-block-heading.is-style-number::before {
    content: counter(block-heading-number, decimal-leading-zero);
    position: static;
    display: inline;
    width: auto;
    height: auto;
    background: transparent;
    font-family: var(--ff-num);
    font-size: 0.5em;
    font-weight: var(--fw-medium);
    color: var(--c-accent);
    letter-spacing: 0.15em;
    margin-right: 0.85em;
    transform: none;
    border: none;
    border-radius: 0;
    flex-shrink: unset;
    vertical-align: baseline;
  }

  /* ── 装飾なし: is-style-plain ───────────────────────────── */
  .wp-block-heading.is-style-plain {
    padding-left: 0;
    padding-bottom: 0;
    border: none;
  }
  .wp-block-heading.is-style-plain::before {
    display: none;
  }
  /* h4 は border-left で装飾されているため解除 */
  h4.wp-block-heading.is-style-plain {
    border-left: none;
  }

  /* ── 罫線（h3 用）: is-style-rule ───────────────────────── */
  .wp-block-heading.is-style-rule {
    padding-left: 0;
    padding-bottom: 0.5em;
    border-bottom: 1px solid var(--c-line);
  }
  .wp-block-heading.is-style-rule::before {
    display: none;
  }

  /* ==========================================================
     BUTTON  (core/button)
     .wp-block-button に is-style-{name} が付与される。
     スタイルは内側の .wp-block-button__link に当てる。
     ========================================================== */

  /* ── 共通ベース: WordPress デフォルト装飾をリセット ─────── */
  .wp-block-button[class*="is-style-"] > .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    gap: 0.7em;
    padding: 1em 1.75em;
    font-family: var(--ff-sans);
    font-size: var(--fs-small);
    font-weight: var(--fw-medium);
    letter-spacing: 0.1em;
    line-height: 1;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 0;          /* WP デフォルトの角丸を外す */
    box-shadow: none;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    white-space: nowrap;
  }

  /* ── プライマリ（塗り）: is-style-primary ───────────────── */
  .wp-block-button.is-style-primary > .wp-block-button__link {
    background: var(--c-action-primary);
    color: var(--c-action-on);
    border-color: var(--c-action-primary);
  }
  .wp-block-button.is-style-primary:hover > .wp-block-button__link {
    background: var(--c-action-primary-hover);
    border-color: var(--c-action-primary-hover);
    opacity: 1;
  }

  /* ── セカンダリ（枠線）: is-style-secondary ─────────────── */
  .wp-block-button.is-style-secondary > .wp-block-button__link {
    background: transparent;
    color: var(--c-text);
    border-color: var(--c-text);
  }
  .wp-block-button.is-style-secondary:hover > .wp-block-button__link {
    background: var(--c-text);
    color: var(--c-action-on);
    opacity: 1;
  }

  /* ── テキストリンク: is-style-text ──────────────────────── */
  .wp-block-button.is-style-text > .wp-block-button__link {
    padding: 0;
    border: none;
    background: transparent;
    color: var(--c-text);
    letter-spacing: 0.05em;
  }
  .wp-block-button.is-style-text:hover > .wp-block-button__link {
    color: var(--c-accent);
    opacity: 1;
  }

  /* ── 反転（白抜き・暗背景用）: is-style-invert ──────────── */
  .wp-block-button.is-style-invert > .wp-block-button__link {
    background: var(--c-bg);
    color: var(--c-text);
    border-color: var(--c-bg);
  }
  .wp-block-button.is-style-invert:hover > .wp-block-button__link {
    background: transparent;
    color: var(--c-bg);
    border-color: var(--c-bg);
    opacity: 1;
  }

  /* ── 矢印付き: is-style-arrow ───────────────────────────── */
  .wp-block-button.is-style-arrow > .wp-block-button__link::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    mask-image: var(--icon-arrow-right);
    -webkit-mask-image: var(--icon-arrow-right);
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    transition: transform var(--dur) var(--ease);
  }
  .wp-block-button.is-style-arrow:hover > .wp-block-button__link::after {
    transform: translateX(4px);
  }

}