/* ==========================================================================
   サイドバー

   JIN のサイドバー構造:
     #sidebar.sideber                       サイドバー全体
       .widget                              各ウィジェット（WordPress 標準クラス）
         .widget-title / .widgettitle       ウィジェットタイトル
         [ウィジェット本体]

   補足: JIN のコードに `.sideber` というクラス名のタイポがある（sidebar の誤り）。
         両方に対応しておく。
   ========================================================================== */

/* --- サイドバーコンテナ --- */

#sidebar,
.sideber {
    padding: 0;
}

/* --- ウィジェット共通スタイル --- */

#sidebar .widget {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          20px;
    margin-bottom:    24px;
}

/* --- ウィジェットタイトル ---
   記事 h2 と同じデザインの「左ボーダー付き」で全体のデザインを統一する */

/* クラシックウィジェット (.widgettitle) と
   ブロックウィジェット (h2.wp-block-heading) の両方に対応 */
#sidebar .widget-title,
#sidebar .widgettitle,
#sidebar h2.wp-block-heading {
    color:          var(--color-primary) !important;
    font-size:      0.9em !important;
    font-weight:    700;
    letter-spacing: 0.04em;
    border-left:    3px solid var(--color-primary) !important;
    padding:        4px 0 4px 10px !important;
    margin-bottom:  16px;

    /* JIN が独自付加するスタイルをリセット */
    background:    none !important;
    border-top:    none !important;
    border-right:  none !important;
    border-bottom: none !important;
    text-align:    left;
}

/* --- ウィジェット内の共通スタイル --- */

/* テキスト */
#sidebar .widget p,
#sidebar .widget .textwidget {
    color:     var(--color-text-muted);
    font-size: 0.9em;
}

/* リンク */
#sidebar .widget a {
    color:      var(--color-text-muted);
    font-size:  0.9em;
    transition: color var(--transition-base);
}

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

/* リスト */
#sidebar .widget ul {
    list-style: none;
    margin:     0;
    padding:    0;
}

#sidebar .widget li {
    padding:       7px 0;
    border-bottom: 1px solid rgba(48, 54, 61, 0.6);
    font-size:     0.9em;
    line-height:   1.5;
}

#sidebar .widget li:last-child {
    border-bottom: none;
}

/* --- 検索ウィジェット --- */

#sidebar .widget_search form {
    display:   flex;
    gap:       8px;
    flex-wrap: wrap;
}

#sidebar .widget_search input[type="text"],
#sidebar .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.9em;
    transition:       border-color var(--transition-base);
}

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

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

#sidebar .widget_search input[type="submit"]:hover {
    opacity: 0.85;
}

/* --- カレンダーウィジェット --- */

#sidebar .widget_calendar table {
    width:      100%;
    font-size:  0.85em;
}

#sidebar .widget_calendar th {
    background-color: var(--color-bg);
    color:            var(--color-text-muted);
    border:           none;
    padding:          6px;
    text-align:       center;
}

#sidebar .widget_calendar td {
    border:     none;
    padding:    6px;
    text-align: center;
    color:      var(--color-text-muted);
}

#sidebar .widget_calendar td a {
    color:       var(--color-primary);
    font-weight: 700;
}

/* --- タグクラウドウィジェット --- */

#sidebar .widget_tag_cloud .tagcloud {
    display:   flex;
    flex-wrap: wrap;
    gap:       6px;
}

#sidebar .widget_tag_cloud a {
    border:        1px solid var(--color-border);
    padding:       4px 10px;
    border-radius: var(--radius-tag);
    font-size:     0.8em !important; /* WordPress がインラインで font-size を書くため !important が必要 */
    transition:
        border-color var(--transition-base),
        color        var(--transition-base);
}

#sidebar .widget_tag_cloud a:hover {
    border-color: var(--color-primary);
    color:        var(--color-primary);
    opacity:      1;
}

/* --- 最近の投稿・最近のコメントウィジェット --- */

#sidebar .widget_recent_entries li,
#sidebar .widget_recent_comments li {
    padding: 8px 0;
}

#sidebar .widget_recent_entries .post-date,
#sidebar .widget_recent_comments .comment-author-link {
    color:     var(--color-text-muted);
    font-size: 0.8em;
    display:   block;
    margin-top: 2px;
}

/* ========================================
   サイドバーの非表示制御

   トップページ（home.php）は #contents.p-home { display: block } で
   すでにサイドバーが消えている（home.css で制御）。

   それ以外のすべてのページは WordPress が body に付与するページ種別クラスを使って
   サイドバーを非表示にし、メインコンテンツをフルワイドに広げる。

   WordPress が自動付与する body クラス（主なもの）:
     .single   → 投稿記事詳細
     .page     → 固定ページ（お問い合わせ・運営者情報・プライバシー等）
     .archive  → アーカイブページ（月別など）
     .category → カテゴリーページ
     .tag      → タグページ
     .search   → 検索結果ページ
   ======================================== */

.single   #sidebar,
.page     #sidebar,
.archive  #sidebar,
.category #sidebar,
.tag      #sidebar,
.search   #sidebar {
    display: none;
}

/* --- トラッキングウィジェット（#widget-tracking は PC のみ） --- */

#widget-tracking .widget {
    background-color: var(--color-surface);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-card);
    padding:          20px;
    margin-bottom:    24px;
}