/* assets/css/footer-area.css — フッターウィジェット＆下部エリア最適化 */

/* ===== 基本トークン ===== */
:root{
  --ft-bg: #f7fafc;                 /* フッター帯の地色（淡いグレー） */
  --ft-card-bg: #fff;               /* カード色 */
  --ft-bdr: rgba(17,24,39,.12);     /* ボーダー色（#111827の12%） */
  --ft-bdr-strong: rgba(17,24,39,.18);
  --ft-shadow: 0 6px 16px rgba(31,45,61,.06);
  --ft-text: #334155;
  --ft-title: #0f172a;
  --ft-accent: #0b66c3;
  --ft-gap: 18px;                    /* カード間隔 */
  --ft-radius: 14px;                 /* カード角丸 */
}

/* ===== フッターウィジェット帯 ===== */
.overlay,
.mg-footer-widget-area{
  background: var(--ft-bg) !important;
}

/* 内側コンテナの余白最適化 */
.mg-footer-widget-area .container-fluid{
  padding-top: 18px;
  padding-bottom: 18px;
}

/* 3カラム → 768px未満は1カラム、992px未満は2カラム */
.mg-footer-widget-area .row{
  display: grid !important;
  gap: var(--ft-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 991.98px){
  .mg-footer-widget-area .row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px){
  .mg-footer-widget-area .row{ grid-template-columns: 1fr; }
}

/* 各ウィジェットを“上品カード化” */
.mg-footer-widget-area .mg-widget{
  background: var(--ft-card-bg);
  border: 1px solid var(--ft-bdr);
  border-radius: var(--ft-radius);
  box-shadow: var(--ft-shadow);
  padding: 14px 16px;
  color: var(--ft-text);
  min-width: 0;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}
.mg-footer-widget-area .mg-widget:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(31,45,61,.09);
  border-color: var(--ft-bdr-strong);
}

/* ===== “最新記事” ウィジェット（#block-103） ===== */
#block-103 .wp-block-latest-posts{
  margin: 0; padding: 0; list-style: none;
}
#block-103 .wp-block-latest-posts li{
  padding: 10px 0; border-bottom: 1px dashed rgba(15,23,42,.10);
}
#block-103 .wp-block-latest-posts li:last-child{ border-bottom: 0; }
#block-103 .wp-block-latest-posts a{
  color: var(--ft-title);
  text-decoration: none;
}
#block-103 .wp-block-latest-posts a:hover{
  text-decoration: underline; text-underline-offset: 2px;
}

/* ===== “カテゴリー” ウィジェット（#block-104） ===== */
/* リストを“カプセル群”風に */
#block-104 .wp-block-categories{
  margin: -6px;                      /* wrap時の隙間を均す */
}
#block-104 .wp-block-categories-list{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
#block-104 .wp-block-categories-list li{
  margin: 0; padding: 0;
}
#block-104 .wp-block-categories-list a{
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--ft-bdr);
  border-radius: 999px;
  background: #fff;
  color: var(--ft-title);
  text-decoration: none;
  line-height: 1.2;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
#block-104 .wp-block-categories-list a:hover{
  background: #f2f6ff;
  border-color: var(--ft-bdr-strong);
  transform: translateY(-1px);
}

/* ===== 購読（#block-106 / MailPoet） ===== */
#block-106 .close-btn{ display:none; } /* フローティング風の×は不要なら非表示 */

#block-106 h4{
  display:flex; align-items:center; gap:.4em;
  font-size: clamp(16px, 1.7vw, 18px); font-weight: 800; color: var(--ft-title);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid rgba(15,23,42,.08);
}

/* MailPoet本体をカード調に寄せる（インラインstyleより強いセレクタで） */
#block-106 .mailpoet_form{
  background: #fff !important;
  border: 1px solid var(--ft-bdr) !important;
  border-radius: 12px !important;
  padding: 16px !important;
  color: var(--ft-text) !important;
  box-shadow: var(--ft-shadow);
}
#block-106 .mailpoet_form input[type="email"]{
  width: 100% !important;
  background: #f8fafc !important;
  border: 1px solid rgba(15,23,42,.12) !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  font-size: 16px !important;
}
#block-106 .mailpoet_form input[type="submit"]{
  width: 100% !important;
  background: #1d4ed8 !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 12px 16px !important;
  font-weight: 700 !important;
  margin-top: 10px !important;
}
#block-106 .mailpoet_form a{ color: var(--ft-accent) !important; }

