/* =========================================================
   Common Header (Program-like)
   Scope: .mvgTopNav only
   ========================================================= */

:root{
  --mvg-navH: 60px;
  --mvg-ink: #111827;
  --mvg-accentRGB: 127,147,169; /* silver (PROGRAM寄り) */
}

.mvgTopNav{
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--mvg-navH);
  z-index: 1200;

  display:flex;
  align-items:center;
  justify-content:space-between;

  padding: 0 24px;
  padding-left: calc(24px + env(safe-area-inset-left));
  padding-right: calc(24px + env(safe-area-inset-right));

  background: rgba(255,255,255,.72);
  border-bottom: 1px solid rgba(17,24,39,.08);
  box-shadow: 0 16px 40px rgba(15,23,42,.06);

  backdrop-filter: blur(6px) saturate(112%);
  -webkit-backdrop-filter: blur(6px) saturate(112%);
}

.mvgTopNav .brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color: var(--mvg-ink);
}

.mvgTopNav .brandLogo{
  height:22px;
  width:auto;
  display:block;
}

.mvgTopNav .mvgNavRight{
  display:flex;
  align-items:center;
  gap:10px;
}

.mvgTopNav .navMenu{
  display:flex;
  align-items:center;
  gap:10px;
  margin-right:14px;
}

.mvgTopNav .navLink{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  height:34px;
  padding:0 12px;
  border-radius:999px;

  text-decoration:none;
  font-size:12px;
  letter-spacing: .42em;
  text-transform: uppercase;

  color: rgba(17,24,39,.62);
  transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}

.mvgTopNav .navLink:hover{
  background: rgba(var(--mvg-accentRGB), .10);
  color: rgba(17,24,39,.80);
}

.mvgTopNav .navLink[aria-current="page"]{
  background: rgba(var(--mvg-accentRGB), .14);
  color: rgba(17,24,39,.88);
  box-shadow: inset 0 0 0 1px rgba(var(--mvg-accentRGB), .18);
}

.mvgTopNav .ctaNav{
  display:inline-grid;
  place-items:center;

  height:34px;
  padding:0 14px;
  border-radius:18px;

  font:800 11px/1 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial;
  letter-spacing:.12em;
  text-transform: uppercase;

  background: rgba(17,24,39,.92);
  color:#fff;
  border:1px solid rgba(17,24,39,.10);
  box-shadow: 0 10px 26px rgba(15,23,42,.14);
}

.mvgTopNav .ctaNav:hover{
  background: rgba(17,24,39,1);
}

/* Optional: ProgramだけにINTERIORボタンを出したい場合（必要なら使う）
.mvgTopNav .navInteriorBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  letter-spacing:.42em;
  text-transform: uppercase;
  color: rgba(17,24,39,.62);
  background: rgba(var(--mvg-accentRGB), .08);
  border: 1px solid rgba(var(--mvg-accentRGB), .18);
}
.mvgTopNav .navInteriorBtn:hover{
  background: rgba(var(--mvg-accentRGB), .12);
  color: rgba(17,24,39,.82);
}
.page-home .mvgTopNav .navInteriorBtn,
.page-interior .mvgTopNav .navInteriorBtn{ display:none; }
*/

@media (max-width: 720px){
  .mvgTopNav{
    padding:0 16px;
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
  .mvgTopNav .navMenu{ gap:6px; margin-right:10px; }
  .mvgTopNav .navLink{ padding:0 10px; letter-spacing: .32em; }
}

@media (max-width: 560px){
  .mvgTopNav{
    padding:0 14px;
    padding-left: calc(14px + env(safe-area-inset-left));
    padding-right: calc(14px + env(safe-area-inset-right));
  }
  .mvgTopNav .brandLogo{ height:20px; }
  /* Slightly reduce total menu width so the nav set sits a bit more to the right
     (gives breathing room from the MOVEMENT logo on mobile). */
  .mvgTopNav .mvgNavRight{ gap:10px; }
  .mvgTopNav .navMenu{ gap:4px; margin-right:0; }
  .mvgTopNav .navLink{
    height:32px;
    padding:0 8px;
    font-size:11px;
    letter-spacing: .24em;
  }
  .mvgTopNav .ctaNav{
    height:32px;
    padding:0 12px;
    border-radius:16px;
  }
}

/* iPhone 15 / 14 Pro etc are 393px wide, so "390px" was not enough.
   Use 420px so the compact header rules apply to all modern 390〜393px iPhones. */
@media (max-width: 420px){
  :root{ --mvg-navH: 56px; }

  .mvgTopNav{
    padding:0 12px;
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
  .mvgTopNav .brandLogo{ height:19px; }
  .mvgTopNav .mvgNavRight{ gap:8px; }
  .mvgTopNav .navMenu{ gap:3px; margin-right:0; }
  .mvgTopNav .navLink{
    height:30px;
    padding:0 6px;
    font-size:10px;
    letter-spacing: .16em;
  }
  .mvgTopNav .ctaNav{
    height:30px;
    padding:0 10px;
    font-size:10px;
    letter-spacing: .10em;
  }
}

@media (max-width: 340px){
  .mvgTopNav .navMenu{ gap:2px; margin-right:0; }
  .mvgTopNav .navLink{ padding:0 5px; letter-spacing: .12em; }
  .mvgTopNav .ctaNav{ padding:0 9px; }
}

/* Program: anchor offsets for fixed header */
.page-program .mvgAnchor,
.page-program section[id]{
  scroll-margin-top: calc(var(--mvg-navH) + 18px);
}

.page-program .mvgAnchor{
  display:block;
  height:1px;
  margin-top:-1px;
}

@media (max-width: 520px), (pointer: coarse){
  .mvgTopNav{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: rgba(255,255,255,0.92) !important;
  }
}