/* ================================================
   EIGHT CAFE — Common Site Header
   全ページ共通のグローバルナビゲーション
   ================================================ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px clamp(20px, 5vw, 60px);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid #E4ECEB;
  font-family: 'Noto Sans JP','Hiragino Sans','Yu Gothic',sans-serif;
}

/* Brand (左) */
.site-header .brand {
  display: flex; align-items: center; gap: 12px;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: #1F2A2A;
}
.site-header .brand-logo {
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid #0FB5B5; border-radius: 50%;
  font-family: 'Inter','Helvetica Neue',sans-serif;
  font-weight: 500; font-size: 15px; color: #0FB5B5;
  letter-spacing: 0;
}
.site-header .brand-text {
  display: flex; flex-direction: column; gap: 2px; line-height: 1;
}
.site-header .brand-mark {
  font-family: 'Inter','Helvetica Neue',sans-serif;
  font-weight: 400; font-size: 16px;
  letter-spacing: 0.16em; color: #1F2A2A;
}
.site-header .brand-jp {
  font-size: 10px; color: #67726F; letter-spacing: 0.22em;
}

/* Nav main (中央〜右) */
.site-header .nav-main {
  display: flex; align-items: center;
  gap: clamp(14px, 2.2vw, 32px);
}
.site-header .nav-main a {
  font-size: 13px; color: #1F2A2A;
  letter-spacing: 0.04em;
  position: relative; padding: 6px 0;
  text-decoration: none;
}
.site-header .nav-main a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: #0FB5B5;
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-header .nav-main a:hover::after { transform: scaleX(1); }
.site-header .nav-main a[aria-current="page"] { color: #0FB5B5; }
.site-header .nav-main a[aria-current="page"]::after { transform: scaleX(1); }

/* CTA (予約・お問い合わせ) */
.site-header .nav-main a.nav-cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 10px 16px 10px 20px; margin-left: 4px;
  background: #0FB5B5; color: #fff;
  border: 1px solid #0FB5B5; border-radius: 999px;
  font-size: 13px; letter-spacing: 0.04em;
  transition: background .25s, border-color .25s, transform .25s;
}
.site-header .nav-main a.nav-cta::after { display: none; }
.site-header .nav-main a.nav-cta .arrow {
  display: inline-flex; width: 22px; height: 22px;
  align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(255,255,255,0.22); color: #fff;
  font-size: 12px; transition: transform .25s;
}
.site-header .nav-main a.nav-cta:hover {
  background: #0A9595; border-color: #0A9595; transform: translateY(-1px);
}
.site-header .nav-main a.nav-cta:hover .arrow { transform: translateX(2px); }

/* Hamburger toggle (モバイル時のみ表示) */
.site-header .menu-toggle {
  display: none; background: none; border: none;
  width: 44px; height: 44px; padding: 11px;
  align-items: center; justify-content: center; flex-direction: column;
  cursor: pointer;
}
.site-header .menu-toggle span {
  display: block; width: 22px; height: 1px;
  background: #1F2A2A; margin: 5px 0;
  transition: transform .3s;
}

/* モバイル用ナビ展開 */
@media (max-width: 980px) {
  .site-header {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255,255,255,0.96);
  }
  .site-header .nav-main {
    display: none; flex-direction: column; gap: 22px;
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: #fff;
    padding: 32px clamp(20px, 5vw, 60px);
    align-items: stretch;
    border-top: 1px solid #E4ECEB;
    overflow-y: auto;
    z-index: 99;
  }
  .site-header .nav-main.open { display: flex; }
  .site-header .nav-main a { font-size: 16px; }
  .site-header .nav-main a.nav-cta {
    margin-left: 0; align-self: flex-start;
  }
  .site-header .menu-toggle { display: flex; }
  .site-header .menu-toggle.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-header .menu-toggle.open span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }
  body.menu-open { overflow: hidden; }
}

@media (max-width: 540px) {
  .site-header { padding: 12px 18px; }
  .site-header .brand { gap: 10px; }
  .site-header .brand-logo { width: 28px; height: 28px; font-size: 13px; }
  .site-header .brand-mark { font-size: 13px; letter-spacing: 0.14em; }
  .site-header .brand-jp { font-size: 9px; letter-spacing: 0.18em; }
}