/* ==========================================================================
   フッター

   JIN のフッター構造:
     footer[role="contentinfo"]
       #footer-widget-area          ウィジェットエリア（3カラム構成など）
         #footer-widget-box
           #footer-widget-left
           #footer-widget-center / #footer-widget-center1 / #footer-widget-center2
           #footer-widget-right
       .footersen                   区切り線
       #footer-box                  コピーライトエリア
         .footer-inner
           #privacy / #law          プライバシー・特商法リンク
           #copyright               著作権テキスト
   ========================================================================== */

/* --- フッター全体 --- */

/* JIN カスタマイザーが footer { background-color: #3b4675; } を注入するため
   詳細度の高い属性セレクタを使っても後から来るインラインスタイルに負ける場合を想定し
   !important で保証する */
footer[role="contentinfo"] {
    background-color: var(--color-surface) !important;
    border-top:       1px solid var(--color-border);
    margin-top:       64px;
}

/* --- ウィジェットエリア --- */

#footer-widget-area {
    padding:   48px 24px 32px;
    max-width: 1200px;
    margin:    0 auto;
}

#footer-widget-box {
    display:   flex;
    gap:       32px;
    flex-wrap: wrap;
}

/* 各カラム: flex: 1 で均等分割、min-width で潰れすぎを防ぐ */
#footer-widget-left,
#footer-widget-center,
#footer-widget-center1,
#footer-widget-center2,
#footer-widget-right {
    flex:      1;
    min-width: 180px;
}

/* ウィジェットタイトル */
#footer-widget-area .widget-title,
#footer-widget-area .widgettitle {
    color:          var(--color-primary);
    font-size:      0.85em;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom:  1px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom:  16px;
}

/* ウィジェット内テキスト */
#footer-widget-area p,
#footer-widget-area .textwidget {
    color:     var(--color-text-muted);
    font-size: 0.85em;
}

/* ウィジェット内リンク */
#footer-widget-area a {
    color:      var(--color-text-muted);
    font-size:  0.85em;
    transition: color var(--transition-base);
}

#footer-widget-area a:hover {
    color:   var(--color-primary);
    opacity: 1;
}

/* ウィジェット内リスト */
#footer-widget-area ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

#footer-widget-area li {
    padding:       6px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.5);
    font-size:     0.85em;
}

#footer-widget-area li:last-child {
    border-bottom: none;
}

/* --- フッター内の検索フォームウィジェット
   サイドバーの検索スタイルは #sidebar セレクタに紐づいているため、
   フッターに移動した場合はここで別途定義する。 */

#footer-widget-area .widget_search form {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}

#footer-widget-area .widget_search input[type="text"],
#footer-widget-area .widget_search input[type="search"] {
    flex:             1;
    min-width:        0;
    background-color: var(--color-bg);
    border:           1px solid var(--color-border);
    color:            var(--color-text);
    padding:          8px 12px;
    border-radius:    var(--radius-tag);
    font-family:      var(--font-base);
    font-size:        0.85em;
    transition:       border-color var(--transition-base);
}

#footer-widget-area .widget_search input[type="text"]:focus,
#footer-widget-area .widget_search input[type="search"]:focus {
    outline:      none;
    border-color: var(--color-primary);
}

#footer-widget-area .widget_search input[type="submit"] {
    background-color: var(--color-primary);
    color:            #0d1117;
    border:           none;
    padding:          8px 14px;
    border-radius:    var(--radius-tag);
    font-weight:      700;
    font-size:        0.85em;
    cursor:           pointer;
    transition:       opacity var(--transition-base);
}

#footer-widget-area .widget_search input[type="submit"]:hover {
    opacity: 0.85;
}

/* --- 区切り線 --- */

.footersen {
    border:     none;
    border-top: 1px solid var(--color-border);
    margin:     0;
}

/* --- コピーライトエリア --- */

#footer-box {
    padding: 20px 24px;
}

.footer-inner {
    max-width:       1200px;
    margin:          0 auto;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    flex-wrap:       wrap;
}

/* JIN カスタマイザーが以下のルールを注入するため、詳細度を上げて !important で上書きする:
   `.footer-inner a, #copyright, #copyright-center { color: #fff !important; }`
   同詳細度の !important はカスケード後順が勝つため、詳細度を高める必要がある。
   `.footer-inner #copyright` は 詳細度 1,1,0 で JIN の `#copyright`（1,0,0）を上回る。 */
.footer-inner #copyright,
.footer-inner #copyright-center {
    color:      var(--color-text-muted) !important;
    font-size:  0.8em;
    text-align: center;
}

.footer-inner a {
    color: var(--color-text-muted) !important;
}

#privacy a,
#law a {
    color:      var(--color-text-muted) !important;
    font-size:  0.8em;
    transition: color var(--transition-base);
}

#privacy a:hover,
#law a:hover {
    color:   var(--color-primary) !important;
    opacity: 1;
}

/* ========================================
   パンくずリスト

   JIN の HTML 構造（無効だが実際にこうなっている）:
     #breadcrumb.footer_type1 > ul
       > div.page-top-footer   ← ページトップボタン（ul 直下の div）
       > li > a HOME
       > li > i.arrow + a カテゴリ
       > li > i.arrow + span 記事タイトル
   ======================================== */

#breadcrumb {
    padding: 12px 24px;
}

/* ul をフレックスコンテナに。flex-wrap で長いタイトルも折り返せる */
/* max-width: 860px は記事本文エリア（#main-contents）と横幅を揃えるための値。
   #contents（外枠）は max-width: 1200px だが、記事カラム自体は 860px に制限されているため、
   パンくずも同幅にすることで左端が視覚的に揃う。 */
#breadcrumb ul {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         4px 0;
    list-style:  none;
    padding:     0;
    max-width:   860px;
    margin:      0 auto;
}

/* li をインラインフレックスにして、アイコン（i.arrow）とテキストを縦中央揃え */
#breadcrumb ul li {
    display:     inline-flex;
    align-items: center;
}

/* アイコン（矢印）の左右余白 */
#breadcrumb ul li .jin-ifont-arrow {
    margin: 0 4px;
    font-size: 0.75em;
    color: var(--color-text-muted);
}

/* ページトップボタン（ul 直下の div）はパンくず内では非表示にする
   同じボタンがページ右下にも固定表示されるため、ここでは重複になる */
#breadcrumb ul .page-top-footer {
    display: none;
}

/* テキストカラー: カスタマイザーが color: #3b4675 !important を注入するため !important で上書き */
#breadcrumb ul li,
#breadcrumb ul li a {
    color: var(--color-text-muted) !important;
    font-size: 0.8em;
}

#breadcrumb a:hover {
    color: var(--color-primary) !important;
}

/* --- レスポンシブ ---
   モバイル（768px 未満）: gap を広げてタップしやすく。
   flex-wrap は維持するので、長い記事タイトルは自動で折り返す。
   ページトップボタンは右端に留まる（margin-left: auto が効き続ける）。 */
@media (max-width: 767px) {
    #breadcrumb {
        padding: 10px 16px;
    }

    #breadcrumb ul li,
    #breadcrumb ul li a {
        font-size: 0.75em;
    }
}