/* ========================================
   文鳥（Buncho）テーマ - メインスタイル
======================================== */

/* ========================================
   ヘッダー
======================================== */

.buncho-header {
  background-color: var(--buncho-base);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: var(--buncho-spacing-sm) 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.buncho-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--buncho-spacing-md);
}

.buncho-site-branding {
  flex: 0 0 auto;
}

.buncho-site-title {
  margin: 0;
  font-size: 1.75rem;
}

.buncho-site-title a {
  color: var(--buncho-text);
  text-decoration: none;
}

.buncho-site-title a:hover {
  color: var(--buncho-primary);
}

.buncho-site-description {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #666;
}

/* ナビゲーション */
.buncho-navigation {
  flex: 1 1 auto;
}

.buncho-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--buncho-spacing-sm);
}

.buncho-menu li {
  margin: 0;
}

.buncho-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--buncho-text);
  text-decoration: none;
  border-radius: var(--buncho-radius-sm);
  transition: all 0.3s ease;
}

.buncho-menu a:hover,
.buncho-menu .current-menu-item a {
  background-color: var(--buncho-primary);
  color: var(--buncho-base);
}

/* メニュートグル（モバイル） */
.buncho-menu-toggle {
  display: none;
  background: none;
  border: 1px solid var(--buncho-primary);
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.buncho-menu-icon {
  font-size: 1.5rem;
}

/* ========================================
   コンテンツエリア
======================================== */

.buncho-content-wrapper {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--buncho-spacing-lg);
  padding: var(--buncho-spacing-lg) 0;
}

.buncho-main {
  min-width: 0;
}

/* 投稿一覧 */
.buncho-posts {
  display: grid;
  gap: var(--buncho-spacing-md);
}

/* 投稿カード */
.buncho-post {
  background-color: var(--buncho-base);
  border-radius: var(--buncho-radius);
  padding: var(--buncho-spacing-md);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.buncho-post:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.buncho-post-thumbnail {
  margin-bottom: var(--buncho-spacing-sm);
}

.buncho-post-thumbnail img {
  width: 100%;
  height: auto;
  border-radius: var(--buncho-radius-sm);
}

.buncho-entry-title {
  margin-top: 0;
  margin-bottom: var(--buncho-spacing-sm);
}

.buncho-entry-title a {
  color: var(--buncho-text);
  text-decoration: none;
}

.buncho-entry-title a:hover {
  color: var(--buncho-primary);
}

.buncho-entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--buncho-spacing-sm);
  font-size: 0.875rem;
  color: #666;
  margin-bottom: var(--buncho-spacing-sm);
}

.buncho-entry-content {
  line-height: 1.8;
}

.buncho-entry-footer {
  margin-top: var(--buncho-spacing-sm);
  padding-top: var(--buncho-spacing-sm);
  border-top: 1px solid var(--buncho-light-gray);
}

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

.buncho-sidebar {
  min-width: 0;
}

.widget {
  background-color: var(--buncho-base);
  border-radius: var(--buncho-radius);
  padding: var(--buncho-spacing-md);
  margin-bottom: var(--buncho-spacing-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.widget-title {
  margin-top: 0;
  margin-bottom: var(--buncho-spacing-sm);
  padding-bottom: var(--buncho-spacing-xs);
  border-bottom: 2px solid var(--buncho-primary);
  font-size: 1.25rem;
}

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

.widget ul li {
  margin-bottom: 0.5rem;
}

.widget ul li a {
  color: var(--buncho-text);
  text-decoration: none;
}

.widget ul li a:hover {
  color: var(--buncho-primary);
}

/* ========================================
   フッター
======================================== */

.buncho-footer {
  background-color: var(--buncho-light-gray);
  margin-top: var(--buncho-spacing-xl);
}

.buncho-footer-widgets {
  padding: var(--buncho-spacing-lg) 0;
}

.buncho-footer-widget-area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--buncho-spacing-md);
}

.buncho-footer-bottom {
  background-color: var(--buncho-text);
  color: var(--buncho-base);
  padding: var(--buncho-spacing-md) 0;
}

