/*
Theme Name: Usagi-Jima
Theme URI: https://usagi-jima.org
Description: 大久野島ボランティアサイト専用テーマ — うさぎと自然をイメージした温かみのあるデザイン
Author: usagi-jima.org
Template: twentysixteen
Version: 1.0.0
*/

/* ============================================================
 * カラーパレット
 * --usagi-green:  #2e7d32  メインカラー（自然・植物）
 * --usagi-brown:  #5d4037  サブカラー（大地・島）
 * --usagi-orange: #f5a623  アクセント（夕陽）
 * --usagi-cream:  #faf8f2  背景
 * --usagi-white:  #ffffff  カード背景
 * --usagi-text:   #333333  本文
 * ============================================================ */

:root {
  --usagi-green: #2e7d32;
  --usagi-green-light: #4caf50;
  --usagi-green-dark: #1b5e20;
  --usagi-brown: #5d4037;
  --usagi-brown-light: #795548;
  --usagi-orange: #f5a623;
  --usagi-cream: #faf8f2;
  --usagi-white: #ffffff;
  --usagi-text: #333333;
  --usagi-text-light: #666666;
  --usagi-border: #e0ddd5;
}

/* ============================================================
 * ベース
 * ============================================================ */
body {
  background: var(--usagi-cream) !important;
  color: var(--usagi-text);
  font-family: -apple-system, "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}
a { color: var(--usagi-green); }
a:hover { color: var(--usagi-green-dark); }

/* ============================================================
 * ヘッダー
 * ============================================================ */
.site-header {
  background: linear-gradient(135deg, var(--usagi-green-dark) 0%, var(--usagi-green) 60%, var(--usagi-green-light) 100%) !important;
  padding: 0 !important;
}
.site-branding {
  padding: 16px 20px !important;
  margin: 0 !important;
}
.site-title {
  font-weight: 900 !important;
  font-size: 22px !important;
  line-height: 1.3 !important;
}
.site-title a {
  color: #fff !important;
  text-decoration: none !important;
}
.site-title a::before {
  content: "\1F430 ";
}
.site-description {
  color: rgba(255,255,255,0.8) !important;
  font-size: 12px !important;
  margin-top: 2px !important;
}

/* ============================================================
 * ナビゲーション
 * ============================================================ */
.main-navigation {
  background: var(--usagi-green-dark) !important;
  border: none !important;
}
.main-navigation .primary-menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}
.main-navigation .primary-menu > li {
  float: none !important;
  margin: 0 !important;
}
.main-navigation .primary-menu > li > a {
  color: rgba(255,255,255,0.9) !important;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: block !important;
  transition: background 0.2s, color 0.2s !important;
  border-bottom: 3px solid transparent !important;
  text-decoration: none !important;
}
.main-navigation .primary-menu > li > a:hover,
.main-navigation .primary-menu > li.current-menu-item > a {
  background: rgba(255,255,255,0.1) !important;
  color: #fff !important;
  border-bottom-color: var(--usagi-orange) !important;
}
/* ハンバーガーメニュー(モバイル) */
.menu-toggle {
  background: var(--usagi-green) !important;
  color: #fff !important;
  border: none !important;
  padding: 8px 16px !important;
}

/* ============================================================
 * メインコンテンツ
 * ============================================================ */
.site-main,
.site-content {
  background: transparent !important;
}
.site-content .entry-content,
.site-content .entry-summary {
  background: var(--usagi-white);
  padding: 24px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid var(--usagi-border);
  margin-bottom: 20px;
}
.entry-title,
.entry-title a {
  color: var(--usagi-brown) !important;
  text-decoration: none !important;
}
.entry-title {
  font-size: 24px !important;
  font-weight: 800 !important;
}

/* 見出し */
.entry-content h2,
.entry-content h3 {
  color: var(--usagi-green-dark);
  border-bottom: 2px solid var(--usagi-green-light);
  padding-bottom: 6px;
  margin-top: 1.5em;
}
.entry-content h3 {
  border-bottom-width: 1px;
}

