/* ============================================================
   Fortune Fox — カスタムスタイル
   対象テーマ: Luxeritas Child Theme (luxech)
   構成: 1.ベース 2.見出し 3.ホーム 4.記事カード 5.サイドバー 6.本文 7.レスポンシブ

   前提となる本番環境の実測値:
   - Luxeritas が html{font-size:62.5%!important} を設定しているため
     **1rem = 10px**。このファイルの rem 値はすべてその前提で書いてある。
   - page-optimize が CSS を /_static/?? に結合するため読み込み順は保証
     されない。全ルールが特異度だけで勝つように書くこと。
   - Markdown 自動取込の記事は素の <h2>/<h3>/<h4> を出力し、Gutenberg 記事は
     class="wp-block-heading" を持つ。見出しは両方に当てる必要がある。
   ============================================================ */

:root{
  --ff-accent:#f59e0b;          /* アイキャッチと揃えたアンバー */
  --ff-accent-dk:#b45309;
  --ff-navy:#0f1729;
  --ff-text:#1f2937;
  --ff-muted:#6b7280;
  --ff-line:#e6e9ef;
  --ff-bg:#f2f5f9;
  --ff-card:#fff;
  --ff-radius:12px;
  --ff-shadow:0 1px 2px rgba(15,23,41,.05), 0 6px 20px rgba(15,23,41,.05);
  --ff-shadow-hi:0 2px 4px rgba(15,23,41,.07), 0 14px 36px rgba(15,23,41,.11);
}

/* ---------- 1. ベースタイポグラフィ ---------- */

/* Luxeritas の body,li,pre,blockquote{font-size:1.4rem} (0,0,1) と同点に
   ならないよう html を足して (0,0,2) にする。 */
html body{
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",
              "Yu Gothic Medium","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:16px;               /* 既定の14pxは本文として小さい */
  line-height:1.9;
  color:var(--ff-text);
  background:var(--ff-bg);      /* 背景をグレーにして本文カードを浮かせる */
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,.entry-title,.side-title{
  font-feature-settings:"palt" 1;   /* 日本語の字間を詰めて締まって見せる */
  letter-spacing:.02em;
  color:var(--ff-navy);
}

a{ transition:color .18s ease, opacity .18s ease; }

#primary #core{
  background:var(--ff-card);
  border-radius:var(--ff-radius);
  box-shadow:var(--ff-shadow);
}

/* li は Luxeritas が 1.4rem 固定にしているので本文だけ本文サイズへ揃える */
.single #mainEntity li{ font-size:1.6rem; }

/* ---------- 2. 見出し ---------- */

/* トップ／固定ページのセクション見出し（「最近の投稿」など h4）。
   single では記事本文用の h4 ルールを使うので除外する。 */
body:not(.single) #mainEntity h4.wp-block-heading{
  position:relative;
  font-size:2.4rem;
  font-weight:700;
  line-height:1.5;
  margin:0 0 2.8rem;
  padding:0 0 1.1rem;
  border-left:0;                    /* .post h4 の border-left:12px #999 を打ち消す */
  border-bottom:1px solid var(--ff-line);
}
body:not(.single) #mainEntity h4.wp-block-heading::after{
  content:"";
  position:absolute;
  left:0; bottom:-1px;
  width:5.6rem; height:3px;
  background:var(--ff-accent);
  border-radius:2px;
}

/* Newspack のセクション見出しを使うと、カード見出しが H3 になり、
   H1（ヒーロー）→ H2（最近の投稿）→ H3（各記事）の階層になる。 */
body.home.page #mainEntity .wpnbha .article-section-title{
  position:relative;
  flex-basis:100%;
  width:100%;
  font-size:2.4rem;
  font-weight:700;
  line-height:1.5;
  margin:0;
  padding:0 0 1.1rem;
  border:0;
  border-bottom:1px solid var(--ff-line);
  color:var(--ff-navy);
}
body.home.page #mainEntity .wpnbha .article-section-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:5.6rem;
  height:3px;
  background:var(--ff-accent);
  border-radius:2px;
}

