/* 会社概要テーブル（core/table ＋ オリジナルCSS）
 * 何を補うか: SWELLはテーブル装飾を持たない（wp-block-table の margin-top:0 のみ）。
 * 値は持たない。値は案件側（カスタマイザーの追加CSS）で --cpt-* に入れる。
 *
 * border-collapse は collapse ではなく separate + border-spacing:0 を使う。
 * collapse では border-radius がセルに効かず角丸にできないため（CSSの標準挙動）。
 * 罫線が二重にならないよう、各セルは右と下だけに線を持たせ、端で消している。
 *
 * 戻し方: このファイルの読み込みを functions.php から外す。
 */
:root{
  /* 既定値＝素の見た目。案件側で上書きする。 */
  --cpt-font: inherit;
  --cpt-fs: 15px;
  --cpt-lh: 1.9;
  --cpt-label-width: 26%;
  --cpt-label-bg: transparent;
  --cpt-label-color: inherit;
  --cpt-label-weight: 700;
  --cpt-value-bg: transparent;
  --cpt-value-color: inherit;
  --cpt-border-color: #ddd;
  --cpt-border-width: 1px;
  --cpt-radius: 0px;
  --cpt-pad-y: 14px;
  --cpt-pad-x: 20px;
  --cpt-en-color: #999;
}

.cside-profile-table{ margin-left: auto; margin-right: auto; }

.cside-profile-table > table{
  /* SWELLはテーブルの1列目の幅を --swl-cell1-width で制御し、
   * .wp-block-table > table tr > :first-child:not(.-no1) に min-width !important まで当てる。
   * 自前の width で戦わず、SWELL自身の変数へ同じ値を渡す。 */
  --swl-cell1-width: var(--cpt-label-width);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-family: var(--cpt-font);
  font-size: var(--cpt-fs);
  line-height: var(--cpt-lh);
  border-radius: var(--cpt-radius);
}

.cside-profile-table th,
.cside-profile-table td{
  border: 0;
  padding: var(--cpt-pad-y) var(--cpt-pad-x);
  text-align: left;
  vertical-align: top;
  word-break: break-word;
}

.cside-profile-table th{
  width: var(--cpt-label-width);
  background: var(--cpt-label-bg);
  color: var(--cpt-label-color);
  font-weight: var(--cpt-label-weight);
}

.cside-profile-table td{
  background: var(--cpt-value-bg);
  color: var(--cpt-value-color);
}

/* 角丸：四隅のセルに個別に当てる（table の overflow では塗りが切れないため） */
.cside-profile-table tr:first-child > *:first-child{ border-top-left-radius: var(--cpt-radius); }
.cside-profile-table tr:first-child > *:last-child{ border-top-right-radius: var(--cpt-radius); }
.cside-profile-table tr:last-child > *:first-child{ border-bottom-left-radius: var(--cpt-radius); }
.cside-profile-table tr:last-child > *:last-child{ border-bottom-right-radius: var(--cpt-radius); }

/* 英語ラベル */
.cside-profile-table .cpt-en{
  color: var(--cpt-en-color);
  font-size: .72em;
  font-weight: 400;
  letter-spacing: .08em;
}
.cside-profile-table .cpt-en.-under{ display: block; margin-top: 3px; }
.cside-profile-table .cpt-en.-right{ margin-left: .55em; }

/* 値の中のリスト */
.cside-profile-table td ul{ margin: 0; padding-left: 1.15em; }
.cside-profile-table td li{ margin: 0; }
.cside-profile-table td li + li{ margin-top: .35em; }

/* 罫線の形（separate なので各セルは右と下だけ持ち、端で消す） */
.cside-profile-table.is-border-grid > table{
  border: var(--cpt-border-width) solid var(--cpt-border-color);
}
.cside-profile-table.is-border-grid th,
.cside-profile-table.is-border-grid td{
  border-right: var(--cpt-border-width) solid var(--cpt-border-color);
  border-bottom: var(--cpt-border-width) solid var(--cpt-border-color);
}
.cside-profile-table.is-border-grid tr:last-child > *{ border-bottom: 0; }
.cside-profile-table.is-border-grid tr > *:last-child{ border-right: 0; }

.cside-profile-table.is-border-rows th,
.cside-profile-table.is-border-rows td{
  border-bottom: var(--cpt-border-width) solid var(--cpt-border-color);
}
.cside-profile-table.is-border-rows tr:first-child > *{
  border-top: var(--cpt-border-width) solid var(--cpt-border-color);
}

.cside-profile-table.is-border-outer-rows > table{
  border: var(--cpt-border-width) solid var(--cpt-border-color);
}
.cside-profile-table.is-border-outer-rows tr + tr > *{
  border-top: var(--cpt-border-width) solid var(--cpt-border-color);
}

/* スマートフォンで縦積みにする（SWELLの境界に合わせる） */
@media (max-width: 768px){
  .cside-profile-table.is-sp-stack th,
  .cside-profile-table.is-sp-stack td{
    display: block;
    width: auto;
    border-right: 0;
  }
  /* SWELLは1列目に max-width と min-width(!important) を当てるため、
   * 縦積みではそれを解除しないとラベルが指定幅のまま縦書きのように潰れる。
   * SWELL側のセレクタは .wp-block-table > table tr > :first-child:not(.-no1) で
   * 特異度 (0,3,2)。クラスを1つ足して (0,4,2) で確実に上回る。
   * !important は SWELL 側が min-width に !important を使っているための最小限の対抗。 */
  .wp-block-table.cside-profile-table.is-sp-stack > table tr > :first-child{
    max-width: none;
    min-width: 0 !important;
    width: auto;
  }
  .cside-profile-table.is-sp-stack th{
    padding-bottom: calc(var(--cpt-pad-y) * .5);
    border-bottom: 0;
  }
  .cside-profile-table.is-sp-stack td{
    padding-top: calc(var(--cpt-pad-y) * .5);
  }
  .cside-profile-table.is-sp-stack.is-border-rows tr:first-child td,
  .cside-profile-table.is-sp-stack.is-border-outer-rows tr + tr td{ border-top: 0; }
  /* 縦積みでは上端セルの上side・下端セルの下sideに角丸を寄せる */
  .cside-profile-table.is-sp-stack tr:first-child th{
    border-radius: var(--cpt-radius) var(--cpt-radius) 0 0;
  }
  .cside-profile-table.is-sp-stack tr:first-child td,
  .cside-profile-table.is-sp-stack tr:last-child th{ border-radius: 0; }
  .cside-profile-table.is-sp-stack tr:last-child td{
    border-radius: 0 0 var(--cpt-radius) var(--cpt-radius);
  }
}