/* 公開ページ共通 CSS（change0916 Task 2.3 / 2.6）。
   base.html を継承しない公開ページ（/ ・ /features ・ /guide ・ /learning-methods）で共有する。
   - .hx-pnav-* : templates/partials/_public_nav.html（共通ナビ）
   - .hx-sup-*  : templates/partials/_supervisor_admin.html（監修者の管理者プレビューカード）
   ページ側の CSS 変数に依存せず、ここで色を自己完結させる（値は style.css / about.html のブランド色と同じ）。 */

/* ── 共通ナビ ─────────────────────────────────────────────────────────── */
.hx-pnav {
  --hx-pnav-bg: rgba(11, 21, 40, .82);
  --hx-pnav-text: #f2f6fb;
  --hx-pnav-muted: #8495af;
  --hx-pnav-line: rgba(132, 165, 207, .25);
  --hx-pnav-blue: #2b6bf2;
  position: sticky; top: 0; z-index: 100;   /* 流れの中に置く（ベータバナーを隠さない）。スクロールで上に貼り付く */
  box-sizing: border-box;
  min-height: 68px;
  padding: .8rem max(1.25rem, calc((100vw - 1180px) / 2));
  display: flex; align-items: center; gap: 1.2rem;
  border-bottom: 1px solid rgba(43, 107, 242, .11);
  color: var(--hx-pnav-text);
  background: var(--hx-pnav-bg);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  font-family: "DM Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
}
.hx-pnav *, .hx-pnav *::before, .hx-pnav *::after { box-sizing: border-box; }
.hx-pnav a { text-decoration: none; }
.hx-pnav-brand { display: inline-flex; align-items: center; gap: .65rem; margin-right: .5rem; color: var(--hx-pnav-text); flex: 0 0 auto; }
.hx-pnav-brand:hover { color: var(--hx-pnav-text); }
.hx-pnav-logo { width: 25px; height: 34px; flex: 0 0 auto; }
.hx-pnav-name { font: 700 1.26rem Outfit, sans-serif; letter-spacing: -.02em; }
.hx-pnav-page { margin-left: .15rem; padding-left: .8rem; border-left: 1px solid var(--hx-pnav-line); color: var(--hx-pnav-muted); font-size: .7rem; letter-spacing: .08em; }
.hx-pnav-links { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 1.2rem; }
.hx-pnav-links a { color: var(--hx-pnav-muted); font-size: .78rem; white-space: nowrap; }
.hx-pnav-links a:hover, .hx-pnav-links a[aria-current="page"] { color: var(--hx-pnav-text); }
.hx-pnav-cta {
  flex: 0 0 auto; min-height: 40px; padding: .62rem 1rem; display: inline-flex; align-items: center;
  border-radius: 9px; color: #fff !important; background: var(--hx-pnav-blue);
  font-size: .78rem; font-weight: 600; white-space: nowrap;
  transition: transform .2s, box-shadow .2s;
}
.hx-pnav-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 25px rgba(43, 107, 242, .35); }
.hx-pnav :focus-visible { outline: 3px solid rgba(0, 212, 255, .72); outline-offset: 3px; }

@media (max-width: 1080px) { .hx-pnav-links { gap: .8rem; } }
@media (max-width: 900px) {
  /* スマートフォン幅: ロゴ＋CTA の行と、横スクロールできるリンク行の 2 段。リンクは隠さず、CTA は常に見える */
  .hx-pnav { flex-wrap: wrap; gap: .35rem 1rem; padding: .6rem 1rem .45rem; }
  .hx-pnav-brand { margin-right: 0; }
  .hx-pnav-cta { order: 2; margin-left: auto; min-height: 38px; padding: .5rem .85rem; }
  .hx-pnav-links {
    order: 3; flex: 1 0 100%; margin: 0 -1rem; padding: 0 1rem; gap: .1rem;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .hx-pnav-links::-webkit-scrollbar { display: none; }
  .hx-pnav-links a { padding: .5rem .55rem; font-size: .8rem; }
  .hx-pnav-links a:first-child { padding-left: 0; }
}
@media (max-width: 720px) { .hx-pnav-page { display: none; } }
@media (prefers-reduced-motion: reduce) { .hx-pnav-cta { transition: none; } }
@media print { .hx-pnav { position: static; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* ── 監修者の管理者プレビューカード（show_supervisor のときだけ描画される） ─── */
.hx-sup-card {
  box-sizing: border-box; min-width: 0; padding: 1.5rem;
  border: 1px solid rgba(167, 139, 250, .34); border-radius: 16px;
  color: #f2f6fb; background: rgba(167, 139, 250, .07);
  font-family: "DM Sans", "Noto Sans JP", "Yu Gothic UI", system-ui, sans-serif;
}
.hx-sup-kicker { display: block; color: #a78bfa; font: 600 .58rem Outfit, sans-serif; letter-spacing: .12em; }
/* 管理者専用 UI の Admin バッジ。Bootstrap 無しのページでも見えるようにここで描く */
.hx-sup-card .badge {
  display: inline-block; margin-left: .45rem; padding: .18rem .45rem; border-radius: 5px;
  color: #071527; background: #ffb347; font: 700 .55rem Outfit, sans-serif; letter-spacing: .06em; vertical-align: middle;
}
.hx-sup-title { margin: .7rem 0 .45rem; font: 700 1rem/1.5 Outfit, "Noto Sans JP", sans-serif; }
.hx-sup-name { margin: 0; color: #f2f6fb; font-size: .86rem; font-weight: 600; line-height: 1.6; }
.hx-sup-role { display: block; color: #8495af; font-size: .7rem; font-weight: 400; }
.hx-sup-note { margin: .6rem 0 0; color: #b9c5d6; font-size: .74rem; line-height: 1.75; }
.hx-sup-links { margin: .7rem 0 0; font-size: .74rem; font-weight: 600; }
.hx-sup-links a { color: #00d4ff; text-decoration: none; }
.hx-sup-links a:hover { color: #fff; text-decoration: underline; text-underline-offset: .22em; }
.hx-sup-foot { margin: .8rem 0 0; padding-top: .6rem; border-top: 1px dashed rgba(167, 139, 250, .3); color: #8495af; font-size: .66rem; line-height: 1.6; }