@charset "UTF-8";

/**
 * Theme Name: Grand Sunrise
 * Template:   twentytwentyfour
 * ...other header fields
 */


/*
Theme Name: Cocoon Child
Template:   cocoon
Version:    1.1.3
*/

/*--------------------------------------
  子テーマ用のスタイルを書く
--------------------------------------*/
/* 必要ならばここにコードを書く */


/*--------------------------------------
  レスポンシブデザイン用のメディアクエリ
--------------------------------------*/

/* 1023px以下 */
@media screen and (max-width: 1023px){
  /* 必要ならばここにコードを書く */
}

/* 834px以下 */
@media screen and (max-width: 834px){
  /* 必要ならばここにコードを書く */
}

/* 480px以下 */
@media screen and (max-width: 480px){
  /* 必要ならばここにコードを書く */
}




add_action( 'wp_enqueue_scripts', 'grand_sunrise_enqueue_styles' );

function grand_sunrise_enqueue_styles() {
	wp_enqueue_style( 
		'grand-sunrise-style', 
		get_stylesheet_uri()
	);
}

/* =========================
   本文・見出し・目次・表
   ========================= */
.entry-content{
  font-size: 17px;
  line-height: 1.9;
  letter-spacing: .02em;
  color: #2b2f33;
}

.entry-content h2{
  border-left: 4px solid #2684ff;
  padding-left: 10px;
  margin: 2.4em 0 1.2em;
  font-size: 1.4em;
  font-weight: 600;
  color: #222;
}
.entry-content h3{
  margin: 1.6em 0 .8em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}
.entry-content h2 + p{ font-weight: 500; color:#111; }
.toc{ margin: 1.8em 0 2.5em; }

.entry-content table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.2em 0;
  font-size: .95em;
}
.entry-content th, .entry-content td{
  border: 1px solid #dee3ea;
  padding: 8px 12px;
  text-align: left;
}
.entry-content th{
  background: #f1f4f8;
  font-weight: 600;
}

/* =========================
   コード表示（崩れの元を除去した最小セット）
   ========================= */

/* 1) ラッパの高さ固定を解除（必要最小限のみ） */
.entry-content .wp-block-code,
.entry-content .hljs,
.entry-content .prism-code,
.entry-content .prettyprint{
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* 2) pre（コードブロック本体）のみ装飾 */
.entry-content .wp-block-code pre,
.entry-content pre{
  /* レイアウト */
  display: block;
  white-space: pre-wrap;          /* 自動折返し */
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: auto;               /* 横は必要時のみスクロール */
  overflow-y: hidden;             /* 縦バーは出さない */
  max-height: none;
  height: auto;

  /* 見た目 */
  background: #fafbfc;
  border: 1px solid #e6e9ee;
  border-radius: 6px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95em;
  line-height: 1.55;
}

/* 3) pre直下のcodeは継承のみ（ブロック化しない） */
.entry-content pre > code{
  white-space: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  border: 0;
  display: inline;                /* ← ここが重要：ブロック化しない */
}

/* 4) 段落内などpre以外のインラインcodeは“ピル表示”で統一（任意） */
.entry-content :not(pre) > code{
  display: inline;
  background: #f5f7f9;
  border: 1px solid #e6e9ee;
  border-radius: 4px;
  padding: .05em .35em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .95em;
}

/* 本文領域を広げる */
@media (min-width: 1024px){
  .content .main { max-width: 900px; }
}


/* 5) H2直後にコードが来たときの余白 */
.entry-content h2 + pre,
.entry-content h2 + .wp-block-code{ margin-top: 1em; }


/***** Step1: Base Reading Layout *************************/

/* 本文の文字サイズ・行間・字間（PC/モバイル共通の土台） */
.entry-content{
  font-size: 17px;           /* 16→17で視認性UP */
  line-height: 1.9;          /* 長文でも読み疲れにくい黄金比 */
  letter-spacing: .02em;     /* わずかに字間を空ける */
  color: #2b2f33;            /* 黒より少し柔らかい濃灰 */
}

/* PC幅で本文カラムを少し広げる（デフォだとやや窮屈） */
@media (min-width: 1024px){
  .content .main{ max-width: 900px; }  /* 880〜920の範囲が最適 */
}

/* 段落上下の余白を少しだけ増やして“息継ぎ”を作る */
.entry-content p{
  margin-top: 0.85em;
  margin-bottom: 0.85em;
}

/* 章の最初の説明文は少しだけ強調（読み出しを助ける） */
.entry-content h2 + p{
  font-weight: 500;
  color: #111;
}

/* 見出しの階層感（H2/H3の余白とサイズのみ先に整える） */
.entry-content h2{
 border-radius: 4px;
　  border-left: 5px solid #2684ff;
  background: linear-gradient(90deg, rgba(38,132,255,.08) 0%, transparent 80%);
  padding: .45em .85em;
  margin: 2.8em 0 1.5em;
  font-size: 1.45em;
  border-radius: 4px;
 
}
.entry-content h3{
  margin: 1.5em 0 .75em;
  font-size: 1.15em;
  font-weight: 600;
  color: #333;
}

/* リストの読みやすさ（行間を詰めず軽く） */
.entry-content ul,
.entry-content ol{
  margin: .9em 0 .9em 1.5em;  /* 左にだけインデント */
  line-height: 1.9;
}

/* 引用ブロックは“薄く目立たせる”（注意喚起が必要な時に活きる） */
.entry-content blockquote{
  background: #f9fafc;
  border-left: 4px solid #2684ff;
  padding: .8em 1em;
  margin: 1.2em 0;
  color: #444;
}

/* 画像は本文幅にフィット、角丸で硬さを緩和（任意） */
.entry-content img{
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.toc{
  background: #f9fafc;
  border: 1px solid #e4e8ee;
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.toc-title{
  font-weight:600;
  color:#007acc;
  margin-bottom:8px;
}
.entry-content th, .entry-content td{
  border: 1px solid #dce2ea;
  padding: 10px 14px;
  vertical-align: top;
}
.entry-content tr:nth-child(even){
  background:#f9fbfc;
}

.entry-content pre{
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin-top: 1.2em;
}


/* 2) 目次タイトルを見出し化＋行間微調整 */
.toc{ background:#f9fafc; border:1px solid #e4e8ee; border-radius:8px; padding:14px 18px; box-shadow:0 2px 4px rgba(0,0,0,.02); }
.toc-title{ font-weight:600; color:#007acc; margin:0 0 8px; }
.toc li{ margin:.35em 0; }

/* 3) コード枠に軽い影と上余白（情報密度を上げる） */
.entry-content pre{ box-shadow:0 1px 3px rgba(0,0,0,.05); margin-top:1.2em; }

/* 4) 表の視認性を少しUP */
.entry-content th,.entry-content td{ border:1px solid #dce2ea; padding:10px 14px; vertical-align:top; }
.entry-content tr:nth-child(even){ background:#f9fbfc; }