/* 記事本文の大見出し。
   Gutenberg 記事 = h2.wp-block-heading / Markdown 取込記事 = 素の h2。
   single の #mainEntity 内にある h2 は本文見出しだけ（関連記事・SNS・
   トラックバック・サイドバーの見出しはすべて #mainEntity の外にある）ので、
   :not(.entry-title) を付けたうえで素の h2 も拾う。
   トップのカード見出しは h2.entry-title かつ body.single ではないので当たらない。
   既定は .post h2{border-left:8px solid #999;font-size:2.4rem;margin-top:50px;
   padding:8px 20px}。 */
#mainEntity h2.wp-block-heading,
.single #mainEntity h2:not(.entry-title){
  font-size:2.2rem;
  font-weight:700;
  line-height:1.6;
  margin:4.4rem 0 1.8rem;
  padding:.8rem 0 .8rem 1.4rem;
  border-left:4px solid var(--ff-accent);
  background:linear-gradient(90deg,#fbfaf6,transparent 70%);
}

/* 既定は .post h3{font-size:2.2rem;padding:2px 15px;margin-top:50px;
   margin-left:5px;border-left:2px #999 solid}。 */
#mainEntity h3.wp-block-heading,
.single #mainEntity h3:not(.entry-title){
  font-size:1.8rem;
  font-weight:700;
  margin:3.2rem 0 1.4rem;
  margin-left:0;                    /* .post h3 の margin-left:5px */
  padding:0 0 .6rem;
  border-left:0;                    /* .post h3 の border-left:2px #999 */
  border-bottom:1px solid var(--ff-line);
}

/* 記事本文の h4（Markdown の #### / Gutenberg の見出し4）。
   既定は .post h4{padding:0 12px;border-left:solid 12px #999}。
   トップのセクション見出しとは別物なので single 限定にする。 */
.single #mainEntity h4.wp-block-heading,
.single #mainEntity h4:not(.entry-title){
  font-size:1.6rem;
  font-weight:700;
  margin:2.6rem 0 1rem;
  padding:0 0 0 1rem;
  border-left:3px solid var(--ff-line);
}

/* ---------- 3. ホーム ---------- */

/* ホームでは重複するサイドバーを外し、記事カードへ横幅を渡す。 */
body.home.page #breadcrumb,
body.home.page #sidebar{ display:none; }
body.home.page #main{
  flex:0 0 100%;
  float:none;
  width:100%;
  max-width:100%;
  min-width:0;
  margin:0;
}
body.home.page #core{
  margin-left:0;
  margin-right:0;
}
body.home.page #mainEntity{
  width:100%;
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

/* 管理者用編集リンクなど、テーマ設定を外しても残り得る下段の固定ページUI。 */
body.home.page #mainEntity > .meta-box,
body.home.page #mainEntity > hr.pbhr,
body.home.page #core > aside,
body.home.page #mainEntity .posts-under-1{
  display:none;
}

/* 既存写真をブランド色のスクリーンで統一し、文字の可読性を確保する。 */
body.home.page #mainEntity .wp-block-cover{
  color:#fff;
}
body.home.page #mainEntity .wp-block-cover .wp-block-cover__background{
  background-color:var(--ff-navy);
  opacity:.72;
}
body.home.page #mainEntity .wp-block-cover .wp-block-cover__inner-container{
  width:100%;
  max-width:88rem;
  margin:0 auto;
  padding:2.4rem;
  text-align:center;
}
body.home.page #mainEntity .wp-block-cover h1,
body.home.page #mainEntity .wp-block-cover p{
  color:#fff;
  text-align:center;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
}
body.home.page #mainEntity .wp-block-cover h1{
  font-size:3.6rem;
  line-height:1.45;
  margin-bottom:1rem;
}
body.home.page #mainEntity .wp-block-cover h1 .ff-nowrap{ white-space:nowrap; }
body.home.page #mainEntity .wp-block-cover p{
  max-width:72rem;
  margin:0 auto;
  font-size:1.7rem;
  line-height:1.9;
}

