/* assets/css/style.css */

/* :root でサイト全体で使う変数（色やフォント）を定義します */
/* :root を修正 */
:root {
    --font-family-base: Arial, "Noto Sans JP", sans-serif;
    --color-text: #333;
    --color-background: #fdfdfd;
    --color-link: #007bff;
    --color-border: #e0e0e0;
    --color-accent: #41A9D1; /* ← この行を追加 */
    --container-width: 960px; /* ← より広い幅に変更 */
    --color-code-bg: #e9ecef; /* ← この行を追加 */
}

/* body全体の基本的な設定 */
body {
    font-family: var(--font-family-base);
    color: var(--color-text);
    background-color: var(--color-background);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    transition: background-color 0.3s, color 0.3s;
}

/* 全体のコンテナ：コンテンツを中央揃えにし、幅を制限 */
/* .container のスタイル */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 2rem 1rem;
    /*margin-top: 50px;*/ /* ← この行がヘッダーの高さ分、本文を下にずらします */
}

/* リンクのスタイル */
/* リンクのスタイルを上書き */
a {
    color: var(--color-text);     /* リンクの色を本文の文字色と同じにする */
    text-decoration: underline;   /* 常に下線を表示 */
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease-in-out; /* 色の変化を滑らかに */
}
a:hover {
    color: var(--color-accent); /* ホバー時にアクセントカラーに変更 */
}

/* ヘッダーのスタイリング */
/* #site-header のスタイルを上書き */
#site-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: var(--color-background); /* スクロール時に下のコンテンツが透けないように背景色を指定 */
    border-bottom: 1px solid var(--color-border);
    height: 50px; /* ← ヘッダーの高さを直接指定します */
    transition: background-color 0.3s;
    display: flex; /* ← 子要素を中央揃えにするために追加 */
    align-items: center; /* ← 子要素を中央揃えにするために追加 */

}
.header-container {
    display: flex; /* Flexboxを使って要素を横並びに */
    justify-content: space-between; /* 両端に寄せる */
    align-items: center; /* 上下中央揃え */
    width: 100%; /* ← 横幅いっぱいに広げるために追加 */
    max-width: var(--container-width); /* ← 640px から元の変数に戻します */
    margin: 0 auto;
    padding: 0 1rem;
}

/* assets/css/style.css に追記 */
.post-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* margin-bottom: 2rem; ← この行を削除 */
}


/* ヘッダー内のリンクから下線を消すスタイルを追記 */
header a {
    text-decoration: none;
}

.site-title a {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--color-text);
}
.site-title a:hover {
    text-decoration: none;
}

/* ナビゲーションメニューのスタイリング */
.main-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.main-nav ul {
    margin: 0;
    padding: 0;
    list-style: none; /* リストの黒点を消す */
    display: flex;
    gap: 1.5rem; /* メニュー項目の間隔 */
}

/* 言語スイッチャーのスタイリング */
.lang-switcher a {
    font-weight: bold;
}

/* メインコンテンツ（記事部分）のスタイリング */
main h2 {
    font-size: 1.5rem;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.5rem;
    margin-top: 2.5rem;
    margin-bottom: 1rem; /* ← この行を追加 */
}

/* assets/css/style.css の main h2 の下あたりに追記 */

main h3 {
    font-size: 1.2rem;
    margin-top: 1.0rem;
    margin-bottom: 0.0rem;
}



/* --- 段落間の余白を調整 --- */
.content p,
.post-content p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

main ul {
    padding-left: 1.5rem;
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}

/* assets/css/style.css に追記 */

main li {
    margin-bottom: 0.0rem;
}

/* フッターのスタイリング */
footer {
    border-top: 1px solid var(--color-border);
    margin-top: 4rem;
    padding: 2rem 0;
    text-align: center;
    color: #777;
}

.social-links a {
    margin: 0 0.5rem;
}

/* assets/css/style.css に追記 */

/* ダークモード用の配色 */
body.dark-mode {
    --color-text: #f0f0f0;
    --color-background: #1a1a1a;
    --color-link: #3498db;
    --color-border: #444;
    --color-code-bg: #424242; /* ← この行を追加 */
}


/* assets/css/style.css に追記 */

/* テーマ切り替えボタンのスタイル */
#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text); /* 現在のテキストカラーをアイコンの色として継承 */
}
#theme-toggle:hover {
    opacity: 0.7;
}

/* アイコンの基本スタイル */
.icon {
    width: 22px;  /* アイコンサイズ */
    height: 22px;
}

