/* ===== General / Content ===== */

/* 記事内の画像が枠からはみ出さないようにする */
.content img, .post__content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em 0;
}

/* 月の見出し：線の色をダークモード用に調整 */
.archive-month {
  margin-top: 2.5em;
  padding-bottom: 5px;
  border-bottom: 1px solid #444; /* #eeeから暗い色に変更 */
}

.archive-month + ul {
  margin-bottom: 2em;
}

/* ===== Mainroad Dark Base ===== */

html, body, .container, .wrapper, .main, .sidebar, .post, .widget {
  background: #202020 !important;
  color: #d6d6d6 !important;
}

/* サイトタイトル・本文 */
.logo a, p, li {
  color: #d6d6d6 !important;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
  color: #e6e6e6 !important;
}

/* リンク */
a {
  color: #7aa2ff !important;
}

a:hover {
  color: #a5c0ff !important;
}

/* ウィジェットタイトル下のライン：少し暗くして馴染ませる */
.widget__title {
  border-bottom: 2px solid #444 !important; /* #cccから変更 */
}

/* コードブロック：背景を少しだけ明るくして認識しやすくする */
pre, code {
  background: #2b2b2b !important; /* 全体背景より少し明るいグレー */
  color: #e6e6e6 !important;
  padding: 0.2em 0.4em;
  border-radius: 3px;
}

/* ===== Header & Titles ===== */

.header, .header * {
  color: #ADDFB3 !important;
}

.header svg {
  fill: currentColor;
}

.post__title, .post__title a {
  color: #90D7EC !important;
}

/* ===== Search Widget (Final Optimized) ===== */
/* 1. 検索フォーム全体の枠組み */
.widget-search__form {
  display: flex !important;
  background: #202020 !important;
  align-items: stretch !important;
  border: none !important;
}

/* 2. 入力欄（テキストボックス） */
.widget-search__field {
  flex-grow: 1 !important;
  background: #2b2b2b !important;
  color: #d6d6d6 !important;
  border: 1px solid #444 !important;
  border-radius: 4px 0 0 4px !important;
  padding: 10px !important;
  outline: none;
}

/* プレースホルダー（Search...の文字） */
.widget-search__field::placeholder {
  color: #888 !important;
}

/* 3. 検索ボタン */
.widget-search__submit {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 60px !important;       /* 幅をスリムに固定 */
  min-width: 40px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  background-color: #444 !important;
  fill: #ffffff !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 0 4px 4px 0 !important;
  margin-left: -1px !important;
  cursor: pointer;
  transition: background-color 0.2s;
}

/* 4. マウスを乗せた時の反応 */
.widget-search__submit:hover {
  background-color: #7aa2ff !important;
}


/* 個別記事ページナビゲーションボタン */
.post-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2rem;      /* 下（タイトル）との間隔 */
    margin-top: 0;           /* 上の余白を詰める */
    border-top: none;        /* 上の線を消す */
    border-bottom: 1px solid #777; /* 下に線を入れる */
    padding-bottom: 1rem;    /* 線と文字の間の余白 */
}

.post-nav__item {
	width: 48%;
}

.post-nav__item--next {
	text-align: right;
}

.post-nav__link {
	text-decoration: none;
	color: #000;
}

.post-nav__caption {
	font-size: 0.8rem;
	color: #777;
	display: block;
}

.post-nav__post-title {
	font-weight: bold;
	margin: 0;
}


/* 記事のカテゴリー表示 */
.post__meta-item {
    display: inline-flex;
    align-items: center;
    margin-right: 15px;
    font-size: 0.9rem;
    color: #666;
}

.post__meta-icon {
    margin-right: 5px;
    fill: #666; /* アイコンの色 */
}

.post__meta-link {
    color: #e22d30; /* Mainroadのデフォルト赤色に合わせる場合 */
    text-decoration: none;
}

.post__meta-link:hover {
    text-decoration: underline;
}