/* ===================================================
   ゆずのき - サイトの枠（ヘッダー・フッター・LINEで予約ボタン）
   gitpress-yuzunoki プラグインが全ページに enqueue する。マークアップも
   同じプラグインの PHP（gitpress_yuzunoki_render_header / _footer）が出す。

   common.css との分担:
     chrome.css  全ページ。デザイントークンと、枠の見た目
     common.css  GitPress で管理する固定ページだけ。本文の見た目

   ブログ記事や policy のように common.css を読まないページでも同じ見た目に
   なるよう、枠の中の書体・色・リンクの状態はここで閉じて決める。テーマ
   （Hello Elementor）の reset.css は a を #c36、:hover を #336、button を
   枠線付きのピンクにするので、それに負けない形で書いている。
   =================================================== */

/* ===== 1. デザイントークン ===== */
:root {
  /* === ミモザカラーパレット === */
  --cream: #FFFBF1;
  --cream-deep: #F8EFD8;
  --mimosa-soft: #FBE38C;
  --mimosa: #F5CB55;
  --mimosa-glow: #FFE07A;
  /* 文字に使える濃いミモザ。--mimosa / --mimosa-glow はクリーム地に対して
     1.25:1 / 1.05:1 しかなく、面や装飾には使えても文字には使えない。
     --mimosa-ink と --ash は、小さい文字がミモザの帯（#F8D978 前後）に乗っても
     4.5:1 を割らない濃さにしてある（クリーム地で 7.5:1 / 8.0:1）。
     各ページの本文CSSにも --ash があり、GitPress のページではそちらが勝つので両方そろえる。 */
  --mimosa-ink: #6E4C0C;
  --ink: #2A2418;
  --ash: #584D3D;
  --blush: #F0D9C5;
  --rule: rgba(42, 36, 24, 0.12);

  /* LINE / Instagram ブランドカラー */
  --line-green: #06C755;
  --line-green-dark: #05B14B;
  --ig-orange: #F58529;
  --ig-pink: #DD2A7B;
  --ig-purple: #8134AF;

  /* === タイポグラフィ === */
  --serif: "Shippori Mincho", "Noto Serif JP", serif;
  --body: "Noto Serif JP", serif;

  /* === スケール（チューニング可能） === */
  --sp: 1;             /* スペーシング倍率 */
  --mimosa-tone: 1;    /* ミモザ濃淡倍率 */

  /* === コンテナ === */
  --container-max: 1100px;
  --container-narrow: 820px;
}

/* ===== 2. 枠の土台 ===== */
.nav, .footer, .floating-cta, .nav-panel {
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
.nav { color: var(--ink); }
.nav a, .footer a, .nav-panel a, .floating-cta { text-decoration: none; }
.brand, .footer-brand { color: inherit; }

/* テーマの a:hover(0,1,1) に勝たせる。考え方は common.css 2節の --gp-fg と同じで、
   基本色を --gp-fg に持つリンクはその色、持たないリンクは親の色に落ちる。
   .nav-links a:hover のような自前の状態色は、この後ろに同じ詳細度で書く。 */
.nav a:hover, .nav a:focus, .nav a:active,
.footer a:hover, .footer a:focus, .footer a:active,
.nav-panel a:hover, .nav-panel a:focus, .nav-panel a:active { color: var(--gp-fg, inherit); }

/* ===== 3. ヘッダー ===== */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  padding: 18px max(20px, 4vw);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255, 251, 241, 0.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 0.5px solid rgba(42, 36, 24, 0.08);
  transition: transform 0.35s ease, background 0.25s;
}
.nav.hide { transform: translateY(-100%); }

/* GitPress の固定ページはヒーローがヘッダーの下に潜り込む前提で天地を取って
   いるので fixed のまま。それ以外（ブログ・policy）は本文が隠れないよう、
   流れの中に場所を取る sticky にする。gpy-page は PHP が body に付ける。 */
body:not(.gpy-page) .nav { position: sticky; }

