/**
 * 記事・固定ページ用ブロックスタイル（Phase 1: テキスト系）
 * design_handoff_wp_blocks の「コアブロックの block style で足りる」項目。
 * 新規ブロックは作らず、既存コアブロックに is-style-* のスタイル選択肢を追加するだけ。
 * 編集者が明示的にスタイルを選ばない限り適用されないため、既存コンテンツ（トップページ含む）には影響しない。
 */

/* コアの配置ユーティリティ（wp-block-library.cssを読み込まないクラシックテーマのため未定義だった） */
.has-text-align-center {
  text-align: center;
}

/* ---- 1. 見出し（H2/H3） ---- */
.wp-block-heading.is-style-section {
  position: relative;
  text-align: center;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-md);
  padding-bottom: 20px;
}
.wp-block-heading.is-style-section::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-light);
}

.wp-block-heading.is-style-sub {
  position: relative;
  margin-top: 40px;
  padding-left: 16px;
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-sm);
}
/* このブロックに限らず、親要素内の最初の要素はmargin-topを持たせない
   （reset.cssの * { margin:0 } により本来ゼロのところへ、このスタイル自身が
   margin-topを付けているため、最初の要素になるケースだけ個別に打ち消す）。 */
.wp-block-heading.is-style-sub:first-child {
  margin-top: 0;
}
.wp-block-heading.is-style-sub::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--wp--preset--color--primary);
}

/*
 * is-style-subの左バー無し版。is-style-subは元々セクション内の広めのコンテンツ幅を
 * 想定した見出しのため、3カラムなど狭いカラム内で使うとバーの高さ・余白が
 * アンバランスに見える。そうした狭いカラム内の小見出し用に用意する。
 */
.wp-block-heading.is-style-sub-plain {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--heading-sm);
  font-weight: 700;
  color: var(--wp--preset--color--heading-text);
  margin: 0;
}

/* ---- 2/3/4. 段落（リード文・アイキャッチラベル・注釈） ---- */
.wp-block-paragraph.is-style-eyebrow {
  font-size: var(--wp--preset--font-size--base);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--primary-text);
}

.wp-block-paragraph.is-style-lead {
  font-size: var(--wp--preset--font-size--base);
  line-height: 2.1;
  color: var(--wp--preset--color--body-text);
}

.wp-block-paragraph.is-style-annotation {
  font-size: var(--wp--preset--font-size--base);
  line-height: 1.8;
  color: var(--wp--preset--color--annotation-text);
}

/* 本文中の強調（マーカー用インラインフォーマット、block-formats.js から <mark class="cwt-marker"> として付与）
   通常の <strong> には手を加えず、この専用クラスにのみ適用する（既存コンテンツへの影響を避けるため） */
mark.cwt-marker {
  background-color: transparent;
  background-image: linear-gradient(
    transparent 62%,
    var(--wp--preset--color--lavender-bg) 62%
  );
  color: var(--wp--preset--color--primary-text);
  font-weight: 700;
}

/* ---- 13. ボタン ---- */
.wp-block-button.is-style-soft .wp-block-button__link {
  background-color: var(--wp--preset--color--lavender-bg);
  /* primary-dark はコントラスト比 約2.45:1 でWCAG AA(4.5:1)未達のため、body-text(約7.3:1)に変更 */
  color: var(--wp--preset--color--body-text);
  border: none;
}
.wp-block-button.is-style-soft .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--lavender-blue-bg);
}

/*
 * is-style-outline は「core/button標準のスタイルだから自動で見た目がつく」と
 * 想定されていたが、このテーマは wp-block-library（WordPressコア標準CSS）を
 * 読み込んでいないため、実際にはベースの見た目（透明背景・枠線）が一切定義されておらず、
 * theme.json のボタン既定値（濃色塗りつぶし）がそのまま出てしまっていた
 * （下のホバー用ルールだけでは不十分だった）。ここでベースの見た目を定義する。
 */
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--wp--preset--color--heading-text);
  border: 2px solid currentColor;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--wp--preset--color--lavender-bg);
}

/*
 * アイコン付きボタン（別窓で開く外部リンク／ページ内遷移など）。
 * is-style-fill/soft/outline とは別の「配色」ではなく「リンク種別」を表す
 * 追加情報なので、block style（排他選択）ではなく通常のCSSクラスとして用意する。
 * エディタの「高度な設定 > 追加CSSクラス」に cwt-btn-icon-external / cwt-btn-icon-anchor /
 * cwt-btn-icon-arrow-right / cwt-btn-icon-arrow-left を追記することで、
 * is-style-fill・is-style-soft・is-style-outline のどれとも自由に組み合わせられる。
 * アイコンは mask-image（currentColorで塗りつぶし）なので、
 * どの配色のボタンに乗せても自動的にラベルと同じ文字色になる。
 * ※クラス名にハイフン2つ（--）を含めると、WordPressのブロックシリアライズ時に
 * JSON属性中のハイフンがユニコードエスケープに変換される
 * （HTMLコメントを壊さないためのWordPress core側の仕様）ため、
 * あえて1本ハイフンのクラス名にしている。
 * ※「別窓で開く」実際の動作（target="_blank"）は、リンクツールバーの
 * 「新しいタブで開く」から別途設定してください（これは見た目のアイコンのみ）。
 */
