/*
 * yamanaka-facets.css
 * archive ページの「修習期 × 出身大学 × 勤務地」絞り込みサイドバー
 * v1.0.0 (2026-05-30)
 *
 * レイアウト方針:
 *   - 768px 以上: 左サイドバー（240px）+ 右側カードリスト の 2 カラム grid
 *   - 768px 未満: 単一カラム、ファセットは details/summary で折り畳み可能
 *   - 親テーマ xeory_base の .main-inner 内に挿入される前提
 *   - 既存 .post-loop-wrap を grid item として右側に並べる
 */

/* === ルートコンテナ === */
.yamanaka-facets-aside {
    box-sizing: border-box;
    margin: 0 0 20px 0;
    padding: 0;
    position: relative;  /* v1.0.4: 閉じるボタン絶対配置の親 */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                 "Hiragino Sans", "Hiragino Kaku Gothic ProN",
                 "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

/* === v1.0.4: 閉じる×ボタン（aside トップ右に絶対配置）=== */
.yamanaka-facets-close {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 1;
    width: 22px;
    height: 22px;
    padding: 0;
    background: #ffffff;
    border: 1px solid #bdbdbd;
    border-radius: 4px;
    color: #757575;
    font-size: 16px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.yamanaka-facets-close:hover,
.yamanaka-facets-close:focus {
    background: #ffebee;
    border-color: #f44336;
    color: #d32f2f;
    outline: none;
}

/* === v1.0.4: 再表示ボタン（collapsed 時のみ表示）=== */
#yamanaka-facets-reopen {
    display: none;  /* 通常時は非表示 */
    padding: 6px 14px;
    background: #f5f5f5;
    border: 1px solid #1976d2;
    border-radius: 4px;
    color: #1976d2;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
#yamanaka-facets-reopen:hover,
#yamanaka-facets-reopen:focus {
    background: #1976d2;
    color: #ffffff;
    outline: none;
}

/* === v1.0.4: 閉じた状態（collapsed）のレイアウト ===
 * main-inner に .yamanaka-facets-collapsed が付いたら：
 *   - aside 全体を非表示
 *   - reopen ボタンを表示
 *   - post-loop-wrap が全幅化（170px の左カラムが消える）
 */
.main-inner.has-yamanaka-facets.yamanaka-facets-collapsed > .yamanaka-facets-aside {
    display: none;
}
.main-inner.has-yamanaka-facets.yamanaka-facets-collapsed > #yamanaka-facets-reopen {
    display: inline-block;
    justify-self: start;
    margin: 0 0 12px 0;
}

/* === 2 カラム化（768px 以上）===
 * JS が main-inner に .has-yamanaka-facets を付与してから発火
 * （:has() セレクタに依存しないことで古めの WebView/Safari もサポート）
 *
 * 列幅 240px → 170px に圧縮（v1.0.1 でユーザー要望）。
 * 「名古屋高裁管轄」（8 文字）まで自然に収まる幅。それより長いラベルは
 * .yamanaka-facets-option-label の min-width:0 + overflow:ellipsis で省略表示。
 */
@media (min-width: 768px) {
    .main-inner.has-yamanaka-facets {
        display: grid;
        grid-template-columns: 170px 1fr;
        grid-template-rows: auto auto 1fr;
        column-gap: 16px;
    }
    .main-inner.has-yamanaka-facets > .cat-content {
        grid-column: 1 / -1;
    }
    .main-inner.has-yamanaka-facets > .yamanaka-facets-aside {
        grid-column: 1;
        grid-row: 2 / span 2;
        align-self: start;
        position: sticky;
        top: 20px;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
    .main-inner.has-yamanaka-facets > .post-loop-wrap {
        grid-column: 2;
        grid-row: 2;
    }

    /* v1.0.4: collapsed 状態は単一カラム化、post-loop-wrap を全幅、
     * reopen ボタンは行 2 col 1 に置く */
    .main-inner.has-yamanaka-facets.yamanaka-facets-collapsed {
        grid-template-columns: 1fr;
    }
    .main-inner.has-yamanaka-facets.yamanaka-facets-collapsed > #yamanaka-facets-reopen {
        grid-column: 1;
        grid-row: 2;
    }
    .main-inner.has-yamanaka-facets.yamanaka-facets-collapsed > .post-loop-wrap {
        grid-column: 1;
        grid-row: 3;
    }
}

/* === noscript フォールバック === */
.yamanaka-facets-noscript {
    margin: 0;
    padding: 12px;
    background: #fff8e1;
    border: 1px solid #ffd54f;
    border-radius: 4px;
    color: #5d4037;
    font-size: 13px;
}

/* === ファセットセクション（修習期 / 出身大学 / 勤務地）=== */
.yamanaka-facets-section {
    margin: 0 0 12px 0;
    padding: 0;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.yamanaka-facets-section[open] > summary,
.yamanaka-facets-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-weight: 600;
    font-size: 13px;
    color: #424242;
    cursor: pointer;
    user-select: none;
    list-style: none;
}
.yamanaka-facets-section > summary::-webkit-details-marker { display: none; }
.yamanaka-facets-section > summary::before {
    content: "▶";
    display: inline-block;
    margin-right: 6px;
    font-size: 10px;
    color: #757575;
    transition: transform 0.15s ease;
}
.yamanaka-facets-section[open] > summary::before {
    transform: rotate(90deg);
}

.yamanaka-facets-section-body {
    padding: 8px 12px;
    max-height: 280px;
    overflow-y: auto;
}