.brand { display: flex; align-items: center; gap: 12px; }
.brand-orb {
  display: block;
  width: 32px; height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-name {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: 0.16em;
}

.nav-links { display: flex; gap: 28px; align-items: center; font-size: 13px; }
.nav-links a { transition: color 0.2s; letter-spacing: 0.08em; color: var(--ink); }
/* ホバーで --mimosa に変えるとクリーム地に対して 1.50:1 になり、
   触った瞬間にリンクが消えていた。文字用の濃いミモザへ。 */
.nav-links a:hover { color: var(--mimosa-ink); }

/* いま居るページ。以前は各ページの本文に style="color: var(--ink);
   font-weight: 600" を直接書いていた。インライン指定はホバー色にも勝って
   いたので、その挙動もそのまま残す。 */
.nav-links a[aria-current="page"]:not(.nav-cta),
.nav-links a[aria-current="page"]:not(.nav-cta):hover { color: var(--ink); font-weight: 600; }

/* --- ご予約ボタン --------------------------------------------------------
   2026-09 に金（--mimosa 地 + --ink 文字）で全ページ統一した。

   経緯: もとは黒地。ヘッダーがWP側にしか無かった期間（2026-05-14〜06-05）に
   からし色 rgb(206,185,0) へ変えられ、06-05 の復元で取り込まれた。2026-08-29 に
   トークン化を試みたが、ここの color に付いていた !important がインライン指定に
   勝ってしまい、クリーム文字のまま 1.50:1 で3か月半出ていた。直した「つもり」が
   黙って効かない状態を作らないよう、!important はやめて色はここだけで決める。

   `body` を噛ませているのは、ヘッダーが本文にあった頃、本文CSSが .nav-cta を
   後から同じ詳細度で再定義していたため。.nav-links a:hover(0,2,1) にも勝つ必要が
   あるので .nav-links を挟んだ形も併記。--gp-fg は :hover でテーマの色に化けるのを
   防ぐ宣言（2節）。 */
.nav-cta {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.16em;
  transition: transform 0.2s, box-shadow 0.2s;
}
body .nav-cta,
body .nav-links a.nav-cta {
  background: var(--mimosa);
  color: var(--ink);
  --gp-fg: var(--ink);
}
.nav-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(42, 36, 24, 0.25);
}

@media (max-width: 720px) {
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ===== 4. フッター =====
   店名のかたまり・プライバシーポリシーへのリンク・著作権表示を、縦に積んで右へ寄せる。 */
.footer {
  background: var(--ink);
  color: var(--cream);
  padding: 48px max(20px, 4vw) 36px;
  display: flex; flex-direction: column; align-items: flex-end; gap: 24px;
}
.footer-brand { display: flex; align-items: center; gap: 14px; }
.footer-orb {
  display: block;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cream);
  padding: 3px; box-sizing: border-box;
  object-fit: contain;
  flex-shrink: 0;
}
.footer-name {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: 0.16em; margin-bottom: 4px; color: var(--cream);
}
/* 墨の地にクリームを透かして書く。0.5 前後だと 4.8:1 しかないので 0.75（約 8.8:1） */
.footer-en {
  font-size: 11px; letter-spacing: 0.32em; opacity: 0.75;
}
.footer-copy {
  font-size: 11px; letter-spacing: 0.18em; opacity: 0.75;
  text-align: center;
}
/* 文字だけのリンクなので下線で示す（2節の .footer a は下線を消す）。地の色は .footer-en と同じ透かし */
.footer .footer-link {
  font-size: 12px; letter-spacing: 0.12em;
  color: var(--cream); --gp-fg: var(--cream); opacity: 0.75;
  text-decoration: underline; text-underline-offset: 0.3em;
  padding: 6px 0;
}
.footer .footer-link:hover { opacity: 1; }

/* ===== 5. LINEで予約ボタン（mobile） ===== */
.floating-cta {
  position: fixed; right: 18px; bottom: 18px; z-index: 40;
  display: none; padding: 14px 22px; border-radius: 999px;
  background: var(--ink); color: var(--cream) !important;
  font-size: 13px; letter-spacing: 0.12em;
  box-shadow: 0 8px 24px rgba(42, 36, 24, 0.32);
  transition: opacity 0.2s;
  white-space: nowrap;
}
.floating-cta:hover { opacity: 0.9; }
/* 矢印の向きの決まりは common.css 6節を参照（別ページ・外部は →、ページ内は ↓）。 */
.floating-cta::after { content: "\2192"; }
.floating-cta[href^="#"]::after { content: "\2193"; }
@media (max-width: 720px) {
  .floating-cta { display: inline-flex; align-items: center; gap: 8px; }
}

/* ===== 6. 画面幅ごとの詰め =================================================
   ブレークポイントの考え方は common.css 21節を参照。`body` を噛ませているのは、
   ヘッダーが本文にあった頃の本文CSS（詳細度 0,1,0）に勝たせるため。
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  /* 721〜900px（iPad縦など）はナビのリンクが出たままなので、店名＋リンク5本＋
     ご予約ボタンが横幅に収まらず、768px では店名もリンクも1文字ずつ折り返して
     いた。ここを隠すとタブレットで回遊できなくなるため、隠さずに詰める。 */
  body .nav { padding: 14px 24px; gap: 12px; }
  body .brand { gap: 10px; min-width: 0; }
  body .brand-orb { width: 28px; height: 28px; }
  body .brand-name { font-size: 16px; letter-spacing: 0.08em; white-space: nowrap; }
  body .nav-links { gap: 16px; font-size: 12px; }
  body .nav-links a { white-space: nowrap; }
  body .nav-cta {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 14px;
    font-size: 11px;
    letter-spacing: 0.08em;
  }
}

