/*
 * リセットと要素デフォルト。
 *
 * Snow Monkey（正確には wp-basis）の foundation から
 * **実際に本番の描画に効いているものだけ** を書き起こしたもの。
 * 出典はすべて本番の Autoptimize 統合CSS（2026-09-01 取得）。
 *
 * 丸ごとコピーはしない。ここに無いものは「差分が出たら足す」。
 */

/* ---------------------------------------------------------------------------
 * フルイドタイポグラフィの土台
 *
 * Snow Monkey は調和数列でフォントサイズと行送りを計算している。
 * 本文HTMLに残っている has-sm-xl-font-size / has-sm-5-xl-font-size などの
 * プリセットクラスがこの3変数を参照するため、外すと見出しの大きさが全部変わる。
 * （--_font-size-level を要素側で書き換えて、そこから font-size を導出する仕組み）
 * ------------------------------------------------------------------------ */

*,
*::before,
*::after {
  --_font-size: calc(calc(var(--_harmonic-sequence-base) / (var(--_harmonic-sequence-base) - var(--_font-size-level))) * 1rem);
  --_line-height: clamp(1.1, var(--_line-height-slope) * calc(var(--_harmonic-sequence-base) / (var(--_harmonic-sequence-base) - var(--_font-size-level))) + 1 + 2 * var(--_half-leading) + -1 * var(--_line-height-slope), 2 * var(--_half-leading) + 1);
  --_fluid-font-size: clamp(1rem * calc(var(--_min-harmonic-sequence-base) / (var(--_min-harmonic-sequence-base) - var(--_font-size-level))), calc(calc(-22.5 * calc((calc(var(--_max-harmonic-sequence-base) / (var(--_max-harmonic-sequence-base) - var(--_font-size-level))) - calc(var(--_min-harmonic-sequence-base) / (var(--_min-harmonic-sequence-base) - var(--_font-size-level)))) / (57.5)) + calc(var(--_min-harmonic-sequence-base) / (var(--_min-harmonic-sequence-base) - var(--_font-size-level)))) * 1rem + calc((calc(var(--_max-harmonic-sequence-base) / (var(--_max-harmonic-sequence-base) - var(--_font-size-level))) - calc(var(--_min-harmonic-sequence-base) / (var(--_min-harmonic-sequence-base) - var(--_font-size-level)))) / (57.5)) * 100vw), 1rem * calc(var(--_max-harmonic-sequence-base) / (var(--_max-harmonic-sequence-base) - var(--_font-size-level))));
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
 * 余白の全体リセット
 *
 * 本番の統合CSS（Autoptimize, 2026-09-01 取得）の foundation にある1行を
 * そのままの形で移植する。
 *   :where(html,body,p,ol,ul,li,dl,dt,dd,table,blockquote,figure,fieldset,
 *          legend,pre,iframe,hr,h1,h2,h3,h4,h5,h6){margin:0;padding:0}
 *
 * これが無いと UA 既定の margin-block:1em が段落・リスト・表・見出しに素通りする。
 * 実害の例（実測）:
 *   /profile/ の p「会員番号: A1208」 margin 本番 0 → ローカル 16px 0 16px 0
 *   （カード1枚で +48px、10枚で +357px）
 *   /profile/a1185/ の ol.c-breadcrumbs が UA の 12.8px を上下に持ち、
 *   .p-breadcrumbs-wrapper が 65.3px → 90.8px（+25.5）
 *
 * :where() は詳細度 0 なので、後続のどのルールにも負ける。形を変えないこと。
 * ------------------------------------------------------------------------ */

:where(
  html, body, p, ol, ul, li, dl, dt, dd, table, blockquote, figure,
  fieldset, legend, pre, iframe, hr, h1, h2, h3, h4, h5, h6
) {
  margin: 0;
  padding: 0;
}

html {
  font-size: var(--_global--font-size-px);
  hanging-punctuation: allow-end;
  line-break: normal;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  --_font-size-level: 0;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
  background-color: var(--_global--background-color);

  /*
   * ここは #333 ではなく #000 が正しい。直さないこと。
   * 出典: docs/findings/body-color.md（2026-09-01 実測）
   *
   * 本番の getComputedStyle(document.body).color は rgb(0, 0, 0)。
   * 理由は「本番で --wp--preset--color--sm-text が未定義だから」。
   *
   *   1. Snow Monkey 本体 app.css には body の color 宣言が2つある。
   *        :where(body) { color: var(--_color-text) }        詳細度 (0,0,0)
   *        body          { color: var(--wp--preset--color--sm-text) }  詳細度 (0,0,1)
   *      :where() は常に詳細度0なので、後者が勝つ。
   *   2. その --wp--preset--color--sm-text は theme.json の
   *      { "slug": "sm-text", "color": "var(--_color-text)" } から
   *      コアが <style id="global-styles-inline-css"> として出力するもの。
   *   3. ところが本番は Code Snippet #8（docs/snippets/008-performance-optimization.php:29）の
   *      wp_dequeue_style('global-styles') でその出力を止めている。
   *      → 変数は未定義 → color は無効 → 継承プロパティなので html から継承
   *      → html に color 指定は無い → ブラウザ初期値の黒。
   *
   * つまり本番の黒は Snow Monkey の設計値ではなく、スニペット由来の実質的なバグ。
   * だが「見た目を1pxも変えない」のが本移行の成功条件なので、そのバグごと再現する。
   *
   * 未定義変数のフォールバック連鎖を構造ごと真似る案（findings の選択肢B）は不採用。
   * 「変数を定義しない」という否定形の実装は、将来 --_color-text を color に
   * 使った瞬間に無言で #333 に戻って差分が出るため保守できない。
   * ここでは選択肢A（黒をリテラルで明示）を採る。
   *
   * なお --_color-text: #333 の定義自体は _tokens.css に残してある（CLAUDE.md §4 の変数契約）。
   * Snow Monkey Blocks 等が参照するため消さないこと。ただし body の color には使わない。
   */
  color: #000;

  font-family: var(--_global--font-family);
  font-variant-ligatures: none;
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * WordPress プリセットのフォントサイズ（Snow Monkey 由来の旧スラッグ）
 *
 * theme.json 側では sm-xs 〜 sm-6xl（フルイド）を定義している。
 * ここで定義するのは has-sm-small-font-size など **旧世代のスラッグ** で、
 * 本文HTMLに残っている可能性があるため互換として残す。
 * 値は本番の実測そのまま。
 * ------------------------------------------------------------------------ */

body {
  --wp--preset--font-size--x-large: 42px;
  --wp--preset--font-size--sm-xsmall: 14px;
  --wp--preset--font-size--sm-small: 14px;
  --wp--preset--font-size--sm-normal: 16px;
  --wp--preset--font-size--sm-medium: 20px;
  --wp--preset--font-size--sm-large: 28px;
  --wp--preset--font-size--sm-xlarge: 44px;
  --wp--preset--font-size--sm-xxlarge: 76px;
  --wp--preset--font-size--sm-xxxlarge: 140px;
  --line-height-sm-xsmall: calc(16 / 14 + var(--_half-leading) * 2);
  --line-height-sm-small: calc(16 / 14 + var(--_half-leading) * 2);
  --line-height-sm-normal: calc(16 / 16 + var(--_half-leading) * 2);
  --line-height-sm-medium: calc(16 / 20 + var(--_half-leading) * 2);
  --line-height-sm-large: calc(16 / 28 + var(--_half-leading) * 2);
  --line-height-sm-xlarge: calc(16 / 44 + var(--_half-leading) * 2);
  --line-height-sm-xxlarge: calc(16 / 76 + var(--_half-leading) * 2);
  --line-height-sm-xxxlarge: calc(16 / 140 + var(--_half-leading) * 2);
}

@media not all and (min-width: 640px) {
  body {
    --wp--preset--font-size--sm-xlarge: calc(36px - (16px - var(--_global--font-size-px)));
    --wp--preset--font-size--sm-xxlarge: calc(44px - (16px - var(--_global--font-size-px)));
    --wp--preset--font-size--sm-xxxlarge: calc(52px - (16px - var(--_global--font-size-px)));
    --line-height-sm-xlarge: calc(16 / 44 + var(--_half-leading) * 2);
    --line-height-sm-xxlarge: calc(0.3 + 0.7 / (1 + 2.75 * 2.75 / 2.5 - 2.75 / 2.5) + var(--_half-leading) * 2);
    --line-height-sm-xxxlarge: calc(0.3 + 0.7 / (1 + 3.25 * 3.25 / 2.5 - 3.25 / 2.5) + var(--_half-leading) * 2);
  }
}

@media (min-width: 640px) and (max-width: 1023.9px) {
  body {
    --wp--preset--font-size--sm-xxxlarge: calc(96px - (16px - var(--_global--font-size-px)));
    --line-height-sm-xxlarge: calc(0.3 + 0.7 / (1 + 6 * 6 / 2.5 - 6 / 2.5) + var(--_half-leading, 0.4) * 2);
  }
}

.has-sm-small-font-size { font-size: var(--wp--preset--font-size--sm-small) !important; line-height: var(--line-height-sm-small); }
.has-sm-normal-font-size { font-size: var(--wp--preset--font-size--sm-normal) !important; line-height: var(--line-height-sm-normal); }
.has-sm-medium-font-size { font-size: var(--wp--preset--font-size--sm-medium) !important; line-height: var(--line-height-sm-medium); }
.has-sm-large-font-size { font-size: var(--wp--preset--font-size--sm-large) !important; line-height: var(--line-height-sm-large); }
.has-sm-xlarge-font-size { font-size: var(--wp--preset--font-size--sm-xlarge) !important; line-height: var(--line-height-sm-xlarge); }
.has-sm-xxlarge-font-size { font-size: var(--wp--preset--font-size--sm-xxlarge) !important; line-height: var(--line-height-sm-xxlarge); }
.has-sm-xxxlarge-font-size { font-size: var(--wp--preset--font-size--sm-xxxlarge) !important; line-height: var(--line-height-sm-xxxlarge); }

/*
 * theme.json の sm-xs 〜 sm-6xl はフルイド。
 *
 * WordPress コアは theme.json から
 *   .has-sm-5-xl-font-size{font-size:var(--wp--preset--font-size--sm-5-xl)!important}
 * を自動生成する。ここで **要素側の変数を上書き** することで、
 * !important を殺さずにフルイド値へ差し替える（Snow Monkey と同じ手口）。
 * 本文HTMLに has-sm-5-xl-font-size / has-sm-xl-font-size が実在する（トップページ）。
 */
.has-sm-xs-font-size { --wp--preset--font-size--sm-xs: var(--_fluid-font-size); --_font-size-level: -2; }
.has-sm-s-font-size { --wp--preset--font-size--sm-s: var(--_fluid-font-size); --_font-size-level: -1; }
.has-sm-m-font-size { --wp--preset--font-size--sm-m: var(--_fluid-font-size); --_font-size-level: 0; }
.has-sm-l-font-size { --wp--preset--font-size--sm-l: var(--_fluid-font-size); --_font-size-level: 1; }
.has-sm-xl-font-size { --wp--preset--font-size--sm-xl: var(--_fluid-font-size); --_font-size-level: 2; }
.has-sm-2-xl-font-size { --wp--preset--font-size--sm-2-xl: var(--_fluid-font-size); --_font-size-level: 3; }
.has-sm-3-xl-font-size { --wp--preset--font-size--sm-3-xl: var(--_fluid-font-size); --_font-size-level: 4; }
.has-sm-4-xl-font-size { --wp--preset--font-size--sm-4-xl: var(--_fluid-font-size); --_font-size-level: 5; }
.has-sm-5-xl-font-size { --wp--preset--font-size--sm-5-xl: var(--_fluid-font-size); --_font-size-level: 6; }
.has-sm-6-xl-font-size { --wp--preset--font-size--sm-6-xl: var(--_fluid-font-size); --_font-size-level: 7; }

.has-sm-xs-font-size,
.has-sm-s-font-size,
.has-sm-m-font-size,
.has-sm-l-font-size,
.has-sm-xl-font-size,
.has-sm-2-xl-font-size,
.has-sm-3-xl-font-size,
.has-sm-4-xl-font-size,
.has-sm-5-xl-font-size,
.has-sm-6-xl-font-size {
  font-size: var(--_fluid-font-size);
  line-height: var(--_line-height);
}

/* ---------------------------------------------------------------------------
 * 要素デフォルト
 * ------------------------------------------------------------------------ */

img,
video,
svg,
iframe,
object,
embed {
  max-width: 100%;
}

/*
 * 本番 foundation の宣言をそのまま移植。
 *   :where(figure,picture) :where(img,video){display:table;margin-bottom:0;margin-top:0}
 *   img,video{height:auto;max-width:100%;vertical-align:middle}
 * EWWW Image Optimizer が画像を <picture><source webp>+<img> に包むため、
 * この2行が無いと <picture> 内の img がインラインのままになり、
 * 行ボックスのベースライン下の余白ぶん親要素が 8.8px 高くなる
 * （/voice/ のカード25枚で +220px、/feature/ の break-the-grid で +8.8px）。
 * :where() は詳細度 0 なので、後続のどの宣言も上書きされない。
 */
:where(figure, picture) :where(img, video) {
  display: table;
  margin-bottom: 0;
  margin-top: 0;
}

img,
video {
  height: auto;
  vertical-align: middle;
}

/*
 * フォームコントロールのフォント。本番 foundation の宣言をそのまま移植。
 *   :where(input,textarea,keygen,select,button){font-family:var(--_global--font-family)}
 *   :where(input,textarea,optgroup,select,button){--_font-size-level:0;font-size:var(--_font-size);line-height:var(--_line-height)}
 * これが無いと <button> がブラウザ既定の 13.3333px のままになる。
 * ヘッダのハンバーガーは line-height:1 なので、font-size の差がそのまま
 * .c-hamburger-btn の高さ 32px → 32.3281px のズレになっていた。
 * :where() は詳細度 0 なので、後続のどの宣言も上書きされない。
 */
:where(input, textarea, keygen, select, button) {
  font-family: var(--_global--font-family);
}

:where(input, textarea, optgroup, select, button) {
  --_font-size-level: 0;
  font-size: var(--_font-size);
  line-height: var(--_line-height);
}

/* ---------------------------------------------------------------------------
 * 見出し（h1〜h6）
 *
 * 本番の統合CSS（Autoptimize, 2026-09-01 取得）の foundation にある宣言:
 *   :where(html,body,p,...,h1,h2,h3,h4,h5,h6){margin:0;padding:0}
 *   :where(h1,h2,h3,h4,h5,h6){font-weight:700}
 *   h1{--_font-size-level:4}  h2{3}  h3{2}  h4{1}  h5,h6{0}
 *   h1,h2{font-size:var(--_fluid-font-size);line-height:var(--_line-height)}
 *   h3,h4{...}  h5,h6{...}
 *
 * ここが丸ごと欠落していたため、見出しはブラウザ既定の em 指定
 * （h1 = 2em = 32px）のままだった。本番は sp 375px で 28.8522px / 47.1254px。
 *
 * margin/padding のリセットは **見出しだけ** に絞って持ち込む。
 * p / ul / table まで含む全体リセットは _components.css の .c-navbar の
 * コメントにあるとおり意図的に持ち込んでいないので、範囲を広げない。
 * 見出しの上下余白は「親要素が --_margin-top / --_margin-bottom を差し込む」
 * 方式（_components.css の縦リズム節）で与えられるため、素の margin は 0 が正しい。
 * ------------------------------------------------------------------------ */

:where(h1, h2, h3, h4, h5, h6) {
  font-weight: 700;
}

h1 { --_font-size-level: 4; }
h2 { --_font-size-level: 3; }
h3 { --_font-size-level: 2; }
h4 { --_font-size-level: 1; }
h5,
h6 { --_font-size-level: 0; }

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: var(--_fluid-font-size);
  line-height: var(--_line-height);
}

figure {
  margin: 0;
}

ul,
ol {
  padding-left: var(--_list-item-indent);
}

table {
  border-collapse: collapse;
}

/* ---------------------------------------------------------------------------
 * スクリーンリーダー専用テキスト / スキップリンク
 * ------------------------------------------------------------------------ */

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  word-break: normal !important;
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px #0009;
  clip: auto !important;
  clip-path: none;
  color: #21759b;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* ---------------------------------------------------------------------------
 * ページ先頭・末尾のアンカー（#page-top の遷移先）
 * 高さ1pxの不可視要素。margin -1px で相殺されるので描画には影響しない。
 * ------------------------------------------------------------------------ */

#page-start,
#page-end {
  height: 1px;
  visibility: hidden;
  width: 1px;
}

#page-start {
  margin-bottom: -1px;
}

#page-end {
  margin-top: -1px;
}