/* デフォルト（ライトモード）では太陽アイコンを隠す */
.icon-sun {
    display: none;
}

/* ダークモードのとき */
body.dark-mode .icon-sun {
    display: block; /* 太陽アイコンを表示 */
}
body.dark-mode .icon-moon {
    display: none;  /* 月アイコンを隠す */
}

/* assets/css/style.css に追記 */

/* 区切り線のスタイル */
hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 1rem 0;
}

/* 記事一覧のスタイル */
.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-list li {
    margin-bottom: 2.5rem;
}

/* 記事ページのh1タイトルの上余白をなくす */
.post-header h1 {
    font-size: 2.2rem; /* ← h1のサイズを明確に指定 */
    margin-top: 0;
    margin-bottom: 0;
}

.post-list h2 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    border-bottom: none; /* 見出しのデフォルトスタイルを上書き */
    padding-bottom: 0;
}

.post-list h2 a {
    color: var(--color-text);
    /*color: var(--color-accent); */
}

/* .post-list h2 a:hover のスタイルを上書き */
.post-list h2 a:hover {
    color: var(--color-accent);
}

/* .post-meta のスタイルを上書き */
.post-meta {
    color: #888;
    font-size: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 0; /* 親要素で余白を管理するため0に */
    display: block;
}

/* 記事本文の、最初の要素の上余白をなくす */
/* 記事本文の、最初のH2見出しの上余白を強制的に0にする */
.content,
.post-content {
    padding-top: 2rem; /* ヘッダーと本文の間に余白を強制的に作成 */
}

/* ダークモード用の .post-meta のスタイルも上書き */
body.dark-mode .post-meta {
    color: #aaa;
}

/* assets/css/style.css に追記 */

/* --- 目次用のレイアウト --- */

.content-wrapper {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.main-content {
  flex-grow: 1;
  min-width: 0; /* ← Flexboxの計算を正しく機能させるためのおまじない */
}

.toc-sidebar {
  width: 240px; /* 目次サイドバーの幅 */
  flex-shrink: 0;
}

.sticky-toc {
  position: sticky;
  top: 80px; /* 固定ヘッダーの高さ分だけ下にずらす */
}

/* 目次リストのスタイル */
.toc-sidebar strong {
  font-weight: bold;
  display: block;
  margin-bottom: 0.5rem;
}

.toc-sidebar nav ul {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

.toc-sidebar nav li {
  margin-bottom: 0.5rem;
}

/* 目次のh3は少しインデント */
.toc-sidebar nav ul ul {
  padding-left: 1rem;
  margin-top: 0.5rem;
}

/* 画面が狭いときは目次を非表示にする */
@media (max-width: 1024px) {
  .toc-sidebar {
    display: none;
  }
}

/* assets/css/style.css に追記 */

/* 目次内のリンクのスタイル */
.toc-sidebar nav a {
    text-decoration: none; /* 下線をなくす */
}

/* 目次内のリンクをホバーした時は下線を表示 */
.toc-sidebar nav a:hover {
    text-decoration: underline;
}




/* --- プロフィールセクションのスタイル --- */

.profile-container {
  display: flex;
  align-items: center; /* 上下中央揃え */
  gap: 2.5rem;         /* テキストと画像の間の余白 */
  margin-bottom: 0rem;
}

.profile-text {
  flex: 2; /* テキスト部分が画像部分の2倍の幅をとる */
}

.profile-text h1 {
  font-size: 2.2rem; /* ← h1のサイズを明確に指定 */
  margin-top: 0;
  margin-bottom: 1rem;
}

.bio-text p {
  margin: 0.5rem 0;
  line-height: 1.7;
}

.profile-image {
  flex: 1;
}

.profile-image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px; /* 画像の角を少し丸くする */
  box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* ほんのり影をつける */
}

/* 画面幅が768px以下の時（スマートフォンなど）のスタイル */
@media (max-width: 768px) {
  .profile-container {
    flex-direction: column; /* 画像が上、テキストが下になるように並び順を変更 */
  }
}

/* assets/css/style.css に追記 */

/* --- ソーシャルアイコンのスタイル --- */
.social-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem; /* アイコン間の余白 */
  margin-top: 1.5rem;
}

.social-icons a {
  color: var(--color-text); /* テキストの色を継承してモノクロにする */
  text-decoration: none;
  transition: opacity 0.2s;
}

