/* ヘッダー。配色／一部余白はブロック設定で指定。 */

/* トップバー */
.site-topbar .inner { display: flex; justify-content: space-between; align-items: center; max-width: 1320px; margin: 0 auto; padding: 9px 32px; }
.site-topbar .info { margin: 0; font-size: 12px; letter-spacing: 0.04em; }
.site-topbar .topbar-util .wp-block-navigation__container { gap: 22px; }
.site-topbar .topbar-util a { font-size: 12px; letter-spacing: 0.04em; opacity: 0.9; padding: 0; }
.site-topbar .topbar-util a:hover { opacity: 1; }

/* ヘッダーバー */
.site-header { border-bottom: 1px solid #ececec; position: sticky; top: 0; z-index: 50; }
.site-header .inner { display: flex; justify-content: space-between; align-items: center; gap: 32px; max-width: 1320px; margin: 0 auto; padding: var(--wp--custom--header-pad-y, 16px) var(--gutter); }
.site-header .brand-mark { margin: 0; }
.site-header .brand-mark img { height: var(--wp--custom--logo-header, 32px); width: auto; }
.site-header .brand-mark a { display: inline-flex; }

/* グローバルナビ（デスクトップ） */
.site-nav { flex: 1 1 0; min-width: 0; }
.site-nav .wp-block-navigation__container { display: flex; gap: clamp(16px, 2vw, 32px); justify-content: center; flex-wrap: nowrap; }
.site-nav .wp-block-navigation-item__content { font-size: 13px; font-weight: var(--wp--custom--nav-weight, 500); letter-spacing: 0.04em; padding: 10px 0; position: relative; white-space: nowrap; }
/* core/navigation の color:inherit ルール（詳細度 0,3,0）に勝たせるため二重クラスで指定。 */
.site-header .site-nav .wp-block-navigation-item__content.wp-block-navigation-item__content { color: var(--wp--custom--nav-color, #000); }
.site-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--aureate); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; }
.site-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* CTA ＋ ハンバーガーの枠（gap 8px）。予約エリアをヘッダー全高まで伸ばすため自身も stretch。 */
.nav-actions { display: flex; align-items: center; gap: 8px; align-self: stretch; }

/* 予約エリア: アイコン＋下ラベルの2項目（レストラン予約／宿泊予約）を縦罫線で仕切る。
   枠ボックスは使わず、ヘッダー高さを増やさない（アイコン＋1行ラベル＝ロゴ高以内）。
   ホバーで淡い背景＋ブランドアクセント色に。色は --aureate で子テーマが自動切替。 */
.nav-cta { display: flex; align-items: stretch; align-self: stretch; }
/* ホバー領域を上下端まで広げる: flex の stretch 高さ ＝ 親の高さ − margin なので、
   ヘッダー縦パディング分のネガティブ margin で項目をヘッダー全高まで伸ばす。
   高さは padding ではなく親（ロゴ高）で決まるので、ラベルが折返してもヘッダー高は不変。 */
.nav-cta__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; width: 104px; padding-inline: 6px; margin-block: calc(-1 * var(--wp--custom--header-pad-y, 16px)); text-decoration: none; color: var(--wp--custom--nav-color, var(--text, #1a1a1a)); border-left: 1px solid var(--wp--preset--color--line, #e4e4e4); transition: background-color 0.2s, color 0.2s; }
.nav-cta__item:last-child { border-right: 1px solid var(--wp--preset--color--line, #e4e4e4); }
.nav-cta__item:hover { background: rgba(0, 0, 0, 0.04); color: var(--aureate); text-decoration: none; }
.nav-cta__icon { display: inline-flex; }
.nav-cta__icon svg { width: 20px; height: 20px; display: block; }
/* ラベルは折返し可（英語 "Reserve a Table" 等）。高さはロゴ高で固定なのでヘッダー高に影響しない。
   word-break:keep-all で日本語（レストラン予約）は語中で改行させず、英語は半角スペースで折り返す。 */
.nav-cta__label { font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body)); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; text-align: center; text-wrap: balance; word-break: keep-all; }

/* 1024px 以下: 横ナビとトップバーを隠してハンバーガーに切替。 */
@media (max-width: 1024px) {
  .site-topbar { display: none; }
  .site-header .inner > .site-nav { display: none !important; }
}

@media (max-width: 700px) {
  .site-header .inner { padding: 8px 16px; gap: 10px; }
  /* SP は幅を詰め、縦方向は SP のヘッダー py(8px)に合わせて広げる。 */
  .nav-cta__item { width: 78px; padding-inline: 4px; margin-block: -8px; }
  /* 狭い端末でも「レストラン予約」が1行で収まるよう SP のみ少し小さく。 */
  .nav-cta__label { font-size: 9px; letter-spacing: 0.01em; }
}