/* =========================================================
   Advent Cosplay — Header (fixed layout)  [MENUボタン版]
   ========================================================= */

:root{
  --nav-accent: #80275c;
  --nav-bg: rgba(255,255,255,.78);
  --nav-shadow: 0 6px 18px rgba(0,0,0,.10);
  --nav-shadow-hover: 0 12px 26px rgba(0,0,0,.18);
}

/* ===== ヘッダー共通 ===== */
.site-header{
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  position: relative;
  z-index: 20;
}
.header-inner{
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: clamp(12px, 2vw, 20px) 16px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: clamp(12px, 1.6vw, 18px);
}

/* タイトルロゴ（画像は視覚外に退避） */
.brand-link{
  display: block;
  margin: 0 auto;
  width: min(92vw, 980px);
  aspect-ratio: 2600 / 520;
  background-image: url("https://adventcosplay.com/wp-content/uploads/2025/10/title_logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  line-height: 0;
}
.brand-img{
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

/* ===== PCナビ ===== */
.global-nav{
  width: 100%;
  margin: 0 auto;
}
.gn-list{
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: min(1280px, 96vw);
  display: grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: clamp(10px, 1.6vw, 18px);
  align-items: stretch;
}
.gn-list > li{ margin: 0; }
.gn-list a{
  display: grid;
  place-items: center;
  row-gap: 6px;
  width: 100%;
  padding: clamp(12px, 1.6vw, 16px) clamp(18px, 2.4vw, 28px);
  text-decoration: none;
  border-radius: 16px;
  border: 3px solid var(--nav-accent);
  background: var(--nav-bg);
  color: var(--nav-accent);
  box-shadow: var(--nav-shadow);
  transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.gn-jp{ display:block; font-size: 12px; letter-spacing: .18em; color: rgba(0,0,0,.55); }
.gn-en{ display:block; font-family: var(--font-heading-en,'Train One',sans-serif); font-size: clamp(22px, 2.4vw, 34px); line-height: 1; font-weight: 700; letter-spacing: .02em; }
.gn-list a:hover,
.gn-list a:focus-visible{
  background: var(--nav-accent);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--nav-shadow-hover);
}
.gn-list a:hover .gn-jp,
.gn-list a:hover .gn-en,
.gn-list a:focus-visible .gn-jp,
.gn-list a:focus-visible .gn-en{ color:#fff; }
.gn-list li.current-menu-item > a,
.gn-list li.current_page_item > a{ background: var(--nav-accent); color:#fff; }

/* ===== トグルボタン（初期は非表示：モバイルで表示） ===== */
.nav-toggle{
  display: none;
  appearance: none;
  border: 2px solid var(--nav-accent);
  background: rgba(255,255,255,.86);
  color: var(--nav-accent);
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  box-shadow: var(--nav-shadow);
}
.nav-toggle:focus-visible{ outline: 2px solid var(--nav-accent); outline-offset: 2px; }
/* 旧ハンバーガー線は使わない */
.nav-toggle__bar{ display: none; }

/* ---------------------------------------------
   レスポンシブ
--------------------------------------------- */

/* 1200px 未満：3列 */
@media (max-width: 1200px){
  .gn-list{ grid-template-columns: repeat(3, minmax(160px, 1fr)); }
}

/* 960px 未満：モバイルドロワー＋MENUボタン */
@media (max-width: 960px){

  /* MENUテキストボタン */
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 92px;
    height: 40px;
    padding: 8px 14px;
    font-size: 14px;      /* ← 文字を見せる */
    line-height: 1;
  }
  .nav-toggle .nav-label{
    font-family: var(--font-heading-en,'Train One',system-ui,sans-serif);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .18em;
    color: var(--nav-accent);
  }
  .nav-toggle[aria-expanded="true"]{
    background: var(--nav-accent);
    color: #fff;
  }
  .nav-toggle[aria-expanded="true"] .nav-label{ color:#fff; }

  /* ドロワー本体（右スライド） */
  .global-nav{
    position: fixed;
    inset: 0 0 0 auto;               /* 右側から */
    width: min(82vw, 360px);
    height: 100dvh;
    background: rgba(255,255,255,.96);
    box-shadow: -8px 0 24px rgba(0,0,0,.12);
    transform: translateX(100%);     /* 初期は隠す */
    transition: transform .28s ease;
    z-index: 1100;
    padding: 72px 20px 24px;
    display: block;
  }
  .global-nav.is-open{ transform: translateX(0); }

  /* 背面スクリーン */
  .nav-scrim{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
    z-index: 1090;
  }

  /* 1列ボタン */
  .gn-list{
    width: min(720px, 94vw);
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .gn-list a{ border-radius: 14px; padding: 14px 16px; }

  /* aria-expanded でも開く（JS保険） */
  .nav-toggle[aria-expanded="true"] ~ .header-tools .global-nav{ transform: translateX(0); }
  .nav-toggle[aria-expanded="true"] ~ .header-tools .nav-scrim{ opacity: 1; pointer-events: auto; }
}

/* PC 保険 */
@media (min-width: 961px){
  .nav-toggle{ display: none; }
  .global-nav{ transform:none; position: static; height:auto; box-shadow:none; padding:0; }
}

/* videos ページ専用（必要なら） */
body.page-slug-videos .site-header,
body.page-slug-videos .site-header .header-inner {
  background: transparent;
  box-shadow: none;
}
body.page-slug-videos .brand-img { filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); }