@charset "utf-8";
/* ==========================================================================
  閲覧支援（アクセシビリティ）設定の反映
  bodyに付与されたクラスに応じてCSS変数を上書き
========================================================================== */

/* 閲覧支援ページ */
.setting-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 2px solid var(--theme-border-separator);
  border-radius: var(--br-xs);
  padding: 1.5em;
}
.sample-box {
  padding: 1.2em 1em;
  margin: 1em 0 2em;
  border: 1px solid var(--theme-border-separator);
  text-align: left;
  border-radius: 4px;
  background-color: var(--theme-bg);
  color: var(--theme-text);
  border-color: var(--theme-border-table);
}
@media (max-width: 599px) {
  .setting-card {
    padding: 1.5em 0.8em;
  }
  .sample-box {
    padding: 1.2em 0.8em;
  }
}
.sample-box.fs-small {
  --fs-default: calc(var(--raw-fs-default) * 0.9);
  --fs-lead: calc(var(--raw-fs-lead) * 0.9);
}
.sample-box.fs-base {
  --fs-default: calc(var(--raw-fs-default) * 1);
  --fs-lead: calc(var(--raw-fs-lead) * 1);
}
.sample-box.fs-large {
  --fs-default: calc(var(--raw-fs-default) * 1.25);
  --fs-lead: calc(var(--raw-fs-lead) * 1.25);
}
.sample-label {
  font-size: var(--fs-lead);
  font-weight: var(--fw-bold);
  margin-bottom: 10px;
}
.sample-desc {
  font-size: var(--fs-default);
  line-height: 1.5;
}
.setting-card .btn {
  display: block;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
/* 各プレビュー専用の配色固定 */
.theme-sample-white {
  background-color: var(--pal-white) !important;
  color: var(--pal-black) !important;
}
.js-color-change[data-color='white'] {
  --a11y-btn-text: var(--theme-main-btn-text);
  --a11y-btn-border: var(--theme-main-btn-text);
  --a11y-btn-bg: var(--theme-main-btn);
}
.theme-sample-navy {
  background-color: var(--a11y-p01-bg) !important;
  color: var(--a11y-p01-main) !important;
}
.js-color-change[data-color='navy'] {
  --a11y-btn-text: var(--a11y-p01-link);
  --a11y-btn-border: var(--a11y-p01-main);
  --a11y-btn-bg: var(--a11y-p01-bg);
}
.theme-sample-yellow {
  background-color: var(--a11y-p02-bg) !important;
  color: var(--a11y-p02-main) !important;
}
.js-color-change[data-color='yellow'] {
  --a11y-btn-text: var(--a11y-p02-link);
  --a11y-btn-border: var(--a11y-p02-main);
  --a11y-btn-bg: var(--a11y-p02-bg);
}
.theme-sample-black {
  background-color: var(--a11y-p03-bg) !important;
  color: var(--a11y-p03-main) !important;
}
.js-color-change[data-color='black'] {
  --a11y-btn-text: var(--a11y-p03-link);
  --a11y-btn-border: var(--a11y-p03-main);
  --a11y-btn-bg: var(--a11y-p03-bg);
}
/* サンプルボックス内テキスト要素を強制固定 */
.sample-box * {
  color: inherit !important;
  background-color: transparent !important;
}

/* -------------------------------------------------------
  文字サイズ切り替え
-------------------------------------------------------- */
body.font-small {
  --f-scale: 0.9;
}
body.font-large {
  --f-scale: 1.25;
}

/* -------------------------------------------------------
  配色切り替え
-------------------------------------------------------- */
/* --- 閲覧支援モード：共通の上書き定義（body直下） --- */
body.theme-navy,
body.theme-yellow,
body.theme-black {
  --theme-bg: var(--change-bg);
  --theme-base: var(--change-bg);
  --theme-text: var(--change-main);
  --theme-text-opp: var(--change-main);
  --theme-text-sub: var(--change-sub);
  --theme-link: var(--change-link);
  --theme-link-opp: var(--change-link);
  --theme-main: var(--change-main);
  --theme-accent: var(--change-main);
  --theme-ida: var(--change-main);
  --theme-border-separator: var(--change-sub);
  --theme-border-table: var(--change-sub);
  --theme-deco-primary: var(--change-main);

  /* a11y専用の役割変数 */
  --a11y-bg: var(--change-bg);
  --a11y-text: var(--change-main);
  --a11y-link: var(--change-link);
  --a11y-btn-text: var(--change-link);
  --a11y-btn-bg: var(--change-bg);
  --a11y-btn-border: var(--change-main);

  /* 背景パーツ */
  --a11y-surface: var(--change-surface);
  --theme-surface-blue: var(--change-surface);
  --theme-surface-yellow: var(--change-surface);
  --theme-surface-green: var(--change-surface);
  --theme-surface-red: var(--change-surface);
}

/* --- WordPressブロックエディタ用プリセット変数の上書き --- */
/* 文字色・インラインカラー：a11yテキスト色に固定 */
body.theme-navy [class*='has-'][class*='-color'],
body.theme-yellow [class*='has-'][class*='-color'],
body.theme-black [class*='has-'][class*='-color'],
body.theme-navy .has-inline-color,
body.theme-yellow .has-inline-color,
body.theme-black .has-inline-color {
  --wp--preset--color--cl-font: var(--a11y-text);
  --wp--preset--color--cl-font-opp: var(--a11y-text);
  --wp--preset--color--cl-main: var(--a11y-text);
  --wp--preset--color--cl-accent: var(--a11y-text);
  --wp--preset--color--cl-ida: var(--a11y-text);
  --wp--preset--color--cl-d-gray: var(--a11y-text);
  --wp--preset--color--cl-cta: var(--a11y-text);
  --wp--preset--color--cl-cta-02: var(--a11y-text);
}
/* 背景色：a11y背景またはサーフェス色に固定 */
body.theme-navy [class*='has-'][class*='-background-color'],
body.theme-yellow [class*='has-'][class*='-background-color'],
body.theme-black [class*='has-'][class*='-background-color'] {
  --wp--preset--color--cl-bg: var(--a11y-bg);
  --wp--preset--color--cl-base: var(--a11y-bg);
  --wp--preset--color--cl-main: var(--a11y-surface);
  --wp--preset--color--cl-accent: var(--a11y-surface);
  --wp--preset--color--cl-ida: var(--a11y-surface);
  --wp--preset--color--cl-blue-bg: var(--a11y-surface);
  --wp--preset--color--cl-yellow-bg: var(--a11y-surface);
  --wp--preset--color--cl-green-bg: var(--a11y-surface);
  --wp--preset--color--cl-red-bg: var(--a11y-surface);
  --wp--preset--color--cl-l-gray: var(--a11y-surface);
  --wp--preset--color--cl-gray: var(--a11y-surface);
  --wp--preset--color--cl-d-gray: var(--a11y-surface);
  --wp--preset--color--cl-cta: var(--a11y-surface);
  --wp--preset--color--cl-cta-02: var(--a11y-surface);
}
/* 枠線：a11yテキスト色（明瞭な線）に固定 */
body.theme-navy [class*='has-border-color'],
body.theme-yellow [class*='has-border-color'],
body.theme-black [class*='has-border-color'] {
  --wp--preset--color--cl-main: var(--a11y-text);
  --wp--preset--color--cl-accent: var(--a11y-text);
  --wp--preset--color--cl-ida: var(--a11y-text);
  --wp--preset--color--cl-gray: var(--a11y-text);
}

/* --- 各パターンのスイッチ --- */
body.theme-navy {
  --change-bg: var(--a11y-p01-bg);
  --change-main: var(--a11y-p01-main);
  --change-sub: var(--a11y-p01-sub);
  --change-link: var(--a11y-p01-link);
  --change-surface: #000066;
}
body.theme-yellow {
  --change-bg: var(--a11y-p02-bg);
  --change-main: var(--a11y-p02-main);
  --change-sub: var(--a11y-p02-sub);
  --change-link: var(--a11y-p02-link);
  --change-surface: #eeee00;
}
body.theme-black {
  --change-bg: var(--a11y-p03-bg);
  --change-main: var(--a11y-p03-main);
  --change-sub: var(--a11y-p03-sub);
  --change-link: var(--a11y-p03-link);
  --change-surface: #222222;
}