/* ---------- 4. 記事一覧カード（Newspack グリッド） ---------- */

/* .wpnbha.is-grid は display:block のただの箱で、flex コンテナはその直下の div。
   gap を直接書いても効かず、article の
   flex-basis:calc(33.33% - var(--wpnbha-col-gap)/3*2) とも辻褄が合わなくなる。
   変数を上書きして gap と flex-basis の両方へ流す。 */
#mainEntity .wpnbha.is-grid{ --wpnbha-col-gap:2.4rem; }

/* 以下、カード関連はすべて #mainEntity を前置して ID 特異度で確定させる。
   Newspack はブロック直下に <style id="newspack-blocks-inline-css"> を body 内へ
   出力し、さらに結合バンドル側に
   @media(min-width:782px){.wpnbha.ts-3 article .entry-title{font-size:1.2em}} = (0,3,1)
   を持つため、クラスだけでは勝てない。
   一部だけ当たって中途半端に崩れるのを避けるため、ブロック全体を同じ
   スコープで揃えている。 */
#mainEntity .wpnbha article{
  display:flex;
  flex-direction:column;
  background:var(--ff-card);
  border:1px solid var(--ff-line);
  border-radius:var(--ff-radius);
  overflow:hidden;
  box-shadow:var(--ff-shadow);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#mainEntity .wpnbha article:hover{
  transform:translateY(-3px);
  box-shadow:var(--ff-shadow-hi);
  border-color:#d7dce6;
}
#mainEntity .wpnbha article:focus-within{
  transform:translateY(-3px);
  box-shadow:var(--ff-shadow-hi);
  border-color:#d7dce6;
}

/* サムネイルをカード上端に密着させる */
#mainEntity .wpnbha article .post-thumbnail{
  margin:0;
  line-height:0;
  background:var(--ff-navy);
}
#mainEntity .wpnbha article .post-thumbnail img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
  transition:transform .35s ease;
}
#mainEntity .wpnbha article:hover .post-thumbnail img{ transform:scale(1.03); }
#mainEntity .wpnbha article:focus-within .post-thumbnail img{ transform:scale(1.03); }

#mainEntity .wpnbha article .entry-wrapper{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:1.8rem 2rem;
}

/* #mainEntity を足したことで .post h2（border-left:8px #999 / padding:8px 20px）
   と .post h2:first-child（margin-top:30px）も同時に上書きできるため、
   以前必要だった !important は不要になった。 */
#mainEntity .wpnbha article .entry-title{
  border-left:0;
  padding:0;
  margin:0 0 .9rem;
  font-size:1.7rem;
  font-weight:700;
  line-height:1.6;
  display:-webkit-box;
  -webkit-line-clamp:2;             /* タイトル2行でカード高さを揃える */
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:3.2em;
}
#mainEntity .wpnbha article .entry-title a{
  color:var(--ff-navy);
  text-decoration:none;
}
#mainEntity .wpnbha article:hover .entry-title a{ color:var(--ff-accent-dk); }
#mainEntity .wpnbha article:focus-within .entry-title a{ color:var(--ff-accent-dk); }

#mainEntity .wpnbha article a:focus-visible{
  outline:3px solid var(--ff-accent-dk);
  outline-offset:3px;
  border-radius:2px;
}
#mainEntity .wpnbha article .post-thumbnail a:focus-visible{ outline-offset:-3px; }

