/* ==========================================================================
   ベーススタイル

   body・リンク・画像など「サイト全体の土台」を定義する。
   ここの設定がすべてのページに共通して効く。

   !important を使う理由:
     JIN はカスタマイザーの設定をインライン <style> として出力する。
     インライン <style> はリンクされた CSS ファイルより後に来るため、
     同じ詳細度のルールではカスタマイザーが勝ってしまう。
     !important を使うことで意図したダークテーマを強制する。
   ========================================================================== */

/* --- 横スクロール防止 ---
   JIN の Swiper カルーセル（関連記事スライド）がデフォルトで
   overflow: visible のまま描画され、スライドが viewport をはみ出す。
   html で overflow-x を隠すことでページ全体の横スクロールを防ぐ。 */
html {
    overflow-x: hidden;
}

/* --- ページ全体の基本スタイル --- */

body {
    background-color: var(--color-bg) !important; /* カスタマイザーが #fff を設定するため */
    color:            var(--color-text) !important; /* カスタマイザーが #3b4675 を設定するため */
    font-family:      var(--font-base);
    font-size:        var(--font-size-base);
    line-height:      var(--line-height-base);

    /* macOS/iOS でフォントを滑らかに描画する（アンチエイリアス） */
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- JIN のレイアウト要素にダーク背景を適用 --- */

#wrapper,
#scroll-content {
    background-color: var(--color-bg) !important; /* カスタマイザーが #fff を設定するため */
}

/* ========================================
   2カラムレイアウト（メイン + サイドバー）

   親 CSS を切ったため JIN のフロートベースのレイアウトが消えた。
   フレックスボックスで再定義する。
   ======================================== */

#contents {
    display:          flex;
    align-items:      flex-start; /* サイドバーがメインより短くても上揃え */
    gap:              32px;
    max-width:        1200px;
    margin:           0 auto;
    padding:          32px 24px;
    box-sizing:       border-box;
    background-color: var(--color-bg) !important;
}

/* メインコンテンツ: 残りの幅をすべて使う */
#main-contents {
    flex:      1;
    min-width: 0; /* フレックスアイテムがコンテンツ幅で縮みすぎる問題を防ぐ */
}

/* サイドバー: 固定幅で縮まない */
#sidebar {
    width:       320px;
    flex-shrink: 0;
}

/* --- 1カラム時のコンテンツ幅制限
   サイドバーが非表示になると #main-contents が #contents の全幅（max-width: 1200px）を使う。
   記事詳細・固定ページは読みやすい幅（860px）に絞ってセンタリングする。
   カテゴリー・アーカイブはカードグリッドを広く使いたいのでフルワイドのまま。 */

.single #main-contents,
.page   #main-contents {
    max-width: 860px;
    margin:    0 auto;
}

/* --- リンクのデフォルトスタイル ---
   カスタマイザーが body, a, a:link, a:visited に #3b4675 を設定するため
   !important で上書きする。 */

a,
a:link,
a:visited {
    color:           var(--color-primary) !important;
    text-decoration: none;
    transition: color var(--transition-base), opacity var(--transition-base);
}

a:hover {
    opacity: 0.8;
}

/* --- 画像 --- */

img {
    max-width: 100%;
    height:    auto;
}

/* --- Swiper カルーセルの横スクロール防止 + 矢印の包含 ---
   JIN は関連記事や画像をスワイプ可能なカルーセルで表示する。
   JIN 独自のクラス名: .swiper-container2（通常の .swiper-container とは別名）

   overflow: hidden がないと次のスライドが viewport に食み出す。
   position: relative が必要な理由:
     .swiper-button-prev / .swiper-button-next は position: absolute で配置される。
     親要素が position: static（デフォルト）だと、より上位の positioned 要素を基準にしてしまい
     矢印がページ左右端に飛び出す。relative にすることで矢印をカルーセル内に閉じ込める。 */
.swiper-container,
.swiper-container2,
.swiper {
    overflow: hidden !important;
    width:    100%;
    position: relative;
}

/* --- 固定ページ（page.php）での著者名非表示 ---

   .writer.author-name は投稿記事の執筆者を示すメタ情報。
   記事詳細ページ（body.single）では意味を持つが、
   固定ページ（お問い合わせ・運営者情報・プライバシーポリシー等）
   では不要なため非表示にする。

   なぜ body.page セレクタで制御するか:
     WordPress は固定ページを表示するとき body に "page" クラスを自動付与する。
     これを使うことで PHP を一切触らず CSS だけで制御できる。
     body.single への限定表示よりも安全（記事一覧カード内の著者名に副作用を出さない）。 */
body.page .writer.author-name {
    display: none;
}