/* =========================================================
   電気設備サイト専用オーバーライド
   目的: Focus親テーマ main.css がテーマ設定（太陽光ネイビー #17194C）で
   生成する見出し色が、電気ページに漏れるのを打ち消す。
   このファイルは電気テンプレ (*-electrical) からのみ読み込むこと。
   共有ファイル (child.css / theme-overrides.css / base.html) は触らない。
   ========================================================= */

/* ---------------------------------------------------------
   見出しの色（★2026-08-05 真因対応・ここが要）

   もともとは
       body h1〜h6 { color: var(--koden-text) }
   と直接指定していた。これは Focus親テーマ main.css が生成する
   太陽光ネイビー(#17194C)を打ち消すためだが、**直接指定は継承に必ず勝つ**ため、
   濃色背景セクション（color:#fff を持つ親）の中の見出しまで濃色になり、
   背景と同化して文字が消えた。
   実際に消えていた: 一覧ページのタイトル帯 / TOPの「施工事例」見出し
   （2026-08-05 実測: #caseStudy の h2 が rgb(31,32,35) で背景も濃色）。

   個別に白を指定して回ると必ず取りこぼす（実際に取りこぼした）ので、
   **見出しは色を指定せず親から継ぐ**方式に変える。
     - 明るいセクション → body の色（#1f2023）を継ぐ
     - 濃色セクション（color:#fff を持つ）→ 白を継ぐ
   これで新しいセクションを足しても同じ事故が起きない。
   --------------------------------------------------------- */
