/* =========================================
   Typography Reset / Global Tuning
   for Snow Monkey + My Snow Monkey
   vw中心版（上書き優先）
   ※ 中央値は vw のみ
========================================= */

/* -----------------------------------------
   1) サイズ設計
   コンテンツ最大幅 1280px 想定
----------------------------------------- */
:root {
  /* 本文：基本は安定重視。動きは控えめ */
  --xcs-font-body: clamp(1rem, 1.8vw, 1.25rem);        /* 16px〜20px */
  --xcs-font-small: clamp(0.9375rem, 1.4vw, 1rem);     /* 15px〜16px */

  /* 見出し：こちらをややダイナミックに */
  --xcs-font-h1: clamp(2rem, 6vw, 4rem); /* 32px〜64px */
  --xcs-font-h2: clamp(1.75rem, 4.5vw, 3rem);          /* 28px〜48px */
  --xcs-font-h3: clamp(1.375rem, 3.2vw, 2.25rem);      /* 22px〜36px */
  --xcs-font-h4: clamp(1.125rem, 2.2vw, 1.5rem);       /* 18px〜24px */

  /* UI */
  --xcs-font-button: clamp(1rem, 1.8vw, 1.25rem);      /* 16px〜20px */
  --xcs-font-table: clamp(0.95rem, 1.5vw, 1.05rem);    /* 約15.2px〜16.8px */
  --xcs-font-note: clamp(0.875rem, 1.2vw, 0.9375rem);  /* 14px〜15px */

  /* 行間 */
  --xcs-lh-body: 1.9;
  --xcs-lh-heading: 1.45;
  --xcs-lh-tight: 1.6;
}

/* -----------------------------------------
   2) 1280px超えは頭打ち
   （実際は clamp で上限に達するが、意図を明確化）
----------------------------------------- */
@media (min-width: 1281px) {
  :root {
    --xcs-font-body: 1.25rem;      /* 20px */
    --xcs-font-small: 1rem;        /* 16px */
    --xcs-font-h2: 3rem;           /* 48px */
    --xcs-font-h3: 2.25rem;        /* 36px */
    --xcs-font-h4: 1.5rem;         /* 24px */
    --xcs-font-button: 1.25rem;    /* 20px */
    --xcs-font-table: 1.05rem;     /* 16.8px */
    --xcs-font-note: 0.9375rem;    /* 15px */
  }
}

/* -----------------------------------------
   3) 本文
----------------------------------------- */
body {
  font-size: var(--xcs-font-body) !important;
  line-height: var(--xcs-lh-body) !important;
}

p,
.wp-block-paragraph,
.entry-content p,
.p-entry-content p,
li,
.entry-content li,
.p-entry-content li,
dt,
dd {
  font-size: var(--xcs-font-body) !important;
  line-height: var(--xcs-lh-body) !important;
}

ul,
ol {
  line-height: var(--xcs-lh-body) !important;
}

/* ブロック個別指定の吸収を狙う */
p[style],
.wp-block-paragraph[style] {
  font-size: var(--xcs-font-body) !important;
}

/* -----------------------------------------
   4) 見出し
----------------------------------------- */
h1,
.entry-content h1,
.p-entry-content h1 {
  font-size: var(--xcs-font-h1) !important;
  line-height: 1.3 !important;
}

h2,
.entry-content h2,
.p-entry-content h2 {
  font-size: var(--xcs-font-h2) !important;
  line-height: var(--xcs-lh-heading) !important;
}

h3,
.entry-content h3,
.p-entry-content h3 {
  font-size: var(--xcs-font-h3) !important;
  line-height: var(--xcs-lh-heading) !important;
}

h4,
.entry-content h4,
.p-entry-content h4 {
  font-size: var(--xcs-font-h4) !important;
  line-height: var(--xcs-lh-heading) !important;
}

.wp-block-heading,
.wp-block-heading * {
  line-height: var(--xcs-lh-heading) !important;
}


