/* ---------- 左上角：项目 logo + 导航（首页 / 地图），index.html 和 map.html 共用 ---------- */

/* 两个页面之间跳转时淡入淡出（不支持的浏览器直接跳转） */
@view-transition {
  navigation: auto;
}

/* 关掉触控板左右滑动触发的浏览器前进 / 后退，切换视图只能点导航 icon。
   Chrome / Edge 认这条；Safari 靠 js/nav-guard.js 拦截横向滚轮 */
html,
body {
  overscroll-behavior-x: none;
}

.site-nav {
  position: fixed;
  --nav-gap: 0.6rem; /* 两个 icon 之间的距离 */
  top: 1.5rem;
  left: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--nav-gap);

  svg {
    width: 18px;
    height: 18px;
  }
}

/* logo + 悬停时出现的项目介绍 */
.site-nav__brand {
  position: relative;
  /* logo 到右侧 icon 的距离 = 24px（减去 flex gap） */
  margin-right: calc(24px - var(--nav-gap));
}

/* logo 固定显示为 112 × 11；换成更高分辨率的图片（同样比例）也保持这个大小 */
.site-nav__logo {
  display: block;

  img {
    display: block;
    width: auto;
    height: 14px;
  }

  &:focus {
    background: none;
  }

  &:focus-visible {
    outline: 1px solid #1a1a1a;
    outline-offset: 4px;
  }
}

.site-nav__icon {
  --nav-bg: rgba(245, 241, 235, 0.7);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(26, 26, 26, 0.25);
  border-radius: 50%;
  background: var(--nav-bg);
  backdrop-filter: blur(6px);
  color: rgba(26, 26, 26, 0.55);
  transition: color 0.3s, border-color 0.3s, background-color 0.3s;

  &:hover {
    text-decoration: none;
    color: #1a1a1a;
    border-color: rgba(26, 26, 26, 0.5);
  }

  /* 覆盖 base.css 里链接的聚焦样式（红框、透明底） */
  &:focus {
    background: var(--nav-bg);
  }

  &:focus-visible {
    outline: 1px solid #1a1a1a;
    outline-offset: 3px;
  }

  /* 当前所在的页面 */
  &[aria-current='page'] {
    --nav-bg: rgba(245, 241, 235, 0.92);
    color: #1a1a1a;
    border-color: rgba(26, 26, 26, 0.6);
  }

  &:not([href]) {
    cursor: default;
  }
}

/* 语言切换（js/i18n.js）：和导航 icon 同样的圆形按钮，里面写要切过去的语言 */
.site-nav__lang {
  padding: 0;
  font-family: 'EB Garamond', 'Songti SC', 'STSong', serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;

  &,
  &:not([href]) {
    cursor: pointer;
  }

  /* “中” 比 “EN” 视觉上更重，缩小一点 */
  &:lang(en) {
    font-size: 13px;
  }
}

/* ---------- 项目介绍卡片：首页的开场弹窗和 logo 悬停介绍共用 ---------- */

@font-face {
  font-family: 'EB Garamond';
  src: url('../public/EBGaramond-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

.welcome__card {
  width: min(380px, 100%);
  padding: 32px 32px 28px;
  border-radius: 20px;
  background-color: #fefdfd;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12);
  color: #1a1a1a;

  @media (max-width: 600px) {
    padding: 28px 24px 24px;
  }
}

.welcome__title {
  margin-bottom: 22px;
  font-family: 'EB Garamond', 'Songti SC', serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1.1;
}

.welcome__subtitle {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.welcome__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #2b2724;
}

.welcome__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 20px 0 18px;
  font-size: 13px;
  color: #4a4541;

  svg {
    flex: none;
    width: 1.1em;
    height: 1.1em;
  }
}

/* 悬停 logo 时在下方出现，移开就消失（卡片本身不接收鼠标） */
.site-nav__about {
  position: absolute;
  top: calc(100% + 26px);
  left: 0;
  width: min(380px, calc(100vw - 56px));
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.33, 1, 0.68, 1), visibility 0.3s;

  .welcome__meta {
    margin-bottom: 0;
  }
}

@media (hover: hover) {
  .site-nav__brand:hover .site-nav__about,
  .site-nav__brand:has(.site-nav__logo:focus-visible) .site-nav__about {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* 没有悬停的设备（手机）：点 logo 展开，再点 logo 或其它地方收起（见 js/nav-about.js） */
@media (hover: none) {
  .site-nav__brand.--is-open .site-nav__about {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
}