/* 記事の分類を一目で分かるようにする。 */
#mainEntity .wpnbha article .cat-links{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:0 0 .9rem;
  font-size:1.2rem;
  line-height:1.5;
}
#mainEntity .wpnbha article .cat-links a{
  display:inline-flex;
  padding:.2rem .8rem;
  border-radius:999px;
  background:#fdf3e3;
  color:#8a4b08;
  font-weight:700;
  text-decoration:none;
}
#mainEntity .wpnbha article .cat-links a:hover,
#mainEntity .wpnbha article .cat-links a:focus-visible{
  background:#fbe7c0;
  color:#713b05;
}

#mainEntity .wpnbha article .entry-wrapper p{
  font-size:1.4rem;
  line-height:1.8;
  color:var(--ff-muted);
  margin:0 0 1.4rem;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* 日付はカード下端に固定 */
#mainEntity .wpnbha article .entry-meta{
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--ff-line);
  font-size:1.3rem;
  color:var(--ff-muted);
  letter-spacing:.03em;
}
#mainEntity .wpnbha article .entry-meta time.updated:not(.published){ display:none; }

/* ---------- 5. サイドバー ---------- */

/* Luxeritas の #side .widget{margin:0 18px;padding:20px 18px} は (1,1,0) で
   #sidebar .widget と同点になる。DOM は #sidebar > #side > #side-fixed > .widget
   なので #sidebar #side を重ねて (2,1,0) にする。
   （#mainEntity 内にも .widget があるが、この指定なら巻き込まない） */
#sidebar #side .widget{
  background:var(--ff-card);
  border:1px solid var(--ff-line);
  border-radius:var(--ff-radius);
  box-shadow:var(--ff-shadow);
  padding:1.8rem 2rem 2rem;
  margin-bottom:2.4rem;
}

#sidebar .side-title{
  position:relative;
  font-size:1.6rem;
  font-weight:700;
  margin:0 0 1.4rem;
  padding:0 0 1rem 1.1rem;
  border-bottom:1px solid var(--ff-line);
}
#sidebar .side-title::before{
  content:"";
  position:absolute;
  left:0; top:.15em;
  width:3px; height:1.05em;
  background:var(--ff-accent);
  border-radius:2px;
}

/* 新着記事ウィジェット
   サムネイルが 150x150 の正方形クロップで配信されるため、アイキャッチ内の
   文字が途中で切れる。画像を外してテキストリストに整理する。
   Luxeritas 側は #thk-new .toc / #thk-new p.new-meta / #thk-new p.new-title を
   持ち、後者2つは (1,1,1) で素の .new-meta / .new-title (1,1,0) に勝つ。
   同点負け・特異度負けしないよう .toc.clearfix と p. 付きで書く。 */
#thk-new .toc.clearfix{
  display:block;
  padding:1.1rem 0;
  border-bottom:1px dashed var(--ff-line);
}
#thk-new .toc.clearfix:first-child{ padding-top:0; }
#thk-new .toc.clearfix:last-child{ border-bottom:0; padding-bottom:0; }
#thk-new figure.term{ display:none; }
#thk-new .excerpt{ margin:0; width:100%; }

#thk-new .toc p.new-meta{
  margin:0 0 .4rem;
  font-size:1.2rem;
  line-height:1.6;
  color:var(--ff-muted);
  letter-spacing:.03em;
}
#thk-new .new-meta .sep{ margin:0 .6rem; opacity:.5; }
#thk-new .new-meta .cat_or_tag{
  display:inline-block;
  padding:.1rem .8rem;
  border-radius:999px;
  background:#fdf3e3;
  color:#a16207;
  font-weight:600;
}
#thk-new .toc p.new-title{ margin:0; }
#thk-new .new-title a{
  font-size:1.4rem;
  font-weight:600;
  line-height:1.65;
  color:var(--ff-navy);
  text-decoration:none;
}
#thk-new .new-title a:hover{ color:var(--ff-accent-dk); }