.cwt-btn-icon-external .wp-block-button__link,
.cwt-btn-icon-anchor .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cwt-btn-icon-external .wp-block-button__link::after,
.cwt-btn-icon-anchor .wp-block-button__link::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* 外部リンク（別窓で開く）：右上に飛び出す矢印つきの箱 */
.cwt-btn-icon-external .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6M15 3h6v6M10 14 21 3'/%3E%3C/svg%3E");
}
/* ページ内遷移（アンカーリンク）：下向き矢印 */
.cwt-btn-icon-anchor .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M12 4v16M6 14l6 6 6-6'/%3E%3C/svg%3E");
}

/*
 * 右矢印（次へ進む・詳しく見るなど）はラベルの後ろ、
 * 左矢印（戻るボタン）はラベルの前にアイコンを置く。
 * 前後どちらに付くかが異なるため、::after/::before を使い分ける。
 */
.cwt-btn-icon-arrow-right .wp-block-button__link,
.cwt-btn-icon-arrow-left .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.cwt-btn-icon-arrow-right .wp-block-button__link::after,
.cwt-btn-icon-arrow-left .wp-block-button__link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* 右矢印（次へ進む・詳しく見るなど）：ラベルの後ろ */
.cwt-btn-icon-arrow-right .wp-block-button__link::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
}
/* 左矢印（戻るボタン）：ラベルの前 */
.cwt-btn-icon-arrow-left .wp-block-button__link::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E");
}

/* ---- 17. 区切り線・スペーサー ---- */
.wp-block-separator.is-style-hairline {
  border: none;
  /*
   * theme.jsonの共通divider色（#EFE8F5）はbeige-bg等の淡色背景とほぼ同化して
   * 見えなくなるため、hairline専用にcaption-text（グレー）を使う。
   * dividerは front-page.css 含む他の多数の箇所で共有されているため、
   * ここではdivider変数自体は変更せずセレクタを絞って上書きする。
   */
  border-top: 1px solid var(--wp--preset--color--caption-text);
}

.wp-block-separator.is-style-decorated {
  border: none;
  width: 64px;
  height: 4px;
  border-radius: 999px;
  background: var(--wp--preset--color--accent-light);
  margin-inline: auto;
}

/* ---- 18. テーブル・比較表 ---- */
.wp-block-table.is-style-zebra table {
  border-collapse: collapse;
  width: 100%;
}
.wp-block-table.is-style-zebra table td,
.wp-block-table.is-style-zebra table th {
  border: none;
  /* 薄紫（accent-light）。dividerより濃いので淡色背景に同化しない */
  border-bottom: 1px solid var(--wp--preset--color--accent-light);
  padding: 12px 16px;
  font-size: var(--wp--preset--font-size--base);
}
/* コアブロックのデフォルト（thead下の黒い3px罫線）が浮いて見えるため、薄紫に変更 */
.wp-block-table.is-style-zebra thead {
  border-bottom-color: var(--wp--preset--color--accent-light);
}
.wp-block-table.is-style-zebra table tbody tr:nth-child(even) td {
  background-color: var(--wp--preset--color--beige-bg);
}

/* ---- 38. 引用・参考文献 ---- */
.wp-block-quote.is-style-cited {
  border-left: 3px solid var(--wp--preset--color--accent-light);
  padding-left: 20px;
  margin-left: 0;
  font-style: normal;
}

/* ---- 49. 基本リスト ---- */
.wp-block-list.is-style-disc-dot {
  list-style: none;
  padding-left: 0;
}
.wp-block-list.is-style-disc-dot > li {
  position: relative;
  padding-left: 24px;
  font-size: var(--wp--preset--font-size--base);
}
.wp-block-list.is-style-disc-dot > li + li {
  margin-top: 4px;
}
.wp-block-list.is-style-disc-dot > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
}

.wp-block-list.is-style-numbered-circle {
  list-style: none;
  padding-left: 0;
  counter-reset: cwt-numbered-circle;
}
.wp-block-list.is-style-numbered-circle > li {
  position: relative;
  counter-increment: cwt-numbered-circle;
  padding-left: 40px;
  min-height: 28px;
  font-size: var(--wp--preset--font-size--base);
}
.wp-block-list.is-style-numbered-circle > li + li {
  margin-top: 8px;
}
.wp-block-list.is-style-numbered-circle > li::before {
  content: counter(cwt-numbered-circle);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary);
  color: var(--wp--preset--color--white);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- 29/32. セクション背景（白／ラベンダー／ベージュ／ダーク／グラデーション） ----
   editor_script不要のグループブロックのスタイル。上下80px（SP 56px）の余白を持つ「セクション」の型。
   フルブリード（alignfull）で使う想定。内側の幅制限は theme.json の layout.contentSize に任せる。 */
.wp-block-group.is-style-section-white,
.wp-block-group.is-style-section-lavender,
.wp-block-group.is-style-section-beige,
.wp-block-group.is-style-section-dark,
.wp-block-group.is-style-section-gradient {
  padding-top: 80px;
  padding-bottom: 80px;
  padding-inline: var(--wp--custom--container--padding, 24px);
}
.wp-block-group.is-style-section-white {
  background-color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-lavender {
  background-color: var(--wp--preset--color--lavender-bg);
}
.wp-block-group.is-style-section-beige {
  background-color: var(--wp--preset--color--beige-bg);
}
.wp-block-group.is-style-section-dark {
  background-color: var(--wp--preset--color--dark-accent);
  color: var(--wp--preset--color--white);
}
.wp-block-group.is-style-section-gradient {
  background: var(--wp--preset--gradient--article-mv-gradient);
}
@media (max-width: 767px) {
  .wp-block-group.is-style-section-white,
  .wp-block-group.is-style-section-lavender,
  .wp-block-group.is-style-section-beige,
  .wp-block-group.is-style-section-dark,
  .wp-block-group.is-style-section-gradient {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}