@charset "UTF-8";
/*
 * yamanaka-bengoshi.jp WCAG 2.1 AA 対応 共通スタイル
 * inc/setup.php の wp_enqueue_scripts でグローバル enqueue。
 *
 * 文字コード: UTF-8（BOM なし）。先頭の @charset は、このファイルがスタイルシート
 *   としてパースされる際の文字コードを UTF-8 と明示する宣言。
 *   注: ブラウザで .css を直接 URL で開いた「生テキスト表示」の文字化けは @charset
 *       では直らない（生表示の文字コードは HTTP の charset ヘッダか BOM でのみ決まる）。
 *       ただし実ルールは ASCII のみなので、化けの有無に関わらずスタイル適用には影響しない。
 *   注: @charset はファイル先頭バイトに無いと無効。必ずコメントより前に置く。
 *
 * 設計方針:
 *   - サイト全体に効く A11y 共通ルールのみここに置く
 *   - 個別コンポーネント（judge-map / judge-position-matrix）固有のフォーカス・退官バッジは
 *     それぞれの専用 CSS に書く（バンドル分離のため）
 *
 * 変更履歴:
 *   v1.0.0 (2026-05-31): 初版（Phase A 観察期間中 WCAG 対応セット 5 ステップ）
 *     - Step 4: コントラスト用 CSS 変数（--color-readmore / --color-link-focus）
 *     - Step 6: スキップリンク .yamanaka-skip-link
 *     - Step 3: グローバル :focus-visible（a / button / input / select / textarea / summary）
 *     - Step 7: 退官バッジ .yamanaka-ret-badge 一式
 */

/* ===== Step 4: コントラスト用 CSS 変数 ===== */
:root {
    /* (続きを読む...) 等の赤系リンク色。#d93025=4.75:1（AA 通過、太字で AAA 寄り）
       将来 #c1281c=5.51:1 や #b3261a=6.41:1 に下げる際の差替点として使う */
    --color-readmore: #d93025;
    --color-readmore-hover: #a31810;
    /* キーボードフォーカス用の青。#1d4ed8=7.79:1（AA・AAA 両通過） */
    --color-link-focus: #1d4ed8;
}

/* 「（続きを読む...）」リンク（archive.php と inc/setup.php からのインライン style を差替） */
.archive-readmore {
    color: var(--color-readmore);
    font-weight: bold;
}
.archive-readmore:hover {
    color: var(--color-readmore-hover);
    text-decoration: underline;
}

/* 公開日表示の最終更新日（inc/setup.php yamanaka_display_dual_dates） */
.post-meta .date.updated {
    color: var(--color-readmore);
    font-weight: bold;
}

/* ===== Step 6: スキップリンク ===== */
.yamanaka-skip-link {
    position: absolute;
    top: -100px;
    left: 8px;
    z-index: 100000;
    padding: 10px 16px;
    background: var(--color-link-focus);
    color: #fff !important;
    font-weight: bold;
    font-size: 15px;
    text-decoration: none;
    border-radius: 0 0 6px 6px;
    transition: top 0.15s ease;
}
.yamanaka-skip-link:focus,
.yamanaka-skip-link:focus-visible {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
}
/* スキップで飛んだ先のメインコンテナはアウトラインを出さない（視覚的に煩雑になるため） */
#main-content:focus {
    outline: none;
}

/* ===== Step 3: グローバル :focus-visible ===== */
/* :focus は mouseclick でも発火するためデザインを壊しがち。
   :focus-visible はキーボード操作時（Tab/Shift+Tab/矢印）のみ発火する。
   全要素に統一スタイルを適用し、必要に応じて個別 CSS で上書きする。 */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--color-link-focus);
    outline-offset: 2px;
    border-radius: 2px;
}
/* マウスクリック由来の focus ではアウトラインを出さない明示 */
:focus:not(:focus-visible) {
    outline: none;
}

/* ===== R080607: スクリーンリーダー専用テキスト（視覚的に隠すが読み上げは残す） =====
 * Ajax 検索（judge-search / search-autocomplete / facets）の件数・状態アナウンスや
 * フォームの不可視ラベルに使う共通ユーティリティ。display:none と違い SR には読まれる。 */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ===== Step 7: 退官種別バッジ（色＋アイコン） =====
 * 使い方: 元裁判官カードのループ内で
 *   echo yamanaka_retirement_badge( $post_id );
 * を呼ぶ。meta 'yamanaka_retirement_type' が無い場合は空文字なので安全。
 *
 * type 値: teinen / igan / tenkan / kainin / shibou / bengoshi
 * 色は単色印刷でも形状（◯△□等）で区別できるよう設計。
 */
