/*
Theme Name:  NATURECOREツアー申込
Theme URI:   https://github.com/zummyJP/tour-booking
Description: TourBooking — NATURECOREツアー申込システム専用テーマ（Welcart Basic 子テーマ）
Author:      zummyJP
Version:     1.0.2
Template:    welcart_basic
Text Domain: welcart_basic_child
*/

/* =========================================================
   CSS 変数
   ========================================================= */
:root {
  /* ブランドカラー */
  --color-primary:      #2c7a3a;
  --color-primary-h:    #235f2d;
  --color-primary-lt:   #e8f5e9;

  /* セマンティックカラー */
  --color-danger:       #e53935;
  --color-warn:         #f57c00;

  /* ニュートラル */
  --color-text:         #1a1a1a;
  --color-text-sub:     #555;
  --color-muted:        #888;
  --color-border:       #e8e8e8;
  --color-border-h:     #ccc;
  --color-border-lt:    #f0f0f0;
  --color-bg:           #f7f8f5;
  --color-surface:      #fff;
  --color-surface-alt:  #fafafa;

  /* タイポグラフィ */
  --font-base:          'Hiragino Sans', 'Noto Sans JP', 'Meiryo', sans-serif;
  --font-size-base:     16px;
  --line-height-base:   1.65;

  /* スペーシング */
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;

  /* シェイプ */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;
  --radius-pill: 9999px;

  /* シャドウ（Simple Plus インスパイア：極めて控えめ） */
  --shadow-xs:  0 1px 3px rgba(0,0,0,.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);

  --max-w:      960px;
}

/* =========================================================
   ベース
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:  var(--font-base);
  font-size:    var(--font-size-base);
  line-height:  var(--line-height-base);
  color:        var(--color-text);
  background:   var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color .15s;
}
a:hover { color: var(--color-primary-h); text-decoration: underline; }

img { max-width: 100%; height: auto; }

/* =========================================================
   welcart_basic グローバルオーバーライド
   ========================================================= */
#masthead.site-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
#masthead .site-title a { color: var(--color-primary); }
#masthead .site-description { color: var(--color-text-sub); }

/* ナビゲーション */
#site-navigation .nav-menu > li > a {
  color: var(--color-text);
  font-weight: 500;
}
#site-navigation .nav-menu > li > a:hover { color: var(--color-primary); }

/* フッター */
#colophon.site-footer {
  background: #1a1a1a;
  color: #999;
  border-top: none;
}
#colophon a { color: #bbb; }
#colophon a:hover { color: #fff; }

/* =========================================================
   コンテンツエリア
   ========================================================= */
#primary.site-content {
  max-width: var(--max-w);
  margin: var(--sp-xl) auto;
  padding: 0 var(--sp-lg);
}

/* =========================================================
   セクション・ページヘッダー
   ========================================================= */
.page-title,
.entry-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-md);
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-text);
}

.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-lg);
  padding-bottom: var(--sp-sm);
  border-bottom: 2px solid var(--color-border);
  letter-spacing: -.01em;
}

/* =========================================================
   カード（汎用）
   ========================================================= */
.card {
  background:    var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  padding:       var(--sp-xl) var(--sp-xl);
  margin-bottom: var(--sp-lg);
  border:        1px solid var(--color-border);
}

/* =========================================================
   バッジ
   ========================================================= */
.phase-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           4px;
  background:    var(--color-primary);
  color:         #fff;
  padding:       3px 12px;
  border-radius: var(--radius-pill);
  font-size:     .78rem;
  font-weight:   700;
  letter-spacing: .04em;
  margin-bottom: var(--sp-sm);
}

/* =========================================================
   申込状況バッジ
   ========================================================= */
