/* =====================================================
   base.css — Reset + Typography (Mobile-first)
   Depends on variables.css
   ===================================================== */

/* -------- Modern Reset -------- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body { height: 100%; }

body, h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

/* リストリセットを全体に適用 */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

table { border-collapse: collapse; width: 100%; }
th, td { padding: 0.5rem; text-align: left; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { border: 0; background: none; padding: 0; cursor: pointer; }

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--c-brand-gold); /* アクセント色で視認性UP */
  outline-offset: 2px;
  border-radius: 4px;
}

/* -------- Base Typography -------- */
html { color-scheme: light; }

body {
  font-family: var(--font-sans-jp);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-fg);
  background: var(--c-bg);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: var(--jp-font-feature, "palt"); /* 日本語：プロポーショナル詰め */
  font-kerning: normal; /* 英字：カーニング有効 */
  overflow-x: hidden;
}

/* Links */
a {
  color: var(--c-brand-blue);
  text-decoration: none;
  text-decoration-thickness: .08em;
  text-underline-offset: 2px;
}

/* Headings (mobile-first sizes) */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}
h1 { font-size: var(--fs-3xl); margin-block: var(--space-6) var(--space-4); }
h2 { font-size: var(--fs-2xl); margin-block: var(--space-6) var(--space-3); }
h3 { font-size: var(--fs-xl);  margin-block: var(--space-4) var(--space-2); }
h4 { font-size: var(--fs-lg);  margin-block: var(--space-3) var(--space-2); }
h5 { font-size: var(--fs-base); margin-block: var(--space-2) var(--space-1); }
h6 { font-size: var(--fs-sm);   margin-block: var(--space-2) var(--space-1); }

p { margin-block: var(--space-3); }
small { font-size: var(--fs-sm); }
strong, b { font-weight: var(--fw-bold); }
em, i { font-style: italic; }

hr {
  border: 0;
  border-top: 1px solid var(--c-border);
  margin-block: var(--space-6);
}

blockquote {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 4px solid var(--c-brand-gold);
  background: var(--c-bg-muted);
}

/* Selection color */
::selection {
  background: color-mix(in oklab, var(--c-brand-blue) 20%, transparent);
}

/* -------- Forms (baseline) -------- */
/* 見た目の強いスタイルは components.css に委譲。ここは“最低限”。 */
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
select,
textarea {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: #fff;
}
input::placeholder,
textarea::placeholder { color: var(--c-fg-muted); }
input:focus,
select:focus,
textarea:focus {
  border-color: var(--c-brand-blue);
  outline: 2px solid color-mix(in oklab, var(--c-brand-blue) 25%, transparent);
  outline-offset: 1px;
}

/* ボタンの見た目は components.css へ委譲。ここではinline基準だけ合わせる */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* -------- WooCommerce & numeric defaults -------- */
.price,
.woocommerce-Price-amount,
.amount {
  font-family: var(--font-latin), var(--font-sans-jp), sans-serif;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "palt";
}

/* -------- Media (PC up) -------- */
@media (min-width: 768px) {
  h1 { font-size: var(--fs-4xl); }
  h2 { font-size: var(--fs-3xl); }
  h3 { font-size: var(--fs-2xl); }
  h4 { font-size: var(--fs-xl); }
}

/* -------- Helpers -------- */
/* .en は Inter を使う場面で付与（和文用 palt は付けない） */
.en, .en-only {
  font-family: var(--font-latin), var(--font-sans-jp), sans-serif;
  font-kerning: normal;
}

/* 画面外テキスト（A11y） */
.sr-only {
  position:absolute !important;
  width:1px; height:1px; margin:-1px;
  border:0; padding:0; white-space:nowrap;
  clip-path:inset(50%);
  clip:rect(0 0 0 0);
  overflow:hidden;
}

/* =========================================================
   WooCommerce Notices – margin top / no border / no radius
   (site-wide override)
   ========================================================= */

/* 上の余白をしっかり確保（本文との間隔） */
.woocommerce-notices-wrapper {
  margin-top: var(--space-6, 24px);
}

/* 共通ベース：枠なし・角丸なし・影なし */
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info {
  list-style: none;
  margin: var(--space-6, 24px) 0 var(--space-4, 16px);
  padding: var(--space-4, 16px) var(--space-5, 20px);
  border: 0 !important;          /* ← 枠なし */
  border-radius: 0 !important;    /* ← 角丸なし */
  box-shadow: none !important;    /* ← 影なし */
  color: var(--c-fg, #111827);
  background: #fff;               /* 後で種別ごとに上書き */
}

/* 種別ごとの淡い背景だけ残す（枠は出さない） */
.woocommerce .woocommerce-error   { background: #fff4f4; } /* 少し赤み */
.woocommerce .woocommerce-message { background: #f4fffa; } /* 少し緑み */
.woocommerce .woocommerce-info    { background: #f5f9ff; } /* 少し青み */

/* ノーティス内の li 余白を整える */
.woocommerce .woocommerce-error li,
.woocommerce .woocommerce-message li,
.woocommerce .woocommerce-info li {
  margin: 0;
  line-height: var(--lh-base, 1.8);
}

/* スマホ時のパディング控えめに */
@media (max-width: 768px) {
  .woocommerce .woocommerce-error,
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-info {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    margin: var(--space-5, 20px) 0 var(--space-3, 12px);
  }
}