/* ================================
   menus.css  (Trippon-Japan)
   - Multilingual Menu Gallery専用の調整
   - 2025-11-12
================================ */

/* フォントと配色は共通style.cssに依存 */

/* ===== 固定ヘッダー分の余白調整 ===== */
.page-title {
  display: block;
  padding-top: calc(var(--header-h, 72px) + 40px);
  margin: 0 0 24px;
  font-weight: 700;
}

/* ===== フィルターエリア ===== */
.filters {
  position: sticky;
  top: calc(var(--header-h, 72px));
  z-index: 40;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: saturate(1.2) blur(6px);
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* ===== レイアウト補助 ===== */
main.container {
  padding-bottom: 80px;
}

.layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
@media (max-width: 980px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .map-card {
    order: -1;
  }
}

/* ヘッダー分の余白を強制（他のルールに勝つ） */
body > h1.page-title{
  padding-top: calc(var(--header-h, 72px) + 32px) !important; /* 必要に応じて +32→+40 */
  margin-top: 0 !important;
  display: block;
}

#header-spacer{ height: 0; } /* JSで高さを入れる */

/* === Menus page: header vertical alignment fix === */
/* 他ページと同じ縦リズムに強制する */
:root { --header-h: 72px; } /* 他ページと同じ値に。必要なら 76〜80 に微調整可 */

header{
  padding-top: 20px !important;
  padding-bottom: 20px !important;  /* ← ここで上下の余白を確保 */
  /* 既存の position:sticky / border などは style.css を使用 */
}

.header-inner{
  min-height: var(--header-h) !important;
  padding: 0 !important;            /* ここで二重パディングを避ける */
  display: flex;
  align-items: center;               /* ロゴ・ナビ・CTAを垂直中央に */
  gap: 16px;
}

.header-inner h1{ margin: 0 !important; }
.header-inner h1 a{ line-height: 1; display: block; } /* 行高の影響を排除 */
.main-nav a{ line-height: 1; }                        /* アンカーの行高も固定 */

/* ---- Hard override: header vertical rhythm on /menus/ ---- */
body > header{
  padding-block: 20px !important;   /* 上下の余白をハッキリ確保（必要なら 20〜24pxで微調整） */
  min-height: var(--header-h, 72px) !important;
}

body > header .header-inner{
  padding: 0 !important;            /* 二重paddingを排除 */
  min-height: 0 !important;         /* min-heightで押し上げられないように */
  display: flex;
  align-items: center !important;   /* 中央に揃える */
  gap: 16px;
}

body > header h1{ margin: 0 !important; }
body > header h1 a{ display:block; line-height:1 !important; }
body > header .main-nav a{ line-height:1 !important; }

/* ヘッダーの外側に余白が付いていないかの保険 */
html, body { margin-top: 0 !important; }