/* 検索・カテゴリ。
   カテゴリウィジェットは <select> で描画されるため ul/li は生成されない。
   Luxeritas の .widget_categories select は height:32px を持つので明示解除する。 */
#sidebar .widget_categories select,
#sidebar .widget_search input[type="text"],
#sidebar .widget_search input[type="search"]{
  width:100%;
  height:auto;
  padding:.9rem 1.1rem;
  font-size:1.4rem;
  border:1px solid var(--ff-line);
  border-radius:8px;
  background:#fbfcfe;
}

/* 右カラムの余白が目立つのでスクロール追従させる */
#side-fixed{ position:sticky; top:3.2rem; }

/* ---------- 6. 記事本文 ---------- */

#mainEntity table{
  border-collapse:collapse;
  width:100%;
  font-size:1.4rem;
}
#mainEntity table th{ background:#f6f8fb; font-weight:700; }
#mainEntity table th,
#mainEntity table td{
  border:1px solid var(--ff-line);
  padding:.9rem 1.3rem;
}

#mainEntity pre,
#mainEntity .wp-block-code{
  border-radius:8px;
  border:1px solid #e2e6ee;
  background:#fafbfd;
  font-size:1.3rem;
  line-height:1.75;
}

/* Luxeritas の blockquote は box-shadow と 200px の装飾クォート（:after）を
   持つので両方消す。 */
#mainEntity blockquote{
  border-left:3px solid var(--ff-line);
  background:#fafbfd;
  border-radius:0 8px 8px 0;
  box-shadow:none;
  padding:1.6rem 2rem;
  color:#4b5563;
}
#mainEntity blockquote::after{ content:none; }

#mainEntity .wp-block-image img{ border-radius:8px; }

/* 目次。Luxeritas の #toc_container{display:table;...} と同点になるので
   #mainEntity を足して (2,0,0) にし、display も上書きする。 */
#mainEntity #toc_container{
  display:block;
  max-width:100%;
  border:1px solid var(--ff-line);
  border-radius:10px;
  background:#fbfcfe;
  padding:1.6rem 1.9rem;
}

/* ---------- 7. レスポンシブ ---------- */

@media screen and (max-width:1023px){
  #primary #core{ padding:3.2rem 2.4rem; }
}

/* Newspack は 600px 未満で自動的に1列。600-781pxは2列にして、
   タブレットでカードが細い3列になるのを防ぐ。 */
@media screen and (min-width:600px) and (max-width:781px){
  #mainEntity .wpnbha.columns-3 article{
    flex-basis:calc(50% - var(--wpnbha-col-gap)/2 - .1px);
  }
}

@media screen and (max-width:782px){
  html body{ font-size:15px; line-height:1.85; }
  #primary #core{
    padding:2.4rem 1.8rem;
    border-radius:0;
    box-shadow:none;
  }
  body:not(.single) #mainEntity h4.wp-block-heading{ font-size:2.1rem; }
  body.home.page #mainEntity .wpnbha .article-section-title{ font-size:2.1rem; }
  body.home.page #mainEntity .wp-block-cover h1{ font-size:2.7rem; }
  body.home.page #mainEntity .wp-block-cover p{ font-size:1.5rem; }
  #mainEntity h2.wp-block-heading,
  .single #mainEntity h2:not(.entry-title){ font-size:1.9rem; }
  #mainEntity .wpnbha article .entry-title{ font-size:1.6rem; min-height:0; }
  #sidebar #side .widget{
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  #side-fixed{ position:static; }
}

@media (prefers-reduced-motion:reduce){
  a,
  #mainEntity .wpnbha article,
  #mainEntity .wpnbha article .post-thumbnail img{
    transition:none;
  }
  #mainEntity .wpnbha article:hover,
  #mainEntity .wpnbha article:focus-within,
  #mainEntity .wpnbha article:hover .post-thumbnail img,
  #mainEntity .wpnbha article:focus-within .post-thumbnail img{
    transform:none;
  }
}