/* === チェックボックス行 ===
 * v1.0.1: ラベル⇄件数バッジ間隔を 1/3 程度に圧縮（ユーザー要望）。
 *   - justify-content:space-between を撤去（バッジを行末まで離す挙動を停止）
 *   - flex gap:4px で全要素を均等小間隔にまとめる
 *   - ラベルは flex:1 1 auto + min-width:0 で省略可能に
 *   - バッジは flex:0 0 auto でラベル直後に固定幅で続く
 */
.yamanaka-facets-option {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    cursor: pointer;
    transition: background 0.1s ease;
}
.yamanaka-facets-option:hover {
    background: #f0f7ff;
}
.yamanaka-facets-option input[type="checkbox"] {
    flex: 0 0 auto;
    margin: 0;
    accent-color: #1976d2;
    cursor: pointer;
}
.yamanaka-facets-option-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    color: #424242;
}
.yamanaka-facets-option-count {
    flex: 0 0 auto;
    padding: 1px 6px;
    background: #eceff1;
    border-radius: 10px;
    font-size: 11px;
    color: #607d8b;
    white-space: nowrap;
    min-width: 22px;
    text-align: center;
}
.yamanaka-facets-option input[type="checkbox"]:checked + .yamanaka-facets-option-label {
    font-weight: 600;
    color: #1976d2;
}
.yamanaka-facets-option input[type="checkbox"]:checked ~ .yamanaka-facets-option-count {
    background: #1976d2;
    color: #ffffff;
}

/* === サマリ・リセット行 === */
.yamanaka-facets-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 10px 0;
    padding: 8px 36px 8px 12px;  /* v1.0.4: 右パディング 12→36px で close ボタン分を確保 */
    background: #e3f2fd;
    border: 1px solid #90caf9;
    border-radius: 4px;
    font-size: 13px;
    color: #0d47a1;
}
.yamanaka-facets-summary-count strong {
    font-size: 15px;
    margin: 0 2px;
}
.yamanaka-facets-reset {
    padding: 4px 10px;
    background: #ffffff;
    border: 1px solid #1976d2;
    border-radius: 3px;
    color: #1976d2;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.yamanaka-facets-reset:hover {
    background: #1976d2;
    color: #ffffff;
}
.yamanaka-facets-reset:disabled {
    border-color: #bdbdbd;
    color: #bdbdbd;
    cursor: not-allowed;
    background: #ffffff;
}

/* === 読み込み中インジケータ === */
.yamanaka-facets-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #757575;
    font-size: 13px;
}
.yamanaka-facets-loading::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 8px;
    border: 2px solid #e0e0e0;
    border-top-color: #1976d2;
    border-radius: 50%;
    animation: yamanaka-facets-spin 0.8s linear infinite;
}
@keyframes yamanaka-facets-spin {
    to { transform: rotate(360deg); }
}

/* === 結果カードリスト（API レスポンス置換時）=== */
.yamanaka-facets-results-card {
    margin: 0 0 12px 0;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}
.yamanaka-facets-results-card-title {
    margin: 0 0 6px 0;
    font-size: 16px;
    font-weight: 600;
}
.yamanaka-facets-results-card-title a {
    color: #1976d2;
    text-decoration: none;
}
.yamanaka-facets-results-card-title a:hover {
    text-decoration: underline;
}
.yamanaka-facets-results-card-meta {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: #757575;
}
.yamanaka-facets-results-card-meta-item {
    display: inline-block;
    margin-right: 12px;
}
.yamanaka-facets-results-card-meta-item-label {
    color: #9e9e9e;
    margin-right: 4px;
}
.yamanaka-facets-results-card-excerpt {
    margin: 0;
    font-size: 13px;
    color: #424242;
    line-height: 1.5;
}
.yamanaka-facets-results-empty {
    padding: 32px 16px;
    text-align: center;
    color: #757575;
    font-size: 14px;
    background: #fafafa;
    border: 1px dashed #bdbdbd;
    border-radius: 4px;
}

/* === 絞り込み適用中：archive ネイティブの要素を非表示 ===
 * v1.0.2: ページネーション（pagination()/wp_pagenavi/page-numbers/nav.pagination）は
 * 絞り込み結果と整合しないため、JS が body に .yamanaka-facets-filter-active を
 * 付けている間は強制非表示。
 *
 * カバーする出力パターン:
 *   - xeory_base 内製 pagination()       → .pagination
 *   - WP-PageNavi プラグイン              → .wp-pagenavi
 *   - WP コア the_posts_pagination()      → .page-numbers / nav.pagination
 *   - 一部テーマの汎用 nav navigation     → nav.navigation.pagination
 */
body.yamanaka-facets-filter-active .pagination,
body.yamanaka-facets-filter-active .wp-pagenavi,
body.yamanaka-facets-filter-active .page-numbers,
body.yamanaka-facets-filter-active nav.navigation.pagination,
body.yamanaka-facets-filter-active nav.pagination {
    display: none !important;
}

/* === ページネーション重複除去（v1.0.3）===
 * archive.php の pagination() 出力に加えて parent theme or プラグインが
 * もう 1 セット重ねて出力するケースで、JS の dedupePagination() が
 * 2 個目以降にこのクラスを付与する。
 */
.yamanaka-pagination-duplicate {
    display: none !important;
}

/* === モバイル対応（768px 未満）=== */
@media (max-width: 767px) {
    .yamanaka-facets-aside {
        margin: 0 0 16px 0;
    }
    .yamanaka-facets-section {
        margin-bottom: 8px;
    }
    .yamanaka-facets-section-body {
        max-height: 220px;
    }
    .yamanaka-facets-summary {
        flex-wrap: wrap;
        gap: 6px;
    }
}