@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&display=swap');
/* 改版共用樣式（volleyhouse）：每一頁最後載入，蓋過原本的配色與頂列。
   方向：一份排球館開館企劃書。紙色底、深藍墨字，排球黃只當重點色；只有開場動畫與 3D 全螢幕用深藍。
   各頁自己的細節放在 css/vh-<頁>.css */
:root {
  --vh-paper: #f6f2ea;
  --vh-surface: #fffdf9;
  --vh-ink: #13233a;
  --vh-ink-2: #3d4a5f;
  --vh-muted: #5f6879;   /* 紙色上 5.0:1、卡片上 5.5:1 */
  --vh-line: #e3dccd;
  --vh-ball: #f2b705;
  --vh-ball-ink: #13233a;
  --vh-navy: #13233a;
  --vh-navy-2: #1c3352;
  --vh-court: #3e7f67;
  --vh-ok: #2e7d5b;
  --vh-warn: #9a6418;    /* 白字 5.0:1 */
  --vh-danger: #b4432f;
  --vh-ok-bg: #e7f2ec;
  --vh-warn-bg: #f8efdc;
  --vh-danger-bg: #f6e4df;
  --vh-font: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  --vh-num: "Oswald", "Noto Sans TC", system-ui, sans-serif;
  --vh-r: 10px;
  --vh-shadow: 0 1px 2px rgba(19, 35, 58, .06), 0 8px 24px -12px rgba(19, 35, 58, .18);
}

/* ───── 頂列（.sitebar：規劃、比賽辨識、清單、評估；首頁的 .topbar 另在 vh-index.css）───── */
.sitebar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  min-height: 56px; display: flex; align-items: center; gap: 16px; flex-wrap: nowrap;
  padding: 0 max(16px, env(safe-area-inset-right, 0px)) 0 max(16px, env(safe-area-inset-left, 0px));
  background: color-mix(in srgb, var(--vh-paper) 94%, transparent) !important;
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--vh-line) !important;
  color: var(--vh-ink) !important; box-shadow: none !important;
}
.sitebar .brand { display: inline-flex; align-items: center; color: var(--vh-ink) !important; font-weight: 900; font-size: 15px; letter-spacing: .04em; white-space: nowrap; text-decoration: none; }
.sitebar .brand .dot { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6cf 0 18%, var(--vh-ball) 19% 100%) !important; box-shadow: inset 0 0 0 1.5px var(--vh-ink) !important; }
.sitebar nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; font-size: 14px; color: var(--vh-muted); white-space: nowrap; min-width: 0; }
.sitebar nav > span { color: var(--vh-muted); font-size: 12px; }
.sitebar nav a { color: var(--vh-ink-2) !important; text-decoration: none; border-radius: 999px; padding: 4px 12px; background: transparent !important; font-weight: 500; }
.sitebar nav a:hover { color: var(--vh-ink) !important; background: color-mix(in srgb, var(--vh-ink) 6%, transparent) !important; }
.sitebar nav a.on { background: var(--vh-ball) !important; color: var(--vh-ball-ink) !important; font-weight: 700; }
.sitebar .grow { flex: 0 0 0; }
.sitebar .back, .sitebar a.back { color: var(--vh-ink-2) !important; background: transparent !important; border: 1px solid var(--vh-line) !important; border-radius: 999px; padding: 5px 14px; font-size: 13.5px; white-space: nowrap; text-decoration: none; }
.sitebar .back:hover { border-color: var(--vh-ink) !important; color: var(--vh-ink) !important; }
/* 回首頁、上一頁收進「全部功能」選單（allnav.js），頂列只留品牌、步驟、選單 */
.sitebar .back { display: none !important; }
@media (max-width: 720px) {
  .sitebar { gap: 10px; }
  .sitebar .back { display: none !important; }
  .sitebar nav { font-size: 13px; overflow: hidden; }
  .sitebar nav > span, .sitebar nav a:not(.on) { display: none; }
}
@media (max-width: 380px) { .sitebar .brand { font-size: 0; } .sitebar .brand .dot { margin: 0; width: 20px; height: 20px; } }

/* 「全部功能」按鈕與選單（allnav.js 產生） */
.allnav-btn, [data-allnav], .sitebar button { font-family: var(--vh-font); }

/* 焦點看得到 */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--vh-ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}