@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.font_ill {
    color:#fff68d;
}

.font_antica {
	color:#853998;
}

.font_hokago {
    color:#fa8333;
}

.font_alst {
    color:#ff699e;
}

.font_str {
    color:#af011c;
}

.font_noc {
    color:#384d98;
}

.font_shh {
    color:#008e74;
}

.font_com {
    color: #333333;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/* ============================================================
   栄冠ナイン プレイ記録 — 共通スクリプト
   ・テーブルソート(クリックで昇順/降順)
   ・タブ切替
   ・フィルタリング
   ・日本地図クリック遷移
   ============================================================ */

(function () {
  'use strict';

  // ------------------------------------------------------------
  // テーブルソート
  // ------------------------------------------------------------
  function initSortableTables() {
    const tables = document.querySelectorAll('.eikan-table[data-sortable]');
    tables.forEach(function (table) {
      const thead = table.querySelector('thead');
      if (!thead) return;
      const headers = thead.querySelectorAll('th');
      headers.forEach(function (th, idx) {
        th.addEventListener('click', function () {
          sortTable(table, idx, th);
        });
      });
    });
  }

  function sortTable(table, colIdx, th) {
    const tbody = table.querySelector('tbody');
    if (!tbody) return;
    const rows = Array.from(tbody.querySelectorAll('tr'));
    const currentDir = th.classList.contains('is-sorted-asc') ? 'asc' : 'desc';
    const newDir = currentDir === 'asc' ? 'desc' : 'asc';

    // 他の列のソート表示をクリア
    table.querySelectorAll('thead th').forEach(function (t) {
      t.classList.remove('is-sorted-asc', 'is-sorted-desc');
    });
    th.classList.add(newDir === 'asc' ? 'is-sorted-asc' : 'is-sorted-desc');

    rows.sort(function (a, b) {
      const aText = getCellSortValue(a, colIdx);
      const bText = getCellSortValue(b, colIdx);
      // 数値比較を優先
      const aNum = parseFloat(aText.replace(/,/g, ''));
      const bNum = parseFloat(bText.replace(/,/g, ''));
      const bothNumeric = !isNaN(aNum) && !isNaN(bNum);
      let cmp;
      if (bothNumeric) {
        cmp = aNum - bNum;
      } else {
        cmp = aText.localeCompare(bText, 'ja');
      }
      return newDir === 'asc' ? cmp : -cmp;
    });

    rows.forEach(function (r) { tbody.appendChild(r); });
  }

  function getCellSortValue(tr, colIdx) {
    const td = tr.children[colIdx];
    if (!td) return '';
    if (td.dataset.sortValue !== undefined) return td.dataset.sortValue;
    return td.textContent.trim();
  }

  // ------------------------------------------------------------
  // タブ
  // ------------------------------------------------------------
  function initTabs() {
    const tabGroups = document.querySelectorAll('[data-tab-group]');
    tabGroups.forEach(function (group) {
      const tabs = group.querySelectorAll('.eikan-tab');
      const groupId = group.dataset.tabGroup;
      const panels = document.querySelectorAll('[data-tab-panel-group="' + groupId + '"]');
      tabs.forEach(function (tab) {
        tab.addEventListener('click', function () {
          const target = tab.dataset.tabTarget;
          tabs.forEach(function (t) { t.classList.remove('is-active'); });
          tab.classList.add('is-active');
          panels.forEach(function (p) {
            if (p.dataset.tabPanel === target) {
              p.classList.add('is-active');
            } else {
              p.classList.remove('is-active');
            }
          });
        });
      });
    });
  }

  // ------------------------------------------------------------
  // フィルタ(簡易版:セレクトボックスで表示/非表示)
  // ------------------------------------------------------------
  function initFilters() {
    const filters = document.querySelectorAll('[data-filter-target]');
    filters.forEach(function (filter) {
      filter.addEventListener('change', function () {
        applyFilters();
      });
      filter.addEventListener('input', function () {
        applyFilters();
      });
    });
  }

  function applyFilters() {
    // data-filter-target でまとめられた対象テーブルに、同じ data-filter-scope の全条件を適用
    const filters = document.querySelectorAll('[data-filter-target]');
    // target ごとに条件を集約
    const conditions = {};
    filters.forEach(function (f) {
      const target = f.dataset.filterTarget;
      const attr = f.dataset.filterAttr;
      const value = f.value.trim();
      if (!conditions[target]) conditions[target] = [];
      if (value) {
        conditions[target].push({ attr: attr, value: value });
      }
    });
    Object.keys(conditions).forEach(function (target) {
      const container = document.getElementById(target);
      if (!container) return;
      const rows = container.querySelectorAll('[data-filterable]');
      rows.forEach(function (row) {
        const show = conditions[target].every(function (c) {
          const rowVal = row.dataset[toCamel(c.attr)] || '';
          return rowVal.indexOf(c.value) !== -1;
        });
        row.style.display = show ? '' : 'none';
      });
    });
  }

  function toCamel(s) {
    return s.replace(/-([a-z])/g, function (_, c) { return c.toUpperCase(); });
  }

  // ------------------------------------------------------------
  // DOMContentLoaded で初期化
  // ------------------------------------------------------------
  document.addEventListener('DOMContentLoaded', function () {
    initSortableTables();
    initTabs();
    initFilters();
  });
})();