/* ===== 広告（Google自動広告）との間隔を一定に ===== */
.mg-footer-widget-area + .adsbygoogle,
.mg-footer-widget-area .adsbygoogle{
  margin: 12px auto !important;
  display: block !important;
  max-width: 100% !important;
  overflow: hidden;
}

/* ===== 下段：ロゴ帯 ===== */
.mg-footer-bottom-area{
  background: #fff;
}
.mg-footer-bottom-area .divide-line{
  height: 1px; background: rgba(15,23,42,.08);
  margin: 8px 0 14px;
}
.mg-footer-bottom-area .site-logo .custom-logo{
  max-height: 44px; width: auto; height: auto;
}

/* ===== 著作権帯 ===== */
.mg-footer-copyright{
  background: #fff;
  color: #475569;
  font-size: 14px;
  padding: 12px 0;
  border-top: 1px solid rgba(15,23,42,.08);
}
.mg-footer-copyright a{
  color: inherit; text-decoration: none;
}
.mg-footer-copyright a:hover{ text-decoration: underline; text-underline-offset: 2px; }

/* ===== フッターメニュー（右/下に来る情報リンク群） ===== */
.info-right{
  display:flex; flex-wrap:wrap; gap:10px 16px;
  justify-content:flex-end; align-items:center;
  list-style:none; margin:10px 0 0; padding:0;
}
.info-right .nav-link{
  color:#334155; text-decoration:none; font-size:14px; line-height:1.2;
  padding:6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.info-right .nav-link:hover{
  color:#0b66c3; border-color:#0b66c3;
}

/* ===== ツイッター埋め込みが空の時の余白潰し（安全策） ===== */
.twitter-timeline-rendered[style*="width: 0px"],
.twitter-timeline-rendered[style*="height: 0px"]{
  display:none !important;
}
.twitter-container{ margin:0 !important; padding:0 !important; }

/* ===== モバイル最適化 ===== */
@media (max-width: 767.98px){
  .mg-footer-widget-area .container-fluid{ padding-top: 14px; padding-bottom: 14px; }
  .mg-footer-bottom-area .site-logo{ text-align:center; }
  .info-right{ justify-content:center; gap:8px 12px; }
}

/* ===== 低視覚負荷 ===== */
@media (prefers-reduced-motion: reduce){
  .mg-footer-widget-area .mg-widget{ transition: none !important; }
}

/* ===== ダークモード配慮（必要に応じ微調整） ===== */
@media (prefers-color-scheme: dark){
  :root{
    --ft-bg: #0b1220;
    --ft-card-bg: #0f172a;
    --ft-bdr: rgba(255,255,255,.12);
    --ft-bdr-strong: rgba(255,255,255,.2);
    --ft-shadow: 0 6px 16px rgba(0,0,0,.45);
    --ft-text: #cbd5e1;
    --ft-title: #e5e7eb;
    --ft-accent: #81aefc;
  }
  .mg-footer-bottom-area,
  .mg-footer-copyright{ background:#0b1220; }
  .mg-footer-copyright{ border-top-color: rgba(255,255,255,.12); color:#cbd5e1; }
  .info-right .nav-link{ color:#cbd5e1; }
  .info-right .nav-link:hover{ color:#81aefc; border-color:#81aefc; }
}

/* === Footer: 読みやすさ最優先の凝縮モード === */
:root{
  --ft-bg: #0b1220;               /* 暗い背景で統一 */
  --ft-card-bg: #0f172a;          /* カードも暗色 */
  --ft-bdr: rgba(255,255,255,.12);
  --ft-bdr-strong: rgba(255,255,255,.22);
  --ft-text: #e5e7eb;             /* 本文は明るい灰白 */
  --ft-title: #ffffff;            /* 見出しは純白でコントラスト */
  --ft-accent: #9cc1ff;           /* リンクのアクセント */
  --ft-gap: 14px;                 /* 余白をさらに圧縮 */
  --ft-radius: 12px;              /* 角丸少し控えめ */
}

/* カードの密度を上げる（縦長回避） */
.mg-footer-widget-area .mg-widget{
  padding: 12px 14px;
  line-height: 1.45;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* タイトル：小さめ＋強コントラスト＋下線短め */
.mg-footer-widget-area .mg-widget h2,
.mg-footer-widget-area .mg-widget h3,
.mg-footer-widget-area .mg-widget h4{
  color: var(--ft-title);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 8px;
  padding: 0 0 6px;
  border-bottom: 1px solid var(--ft-bdr);
}

/* 本文＆リンク：小さめ字＋高コントラスト */
.mg-footer-widget-area,
.mg-footer-widget-area .mg-widget,
.mg-footer-widget-area .mg-widget p,
.mg-footer-widget-area .mg-widget li,
.mg-footer-widget-area .mg-widget a{
  color: var(--ft-text);
  font-size: 14px;
}

/* リンクの見やすさとホバー */
.mg-footer-widget-area .mg-widget a{
  color: var(--ft-accent);
  text-decoration: none;
}
.mg-footer-widget-area .mg-widget a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 最新記事（リスト）間延び防止 */
#block-103 .wp-block-latest-posts li{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
#block-103 .wp-block-latest-posts li:last-child{ border-bottom: 0; }

/* カテゴリ“カプセル”：暗背景でも読みやすく、縦に伸ばさない */
#block-104 .wp-block-categories-list{ gap: 6px; }
#block-104 .wp-block-categories-list a{
  background: #ffffff;                 /* 白カプセルで可読性UP */
  color: #0b1320;                      /* 濃いテキスト */
  border: 1px solid rgba(17,24,39,.14);
  padding: 6px 10px;                   /* 縦方向を圧縮 */
  line-height: 1.2;
  border-radius: 999px;
}
#block-104 .wp-block-categories-list a:hover{
  background: #f4f7ff;
  border-color: rgba(17,24,39,.22);
}

/* MailPoet：縦長回避＆視認性強化 */
#block-106 .mailpoet_form{
  padding: 12px !important;
  border-radius: 10px !important;
}
#block-106 .mailpoet_form input[type="email"]{
  padding: 10px 12px !important;
  font-size: 14px !important;
  background: #0b1220 !important;   /* 暗カード上で段差を作る */
  color: #e5e7eb !important;
  border: 1px solid rgba(255,255,255,.16) !important;
}
#block-106 .mailpoet_form input[type="submit"]{
  padding: 10px 14px !important;
  font-size: 14px !important;
  border-radius: 999px !important;
  background: #3b82f6 !important;   /* 明るいボタンで視線誘導 */
}
#block-106 .mailpoet_form p,
#block-106 .mailpoet-heading{ font-size: 13px !important; }

/* 下段帯もコントラスト統一＆間延び防止 */
.mg-footer-bottom-area,
.mg-footer-copyright{
  background: #0b1220;
  color: #cbd5e1;
}
.mg-footer-bottom-area .divide-line{
  background: rgba(255,255,255,.12);
  margin: 6px 0 10px;
}
.mg-footer-bottom-area .custom-logo{ max-height: 40px; }
.info-right .nav-link{
  color:#cbd5e1;
  font-size: 13px;
  padding: 4px 0;
}
.info-right .nav-link:hover{
  color:#9cc1ff; border-color:#9cc1ff;
}

/* 余白の最終圧縮（小画面） */
@media (max-width: 767.98px){
  .mg-footer-widget-area .container-fluid{
    padding-top: 12px; padding-bottom: 12px;
  }
  .mg-footer-widget-area .mg-widget{ padding: 10px 12px; }
}

/* === Footer widgets: 横幅を広げるレイアウト最適化 === */
.mg-footer-widget-area{
  /* 背景などは既存を尊重。必要ならここで統一 */
}

/* 1) Bootstrapのrowをフッター内だけGrid化して横幅配分を自由化 */
.mg-footer-widget-area .container-fluid > .row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px; /* 余白は控えめ */
  align-items: start;
}

