/* ============================================================
   site-footer.css — 全ページ共通フッター（単一ソース）
   CLL JAPAN / hello-elementor-child
   DAY106 新設

   ■ なぜこのファイルがあるのか
     フッターのHTMLは inc/site-footer.php の1箇所だが、CSSは
     top.css / single-v2.css / category.css / search.css / saved.css /
     inc/search-styles.php / inc/saved-styles.php / page-safety-guide.php
     の8箇所へコピーされ、それぞれ独自に育っていた。
     結果、列数が 5/4/3/2、色が --text-muted と --footer-text、
     余白が 20px と 4px、というようにページごとに食い違っていた（DAY106で全数実測）。

   ■ 設計
     - 値の基準は single-v2.css（DAY99の白化リニューアル版）。Ponさん判断。
     - inc/site-footer.php が18ページすべてから require されるため、
       そこで <link> を出せば確実に全ページへ届く。
     - 色は variables.css の --footer-bg / --footer-text を参照する。
       フッター内で汎用トークンを再宣言する §120-8 方式は、
       6箇所同時変更という運用が破綻したため採らない。

   ■ 変更するときは このファイルだけを直せばよい。
     手動ver運用のため inc/site-footer.php の ?ver= を1つ上げること。
============================================================ */

#site-footer {
  background:  var(--footer-bg, #2a2a2a);
  color:       var(--footer-text, #bbbbbb);
  border-top:  1px solid #3d3d3d;
  padding:     32px 16px 20px;
  /* footer-lineheight-day106 : 各ページが body に 1.5〜1.8 と別々の行間を宣言しているため、
     ここで明示して継承を断つ。書かないとページごとにフッターの高さが変わる。 */
  line-height: 1.8;
}

.footer-inner {
  display:        flex;
  flex-direction: column;
  gap:            24px;
}

/* ロゴを包む <a> は既定で display:inline のため、中の画像が行ボックスから
   はみ出し、親の行送り次第で高さが 28px と 16px に割れていた（DAY106実測）。
   その9px差がフッター全体の高さ差になっていたため、ここで包ませる。 */
.footer-brand a {
  display:     inline-block;
  line-height: 0;
}
.footer-brand img {
  max-width:     120px;
  width:         auto;
  height:        auto;
  margin-bottom: 10px;
}

.footer-desc {
  font-size:   11px;
  color:       var(--footer-text, #bbbbbb);
  line-height: 1.8;
  max-width:   280px;
}

.footer-cols {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   20px;
}

.footer-col-title {
  font-size:      11px;
  font-weight:    700;
  color:          #ffffff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom:  10px;
}

.footer-col-list {
  list-style:     none;
  display:        flex;
  flex-direction: column;
  gap:            7px;
  margin:         0;
  padding:        0;
}

/* 用途：親テーマの a{color:#e36} に負けないための防御的指定（§32-3の方針） */
.footer-col-list a {
  font-size:       12px;
  color:           var(--footer-text, #bbbbbb) !important;
  text-decoration: none;
}
.footer-col-list a:hover { color: #ffffff !important; }

.footer-disclaimer {
  font-size:     10px;
  color:         #8f8f8f;
  line-height:   1.7;
  padding:       10px 12px;
  background:    #1f1f1f;
  border:        1px solid #3d3d3d;
  border-radius: 4px;
  margin:        4px 0 0;
}

.footer-bottom {
  border-top:     1px solid #3d3d3d;
  padding-top:    16px;
  margin-top:     20px;
  display:        flex;
  flex-direction: column;
  gap:            8px;
  align-items:    flex-start;
}

.footer-copyright {
  font-size: 10px;
  color:     #8f8f8f;
  margin:    0;
}

.footer-legal {
  display:   flex;
  gap:       14px;
  flex-wrap: wrap;
}
.footer-legal a {
  font-size:       10px;
  color:           #8f8f8f !important;
  text-decoration: none;
}
.footer-legal a:hover { color: var(--footer-text, #bbbbbb) !important; }

@media (min-width: 768px) {
  #site-footer   { padding: 40px 40px 24px; }
  .footer-inner  { flex-direction: row; gap: 40px; align-items: flex-start; }
  .footer-brand  { flex-shrink: 0; width: 220px; }
  .footer-cols   { flex: 1; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}