/* -----------------------------------------
   4.5) Header Menu
----------------------------------------- */
.l-header .c-navbar__item > a,
.l-header .c-gnav .c-navbar__item > a,
.l-header .c-hamburger-btn + .c-drawer,
.l-header .c-drawer a,
.p-global-nav .c-navbar__item > a,
.c-drawer a {
  font-size: var(--xcs-font-small) !important;
  line-height: 1.5 !important;
}


/* -----------------------------------------
   5) ボタン
----------------------------------------- */
.wp-block-button__link,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.c-btn,
.smb-btn__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  font-size: var(--xcs-font-button) !important;
  line-height: 1.5 !important;
}


/* ボタンは可読性向上の為、太字で */
.wp-block-button__link span,
.c-btn span,
.smb-btn__link span,
.smb-btn__label,
.woocommerce a.button span,
.woocommerce button.button span,
.woocommerce input.button span {
  font-weight: 700 !important;
}


/* -----------------------------------------
   6) テーブル
----------------------------------------- */
table,
th,
td,
.wp-block-table,
.wp-block-table table,
.wp-block-table th,
.wp-block-table td {
  font-size: var(--xcs-font-table) !important;
  line-height: 1.7 !important;
}

th,
.wp-block-table th {
  font-weight: 700 !important;
}

/* -----------------------------------------
   7) フォーム
----------------------------------------- */
input,
select,
textarea,
label,
legend {
  font-size: var(--xcs-font-body) !important;
  line-height: 1.6 !important;
}

input::placeholder,
textarea::placeholder {
  font-size: var(--xcs-font-small) !important;
}

/* -----------------------------------------
   8) 注釈・補足
----------------------------------------- */
small,
figcaption,
.wp-block-table figcaption,
.wp-block-image figcaption,
.wp-block-audio figcaption,
.wp-block-video figcaption {
  font-size: var(--xcs-font-note) !important;
  line-height: var(--xcs-lh-tight) !important;
}

.xcs-note,
.xcs-small-text,
.xcs-caption {
  font-size: var(--xcs-font-note) !important;
  line-height: var(--xcs-lh-tight) !important;
}

/* -----------------------------------------
   9) スマホ微調整
----------------------------------------- */
@media (max-width: 767px) {
  .wp-block-button__link,
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .c-btn,
  .smb-btn__link,
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button {
    line-height: 1.55 !important;
  }

  table,
  th,
  td,
  .wp-block-table,
  .wp-block-table th,
  .wp-block-table td {
    line-height: 1.8 !important;
  }
}



/* xcs-fontsize-h3をつけたものは、h3相当のサイズになる */
.xcs-fontsize-h3,
.xcs-fontsize-h3 *,
h2.xcs-fontsize-h3,
h2.xcs-fontsize-h3 * {
  font-size: var(--xcs-font-h3) !important;
  line-height: var(--xcs-lh-heading) !important;
}

h2.xcs-fontsize-h4,
h2.xcs-fontsize-h4 *,
h3.xcs-fontsize-h4,
h3.xcs-fontsize-h4 *,
p.xcs-fontsize-h4,
p.xcs-fontsize-h4 * {
  font-size: var(--xcs-font-h4) !important;
  line-height: var(--xcs-lh-heading) !important;
}

.xcs-fontsize-small,
.xcs-fontsize-small * {
  font-size: var(--xcs-font-h3) !important;
  line-height: var(--xcs-lh-heading) !important;
}




/* =========================================
   WooCommerce 自動生成ページのみ
   h2 の文字サイズを上書き
========================================= */

/* =========================================
   WooCommerce 自動生成ページのみ
   h2 を h3相当に統一
========================================= */

.post-type-archive-product h2,
.post-type-archive-product .entry-content h2,
.post-type-archive-product .p-entry-content h2,
.woocommerce-cart h2,
.woocommerce-cart .entry-content h2,
.woocommerce-cart .p-entry-content h2,
.woocommerce-checkout h2,
.woocommerce-checkout .entry-content h2,
.woocommerce-checkout .p-entry-content h2,
.woocommerce-account h2,
.woocommerce-account .entry-content h2,
.woocommerce-account .p-entry-content h2 {
  font-size: var(--xcs-font-h4) !important;
  line-height: var(--xcs-lh-heading) !important;
}