/* ==========================================================================
   Ashiya Deco Blocks － 記事本文スタイル（タイポグラフィ ＋ コンテンツ幅）
   uktsc / The Style Dictionary 風のエディトリアル
   --------------------------------------------------------------------------
   ・適用範囲は .ab-typo だけです。プラグインが本文出力を
     <div class="ab-typo"> で自動的に包むため、テーマ側の class 名を
     推測する必要がありません（設定画面でオフにできます）。
     オフにする場合は、テーマのテンプレート側で本文を
     <div class="ab-typo"> で囲んでください。

   ・セレクタでクラスを3回重ねている（.ab-typo.ab-typo.ab-typo）のは詳細度を
     上げるためです。テーマ側に
       body.single .entry-content p { font-size: 14px }
     のような指定があると、重ねていないと負けます。消さないでください。

   ・--ab-* 変数の定義元は blocks.css です。幅と色は
     設定 > 記事装飾ブロック から変更できます。
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 本文コンテナ：幅と基本の文字
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo {
  max-width: var(--ab-content-max);
  margin-inline: auto;
  padding-inline: var(--ab-gutter);
  box-sizing: border-box;

  color: var(--ab-text);
  font-family:
    "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Noto Sans JP", "Yu Gothic Medium", "游ゴシック Medium",
    YuGothic, Meiryo, system-ui, sans-serif;
  font-size: var(--ab-fs-body);
  line-height: var(--ab-lh-body);
  letter-spacing: var(--ab-ls);
  font-feature-settings: "palt" 1;   /* 日本語の詰めを自然に */

  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;

  overflow-x: clip;                  /* SPで横スクロールが出るのを防ぐ */
}

.ab-typo.ab-typo.ab-typo * { box-sizing: border-box; }


/* --------------------------------------------------------------------------
   2. 段落
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo p {
  margin: 0 0 var(--ab-gap-p);
  font-size: var(--ab-fs-body);
  line-height: var(--ab-lh-body);
  color: var(--ab-text);
}

.ab-typo.ab-typo.ab-typo > *:last-child { margin-bottom: 0; }

/* 空の段落（エディタで生まれがちな <p></p> や <p>&nbsp;</p>）は
   余白だけを生むので畳む。表の直後に大きな空きができる原因になります。 */
.ab-typo.ab-typo.ab-typo p:empty {
  display: none;
}

/* 注意：ここに `p > br:only-child { display: none }` を書いてはいけません。
   :only-child はテキストノードを数えないため、
   <p>1行目<br>2行目</p> の <br> にも当たってしまい、
   本文中の改行が消えます。空段落は PHP 側で取り除いています。 */


/* --------------------------------------------------------------------------
   3. 見出し
   装飾は最小限。サイズ・太さ・余白でヒエラルキーを作る。
   「見出しの上は広く／下は狭く」でセクションのまとまりを出しています。
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo h2 {
  margin: var(--ab-gap-h2) 0 1.2em;
  padding: 0 0 0.55em;
  border: 0;
  border-bottom: 1px solid var(--ab-heading);
  color: var(--ab-heading);
  font-size: var(--ab-fs-h2);
  font-weight: 700;
  line-height: var(--ab-lh-head);
  letter-spacing: 0.01em;
}

.ab-typo.ab-typo.ab-typo h3 {
  margin: var(--ab-gap-h3) 0 0.85em;
  padding: 0;
  border: 0;
  color: var(--ab-heading);
  font-size: var(--ab-fs-h3);
  font-weight: 700;
  line-height: var(--ab-lh-head);
}

.ab-typo.ab-typo.ab-typo h4 {
  margin: 2em 0 0.75em;
  padding: 0;
  border: 0;
  color: var(--ab-heading);
  font-size: var(--ab-fs-h4);
  font-weight: 700;
  line-height: 1.6;
}

.ab-typo.ab-typo.ab-typo h5 {
  margin: 1.8em 0 0.6em;
  color: var(--ab-heading);
  font-size: 1em;
  font-weight: 700;
}

/* 本文の先頭に見出しが来たときは上余白を詰める */
.ab-typo.ab-typo.ab-typo > :is(h2, h3, h4):first-child { margin-top: 0; }