.avail-badge {
  display:       inline-block;
  padding:       3px 10px;
  border-radius: var(--radius-pill);
  font-size:     .78rem;
  font-weight:   700;
  letter-spacing: .02em;
  margin-bottom: var(--sp-sm);
}
.avail-plenty   { background: #e8f5e9; color: #2e7d32; }
.avail-few      { background: #fff3e0; color: #e65100; }
.avail-over     { background: #fce4ec; color: #880e4f; }
.avail-waitlist { background: #e3f2fd; color: #0d47a1; }

/* =========================================================
   ツアーグループ 募集ページ
   ========================================================= */
.tour-group-header { margin-bottom: var(--sp-xl); }
.tour-group-description { color: var(--color-text-sub); line-height: 1.8; margin-top: var(--sp-md); }

/* ツアーリスト */
.tour-list { display: grid; gap: var(--sp-lg); }

.tour-card {
  background:    var(--color-surface);
  border:        1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-xl);
  box-shadow:    var(--shadow-xs);
  transition:    box-shadow .2s, border-color .2s;
}
.tour-card:hover {
  box-shadow:    var(--shadow-md);
  border-color:  var(--color-border-h);
}
.tour-card h3 {
  font-size:   1.1rem;
  font-weight: 700;
  margin-bottom: var(--sp-sm);
  color:       var(--color-text);
}
.tour-card .meta {
  font-size: .875rem;
  color:     var(--color-muted);
  margin-bottom: var(--sp-sm);
}

/* 参加方法行 */
.tb-participation-row {
  display:     flex;
  align-items: center;
  gap:         var(--sp-md);
  flex-wrap:   wrap;
  padding:     var(--sp-md) 0;
  border-top:  1px solid var(--color-border);
  font-size:   .9rem;
}
.tb-participation-row strong {
  min-width:   90px;
  color:       var(--color-text);
  font-weight: 600;
}
.tb-participation-row:first-of-type { border-top: none; }

/* =========================================================
   申込ボタン
   ========================================================= */
.btn-apply {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       10px 24px;
  background:    var(--color-primary);
  color:         #fff !important;
  border-radius: var(--radius-pill);
  font-weight:   700;
  font-size:     .9rem;
  white-space:   nowrap;
  cursor:        pointer;
  transition:    background .15s, box-shadow .15s;
  text-decoration: none !important;
  border:        none;
}
.btn-apply:hover {
  background: var(--color-primary-h);
  box-shadow: 0 2px 8px rgba(44,122,58,.25);
}
.btn-apply:focus-visible {
  outline:       3px solid var(--color-primary);
  outline-offset: 2px;
}
.btn-apply:disabled,
.btn-apply.disabled {
  background:  #bdbdbd;
  cursor:      not-allowed;
  box-shadow:  none;
}

/* =========================================================
   汎用ボタン
   ========================================================= */
.tb-btn-primary,
.tb-btn-secondary,
.tb-btn-danger {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  padding:       10px 24px;
  border-radius: var(--radius-pill);
  font-weight:   700;
  font-size:     .9rem;
  border:        none;
  cursor:        pointer;
  transition:    background .15s, box-shadow .15s;
  text-decoration: none !important;
}
.tb-btn-primary   { background: var(--color-primary); color: #fff; }
.tb-btn-secondary { background: #424242; color: #fff; }
.tb-btn-danger    { background: var(--color-danger);  color: #fff; }
.tb-btn-primary:hover   { background: var(--color-primary-h); box-shadow: 0 2px 8px rgba(44,122,58,.25); }
.tb-btn-secondary:hover { background: #212121; }
.tb-btn-danger:hover    { background: #c62828; }

.tb-btn-primary:focus-visible,
.tb-btn-secondary:focus-visible,
.tb-btn-danger:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* =========================================================
   フロントページ 募集中一覧
   ========================================================= */
.active-tour-group-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    grid;
  gap:        var(--sp-sm);
}

.active-tour-group-item {
  border:        1px solid var(--color-border);
  border-radius: var(--radius);
  background:    var(--color-surface);
  transition:    border-color .15s, box-shadow .15s;
}
.active-tour-group-item:hover {
  border-color:  var(--color-primary);
  box-shadow:    var(--shadow-xs);
}

.active-tour-group-link {
  display:     flex;
  align-items: center;
  gap:         var(--sp-md);
  padding:     var(--sp-md) var(--sp-lg);
  color:       var(--color-text) !important;
  text-decoration: none !important;
}
.active-tour-group-link:hover { color: var(--color-primary) !important; }

.active-tour-group-title {
  font-weight: 600;
  font-size:   .95rem;
  line-height: 1.4;
}

/* 次回募集予定 */
.upcoming-section-heading {
  margin-top: var(--sp-xl);
  font-size:  1rem;
}

.upcoming-tour-group-list {
  list-style: none;
  margin:     var(--sp-md) 0 0;
  padding:    0;
  display:    grid;
  gap:        var(--sp-sm);
}
.upcoming-tour-group-item {
  display:     flex;
  align-items: baseline;
  gap:         var(--sp-md);
  flex-wrap:   wrap;
  padding:     var(--sp-md) 0;
  border-top:  1px solid var(--color-border);
  font-size:   .9rem;
}
.upcoming-tour-group-item:first-child { border-top: none; }
.upcoming-when {
  color:     var(--color-muted);
  font-size: .85rem;
  white-space: nowrap;
}

.no-active-groups {
  color:     var(--color-text-sub);
  font-size: .95rem;
  padding:   var(--sp-lg) 0;
}

/* =========================================================
   メッセージ
   ========================================================= */
.tb-success {
  background:   var(--color-primary-lt);
  border-left:  4px solid var(--color-primary);
  padding:      var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size:    .95rem;
  color:        #1b5e20;
}
.tb-error {
  background:   #fdecea;
  border-left:  4px solid var(--color-danger);
  padding:      var(--sp-md) var(--sp-lg);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size:    .95rem;
  color:        #b71c1c;
}

/* =========================================================
   ユーティリティ
   ========================================================= */
.tb-deadline-urgent { color: var(--color-danger); font-weight: 700; }
.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media (max-width: 768px) {
  :root { --sp-xl: 24px; }
  #primary.site-content { margin: var(--sp-lg) auto; padding: 0 var(--sp-md); }
  .card { padding: var(--sp-lg); }
  .tour-card { padding: var(--sp-lg); }
}

@media (max-width: 480px) {
  .page-title, .entry-title { font-size: 1.25rem; }
  .tb-participation-row { gap: var(--sp-sm); }
  .active-tour-group-link { padding: var(--sp-sm) var(--sp-md); }
  .btn-apply { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* =========================================================
   非表示ウィジェット（未使用 Welcart 標準ウィジェット）
   ========================================================= */
.widget_welcart_login,
.widget_welcart_featured,
.widget_welcart_calendar,
.widget_welcart_category { display: none !important; }