.buncho-footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--buncho-spacing-md);
}

.buncho-site-info p {
  margin: 0.25rem 0;
  font-size: 0.875rem;
}

.buncho-site-info a {
  color: var(--buncho-primary);
}

.buncho-footer-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--buncho-spacing-sm);
}

.buncho-footer-menu a {
  color: var(--buncho-base);
  text-decoration: none;
  font-size: 0.875rem;
}

.buncho-footer-menu a:hover {
  color: var(--buncho-primary);
}

/* ========================================
   ページネーション
======================================== */

.pagination {
  margin-top: var(--buncho-spacing-lg);
  text-align: center;
}

.pagination .nav-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.pagination a,
.pagination .current {
  display: inline-block;
  padding: 0.5rem 1rem;
  background-color: var(--buncho-base);
  border: 1px solid var(--buncho-primary);
  border-radius: var(--buncho-radius-sm);
  color: var(--buncho-primary);
  text-decoration: none;
  transition: all 0.3s ease;
}

.pagination a:hover,
.pagination .current {
  background-color: var(--buncho-primary);
  color: var(--buncho-base);
}

/* ========================================
   レスポンシブ
======================================== */

/* ========================================
   「続きを読む」リンク
======================================== */

.buncho-read-more {
  display: inline-block;
  margin-top: var(--buncho-spacing-sm);
  padding: 0.5rem 1.25rem;
  background-color: var(--buncho-primary);
  color: var(--buncho-base);
  border-radius: var(--buncho-radius);
  font-size: 0.875rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.buncho-read-more:hover {
  background-color: var(--buncho-accent);
  color: var(--buncho-base);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* ========================================
   投稿ナビゲーション
======================================== */

.post-navigation {
  margin-top: var(--buncho-spacing-lg);
  padding: var(--buncho-spacing-md) 0;
  border-top: 1px solid var(--buncho-light-gray);
  border-bottom: 1px solid var(--buncho-light-gray);
}

.post-navigation .nav-links {
  display: flex;
  justify-content: space-between;
  gap: var(--buncho-spacing-md);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
  flex: 1;
}

.post-navigation .nav-next {
  text-align: right;
}

.post-navigation .nav-subtitle {
  display: block;
  font-size: 0.75rem;
  color: #999;
  margin-bottom: 0.25rem;
}

.post-navigation .nav-title {
  font-weight: 600;
  color: var(--buncho-text);
}

.post-navigation a:hover .nav-title {
  color: var(--buncho-primary);
}

/* ========================================
   コメント
======================================== */

.buncho-comments-area {
  margin-top: var(--buncho-spacing-lg);
  padding-top: var(--buncho-spacing-lg);
  border-top: 1px solid var(--buncho-light-gray);
}

.buncho-comments-title {
  margin-bottom: var(--buncho-spacing-md);
}

.buncho-comment-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.buncho-comment-list .comment {
  padding: var(--buncho-spacing-md);
  margin-bottom: var(--buncho-spacing-sm);
  background-color: var(--buncho-light-gray);
  border-radius: var(--buncho-radius);
}

.buncho-comment-list .children {
  list-style: none;
  margin-left: var(--buncho-spacing-md);
  padding: 0;
}

.comment-respond {
  margin-top: var(--buncho-spacing-md);
}

.comment-respond .comment-form label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.comment-respond .comment-form input[type="text"],
.comment-respond .comment-form input[type="email"],
.comment-respond .comment-form input[type="url"],
.comment-respond .comment-form textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--buncho-radius-sm);
  font-family: var(--buncho-font-body);
  font-size: 1rem;
  transition: border-color 0.3s ease;
}

.comment-respond .comment-form input:focus,
.comment-respond .comment-form textarea:focus {
  outline: none;
  border-color: var(--buncho-primary);
  box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.2);
}

.comment-respond .comment-form p {
  margin-bottom: var(--buncho-spacing-sm);
}

/* ========================================
   404ページ
======================================== */

.buncho-error-404 {
  text-align: center;
  padding: var(--buncho-spacing-xl) 0;
}