/* 2) ウィジェット3枚を“横にゆったり”配分 */
/* 目安：左=5 / 中=4 / 右=3（合計12）。中のカテゴリが詰まりやすければ中を5に増やす案も可能 */
#block-103.mg-widget{ grid-column: span 5; }
#block-104.mg-widget{ grid-column: span 4; }
#block-106.mg-widget{ grid-column: span 3; }

/* 3) レスポンシブ：幅が狭い時は 4/4/4 → 6/6/12 → 12/12/12 と段階的に */
@media (max-width: 1199.98px){
  #block-103.mg-widget,
  #block-104.mg-widget,
  #block-106.mg-widget{ grid-column: span 4; }  /* 3等分 */
}
@media (max-width: 991.98px){
  #block-103.mg-widget,
  #block-104.mg-widget{ grid-column: span 6; }  /* 2列 */
  #block-106.mg-widget{ grid-column: span 12; } /* 1列 */
}
@media (max-width: 575.98px){
  #block-103.mg-widget,
  #block-104.mg-widget,
  #block-106.mg-widget{ grid-column: span 12; } /* 全て1列 */
}

/* 4) Google広告は“行全幅”に退避してウィジェットの横幅を圧迫しない */
.mg-footer-widget-area .adsbygoogle,
.mg-footer-bottom-area .adsbygoogle,
.mg-footer-copyright .adsbygoogle{
  grid-column: 1 / -1;             /* 行全幅 */
  margin: 10px auto 24px !important;/* インラインmarginを抑えめに再定義 */
  display: block !important;
  max-width: 100%;
}

