/*
Theme Name: 日々是観測
Theme URI: https://aoiro-labo.com/
Author: aoiro
Author URI: https://aoiro-labo.com/
Description: 独自テーマ「日々是観測」は、シンプルで読みやすいデザインを提供します。日本語のコンテンツに最適化されており、レスポンシブ対応です。
Version: 1.2
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: hibikore-theme
Tags: blog, custom-theme, responsive
*/

@import url('https://fonts.googleapis.com/css2?family=Zen+Kurenaido&display=swap'); /* Zen Kurenaido のインポートのみに */

/* CSSカスタムプロパティ（変数）の定義 */
:root {
  --font-family: 'Zen Kurenaido', sans-serif; /* 全体のフォントをZen Kurenaidoに */
  --bg-color: #f0f4f8; /* 非常に明るい青みがかったグレー */
  --text-color: #334e68; /* 暗めの青みがかったグレー */
  --link-color: #4a90e2; /* 柔らかい青 */
  --link-hover-color: #357bd8;
  --card-bg: #ffffff; /* 白 */
  --section-bg: #ffffff; /* 白 */
  --border-color: #e0e6ed; /* 明るいグレーのボーダー */
  --box-shadow: rgba(51, 78, 104, 0.08); /* テキストカラーをベースにした柔らかい影 */
  --accent-color: #7ab3a7; /* 優しいミントグリーン */
  --heading-color: #334e68; /* テキストカラーと同じ */
  --box-shadow-hover: rgba(51, 78, 104, 0.15); /* ホバー時の影を少し濃く */
  --footer-text-color: #667c91; /* フッター用の少し明るいグレー */
}

/* ダークモードのスタイル */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #2c3e50; /* 暗めの青みがかった背景 */
    --text-color: #e0e6ed; /* 明るい青みがかったグレー */
    --link-color: #8bbcdb; /* 明るい青 */
    --link-hover-color: #6a9ac9;
    --card-bg: #3b5266; /* 少し明るい暗めの青 */
    --section-bg: #3b5266; /* カード背景と同じ */
    --border-color: #4a657e; /* 暗いボーダー */
    --box-shadow: rgba(0, 0, 0, 0.3); /* より目立たない影 */
    --accent-color: #a7d9c6; /* 明るいミントグリーン */
    --heading-color: #e0e6ed; /* テキストカラーと同じ */
    --box-shadow-hover: rgba(0, 0, 0, 0.5); /* ホバー時の影をより濃く */
    --footer-text-color: #a0aec0; /* フッター用の明るいグレー */
  }
}

body {
  font-family: var(--font-family);
  background-color: var(--bg-color);
  color: var(--text-color);
  margin: 0;
  padding: 0;
  line-height: 1.8;
  transition: background-color 0.3s ease, color 0.3s ease; /* スムーズな切り替え */
}

/* ヘッダー全体を囲むリンクのスタイルリセット */
.site-header-link {
  text-decoration: none; /* 下線を削除 */
  color: inherit; /* 親要素の文字色を継承 */
  display: block; /* ブロック要素にして、リンクが領域全体を占めるようにする */
  cursor: pointer; /* マウスオーバー時にポインタを表示 */
}

