/* EX REDESiGN — assets/css/blocks.css
 * Block-specific extensions (currently: core/table header color + stacked-mobile style + border tokens).
 *
 * Selectors: .exr-table-header-column, .exr-table-header-row
 * Variables consumed: --color-surface, --exr-table-border-color, --exr-table-border-width, --exr-table-header-color
 *
 * Sections (search anchors — grep `@section <name>`):
 *   (no sub-sections)
 */

/* ── core/table extensions ──
   Two independent features wired up by inc/dynamic.php and
   assets/js/table-extensions.js:

   1. Header text color override — the JS extension writes the chosen color
      to the table figure's --exr-table-header-color custom property.
      The fallback `inherit` keeps the default look when no color is set.

   2. Block style "stacked-mobile" — on narrow viewports, the table flips
      to a vertical card list (each <tr> becomes a stacked block, headers
      hidden). Choose it from Styles in the editor sidebar. */
/* Header background color — user picks a target range in the EX REDESiGN
   inspector panel:
   - .exr-table-header-column (default): leftmost cell of every row
     (the 「縦組み・ラベル列」 pattern)
   - .exr-table-header-row: top row of the table — either the <thead> row
     when 「ヘッダーセクション」 is on, or the first <tbody> row otherwise
     (the 「横組み・ヘッダー行」 pattern)
   The class is added to the <figure> wrapper by the JS extension only when
   a color is actually selected, so un-styled tables are unaffected. */
/* トップレベル (テーマ外コンテキスト・エディタ用) */
.wp-block-table.exr-table-header-column tr > :first-child {
  background-color: var(--exr-table-header-color, transparent);
}
.wp-block-table.exr-table-header-row thead tr:first-child > * {
  background-color: var(--exr-table-header-color, transparent);
}
.wp-block-table.exr-table-header-row:not(:has(thead)) tbody tr:first-child > * {
  background-color: var(--exr-table-header-color, transparent);
}

/* ページスコープ — pages.css の .wp-block-table th { background-color: transparent } ルール
   ((0,4,2) 特異度) を上書きするため、body.page スコープを追加して
   (0,5,2) に上げる。 */
body.page:not(.home) .exr-main .wp-block-table.exr-table-header-column tr > :first-child,
body.single-post .entry-content .wp-block-table.exr-table-header-column tr > :first-child {
  background-color: var(--exr-table-header-color, transparent);
}
body.page:not(.home) .exr-main .wp-block-table.exr-table-header-row thead tr:first-child > *,
body.single-post .entry-content .wp-block-table.exr-table-header-row thead tr:first-child > * {
  background-color: var(--exr-table-header-color, transparent);
}
body.page:not(.home) .exr-main .wp-block-table.exr-table-header-row:not(:has(thead)) tbody tr:first-child > *,
body.single-post .entry-content .wp-block-table.exr-table-header-row:not(:has(thead)) tbody tr:first-child > * {
  background-color: var(--exr-table-header-color, transparent);
}

/* テーブル「ラベル列」(<th>) を太字にしないオプション。
   ブロックエディタの「高度な設定 > 追加 CSS クラス」で ex-table-th-normal を指定すると適用される。
   pages.css の .wp-block-table th { font-weight: 600 } より高い特異度 (0,5,2) で上書き。 */
body.page:not(.home) .exr-main .wp-block-table.ex-table-th-normal th,
body.single-post .entry-content .wp-block-table.ex-table-th-normal th {
  font-weight: 400 !important;
}

/* User-tunable border color/width — written by the EX REDESiGN inspector
   panel as inline CSS variables on the <figure>. WordPress core sets
   `border: 1px solid` (currentColor) on .wp-block-table td/th, so we override
   border-color and border-width to consume the variables. Fallbacks preserve
   the WP-default look when the user hasn't picked anything. */
.wp-block-table td,
.wp-block-table th {
  border-color: var(--exr-table-border-color, currentColor);
  border-width: var(--exr-table-border-width, 1px);
}