.yamanaka-ret-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 12px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    margin-left: 6px;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.yamanaka-ret-icon {
    font-size: 14px;
    line-height: 1;
}
.yamanaka-ret-text {
    font-size: 11px;
}

/* 種別ごとの背景色（コントラスト比は対 #fff で全て 4.5:1 以上） */
.yamanaka-ret-teinen      { background: #6b7280; } /* 定年退官 グレー    5.12:1 */
.yamanaka-ret-ninkimanryo { background: #b45309; } /* 任期満了 琥珀      5.02:1 */
.yamanaka-ret-igan        { background: #0e7490; } /* 依願退官 シアン    4.93:1 */
.yamanaka-ret-tenkan      { background: #7c3aed; } /* 転官     紫       6.16:1 */
.yamanaka-ret-kainin      { background: #b91c1c; } /* 解任罷免 濃赤     7.13:1 */
.yamanaka-ret-shibou      { background: #1f2937; } /* 在職中死亡 濃灰   15.3:1 */
.yamanaka-ret-bengoshi    { background: #047857; } /* 弁護士転身 緑     5.36:1 */

/* 凡例ブロック（archive.php に置く想定） */
.yamanaka-ret-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin: 12px 0;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 13px;
}
.yamanaka-ret-legend-label {
    font-weight: bold;
    color: #374151;
    margin-right: 4px;
}

/* ===== R080531 後継: archive.php の id="main" → id="main-content" 変更による
 *      xeory_base 親テーマ・サイドバーレイアウト崩壊の修正
 *
 * 背景:
 *   R080531 で archive.php の <div id="main"> をスキップリンクターゲットにするため
 *   <div id="main-content" tabindex="-1"> に変更した結果、xeory_base 親テーマの
 *   #main { width:100%; float:left } ルールが外れ、#side の負 margin-left トリックが
 *   破綻してサイドバーが本文下に流れる事故が発生。
 *
 * 対策:
 *   親テーマの #main 系ルールを #main-content 名で複製する。
 *   モバイル (≤991px) の float reset も同様にコピー。
 */
#main-content {
    width: 100%;
    float: left;
}
.right-content #main-content {
    width: 100%;
    float: left;
}
@media screen and (max-width: 991px) {
    #main-content {
        float: none;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    .right-content #main-content {
        float: none;
    }
}

/* ===== レイアウト集約: タグアーカイブ説明枠 =====
 * 旧 archive.php の inline style を移設。background #f9f9f9 に対し本文色は
 * 親テーマ既定（濃灰）で十分なコントラスト。将来トーン調整はここ1か所で行う。
 */
.tag-description {
    margin-top: 10px;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #eee;
    line-height: 1.8;
}

/* ===== R080607: prefers-reduced-motion（動きの抑制） =====
 * OS で「視差効果を減らす／動きを減らす」を有効にした利用者（前庭障害・動き過敏）向けに、
 * サイト全体のアニメーション・トランジション・スムーススクロールを実質無効化する。
 * facets のローディング回転・judge-map のトランジション・各種 hover transform 等が対象。
 * reduce 指定時のみ発火するので既定の見た目には影響しない。 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== R080607: WCAG 2.2 SC 2.5.8 ターゲットサイズ（最小 24px） =====
 * ポインタ操作のタップ標的を最低 24×24px 確保する。視覚的な体裁は大きく変えず、
 * 小さくなりがちな「ページ送り」リンクと、判事絞り込み検索のチェックボックス行に
 * 最低寸法＋中央寄せを与える。
 * 注: マトリクスのセル・地図マーカーは「裁判官一覧リンク／全画面表示」という同等の
 *     操作手段があるため SC 2.5.8 の例外（代替手段あり）に該当し、ここでは触らない。
 * 注: 見た目はデプロイ後にスマホ実機で確認すること。崩れる場合は本ブロックのみ削除すれば原状復帰。 */
.pagination a,
a.page-numbers {
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
/* 判事絞り込み検索（#advanced-judge-search）の勤務地・出身大学チェックボックス行 */
#advanced-judge-search label {
    min-height: 24px;
    display: flex;
    align-items: center;
}