/* リスト */
.entry-content .border {
  background: #f1f8e9 !important;
  border-left: 4px solid var(--usagi-green) !important;
  padding: 16px 20px !important;
  border-radius: 0 6px 6px 0 !important;
  margin: 16px 0 !important;
}
.entry-content ul li {
  margin-bottom: 6px;
}

/* ============================================================
 * サイドバー
 * ============================================================ */
.sidebar {
  background: var(--usagi-white);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  border: 1px solid var(--usagi-border);
}
.widget-title {
  color: var(--usagi-green-dark) !important;
  font-size: 15px !important;
  border-bottom: 2px solid var(--usagi-green-light) !important;
  padding-bottom: 6px !important;
}
.widget a {
  color: var(--usagi-green) !important;
}

/* ============================================================
 * フッター
 * ============================================================ */
.site-footer {
  background: var(--usagi-brown) !important;
  color: rgba(255,255,255,0.8) !important;
  padding: 20px 0 !important;
  text-align: center;
}
.site-footer a {
  color: var(--usagi-orange) !important;
}
.site-footer .site-info {
  color: rgba(255,255,255,0.6) !important;
  font-size: 12px !important;
}

/* ============================================================
 * スライダー(MetaSlider)
 * ============================================================ */
.metaslider {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
  margin: 0 0 24px !important;
}
.metaslider .caption {
  background: rgba(46,125,50,0.85) !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}

/* ============================================================
 * ボタン・リンク共通
 * ============================================================ */
button, input[type="submit"], .button {
  background: var(--usagi-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 20px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
button:hover, input[type="submit"]:hover {
  background: var(--usagi-green-dark) !important;
}

/* ============================================================
 * 地図ショートコード(通常ページ)
 * ============================================================ */
.usagi-map-wrap {
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1) !important;
  border: 1px solid var(--usagi-border) !important;
}
.usagi-toolbar {
  background: var(--usagi-green-dark) !important;
  color: #fff !important;
  border-color: var(--usagi-green-dark) !important;
  border-radius: 10px 10px 0 0 !important;
}
.usagi-toolbar .who {
  color: rgba(255,255,255,0.9) !important;
}
.usagi-toolbar .quota {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.3) !important;
  color: #fff !important;
}
.usagi-toolbar a,
.usagi-toolbar button,
.usagi-toolbar select {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,0.3) !important;
}
.usagi-toolbar button.primary {
  background: var(--usagi-orange) !important;
  border-color: var(--usagi-orange) !important;
  color: #333 !important;
  font-weight: bold !important;
}

/* ============================================================
 * タイムライン
 * ============================================================ */
.usagi-tl-item {
  border-radius: 8px !important;
  border-color: var(--usagi-border) !important;
  transition: all 0.2s !important;
}
.usagi-tl-item:hover {
  border-color: var(--usagi-green-light) !important;
  background: #f1f8e9 !important;
}
.usagi-tl-item .title {
  color: var(--usagi-green-dark) !important;
}

/* ============================================================
 * マイページ
 * ============================================================ */
.usagi-mypage .header {
  background: linear-gradient(135deg, #e8f5e9, #fffde7) !important;
  border-color: var(--usagi-green-light) !important;
}
.usagi-mypage .stat {
  border-color: var(--usagi-border) !important;
  border-radius: 10px !important;
}
.usagi-mypage .stat .num {
  color: var(--usagi-green) !important;
}
.usagi-mypage .section {
  border-color: var(--usagi-border) !important;
  border-radius: 10px !important;
}

/* ============================================================
 * 掲示板
 * ============================================================ */
.usagi-thread-item {
  border-radius: 8px !important;
  transition: all 0.2s !important;
}
.usagi-thread-item:hover {
  border-color: var(--usagi-green-light) !important;
  background: #f1f8e9 !important;
}
.usagi-thread-item .title a {
  color: var(--usagi-green-dark) !important;
}

/* ============================================================
 * レスポンシブ調整
 * ============================================================ */
@media screen and (max-width: 768px) {
  .site-title { font-size: 18px !important; }
  .site-branding { padding: 12px 16px !important; }
  .main-navigation .primary-menu > li > a {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }
  .site-content .entry-content {
    padding: 16px;
    border-radius: 6px;
  }
}