body {
  color: var(--koden-text, #1f2023);
}
body h1, body h2, body h3, body h4, body h5, body h6 {
  color: inherit;
}

/* ---------------------------------------------------------
   dnd_area（ドラッグ&ドロップ編集）のラッパー調整
   HubSpot が dnd_area の内側に入れる .dnd-section / .dnd-column には
   親テーマ由来の余白と最大幅（padding 0 20px 100px / max-width 1240px）が付く。
   そのままだと WP踏襲の全幅セクション（施工事例・サービス等）が内側に寄って別物になる
   （2026-08-05 実測: 1710px の画面で本文が 1220px に縮む）。
   ただし解除しっぱなしにすると、あとから編集UIで足した普通のモジュールが
   余白ゼロ・画面端まで走って読めなくなるため、用途で2種類に分ける。
   太陽光側には影響しない（このCSSは *-electrical テンプレからのみ読み込む）。
   --------------------------------------------------------- */

/* (A) 全幅セクションを並べる領域。自前で <section> を出すモジュール用 */
.kdel-dnd-flow .dnd-section { padding: 0 !important; }
.kdel-dnd-flow .dnd-section > .row-fluid {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.kdel-dnd-flow .dnd-column,
.kdel-dnd-flow .dnd-row { padding: 0 !important; margin: 0 !important; }

/* (A-2) ★あとから編集UIで追加された普通のモジュール（自前 <section> を持たないもの）は、
   読める幅と余白に戻す。これが無いと画面端まで文字が走る。 */
.kdel-dnd-flow .dnd-module:not(:has(> .hs_cos_wrapper > section)) {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 40px 20px !important;
}

/* (B) すでに .inner で幅が決まっている中に置く領域（イントロ）。
   幅は親に任せ、ラッパー由来の余分な余白だけ消す。追加モジュールも親の幅に収まる。 */
.kdel-dnd-inner .dnd-section { padding: 0 !important; }
.kdel-dnd-inner .dnd-section > .row-fluid {
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.kdel-dnd-inner .dnd-column,
.kdel-dnd-inner .dnd-row { padding: 0 !important; margin: 0 !important; }

/* ---------------------------------------------------------
   一覧ページ共通ヒーロー帯（記事 / コラム / お客様の声 / 施工事例）
   施工事例テンプレのインライン style にだけ入っていた定義を共通化。
   記事詳細（.pageTitleWrap / .pageTitleWrap.post）の帯を巻き込まないよう
   .kdel-hero を付けたときだけ効かせる。
   --------------------------------------------------------- */
/* 帯の高さ・文字サイズは現行WPの実測に合わせる（PC: 170px / 34px, SP: 95px / 23px）。
   施工事例は Figma WF1a（317:6938）で英字ラベル＋リード文＋左揃えの指定があるため
   .kdel-hero--left を付けて出し分ける。指定の無い一覧はWP踏襲＝中央揃え・ラベルなし。 */
.pageTitleWrap.kdel-hero .pageTitleInner {
  min-height: 170px;
  padding: 28px 20px;
}
.pageTitleWrap.kdel-hero--left .pageTitle { text-align: left; }
.pageTitleWrap.kdel-hero--left .pageTitleInner {
  max-width: 1400px;
  width: 90%;
  margin: 0 auto;
}
body .pageTitleWrap.kdel-hero .pageTitleEn {
  color: #ed4e00;
  font-family: "Jost", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.pageTitleWrap.kdel-hero .pageTitleJp {
  font-size: 34px;
  line-height: 1.5;
  margin: 0;
}
.pageTitleWrap.kdel-hero .pageTitleLead {
  color: #fff;
  font-size: 13px;
  margin: 10px 0 0;
  opacity: 0.9;
}

/* ★2026-08-13 撤去: ここにあった `.articleNav` / `.articleNav a` の独自スタイルは、
   一覧ページの独自タブナビ（全て/コラム/お客様の声）用に書いたもの。
   そのタブはWPに存在せず撤去したが、CSSだけが残り、**WPのフィルター**（同じ .articleNav クラスを使う）
   の見た目を上書きしてしまっていた。
   実測差分: 角丸 WP 3px→18px / 文字 14px→13px / padding 5px 10px→0 20px / 背景 透明→白。
   WP原本の値は electrical-second.css の `.articleNav a` に移植済みなので、それに任せる。 */

/* ul で出しているので list-style だけ落とす。
   横方向は WP の `.breadcrumb{width:90%;max-width:1400px;margin:0 auto}`（second.css の
   min-width:769px ブロック）に任せる。ここで margin:0 と書くと auto を潰して左端に張り付く。 */
ul.breadcrumb { list-style: none; margin-top: 0; margin-bottom: 0; }

@media (max-width: 768px) {
  .pageTitleWrap.kdel-hero .pageTitleInner { min-height: 95px; padding: 20px; }
  .pageTitleWrap.kdel-hero .pageTitleJp { font-size: 23px; }
  .pageTitleWrap.kdel-hero .pageTitleLead { font-size: 12px; }
}


/* ---------------------------------------------------------
   ページトップへ戻る（現行WP踏襲）
   位置と絵柄は electrical-common.css の #pageTop（WPからの移行分）に任せ、
   ここでは「下にスクロールしたら出す」挙動ぶんだけを足す。
   --------------------------------------------------------- */
#pageTop {
  position: fixed;
  right: 20px;
  bottom: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
#pageTop.is-visible {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 768px) {
  #pageTop { right: 12px; bottom: 16px; }
  #pageTop span { width: 42px; height: 43px; }
}

/* =========================================================
   記事詳細（blog-post-article-electrical）の WP踏襲まわり
   2026-08-06: WPと逐条突合して見つかった差分の是正。
   ========================================================= */

/* (1) 本文中の「2枚横並び」グループ。
   WPは記事ページごとに .wp-container-core-group-is-layout-N{flex-wrap:nowrap} を
   動的生成しており、クラス名が記事ごとに変わるため移行できない。
   同じ意味を持つ is-nowrap で代替する（実測: これが無いと2枚が縦積みで各780pxに膨らむ）。 */
.singleContents .wp-block-group.is-nowrap.is-layout-flex {
  flex-wrap: nowrap;
}

/* (2) スマホで本文が画面端に接触する問題。
   .singleContents の左右paddingが0のため、1カラム化したSPで文字・見出し・
   黄色マーカー・引用・著者枠がすべて端に貼りつく（2026-08-06 実測 左1-2px/右7px）。
   現行WPは左21px/右29px。 */
@media (max-width: 768px) {
  /* ★2026-09-08: WP下層DOMそのままのページ（page-content-electrical の narrow ＝
     <div id="contents" class="singleContents">）は #contents {padding:50px 0} が正で、
     左右20pxを足すと h2 が2行に折れボタン幅も縮む（thanks 実測）。#contents 付きは除外する。 */
  .singleContents:not(#contents) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* 全幅で見せたい画像だけは端まで出す（WP踏襲） */
  .singleContents .wp-block-image.alignfull,
  .singleContents .alignfull {
    margin-left: -20px;
    margin-right: -20px;
    width: calc(100% + 40px);
    max-width: calc(100% + 40px);
  }
}

/* (3) 記事タイトル帯。★2026-08-06 実測でWPの正解が判明したので置き換え。
   最初「WPは中央揃え」と読んだのは誤りで、WPは **左揃え**（コンテナ780pxが中央にあるため
   中央に見えていただけ）。WP実測(playwrightでcomputed style):
     1440px: .pageTitleInner text-align:left / width:780 / padding:55px 0 20px
             .pageTitleJp font-size:34px / line-height:51px
      414px: .pageTitleInner text-align:left / width:374 / padding:15px 0
             .pageTitleJp font-size:22px / line-height:33px            */
body .pageTitleWrap.post .pageTitleInner {
  text-align: left;
  max-width: 780px;
  margin-left: auto;
  margin-right: auto;
  padding: 55px 0 20px;
}
body .pageTitleWrap.post .pageTitleJp {
  font-size: 34px;
  line-height: 1.5;
  text-align: left;
}
@media (max-width: 768px) {
  body .pageTitleWrap.post .pageTitleInner { padding: 15px 0; max-width: none; }
  body .pageTitleWrap.post .pageTitleJp { font-size: 22px; line-height: 1.5; }
}

/* (4) パンくずの現在地。WPはタイトル全文を折り返して出す（省略しない）。 */
body ul.breadcrumb li.current span {
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
}

/* (5) カテゴリー／タグ行（WP .postTerms 踏襲）。WPはタイトル帯の直下に出す。 */
.postTerms {
  max-width: 780px;
  margin: 14px auto 0;
  padding: 0 24px;
  font-size: 13px;
}
.postTerms__row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.postTerms__row p { margin: 0; color: #555; }
/* ★2026-08-13: `.case-cat-label` の独自上書きを撤去。
   WP実測 rgb(255,242,201)=#fff2c9 / padding 2px 6px / radius 4px に対し、ここで
   #fdf3d9 / 3px 10px / radius 3px を当てていて一覧カードの見た目がWPと違っていた（実測差分）。
   WP原本の値は electrical-common.css:2675 に移植済みなので、それに任せる。
   同様に `.case-labels-tags span` の色もWPは #31708f（.case-labels-tags が持つ）。
   オレンジ #ed4e00 に変えていたので撤去。 */
@media (max-width: 768px) {
  .postTerms { padding: 0 20px; }
}

/* =========================================================
   (6) WP本文まわりで太陽光が「後から差し戻しになった」6項目の先回り対応
   出典: hubspot/wp-css-specs.md:133-140 / build-log:127-129
   太陽光では、表の左列が「会/社/名」と縦書きに化ける・ボタンが全幅になる・
   署名の右寄せが効かない、といった差し戻しが後から出た。同じ罠を踏まないよう先に当てる。
   ========================================================= */

/* 2列ラベル表: 左ヘッダ列をWP実測比(33%)に固定。auto-layoutだと長文セルに押されて左列が潰れる */
.singleContents .wp-block-table table,
.singleContents table.has-fixed-layout {
  table-layout: fixed;
  width: 100%;
}
.singleContents .wp-block-table th { width: 33.33%; }

/* テーブル罫線（WP block-library既定の 1px #c1c1d0）。色だけ拾って幅0＝罫線消失を防ぐ */
.singleContents .wp-block-table { border-top: 1px solid #c1c1d0; }
.singleContents .wp-block-table tr th,
.singleContents .wp-block-table tr td {
  border: 1px solid #c1c1d0;
  border-left: none;
  border-top: none;
}
/* 親テーマの表背景(#f5f5f5)を潰す */
.singleContents .wp-block-table table { background: transparent; }

/* 右/中央寄せクラス（署名の右寄せ等）。親テーマの左寄せ!importantに勝たせる */
.singleContents .has-text-align-right { text-align: right !important; }
.singleContents .has-text-align-center { text-align: center !important; }
.singleContents .has-text-align-left { text-align: left !important; }

/* ボタンブロック: 読み込まれないと全幅化する */
.singleContents .wp-block-buttons { display: flex; flex-wrap: wrap; }

/* 埋め込み(YouTube等): oembed既定の 500×281 のままにしない */
.singleContents .wp-block-embed iframe {
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* WP Core 6.4+ の画像ライトボタン。HubSpotには Interactivity API が無く機能停止のまま残るので隠す */
.singleContents button.lightbox-trigger { display: none !important; }

/* post_body 内のリスト: 親テーマの !important が BEM のリストにも当たって左に24pxずれるのを回避 */
#koden-post-body ul:not([class*="__list"]),
#koden-post-body ol:not([class*="__list"]) {
  margin: 0 0 16px 24px;
}

/* =========================================================
   (7) スマホでパンくずの1行目がヘッダーに隠れる問題
   ヘッダーは position:fixed（SP 60px / PC 75px）なので、body に同じだけ
   padding-top を入れて逃がす設計。ところが SP では実測 padding-top が 0px になっており
   （2026-08-06 実測 vw=414: headerH=60 / bodyPT=0 / パンくず上端0 → 60px 分が隠れる）、
   パンくず「ホーム / 記事」がヘッダーの下に潜っていた。
   このCSSは電気テンプレで最後に読まれるので、ここで確実に効かせる。
   ========================================================= */
@media (max-width: 1200px) {
  body { padding-top: 60px; }
}
@media (min-width: 1201px) {
  body { padding-top: 75px; }
}

/* (8) スマホの本文サイズ。WP実測 15px / line-height 27px（＝1.8）に対し
   HubSpotは 14px / 25.2px で一回り小さかった（2026-08-06 実測 vw=414）。PCは 18px/32.4 で一致。 */
@media (max-width: 768px) {
  /* 共有の child.css が「@media(max-width:768px)