.buncho-404-icon {
  font-size: 6rem;
  font-weight: 700;
  font-family: var(--buncho-font-heading);
  color: var(--buncho-primary);
  margin-bottom: var(--buncho-spacing-md);
  opacity: 0.6;
}

.buncho-404-search {
  max-width: 500px;
  margin: var(--buncho-spacing-md) auto;
}

.buncho-404-home {
  margin-top: var(--buncho-spacing-md);
}

/* ========================================
   検索結果
======================================== */

.buncho-search-query {
  color: var(--buncho-primary);
}

/* ========================================
   ページヘッダー
======================================== */

.buncho-page-header {
  margin-bottom: var(--buncho-spacing-lg);
  padding-bottom: var(--buncho-spacing-sm);
  border-bottom: 2px solid var(--buncho-primary);
}

.buncho-page-title {
  margin: 0;
}

.buncho-archive-description {
  margin-top: var(--buncho-spacing-sm);
  color: #666;
}

/* ========================================
   トップに戻るボタン
======================================== */

.buncho-scroll-top {
  display: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 48px;
  height: 48px;
  background-color: var(--buncho-primary);
  color: var(--buncho-base);
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  font-size: 1.25rem;
  text-decoration: none;
  box-shadow: 0 2px 12px rgba(255, 182, 193, 0.4);
  transition: all 0.3s ease;
  z-index: 999;
}

.buncho-scroll-top:hover {
  background-color: var(--buncho-accent);
  color: var(--buncho-base);
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(255, 215, 0, 0.5);
}

/* ========================================
   検索フォーム
======================================== */

.search-form {
  display: flex;
  gap: 0.5rem;
}

.search-form .search-field {
  flex: 1;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: var(--buncho-radius-sm);
  font-family: var(--buncho-font-body);
  font-size: 1rem;
}

.search-form .search-field:focus {
  outline: none;
  border-color: var(--buncho-primary);
  box-shadow: 0 0 0 3px rgba(255, 182, 193, 0.2);
}

.search-form .search-submit {
  padding: 0.75rem 1.5rem;
}

/* ========================================
   レスポンシブ
======================================== */

@media (max-width: 768px) {
  .buncho-content-wrapper {
    grid-template-columns: 1fr;
  }

  .buncho-header-inner {
    flex-wrap: wrap;
  }

  .buncho-navigation {
    flex: 1 1 100%;
    order: 3;
  }

  .buncho-menu-toggle {
    display: block;
  }

  .buncho-menu {
    display: none;
    flex-direction: column;
    width: 100%;
  }

  .buncho-menu.toggled {
    display: flex;
  }

  .buncho-footer-widget-area {
    grid-template-columns: 1fr;
  }

  .buncho-footer-bottom-inner {
    flex-direction: column;
    text-align: center;
  }

  .post-navigation .nav-links {
    flex-direction: column;
  }

  .post-navigation .nav-next {
    text-align: left;
  }

  .buncho-scroll-top {
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 1rem;
  }

  .search-form {
    flex-direction: column;
  }

  .buncho-theme-switcher {
    order: 2;
    width: 100%;
    margin-top: var(--buncho-spacing-sm);
  }

  .buncho-theme-selector {
    width: 100%;
  }
}

/* ========================================
   テーマスイッチャー（文鳥の種類選択）
======================================== */

.buncho-theme-switcher {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.buncho-theme-selector {
  padding: 0.5rem 1rem;
  border: 2px solid var(--buncho-accent);
  border-radius: var(--buncho-radius);
  background-color: var(--buncho-base);
  color: var(--buncho-text);
  font-family: var(--buncho-font-body);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(255, 51, 102, 0.15);
}

.buncho-theme-selector:hover {
  border-color: var(--buncho-beak-soft);
  box-shadow: 0 4px 12px rgba(255, 51, 102, 0.25);
  transform: translateY(-1px);
}

.buncho-theme-selector:focus {
  outline: none;
  border-color: var(--buncho-accent);
  box-shadow: 0 0 0 3px rgba(255, 51, 102, 0.2);
}

.buncho-theme-selector option {
  padding: 0.5rem;
  font-weight: 600;
}