/* 見出しの直後は詰めて、見出しと本文をひとかたまりに見せる */
.ab-typo.ab-typo.ab-typo :is(h2, h3, h4) + p { margin-top: 0; }


/* --------------------------------------------------------------------------
   4. リスト
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo :is(ul, ol) {
  margin: 0 0 var(--ab-gap-p);
  padding-left: 1.4em;
}

.ab-typo.ab-typo.ab-typo li {
  margin-bottom: 0.55em;
  padding-left: 0.15em;
  font-size: var(--ab-fs-body);
  line-height: 1.85;
}

.ab-typo.ab-typo.ab-typo li:last-child { margin-bottom: 0; }

.ab-typo.ab-typo.ab-typo li > :is(ul, ol) { margin: 0.55em 0 0; }

.ab-typo.ab-typo.ab-typo ul > li::marker { color: var(--ab-line-strong); }

.ab-typo.ab-typo.ab-typo ol > li::marker {
  color: var(--ab-muted);
  font-weight: 700;
  font-size: 0.95em;
}


/* --------------------------------------------------------------------------
   5. リンク・強調
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo a {
  color: var(--ab-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.24em;
  text-decoration-color: var(--ab-line-strong);
  transition: color .15s ease, text-decoration-color .15s ease;
}

.ab-typo.ab-typo.ab-typo a:hover {
  color: var(--ab-muted);
  text-decoration-color: currentColor;
}

.ab-typo.ab-typo.ab-typo :is(strong, b) {
  font-weight: 700;
  color: var(--ab-heading);
}

.ab-typo.ab-typo.ab-typo em {
  font-style: normal;
  font-weight: 700;
}

/* 日本語は斜体を持たないため、ブラウザが機械的に傾けた「疑似斜体」になります。
   マーカー系の要素に font-style: italic が当たっていると読みにくいので、
   本文内では斜体を打ち消します。 */
.ab-typo.ab-typo.ab-typo :is(i, mark, cite, var, address, dfn),
.ab-typo.ab-typo.ab-typo [class*="marker"],
.ab-typo.ab-typo.ab-typo [class*="highlight"],
.ab-typo.ab-typo.ab-typo [class*="keiko"],
.ab-typo.ab-typo.ab-typo [style*="italic"] {
  font-style: normal;
}

/* マーカーの黄色などはそのまま活かしつつ、余計な装飾だけ整える */
.ab-typo.ab-typo.ab-typo mark {
  padding: 0 0.1em;
  color: inherit;
}

.ab-typo.ab-typo.ab-typo :is(small, figcaption) {
  display: block;
  margin-top: 0.6em;
  color: var(--ab-muted);
  font-size: var(--ab-fs-small);
  line-height: 1.7;
}


/* --------------------------------------------------------------------------
   6. 画像・区切り線・素の表
   （装飾ブロックの表は blocks.css 側が担当します）
   -------------------------------------------------------------------------- */
.ab-typo.ab-typo.ab-typo :is(img, video, iframe) {
  max-width: 100%;
  height: auto;
  display: block;
}

.ab-typo.ab-typo.ab-typo figure { margin: 2em 0; }

.ab-typo.ab-typo.ab-typo hr {
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--ab-line);
}

/* 表の体裁は blocks.css 側で組みます。
   ここで display:block にすると、表が本文幅いっぱいに広がらず
   左に縮んでしまうため、指定しません。 */
.ab-typo.ab-typo.ab-typo table {
  width: 100%;
  max-width: 100%;
}


/* --------------------------------------------------------------------------
   7. レスポンシブ
   文字サイズと幅は clamp() で連続的に変わるため、ここは見出し前後の
   詰めだけ。変数のブレイクポイント上書きは blocks.css 側にあります。
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
  .ab-typo.ab-typo.ab-typo h2 { padding-bottom: 0.5em; }
  .ab-typo.ab-typo.ab-typo :is(ul, ol) { padding-left: 1.25em; }
  .ab-typo.ab-typo.ab-typo { -webkit-text-size-adjust: 100%; }
}


/* --------------------------------------------------------------------------
   8. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .ab-typo.ab-typo.ab-typo {
    max-width: none;
    font-size: 11pt;
    line-height: 1.7;
  }
}