/* ==========================================================================
   components-header.css：ヘッダーとグローバルナビ
   目的：ヘッダー（ロゴ＋グローバルナビ）の見た目をここで完結
   方針：
   - 見た目はここで完結
   - レイアウト骨格は layout.css 側の責務
   ========================================================================== */

/* ==========================================================================
   01) Layout（ヘッダー枠）
   ========================================================================== */

.l-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--header-z);

  background-color: rgba(255, 255, 255, 1);

  transition:
    background-color 620ms ease,
    box-shadow 620ms ease;
}

body.admin-bar .l-header {
  top: 32px;
}

body.is-header-compact .l-header {
  background-color: rgba(255, 255, 255, 0.9); /* 🌹 ヘッダーの透明感 */
  box-shadow: var(--header-shadow);
}

/* 縮小のアニメーション（ガクッ防止） */
.l-header,
.l-header__row {
  transition:
    box-shadow 620ms ease,
    padding 620ms ease;
}

body.is-header-compact .l-header__row {
  padding-top: calc(var(--header-row-pad-top) * 0.3);
  padding-bottom: calc(var(--header-row-pad-bottom) * 0.3);
}

body {
  padding-top: var(--header-fixed-h, 0px);
}

body.is-header-compact {
  --logo-height: 34px; /* ここは後で調整 */
}

.l-header__inner {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  max-width: var(--container-max);
  padding-inline: var(--container-pad-x);
}

.l-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--header-row-pad-top);
  padding-bottom: var(--header-row-pad-bottom);
}

/* ==========================================================================
   02) Header Component（ロゴ）
   ========================================================================== */

.c-header__logo {
  text-align: center;
  margin: 0;
  transform: translateY(
    var(--logo-offset-y)
  ); /* ✅ Yはflex-item（ロゴ箱）を動かす */
}

.c-header__logoLink {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  color: var(--logo-color);
}

.c-header__logoSvg {
  display: block;
  height: var(--logo-height);
  width: auto;

  transform: translateX(var(--logo-offset-x));
  color: var(--logo-fill);

  transition: height 620ms ease; /* ← 縮小アニメーション */
}

/* SVG内の全図形を同色にする */
.c-header__logoSvg * {
  fill: currentColor;
  stroke: currentColor;
}

/* ==========================================================================
   03) Global Nav（メニュー）
   ========================================================================== */

.c-nav__list {
  display: flex;
  gap: var(--nav-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-nav__list a,
.c-nav__list .global-nav-name {
  font-size: var(--nav-font-size);
  font-weight: var(--nav-font-weight);
  color: var(--nav-color);
  text-decoration: none;
}

.c-nav__list a:hover,
.c-nav__list a:hover .global-nav-name {
  color: var(--nav-hover-color);
}

.c-nav__list > li > a {
  position: relative;
  display: inline-block;
  padding: var(--nav-link-pad-y) var(--nav-link-pad-x);
}

.c-nav__list > li > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: var(--nav-underline-height);
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--nav-underline-duration) ease-out;
}

.c-nav__list > li > a:hover::after {
  transform: scaleX(1);
  transition: transform var(--nav-underline-duration) ease-in;
}

.c-nav__list > li.current-menu-item > a::after,
.c-nav__list > li.current_page_item > a::after {
  transform: scaleX(1);
}

.c-nav__label {
  font-weight: 600;
}