/* ============================================================
   header.css — volto shared header & drawer base

   モバイル優先の共通定義のみを集めています。
   ページごとに違う値（padding / transition / z-index /
   .past-hero / .scrolled / .menu-btn / PC レイアウト）は
   各ページの inline <style> に残しています。

   既存の以下のファイルとは役割を分担:
     - assets/menu-btn.css    … ハンバーガーアイコンの統一スタイル
     - assets/header-fade.css … PC スクロール時のフェード
     - assets/header-fade.js  … 同上の JS 制御

   読み込み順:
     1. tokens.css   （変数）
     2. base.css     （リセット + .page）
     3. header.css   （ここ：ヘッダー & ドロワーの共通base）
     4. <style>      （ページ固有の override）
   ============================================================ */

/* ===== Header (mobile base) ===== */
.header{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 520px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  padding: 16px 22px;
  border: 0;
  box-shadow: none;
}

.header .brand{
  display: inline-flex;
  align-items: center;
  line-height: 0;
  /* transition: opacity .5s ease; はページごとに有無が違うので残す */
}

.header .brand img{
  height: 26px;
  width: auto;
  display: block;
}

.header .brand.is-hidden{
  opacity: 0;
  pointer-events: none;
}

.header .pc-nav{ display: none; }

/* ===== Drawer (mobile base) =====
   z-index / transition / flex-direction はページ固有の差があるため
   ここでは設定しません（各ページの <style> で指定）。 */
.drawer{
  position: fixed;
  inset: 0;
  max-width: 520px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(-100%);
  padding: 22px 26px 40px;
}

.drawer.open{ transform: translateY(0); }

.drawer .top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
}

.drawer .brand{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.drawer .brand img{
  height: 32px;
  width: auto;
  display: block;
}

.drawer nav{
  display: flex;
  flex-direction: column;
  gap: 34px;
}

/* ============================================================
   PC layout (>=768px) — shared header navigation
   全ページで共通の PC ナビ。typography は TOP に揃えてあります。
   ページごとに違うのは color / position / 背景 のみ。
   ============================================================ */
@media (min-width: 768px){
  /* PC ヘッダー：viewport 全幅 + paper 背景 + ink ナビで全ページ統一 */
  .header{
    max-width: none;
    width: 100%;
    left: 0;
    right: auto;
    transform: none;
    background: var(--paper);
    padding: 22px clamp(40px, 5vw, 80px);
  }

  /* PC ではハンバーガーを隠し、横並びナビを表示
     !important は philosophy のように menu-btn.css を読み込まないページの
     inline mobile rule (display: grid 等) に勝つために必要 */
  .header .menu-btn{ display: none !important; }

  .header .brand img{ height: 28px; }

  .header .pc-nav{
    display: flex;
    align-items: center;
    gap: 52px;
    margin-left: auto;
    color: var(--ink);
  }
  .header .pc-nav a{
    font-family: var(--jp);
    font-weight: 400;
    font-size: 13px;
    line-height: 1;
    letter-spacing: 0.05em;
    padding: 6px 0;
    color: var(--ink);
    text-decoration: none;
    transition: opacity .25s ease;
  }
  .header .pc-nav a:hover{ opacity: 0.75; }

  /* PC ではドロワーは不要（ハンバーガー経由で開かない） */
  .drawer{ display: none !important; }
}