/*
 * ZPF基本スタイル。適用範囲は .zpf-site のみ。
 * html/body、Cocoon全体、管理バーには指定しない。
 * フォント読み込み・個別セクション・フォーム外観の移植は別工程。
 */
.zpf-site {
  background-color: var(--zpf-bg-page);
  color: var(--zpf-text-body);
  font-family: var(--zpf-font-body);
  font-size: var(--zpf-text-base);
  line-height: var(--zpf-line-relaxed);
  font-weight: var(--zpf-weight-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 1400pxの外枠にpaddingを含めるための最小限の寸法設定 */
.zpf-site,
.zpf-site *,
.zpf-site *::before,
.zpf-site *::after {
  box-sizing: border-box;
}

.zpf-site::selection,
.zpf-site *::selection {
  background-color: var(--zpf-color-selection);
}

/*
 * 見出しは共通の文字組みのみ。大きさは共通部品・個別セクションで指定する。
 * Cocoon由来の見出し背景・罫線・paddingをZPF内だけ解除する。
 */
.zpf-site :is(h1, h2, h3, h4) {
  margin: 0 0 var(--zpf-space-16);
  padding: 0;
  border: 0;
  background: none;
  color: var(--zpf-text-strong);
  font-family: var(--zpf-font-heading);
  font-size: inherit;
  font-weight: var(--zpf-weight-bold);
  line-height: var(--zpf-line-snug);
  letter-spacing: var(--zpf-tracking-tight);
}

.zpf-site p {
  margin: 0 0 var(--zpf-space-16);
}

.zpf-site a {
  color: var(--zpf-color-primary-600);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.zpf-site a:where(:not(.zpf-button)):hover {
  color: var(--zpf-color-primary-700);
}

/* キーボードフォーカスは消さない */
.zpf-site :is(a, button, input, textarea, select):focus-visible {
  outline: var(--zpf-border-width-emphasis) solid var(--zpf-color-primary-500);
  outline-offset: var(--zpf-space-4);
}

.zpf-site img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* フォームの色・余白・外観は変更せず、文字組みだけ継承 */
.zpf-site :is(button, input, textarea, select) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.zpf-site .zpf-label {
  font-family: var(--zpf-font-label);
}

/*
 * スムーズスクロールはviewportのhtml指定が必要になるため今回移植しない。
 * 専用ラッパーへのscroll-behaviorだけでは通常のページスクロールに効かない。
 * 将来、必要な範囲・動作を確認して実装する。
 */