/* 孚华 mobile-nav-v1.1 — 移动端导航：logo + CTA 同行，4 tab 在下方（无溢出、无隐藏滚动） */

@media (max-width: 900px) {
  body header {
    display: grid;
    grid-template-areas: "logo cta" "nav nav";
    grid-template-columns: 1fr auto;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: 10px 20px 0;
    gap: 2px 0;
  }

  /* 安全区域：刘海屏/sticky header 留出 safe area */
  @supports (padding-top: env(safe-area-inset-top)) {
    body header {
      padding-top: calc(10px + env(safe-area-inset-top));
      padding-left: calc(20px + env(safe-area-inset-left));
      padding-right: calc(20px + env(safe-area-inset-right));
    }
  }

  header .logo {
    grid-area: logo;
    width: 196px;
    height: 62px;
  }

  /* CTA 按钮：logo 右侧，紧凑但明确 */
  header > .nav-cta {
    grid-area: cta;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;letter-spacing:.04em;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
    min-height: 44px;
    min-width: 44px;
    box-sizing: border-box;
    border: 1px solid rgba(29,33,31,.22);
    color: var(--graphite, #1d211f);
    background: transparent;
    text-decoration: none;
  }

  header > .nav-cta:hover,
  header > .nav-cta:active {
    background: rgba(66,110,99,.08);
  }

  /* 导航 tab 栏：4 项横排，不溢出、不滚动 */
  header nav {
    grid-area: nav;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, max-content);
    justify-content: start;
    gap: 0;
    overflow: visible;
    border-top: 1px solid var(--line, rgba(29,33,31,.13));
    margin-top: 4px;
  }

  header nav a {
    display: block;
    padding: 11px 14px;
    font-size: 14px;
    white-space: nowrap;
    min-height: 44px;
    border: 0;
    color: #464d49;
    text-decoration: none;
  }

  header nav a[aria-current="page"] {
    color: var(--green, #315f54);
    font-weight: 700;
  }

  /* nav 内旧的 .nav-cta 已不存在，兜底隐藏 */
  header nav .nav-cta {
    display: none;
  }
}

@media (max-width: 520px) {
  body header {
    padding: 8px 16px 0;
  }

  @supports (padding-top: env(safe-area-inset-top)) {
    body header {
      padding-top: calc(8px + env(safe-area-inset-top));
      padding-left: calc(16px + env(safe-area-inset-left));
      padding-right: calc(16px + env(safe-area-inset-right));
    }
  }

  header .logo {
    width: 180px;
    height: 56px;
  }

  header > .nav-cta {
    padding: 7px 12px;
    font-size: 13px;
    min-height: 44px;
  }

  header nav a {
    padding: 10px 12px;
    font-size: 13px;
    min-height: 44px;
  }
}