@media (max-width: 600px) {
  .wp-block-table.is-style-stacked-mobile,
  .wp-block-table.is-style-stacked-mobile > table {
    display: block;
    overflow-x: visible;
  }
  /* Hide the header row entirely — stacked rows don't have meaningful
     positional headers; users typically encode the label inline. */
  .wp-block-table.is-style-stacked-mobile thead { display: none; }
  .wp-block-table.is-style-stacked-mobile tbody,
  .wp-block-table.is-style-stacked-mobile tr,
  .wp-block-table.is-style-stacked-mobile td,
  .wp-block-table.is-style-stacked-mobile th {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  /* Hide rows whose cells are all empty — the WP table block keeps empty
     <td></td> markup for unused rows, which would otherwise show as ugly
     empty cards. :empty matches <td></td> exactly (no whitespace). */
  .wp-block-table.is-style-stacked-mobile tbody tr:not(:has(td:not(:empty))):not(:has(th:not(:empty))) {
    display: none;
  }
  /* Match the PC table look on mobile: WordPress core uses 1px solid
     currentColor on cells, which renders as a thin frame around each cell on
     desktop. On mobile we recreate that look by drawing the outer frame on
     the figure and a single bottom rule on each cell. Both consume the
     user-tunable border vars (set by the EX REDESiGN inspector). */
  .wp-block-table.is-style-stacked-mobile {
    border: var(--exr-table-border-width, 1px) solid var(--exr-table-border-color, currentColor);
  }
  .wp-block-table.is-style-stacked-mobile tr {
    background: var(--color-surface);
  }
  /* Cells: reset core's four-side border (which would double up without
     border-collapse under display:block), then draw only the bottom rule. */
  .wp-block-table.is-style-stacked-mobile td,
  .wp-block-table.is-style-stacked-mobile th {
    padding: 0.6rem 0.85rem;
    border: 0;
    border-bottom: var(--exr-table-border-width, 1px) solid var(--exr-table-border-color, currentColor);
    text-align: start;
  }
  /* The figure's border-bottom already closes the bottom edge, so suppress the
     duplicate border on the very last visible row's last cell. */
  .wp-block-table.is-style-stacked-mobile tbody tr:last-child > :last-child {
    border-bottom: 0;
  }
}

/* ── Button: defensive palette-driven hover ──
   theme.json drives .wp-element-button colors, but its `:where()`-wrapped
   selectors have low specificity (0,1,0) and can lose to block-library
   defaults in some browsers/cache states — we saw the JOIN US button's
   :hover text become invisible because the text color was getting
   reverted by an earlier-cascaded rule. Mirroring header CTA's pattern
   (.ex-header-cta .wp-block-button__link) with class-only specificity
   and !important on color guarantees the text stays visible across all
   palettes. */
/* ボタンの背景色 / 文字色は theme.json の styles.elements.button デフォルトに一任。
   ユーザーがグローバルスタイル UI / ブロック個別 UI で色を変えられるよう、
   静的 CSS で色を上書きしない。トランジションのみテーマ側で付与。 */
.wp-block-button > .wp-block-button__link {
  transition: background-color 200ms;
}


/* ── コンタクトページ（SureForms ショートコードを拽う） ──
   テーマ哲学: ラッパーの幅はユーザーが Group/Column UI で決められる。
   テーマ側で max-width を強制せず、margin-inline:auto だけ提供。 */
.ex-contact-wrap {
  margin: 0 auto;
  /* 上下余白バランス計算　──　「カードの上・下とレイアウト境界間の空白」を揃える。
     上: layout-top 1.75rem + spacer 2rem + $X rem = 3.75 + $X
     下: $Y rem + layout-bottom 4rem = $Y + 4
     【$X=1.25、$Y=1】 → 上 5rem / 下 5rem でバランス、スッキリしすぎずやりすぎず */
  padding: 1.25rem 0 1rem;
}
/* .ex-contact-wrap > .ex-eyebrow: インライン属性で表現 (Phase 2.3 で移行済) */
/* コンタクト見出しはプレーン　──　見出しプリセットの装飾 (background / padding) をリセット、控えめの区切り線だけ保持 */
/* .ex-contact-wrap > .ex-section-title: インライン属性で表現 (Phase 2.3 で移行済) */
/* テーマ哲学: リード文の幅は親 (.ex-contact-wrap or Group) に追従。
   テーマ側で max-width を強制せず、テキストスタイルと下余白だけ提供。 */
.ex-contact-lead {
  font-size: var(--exr-fs-base);
  color: var(--color-text-secondary);
  line-height: 1.85;
  letter-spacing: 0.02em;
  margin: 0 auto 3rem !important;
}

/* フォームカード　──　薄い枠と薄い影で上品に */
.ex-contact-form-card {
  background: var(--color-surface, var(--wp--preset--color--surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: 6px;
  padding: 2.5rem 2.25rem;
  box-shadow: var(--wp--preset--shadow--card);
}
@media (max-width: 600px) {
  .ex-contact-form-card { padding: 1.75rem 1.25rem; }
  .ex-contact-lead { margin-bottom: 2rem !important; }
}

/* ── SureForms / 汎用フォームスタイル（コンタクトページスコープ内） ── */
.ex-contact-form-card label,
.ex-contact-form-card .srfm-block-label,
.ex-contact-form-card .srfm-label {
  display: block;
  font-size: var(--exr-fs-sm);
  font-weight: 500;
  color: var(--color-text-primary);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

/* テキスト系インプット ・ テキストエリア ・ セレクト */
.ex-contact-form-card input[type="text"],
.ex-contact-form-card input[type="email"],
.ex-contact-form-card input[type="tel"],
.ex-contact-form-card input[type="number"],
.ex-contact-form-card input[type="url"],
.ex-contact-form-card input[type="date"],
.ex-contact-form-card input[type="time"],
.ex-contact-form-card input[type="password"],
.ex-contact-form-card input[type="search"],
.ex-contact-form-card textarea,
.ex-contact-form-card select {
  width: 100%;
  padding: 0.85rem 1rem;
  font-size: var(--exr-fs-base);
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface, var(--wp--preset--color--surface));
  border: 1px solid var(--color-border-subtle);
  border-radius: 4px;
  box-shadow: none;
  line-height: 1.5;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
}
.ex-contact-form-card input:focus,
.ex-contact-form-card textarea:focus,
.ex-contact-form-card select:focus {
  border-color: var(--color-text-primary);
  outline: 0;
  box-shadow: var(--wp--preset--shadow--focus-ring);
}
.ex-contact-form-card textarea {
  min-height: 160px;
  resize: vertical;
}

/* 項目間の余白 */
.ex-contact-form-card .srfm-block,
.ex-contact-form-card .srfm-input-block,
.ex-contact-form-card .srfm-form > div,
.ex-contact-form-card .srfm-form-fields > * {
  margin-bottom: 1.5rem;
}

/* 送信ボタン */
.ex-contact-form-card button[type="submit"],
.ex-contact-form-card input[type="submit"],
.ex-contact-form-card .srfm-submit-btn,
.ex-contact-form-card .srfm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 3rem;
  background: var(--color-text-primary);
  color: var(--color-surface, var(--wp--preset--color--surface));
  font-size: var(--exr-fs-base);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  margin-top: 1rem;
}
.ex-contact-form-card button[type="submit"]:hover,
.ex-contact-form-card input[type="submit"]:hover,
.ex-contact-form-card .srfm-submit-btn:hover {
  background: var(--color-text-secondary);
  transform: translateY(-1px);
  box-shadow: var(--wp--preset--shadow--card-hover);
}

/* SureForms 内部ラッパーの余白調整 */
.ex-contact-form-card .srfm-form,
.ex-contact-form-card .srfm-form-container,
.ex-contact-form-card .srfm-form-fields {
  background: transparent;
  padding: 0;
}

/* 電話番号インプットの国コードスイッチャーも主要な枠に揃える */
.ex-contact-form-card .iti,
.ex-contact-form-card .srfm-phone-field {
  width: 100%;
  display: block;
}
.ex-contact-form-card .iti input {
  width: 100% !important;
}

/* ヘルプテキスト / エラーメッセージ */
.ex-contact-form-card .srfm-help-text,
.ex-contact-form-card small.srfm-help {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--exr-fs-xs);
  color: var(--color-text-muted);
}
.ex-contact-form-card .srfm-error,
.ex-contact-form-card .srfm-error-msg {
  display: block;
  margin-top: 0.4rem;
  font-size: var(--exr-fs-sm);
  color: #c1151c;
}

/* 列幅 — EX REDESiGN テーブル設定で設定された各列の幅を適用。
   クラス .exr-has-col-N-width が付いている列のみルールが効くように、各列ごとに
   個別セレクタを分けている。!important で pages.css の列幅規則 (50/25/25 等) も上書き。 */
.wp-block-table.exr-has-col-1-width tr > :nth-child(1) {
  width: var(--exr-table-col-1-width) !important;
}
.wp-block-table.exr-has-col-2-width tr > :nth-child(2) {
  width: var(--exr-table-col-2-width) !important;
}
.wp-block-table.exr-has-col-3-width tr > :nth-child(3) {
  width: var(--exr-table-col-3-width) !important;
}
.wp-block-table.exr-has-col-4-width tr > :nth-child(4) {
  width: var(--exr-table-col-4-width) !important;
}
.wp-block-table.exr-has-col-5-width tr > :nth-child(5) {
  width: var(--exr-table-col-5-width) !important;
}
.wp-block-table.exr-has-col-6-width tr > :nth-child(6) {
  width: var(--exr-table-col-6-width) !important;
}
.wp-block-table.exr-has-col-7-width tr > :nth-child(7) {
  width: var(--exr-table-col-7-width) !important;
}
.wp-block-table.exr-has-col-8-width tr > :nth-child(8) {
  width: var(--exr-table-col-8-width) !important;
}
.wp-block-table.exr-has-col-9-width tr > :nth-child(9) {
  width: var(--exr-table-col-9-width) !important;
}
.wp-block-table.exr-has-col-10-width tr > :nth-child(10) {
  width: var(--exr-table-col-10-width) !important;
}
.wp-block-table.exr-has-col-11-width tr > :nth-child(11) {
  width: var(--exr-table-col-11-width) !important;
}
.wp-block-table.exr-has-col-12-width tr > :nth-child(12) {
  width: var(--exr-table-col-12-width) !important;
}


/* ============================================================
 * @section image-frame-offset
 *   画像 + オフセット枠 の多重レイヤーパターン。
 *   .ex-image-frame-stack__frame は実ブロック (wp:group) として存在し、
 *   border-width / border-color / border-style は WP 標準 UI で編集された値が入る。
 *   --exr-frame-offset (default 2rem) で余白量を調整。
 * ========================================================= */
.ex-image-frame-stack {
  position: relative;
  isolation: isolate;
  padding-block-end: var(--exr-frame-offset, 2rem);
  padding-inline-end: var(--exr-frame-offset, 2rem);
}
.ex-image-frame-stack > .ex-image-frame-stack__image {
  margin: 0;
  position: relative;
}
.ex-image-frame-stack > .ex-image-frame-stack__image img {
  display: block;
  width: 100%;
  height: auto;
}
.ex-image-frame-stack > .ex-image-frame-stack__frame {
  position: absolute;
  inset-block-start: var(--exr-frame-offset, 2rem);
  inset-block-end: 0;
  inset-inline-start: var(--exr-frame-offset, 2rem);
  inset-inline-end: 0;
  z-index: -1;
  pointer-events: none;
}

/* ============================================================
 * @section image-frame-offset-distance
 *   Block Style Variations: 余白量をサイドバーの「スタイル」で切替。
 * ========================================================= */
.ex-image-frame-stack.is-style-ex-frame-tight {
  --exr-frame-offset: 1rem;
}
.ex-image-frame-stack.is-style-ex-frame-loose {
  --exr-frame-offset: 3rem;
}

/* ============================================================
 * @section image-frame-offset-direction
 *   オフセット方向 modifier。wrapper group の「高度な設定 → 追加 CSS クラス」に入力して切替。
 *   default (クラス不要) = 下+右 / is-offset-top-right / is-offset-bottom-left / is-offset-top-left
 * ========================================================= */
.ex-image-frame-stack.is-offset-top-right {
  padding-block-start: var(--exr-frame-offset, 2rem);
  padding-block-end: 0;
  padding-inline-end: var(--exr-frame-offset, 2rem);
  padding-inline-start: 0;
}
.ex-image-frame-stack.is-offset-top-right > .ex-image-frame-stack__frame {
  inset-block-start: 0;
  inset-block-end: var(--exr-frame-offset, 2rem);
  inset-inline-start: var(--exr-frame-offset, 2rem);
  inset-inline-end: 0;
}
.ex-image-frame-stack.is-offset-bottom-left {
  padding-block-start: 0;
  padding-block-end: var(--exr-frame-offset, 2rem);
  padding-inline-end: 0;
  padding-inline-start: var(--exr-frame-offset, 2rem);
}
.ex-image-frame-stack.is-offset-bottom-left > .ex-image-frame-stack__frame {
  inset-block-start: var(--exr-frame-offset, 2rem);
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: var(--exr-frame-offset, 2rem);
}
.ex-image-frame-stack.is-offset-top-left {
  padding-block-start: var(--exr-frame-offset, 2rem);
  padding-block-end: 0;
  padding-inline-end: 0;
  padding-inline-start: var(--exr-frame-offset, 2rem);
}
.ex-image-frame-stack.is-offset-top-left > .ex-image-frame-stack__frame {
  inset-block-start: 0;
  inset-block-end: var(--exr-frame-offset, 2rem);
  inset-inline-start: 0;
  inset-inline-end: var(--exr-frame-offset, 2rem);
}

/* =========================================================================
   Button hover グローバル修正 (theme.json elements.link.:hover からの色 cascade 関連)
   ------------------------------------------------------------------------
   theme.json の elements.link.:hover (color: text-secondary) が .wp-block-button__link
   内部 <a> の color を上書きし、 button の :hover background-color と同一になって
   文字が見えなくなるバグをグローバルに防ぐ。

   デザイン (v1.4.0 から accent / accent-hover ベース):
     - 背景: accent-hover (theme.json button.:hover.color.background と一致)
     - 文字: bg-base (theme.json button.:hover.color.text と一致)
     - ホバーフィードバックは opacity 0.85 で表現

   除外: .is-style-ex-on-dark は「暗背景上の白ボタン + 黒文字」の逆スタイル。
   そのホバー設計 (inc/block-styles.php) は別途保証されているため、ここで上書きしない。
   ========================================================================= */
.wp-block-button:not(.is-style-ex-on-dark) > .wp-block-button__link:hover,
.wp-block-button:not(.is-style-ex-on-dark) > .wp-block-button__link:focus-visible {
    background-color: var(--wp--preset--color--accent-hover, #2D2A75);
    color: var(--wp--preset--color--bg-base, #F9FAFB);
    opacity: 0.85;
    transition: background-color 200ms, color 200ms, opacity 200ms;
}

/* =========================================================================
   セクション単位の明 / 暗 スタイル (v1.4.1)
   ------------------------------------------------------------------------
   プリセットは palette を反転させるため、例えば Dark プリセットで text-primary が
   白になる。ユーザーが「白背景セクション」を Group/Cover/Columns で追加すると、
   内部の文字が白文字のままになって見えなくなる問題を block style で解消する。

   設計:
     - 絶対色 hardcode (preset 非依存)。palette 変数を使うと preset 切替で
       反転してしまい同じ問題が再発する。
     - :not(.has-background):not(.has-text-color) で UI 上書きは許可。
     - 子要素 (p / h1-h6 / a / li) の色もスタイル内で上書き。
     - ボタンは accent を維持 (ブランド一貫性、別途 is-style-ex-on-dark で調整可能)。

   ex-section-light の色 (= default プリセットの色と一致):
     - 背景  #FFFFFF
     - 本文  #111827 (text-primary)
     - サブ  #6B7280 (text-secondary)
     - ミュート #9CA3AF (text-muted)
     - 区切り線 #E5E7EB (border-subtle)

   ex-section-dark の色 (= dark プリセットの色と一致):
     - 背景  #0F172A
     - 本文  #F1F5F9
     - サブ  #CBD5E1
     - ミュート #64748B
     - 区切り線 #334155
   ========================================================================= */

/* ── 明セクション (どのプリセットでも常に明) ───────────────────────────── */
.wp-block-group.is-style-ex-section-light:not(.has-background),
.wp-block-columns.is-style-ex-section-light:not(.has-background) {
    background-color: #FFFFFF;
}
.is-style-ex-section-light:not(.has-text-color),
.is-style-ex-section-light:not(.has-text-color) p,
.is-style-ex-section-light:not(.has-text-color) h1,
.is-style-ex-section-light:not(.has-text-color) h2,
.is-style-ex-section-light:not(.has-text-color) h3,
.is-style-ex-section-light:not(.has-text-color) h4,
.is-style-ex-section-light:not(.has-text-color) h5,
.is-style-ex-section-light:not(.has-text-color) h6,
.is-style-ex-section-light:not(.has-text-color) li,
.is-style-ex-section-light:not(.has-text-color) dt,
.is-style-ex-section-light:not(.has-text-color) dd,
.is-style-ex-section-light:not(.has-text-color) figcaption,
.is-style-ex-section-light:not(.has-text-color) blockquote {
    color: #111827;
}
.is-style-ex-section-light a:not(.wp-block-button__link):not(.has-text-color) {
    color: #111827;
}
.is-style-ex-section-light a:not(.wp-block-button__link):not(.has-text-color):hover {
    color: #6B7280;
}
.is-style-ex-section-light .wp-block-separator:not(.has-text-color):not(.has-css-opacity) {
    border-color: #E5E7EB;
}

/* ── 暗セクション (どのプリセットでも常に暗) ───────────────────────────── */
.wp-block-group.is-style-ex-section-dark:not(.has-background),
.wp-block-columns.is-style-ex-section-dark:not(.has-background) {
    background-color: #0F172A;
}
.is-style-ex-section-dark:not(.has-text-color),
.is-style-ex-section-dark:not(.has-text-color) p,
.is-style-ex-section-dark:not(.has-text-color) h1,
.is-style-ex-section-dark:not(.has-text-color) h2,
.is-style-ex-section-dark:not(.has-text-color) h3,
.is-style-ex-section-dark:not(.has-text-color) h4,
.is-style-ex-section-dark:not(.has-text-color) h5,
.is-style-ex-section-dark:not(.has-text-color) h6,
.is-style-ex-section-dark:not(.has-text-color) li,
.is-style-ex-section-dark:not(.has-text-color) dt,
.is-style-ex-section-dark:not(.has-text-color) dd,
.is-style-ex-section-dark:not(.has-text-color) figcaption,
.is-style-ex-section-dark:not(.has-text-color) blockquote {
    color: #F1F5F9;
}
.is-style-ex-section-dark a:not(.wp-block-button__link):not(.has-text-color) {
    color: #F1F5F9;
}
.is-style-ex-section-dark a:not(.wp-block-button__link):not(.has-text-color):hover {
    color: #CBD5E1;
}
.is-style-ex-section-dark .wp-block-separator:not(.has-text-color):not(.has-css-opacity) {
    border-color: #334155;
}

/* Cover は背景が overlay 構造 (.wp-block-cover__background) で別レイヤーなので、
   ここで背景を直接書かず、文字色だけ上書きする。背景の明暗は Cover ブロック UI で
   オーバーレイ色を設定してもらう前提 (画像/動画と組み合わせ自由を維持)。*/
.wp-block-cover.is-style-ex-section-light:not(.has-text-color),
.wp-block-cover.is-style-ex-section-light:not(.has-text-color) .wp-block-cover__inner-container,
.wp-block-cover.is-style-ex-section-light:not(.has-text-color) .wp-block-cover__inner-container :where(p,h1,h2,h3,h4,h5,h6,li) {
    color: #111827;
}
.wp-block-cover.is-style-ex-section-dark:not(.has-text-color),
.wp-block-cover.is-style-ex-section-dark:not(.has-text-color) .wp-block-cover__inner-container,
.wp-block-cover.is-style-ex-section-dark:not(.has-text-color) .wp-block-cover__inner-container :where(p,h1,h2,h3,h4,h5,h6,li) {
    color: #F1F5F9;
}