/* 下層ページのヘッダー：iPhone の Safari（26 以降）だけの作り（_inc/header.php が html に pf-sub を付けたときだけ効く）

   iOS 26 の Safari は、画面の上端に接する「固定（fixed）の部品」があると、時計・電池の部分を単色で塗りつぶす。
   そこで、ヘッダーの帯をやめて、ロゴとメニューのボタンだけを、端から離した小さな固定の部品にする（右下のクッキーのボタンと同じ考え方）。
   端から離れた小さな部品なら、塗りつぶされない。スクロールで隠したり出したりも、しない。パソコンやほかのブラウザは、今までどおり。

   試してやめた方法（2026-11-13。どれも実機で確かめた）
   - ヘッダーを上へ隠す（translateY(-100%)）だけ：隠れたヘッダーが時計の裏にいるので、塗りつぶしが消えない
   - ヘッダーを absolute にして、CSS のスクロール連動アニメーションで動かす：時計の裏は透けたが、上へスクロールするとカタカタ揺れた
     （animation-range を px で決めても直らず、かえって揺れた）
   - ヘッダーを sticky で留める：揺れないが、時計の裏が塗りつぶされた（sticky でも帯になる） */

/* ヘッダーの枠は、固定しない。色も線もなくして、ページのいちばん上に置くだけにする。
   transform と backdrop-filter は外す（付いていると、中の固定の部品が、画面ではなくこの枠を基準にしてしまう） */
html.pf-sub .site-header,
html.pf-sub body.header-hidden:not(.menu-open) .site-header {
  position: absolute;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transform: none;
  transition: none;
}
html.pf-sub .header-nav { display: none; }   /* 横向きで幅が広くなっても、ナビは出さない（メニューのボタンから開く） */

/* メニューのボタン：暗い半透明の地を付けた、丸い固定の部品（右下のクッキーのボタンと同じ見た目）。白いページの上でも見える */
html.pf-sub .site-header .header-right {
  position: fixed;
  top: 6px;   /* 上に詰める。Safari では、この上に時計・電池の部分があるので、それが余白になる。0 にはしない（端に接すると、帯になる） */
  right: 12px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: rgba(5,8,16,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 50%;
}
/* ロゴ：枠で囲わず、トップ（css/style.css の .logo::before）と同じように、うしろをぼかして暗くなじませる。
   白いページの上でも白い文字が読めるように、トップより少し濃くしてある */
html.pf-sub .site-header .logo {
  position: fixed;
  top: 8px;
  left: 18px;
  isolation: isolate;
  text-shadow: 0 0 12px rgba(0,0,0,0.6);
}
html.pf-sub .site-header .logo::before {
  content: "";
  position: absolute;
  inset: -20px -40px;
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  background: radial-gradient(ellipse at center, rgba(5,8,16,0.62) 20%, rgba(5,8,16,0.36) 55%, rgba(5,8,16,0) 85%);
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 35%, transparent 80%);
}
/* メニューを開いている間は、地を消す（メニューの暗い背景の上に、そのまま乗せる） */
html.pf-sub body.menu-open .site-header .header-right {
  background: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html.pf-sub body.menu-open .site-header .logo::before { display: none; }

/* 白背景版（記事のページ）のスマホ：ヘッダーの帯がなくなったので、上の暗いすき間も白にする。
   body の上の余白をなくして、白い枠（.wrap）をページのいちばん上から始める。空きは、枠の中の余白に足す（ロゴとボタンを上に詰めたぶん、少しせまくして 78px）。
   ページの地の色も白にする（Safari は、いちばん上で時計の裏に、この色を出す） */
@media (max-width: 640px) {
  html.pf-sub.theme-light body { padding-top: 0; background-color: #fff; }
  html.pf-sub.theme-light .wrap { padding-top: 78px; }
}

/* 白背景版では、ロゴを暗い文字にして、うしろは白くぼかす（白い面に、暗いにじみを作らない）。
   メニューを開いている間は、メニューの暗い背景に合わせて、白い文字に戻す */
html.pf-sub.theme-light body:not(.menu-open) .site-header .logo {
  color: #0a1220;
  text-shadow: 0 0 10px rgba(255,255,255,0.9);
}
html.pf-sub.theme-light .site-header .logo::before {
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.78) 20%, rgba(255,255,255,0.5) 55%, rgba(255,255,255,0) 85%);
}

/* ロゴとボタンを上に詰めたぶん、暗い背景のページも、本文の始まりを少し上げる（css/nav.css は 96px） */
@media (max-width: 768px) {
  html.pf-sub:not(.theme-light) body { padding-top: 84px; }
}