/* 5) ウィジェットの内側は“密度高め・可読性重視” */
.mg-footer-widget-area .mg-widget{
  background: var(--ft-card-bg, #0f172a);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,.35);
}

/* 6) リスト・カプセルの詰め調整（縦長回避） */
#block-103 .wp-block-latest-posts li{
  padding: 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,.12);
}
#block-103 .wp-block-latest-posts li:last-child{ border-bottom: 0; }

#block-104 .wp-block-categories-list{
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
#block-104 .wp-block-categories-list a{
  display: inline-block;
  background: #fff;
  color: #0b1320;
  border: 1px solid rgba(17,24,39,.14);
  border-radius: 999px;
  padding: 6px 10px;
  line-height: 1.2; font-size: 13px;
  text-decoration: none;
}
#block-104 .wp-block-categories-list a:hover{
  background:#f4f7ff; border-color:rgba(17,24,39,.22);
}

/* 7) MailPoetはパディングを控えめにして横伸びに寄与 */
#block-106 #mailpoet_form_4{
  padding: 14px !important;
  border-radius: 12px !important;
}
#block-106 #mailpoet_form_4 input[type="email"]{
  padding: 10px 12px !important;
  font-size: 14px !important;
}
#block-106 #mailpoet_form_4 input[type="submit"]{
  padding: 10px 14px !important;
  font-size: 14px !important;
}

/* 8) 下段のロゴ行もGridで余白均等化（任意） */
.mg-footer-bottom-area .container-fluid > .row{
  display: grid;
  grid-template-columns: repeat(12, minmax(0,1fr));
  align-items: center;
}
.mg-footer-bottom-area .site-logo{ grid-column: span 6; }
.mg-footer-bottom-area .info-right{ grid-column: span 6; justify-self: end; }

/* 9) もしウィジェットが“まだ狭い”と感じたら、中カラムを広げるプリセット */
/* コメントアウトを外すと配分：左=4 / 中=5 / 右=3 に変更されます */
/*
@media (min-width: 1200px){
  #block-103.mg-widget{ grid-column: span 4; }
  #block-104.mg-widget{ grid-column: span 5; }
  #block-106.mg-widget{ grid-column: span 3; }
}
*/