.site-header-link:hover {
  text-decoration: none; /* ホバー時も下線を消す */
  color: inherit; /* ホバー時も文字色を変えない */
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

.container {
  max-width: 1200px; /* PCでの表示幅を広げる */
  margin: 0 auto;
  padding: 20px 16px;
}

/* 投稿ヘッダー（タイトル・日付など） */
.post-header {
  background: var(--section-bg);
  border-radius: 12px; /* 全体に角丸 */
  box-shadow: 0 4px 12px var(--box-shadow);
  padding: 24px 20px 12px;
  margin-bottom: 24px; /* セクションとの間にスペースを追加 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 記事ページ（single.php）のタイトルとメタデータ */
.post-single .post-title {
  text-align: left; /* 左揃え */
  margin-top: 0; /* 上部の余白を調整 */
  margin-bottom: 0.5em; /* メタデータとの間隔 */
  font-size: 2.2rem; /* 少し大きくして強調 */
  color: var(--heading-color); /* 見出し色を適用 */
}

.post-single .post-meta {
  text-align: left; /* 左揃え */
  font-size: 0.9rem; /* 既存 */
  color: var(--text-color); /* 既存 */
  margin-bottom: 25px; /* カードとの間隔 */
  padding-bottom: 15px; /* 区切り線との間隔 */
  border-bottom: 1px solid var(--border-color); /* 区切り線 */
}

.post-single .post-meta span {
  display: block; /* 各span要素をブロック要素にして改行 */
  margin-bottom: 5px; /* 各行の下に少し余白 */
}

.post-single .post-meta span:last-child {
  margin-bottom: 0; /* 最後のspanの下の余白は不要 */
}

/* セクション全体（本文、記事リストなど） */
.section {
  background-color: var(--section-bg);
  border-radius: 12px; /* 全体に角丸 */
  box-shadow: 0 4px 12px var(--box-shadow);
  padding: 24px 20px;
  margin-bottom: 24px;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* カード風レイアウト（セクション内コンテンツ） */
.card {
  background-color: var(--card-bg);
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px var(--box-shadow);
  /* 記事本文のカードはホバーで動かないように、transformのtransitionは削除 */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* 記事一覧のカードにのみホバーエフェクトを適用 */
.section .card {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; /* transform transitionを追加 */
}

.section .card:hover { /* ホバーエフェクトを .section 内のカードに限定 */
  transform: translateY(-5px); /* マウスオーバー時に少し上に持ち上がる */
  box-shadow: 0 8px 20px var(--box-shadow-hover); /* 影をより強調する */
}

/* 最後のカードの下パディング調整 */
.section .card:last-child {
  margin-bottom: 0;
}


/* 見出し */
.card h2,
.card h3,
.card h4 {
  color: var(--accent-color); /* アクセントカラーで見出しを強調 */
  margin-top: 1.8em;
  margin-bottom: 0.8em;
}

/* 段落 */
.card p {
  margin-bottom: 1.2em;
}

/* リスト */
.card ul,
.card ol {
  margin-bottom: 1.2em;
  padding-left: 1.5em;
}

/* 画像 */
.card img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto;
  border-radius: 8px; /* 画像も角丸 */
}

/* 引用 */
.card blockquote {
  border-left: 4px solid var(--accent-color);
  margin: 1em 0;
  padding: 1em; /* パディングを増やす */
  color: var(--text-color); /* 引用の文字色 */
  font-style: italic;
  background-color: var(--bg-color); /* 背景色に合わせた柔らかい色 */
  border-radius: 8px; /* 引用も角丸 */
  opacity: 0.9; /* 少し透明度を持たせる */
  transition: background-color 0.3s ease;
}

/* 目次 */
.table-of-contents {
  background: var(--bg-color); /* 背景色に合わせた柔らかい色 */
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: inset 0 1px 3px var(--box-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.table-of-contents strong {
  color: var(--heading-color);
}

.table-of-contents h2 {
  margin-top: 0;
  font-size: 1.2rem;
  color: var(--heading-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 4px;
}

.table-of-contents ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.table-of-contents li {
  margin-bottom: 6px;
}

.table-of-contents a {
  color: var(--link-color);
  text-decoration: none;
}

.table-of-contents a:hover {
  color: var(--link-hover-color);
  text-decoration: underline;
}

/* フッターのスタイル */
footer {
  text-align: center;
  margin-top: 40px;
  padding: 20px;
  color: var(--footer-text-color);
  font-size: 0.9em;
}

footer a {
  color: var(--footer-text-color);
  text-decoration: underline;
}

footer a:hover {
  color: var(--link-hover-color);
}

/* モーダルのスタイル（既存のものを変数に合わせて調整） */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1000; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

.modal-content {
  background-color: var(--card-bg);
  margin: 15% auto; /* 15% from the top and centered */
  padding: 30px;
  border-radius: 12px;
  width: 80%; /* Could be more or less, depending on screen size */
  max-width: 600px;
  position: relative;
  box-shadow: 0 5px 15px var(--box-shadow);
  color: var(--text-color);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.modal-content h2 {
  color: var(--heading-color);
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.modal-content h3 {
  color: var(--accent-color);
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.close-modal {
  color: var(--text-color);
  position: absolute;
  top: 15px;
  right: 25px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.2s ease;
}

.close-modal:hover,
.close-modal:focus {
  color: var(--link-color);
  text-decoration: none;
  cursor: pointer;
}

/* プロフィールと広告 */
.intro {
  display: flex; /* 追加: アイコンとテキストを横並びに */
  align-items: center; /* 追加: 垂直方向中央揃え */
  margin-bottom: 20px;
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 0; /* 角丸なし（ユーザーの指定） */
  box-shadow: 0 4px 12px var(--box-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.intro img {
  width: 80px; /* アイコンのサイズ（ユーザーの指定） */
  height: 80px; /* アイコンのサイズ（ユーザーの指定） */
  border-radius: 50%;
  margin-right: 20px; /* アイコンとテキストの間隔 */
  object-fit: cover;
  flex-shrink: 0; /* 画像が縮小されないように */
}

.intro-text {
  flex-grow: 1; /* テキストが残りのスペースを埋めるように */
  text-align: left; /* テキストを左揃えに */
}

.intro-text h1 {
  font-size: 1.8rem;
  margin: 0;
  color: var(--heading-color);
}

.intro-text .subtitle {
  /* Welcome to underground! はheader.phpから削除済み */
  font-size: 0.6em; /* このスタイル自体は残しておきますが、要素は削除済み */
  color: var(--text-color);
  opacity: 0.8;
  display: block;
}

.small-ad {
  text-align: center;
  margin-bottom: 20px;
  background-color: var(--card-bg);
  padding: 10px;
  border-radius: 12px;
  box-shadow: 0 2px 8px var(--box-shadow);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

/* RSSセクション */
.rss-section {
  padding-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.rss-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.rss-title {
  display: flex;
  align-items: center;
}

.rss-title .bar {
  width: 6px;
  height: 24px;
  margin-right: 10px;
  border-radius: 3px;
}

.rss-title h2 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--heading-color);
}

.follow-btn {
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 0.9em;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
  white-space: nowrap; /* ボタン内のテキストが改行されないように */
}

.follow-btn:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

/* 各RSSフィードのバーとボタンの色 */
.rss-section.note .bar.note, .follow-btn.note {
  background-color: #ffffff; /* 白に変更 */
  color: var(--text-color); /* テキストはテーマのテキスト色に合わせる */
  border: 1px solid var(--border-color); /* 白背景に合うようにボーダーを追加 */
}
.rss-section.note .follow-btn.note:hover {
  background-color: #f0f0f0; /* ホバーで少しグレーに */
  color: var(--link-hover-color); /* ホバーでリンク色に */
  border-color: var(--link-hover-color); /* ホバーでボーダー色も変更 */
}

.rss-section.twitter .bar.twitter, .follow-btn.twitter {
  background-color: #1da1f2; /* X（Twitter）カラー */
  color: #fff;
}
.rss-section.twitter .follow-btn.twitter:hover {
  background-color: #1789d0;
}

.rss-section.youtube .bar.youtube, .follow-btn.youtube {
  background-color: #ff0000; /* YouTubeカラー */
  color: #fff;
}
.rss-section.youtube .follow-btn.youtube:hover {
  background-color: #cc0000;
}

.rss-list {
  list-style: none;
  padding: 0;
}

.rss-list li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.rss-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.rss-list li a {
  color: var(--text-color); /* リンクの色をテキスト色に合わせる */
  font-weight: bold;
}

.rss-list li a:hover {
  color: var(--link-color);
}

.rss-list .date {
  font-size: 0.85em;
  color: var(--footer-text-color);
  display: block;
  margin-top: 5px;
}

/* 記事ナビゲーションボタン */
.post-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--border-color);
}

.post-navigation .nav-button {
  display: inline-block;
  padding: 10px 15px;
  background-color: var(--card-bg); /* 背景色をカードに合わせる */
  color: var(--link-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease;
  font-weight: bold;
}

.post-navigation .nav-button:hover {
  background-color: var(--bg-color); /* ホバーで背景色を少し変える */
  color: var(--link-hover-color);
  border-color: var(--link-hover-color);
  transform: translateY(-2px); /* 少し浮き上がらせる */
  text-decoration: none;
}

.post-navigation .prev-post {
  margin-right: auto; /* 左寄せ */
}

.post-navigation .next-post {
  margin-left: auto; /* 右寄せ */
}

/* 関連記事セクション */
.related-posts {
  margin-top: 30px; /* 上部にスペースを追加 */
  padding-top: 24px;
  padding-bottom: 24px;
}

.related-posts h2 {
  font-size: 1.5rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

.related-posts-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.related-posts-list li {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dotted var(--border-color); /* ドットの区切り線 */
}

.related-posts-list li:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.related-posts-list li a {
  color: var(--text-color);
  font-weight: bold;
  text-decoration: none;
  display: block; /* リンク全体をクリック可能に */
}

.related-posts-list li a:hover {
  color: var(--link-color);
  text-decoration: underline;
}

.related-posts-list .post-date {
  font-size: 0.85em;
  color: var(--footer-text-color);
  display: block;
  margin-top: 5px;
}

/* サイドバー */
.sidebar {
  background-color: var(--card-bg); /* サイドバー背景も変数に */
  border-radius: 12px;
  box-shadow: 0 4px 12px var(--box-shadow);
  padding: 20px;
  margin-top: 24px; /* メインコンテンツとの間のスペース */
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.widget {
  margin-bottom: 30px;
}

.sidebar-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 10px;
}

/* サイドバーアイコンのスタイル */
.sidebar-title .sidebar-icon {
  font-size: 1.2em; /* アイコンのサイズを調整 */
  color: var(--accent-color); /* テーマのアクセントカラーに合わせる */
  margin-right: 12px; /* アイコンとテキストの間隔を広げる */
  vertical-align: middle; /* テキストとアイコンの垂直方向の位置を揃える */
}

.sidebar-title h3 {
  margin: 0;
  font-size: 1.2rem;
  color: var(--heading-color);
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar ul li {
  margin-bottom: 8px;
}

.sidebar ul li a {
  color: var(--text-color);
}

.sidebar ul li a:hover {
  color: var(--link-color);
}

.sidebar .affiliate-info p {
  font-size: 0.9em;
  color: var(--footer-text-color);
}


/* レスポンシブ対応 */
@media (min-width: 768px) {
  .main-layout {
    display: grid;
    grid-template-columns: 2fr 1fr; /* メインコンテンツとサイドバーの比率 */
    gap: 24px; /* カラム間のスペース */
  }
  .sidebar {
    margin-top: 0; /* デスクトップではサイドバーのマージンをリセット */
  }
}

@media (max-width: 767px) {
  .container {
    padding: 16px 12px;
  }

  .intro { /* モバイル用: プロフィールアイコンとタイトルを縦に並べる */
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px; /* 既存 */
    padding: 20px; /* 既存 */
    border-radius: 0; /* 既存 */
    box-shadow: 0 4px 12px var(--box-shadow); /* 既存 */
  }

  .intro img {
    margin-right: 0; /* 縦並びなので右マージンは不要 */
    margin-bottom: 15px; /* アイコンの下にスペース */
  }

  .intro-text {
    text-align: center; /* モバイルでは中央揃え */
  }

  .intro-text h1 {
    font-size: 1.5rem;
  }

  .post-title {
    font-size: 1.6rem;
  }

  .section {
    padding: 20px 16px;
  }

  .post-header {
    padding: 20px 16px 10px;
  }

  .modal-content {
    width: 90%;
    margin: 10% auto;
    padding: 20px;
  }

  .rss-heading {
    flex-direction: column;
    align-items: flex-start;
  }

  .follow-btn {
    margin-top: 10px;
    width: 100%; /* モバイルでボタンを幅いっぱいに */
    text-align: center;
  }
}