/* header.css */

:root {
  --header-height: 60px; /* ヘッダー高さ */
}

/* スムーズスクロール＋ヘッダー分の余裕を確保 */
html {
  scroll-behavior: smooth;                  /* スムーズスクロール */
  scroll-padding-block-start: var(--header-height); /* 固定ヘッダー分だけずらす */
}

/* ヘッダー共通 */
.main-header {
  text-align: center;
  position: fixed;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-height);
  padding: 0 1rem;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 1000;
}

/* ロゴ */
.header-logo .logo {
  width: clamp(40px, 6vmin, 60px);
  height: auto;
}

/* タイトル */
.header-title {
  text-align: center;
}
.header-title h1 {
  font-size: clamp(1rem, 3vw, 1.5rem);
  margin: 0;
  white-space: nowrap;
}

/* ナビ（タグリンク） */
.header-nav {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  flex-wrap: wrap; /* モバイルで折り返しOK */
}

.tag-btn {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: #007acc;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  font-size: clamp(0.8rem, 2vw, 1rem);
  transition: background 0.2s;
}

.tag-btn:hover,
.tag-btn.active {
  background: #005577;
}

/* 本文をヘッダー下にずらす */
.container {
  padding-top: var(--header-height);
}

/* モバイル用調整 */
@media screen and (max-width: 600px) {
  .main-header {
    grid-template-columns: auto 1fr;
    grid-template-rows: var(--header-height) auto;
    height: auto;
    padding: 0.5rem 0.5rem;
    row-gap: 0.4rem;
  }

  /* ヘッダー左側：ロゴサイズをさらに小さく */
  .header-logo .logo {
    width: clamp(24px, 10vmin, 36px);
  }

  /* タイトル：必ず１行に収まるように最小をさらに下げ、大きさを自動調整 */
  .header-title h1 {
    font-size: clamp(0.8rem, 7vw, 1.2rem);
    white-space: nowrap; /* 改行を禁止 */
  }
  
  /* ナビボタンは折り返して中央寄せ */
  .header-nav {
    grid-column: 1 / span 2;
    justify-content: center;
  }
}