@media (max-width: 600px) {
  /* LINEで予約ボタンは常に“居座る”ので、少し小さくして端末の
     ホームインジケータぶんを避ける。フッターの著作権表示がボタンの下に
     隠れないよう、フッターにも逃げ分を持たせる。 */
  body .floating-cta {
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    padding: 12px 18px;
    font-size: 12px;
  }
  body .footer { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 440px) {
  /* 店名は「睡眠美脳サロンゆずのき」11文字。19px・字間0.16em だと
     ロゴとご予約ボタンを足して 360px に収まらず、店名が2行に折り返したうえ
     ボタンまで「ご予/約」と潰れていた。900px の詰めから、さらに一段落とす。
     ご予約ボタンの nowrap と flex-shrink は上のブロックから効いている。 */
  body .nav { padding: 12px 16px; gap: 10px; }
  body .brand { gap: 8px; }
  body .brand-orb { width: 26px; height: 26px; }
  body .brand-name { font-size: 15px; letter-spacing: 0.06em; }
}

/* ===== 7. モバイルのナビゲーション（ハンバーガー） =======================
   720px 以下ではヘッダーのリンクが全部 display:none になり、残るのは
   ご予約ボタンだけ＝スマホから他ページへ行けない状態だった。

   ボタンとパネルのマークアップは chrome.js が組み立てる。
   ここにあるのは、その JS が付けるクラスの見た目だけ。

   パネルが body 直下にいるのは、.nav が backdrop-filter を持っていて
   position:fixed の包含ブロックになってしまうから。ヘッダーの高さは
   JS が --gp-nav-h として実測して渡す。
   ------------------------------------------------------------------------ */

.nav-toggle {
  display: none;
  width: 44px; height: 44px;      /* タップ領域は 44px 角を下回らない */
  /* 44px のままだとヘッダーがこのボタンの高さに引っ張られて 50px→68px に
     太る。上下にネガティブマージンを噛ませて、指で押せる範囲は 44px を保った
     まま、行の高さへの寄与だけ 28px に抑える。 */
  margin-block: -8px;
  margin-right: -8px;             /* 見た目の右端をご予約ボタンとそろえる */
  padding: 0;
  align-items: center; justify-content: center;
  background: none; border: none;
  color: var(--ink);
  flex-shrink: 0;
}
/* テーマの button:focus / button:hover(0,1,1) は地を #c36・文字を白にする。
   パネルを閉じるとフォーカスがこのボタンへ戻るため、スマホで一度メニューを
   開け閉めすると、ピンクの四角に白い線が残っていた（2026-09 まで本番で発生）。 */
.nav-toggle:hover,
.nav-toggle:focus { background: none; color: var(--ink); }
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  content: '';
  display: block; position: absolute;
  width: 20px; height: 1.5px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.28s ease, opacity 0.2s ease;
}
.nav-toggle-bar { position: relative; }
.nav-toggle-bar::before { top: -6px; }
.nav-toggle-bar::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after { transform: translateY(-6px) rotate(-45deg); }

.nav-panel {
  position: fixed; z-index: 49;
  top: var(--gp-nav-h, 56px); left: 0; right: 0;
  display: flex; flex-direction: column;
  padding: 8px max(20px, 4vw) 20px;
  background: rgba(255, 251, 241, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--rule);
  box-shadow: 0 18px 40px rgba(42, 36, 24, 0.12);
  opacity: 0; visibility: hidden;
  transform: translateY(-10px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.nav-panel.open { opacity: 1; visibility: visible; transform: none; }
/* 開いた直後にフォーカスを受け取るためだけの tabindex なので、枠は出さない。
   リンク側のフォーカスリングはブラウザ既定のまま残す。 */
.nav-panel:focus { outline: none; }
.nav-panel a {
  font-family: var(--serif);
  font-size: 16px; letter-spacing: 0.1em;
  color: var(--ink); --gp-fg: var(--ink);
  padding: 15px 4px;              /* 行の高さを 48px 以上にする */
  border-bottom: 0.5px solid var(--rule);
}
.nav-panel a:last-child { border-bottom: none; }
.nav-panel a[aria-current="page"] { color: var(--mimosa-ink); }

.nav-backdrop {
  position: fixed; inset: 0; z-index: 48;
  background: rgba(42, 36, 24, 0.28);
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }

/* パネルを開けている間は背後を動かさない。スクロールでヘッダーが上へ
   逃げる（.nav.hide）ので、開いている間だけ引き止める。 */
html.gp-nav-open,
html.gp-nav-open body { overflow: hidden; }
html.gp-nav-open .nav.hide { transform: none; }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  body .nav-links { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-panel, .nav-backdrop,
  .nav-toggle-bar, .nav-toggle-bar::before, .nav-toggle-bar::after { transition: none; }
}

/* ===== 8. 本文のリンク（GitPress 管理外のページ） =========================
   policy やブログ記事の本文は common.css を読まないので、リンクがテーマの #c36・
   下線なしのままになる。色だけでは本文と見分けにくいので、下線を付けてサイトの色にする。
   GitPress の固定ページ（.gpy-page）はボタン型のリンクが多いので外す。 */
body:not(.gpy-page) .page-content a:not(.wp-block-button__link) {
  color: var(--mimosa-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body:not(.gpy-page) .page-content a:not(.wp-block-button__link):hover,
body:not(.gpy-page) .page-content a:not(.wp-block-button__link):focus {
  color: var(--ink);
  text-decoration-thickness: 2px;
}