.social-icons a:hover {
  opacity: 0.7; /* ホバー時に少し透明にする */
}

.social-icons svg {
  width: 24px;
  height: 24px;
  fill: currentColor; /* aタグの色(color)をそのままアイコンの色(fill)として使う */
}


/* --- ハンバーガーメニューのスタイル --- */

/* ヘッダー右側のコントロール（言語切替、テーマ切替）をまとめる */
.header-controls {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* ハンバーガーボタン（デフォルトでは非表示） */
#hamburger-btn {
    display: none; /* PCでは非表示 */
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    color: var(--color-text);
    z-index: 1001; /* メニューより手前に表示 */
}




/* 画面幅が768px以下の時（スマートフォンなど）のスタイル */
@media (max-width: 768px) {
    /* PC用のナビゲーションバーを非表示に */
    #site-header .main-nav {
        display: none;
    }

    /* ハンバーガーボタンを表示 */
    #hamburger-btn {
        display: block;
    }

    /* --- ここから下がメニューが開かれた時のスタイル --- */

    /* body.nav-openを付け、メニューを全画面表示のオーバーレイにする */
    /* ▼▼▼ このセレクタをより具体的に修正 ▼▼▼ */
    body.nav-open #site-header .main-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(5px);
        z-index: 1000;
    }

    /* ダークモード時のオーバーレイ背景 */
    body.dark-mode.nav-open #site-header .main-nav {
        background-color: rgba(26, 26, 26, 0.98);
    }
    
    /* 開いたメニューの中のリスト項目 */
    body.nav-open .main-nav ul {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
        padding: 0;
        list-style: none;
    }
    
    /* 開いたメニューのリンクの文字を大きくする */
    body.nav-open .main-nav ul a {
        font-size: 1.5rem;
        font-weight: bold;
    }

    /* 開いたメニューの下部コントロール（言語・テーマ切替） */
    body.nav-open .main-nav .header-controls {
        position: absolute;
        bottom: 3rem;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }
}

/* assets/css/style.css に追記 */

/* ハンバーガーボタン内のアイコンの初期設定 */
#hamburger-btn .icon-close {
    display: none;
}
#hamburger-btn .icon-menu {
    display: block;
}

/* メニューが開いている時のアイコンの表示切り替え */
body.nav-open #hamburger-btn .icon-close {
    display: block;
}
body.nav-open #hamburger-btn .icon-menu {
    display: none;
}




/* --- 画像ギャラリーのスタイル --- */
.image-gallery {
  display: flex;
  flex-wrap: wrap; /* 画面が狭いときは折り返す */
  gap: 1rem;       /* 画像間の余白 */
  margin: 1.5rem 0;
}

.image-gallery figure {
  flex: 1; /* 横に並んだ要素が均等に幅をとる */
  margin: 0;
}

.image-gallery img {
  width: 100%;
  height: auto;
  display: block;
}

/* figure内の画像が、親要素の幅を超えないようにする */
figure img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 本文中の画像をレスポンシブ対応させる --- */
.content img,
.post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1.5rem auto; /* 画像の上下に余白をとり、中央揃えにする */
}

/* --- インラインコードのスタイル --- */
/* <pre> タグの中にない <code> タグ（＝インラインコード）に適用 */
:not(pre) > code {
    background-color: var(--color-code-bg);
    padding: 0.2em 0.4em;
    margin: 0 0.1em;
    font-size: 85%;
    border-radius: 4px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}

/* assets/css/style.css に追記 */

/* --- コードブロックの拡張スタイル --- */

/* コードブロック全体（ハイライト部分） */
.highlight {
    position: relative; /* コピーボタンを配置する基準点にする */
    margin: 1.5rem 0;
    border-radius: 6px; /* 角を少し丸くする */
    background-color: #282c34; /* コードブロックの背景色 */
}

/* Hugoが生成する<pre>タグ */
.highlight pre {
    overflow-x: auto; /* これが横スクロールを有効にするための重要な設定 */
    padding: 1.2rem;
    color: #abb2bf; /* コードの文字色 */
}

/* コピーボタンのスタイル */
.copy-code-button {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: transparent;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    color: #abb2bf; /* アイコンの色 */
    opacity: 0.5;
    transition: opacity 0.2s;
}

.copy-code-button:hover {
    opacity: 1;
}

/* コピー成功時のスタイル */
.copy-code-button.copied {
    color: #98c379; /* 成功時のアイコンの色（緑色） */
    opacity: 1;
}