/*
 * 顶部导航栏 · 品牌区（桌面 + 移动）
 * ---------------------------------------------------------------------------
 * 1) Logo 右侧两行品牌字：上层 HENGHUI（大）/ 下层 TEX（小），左对齐、整体与 Logo 垂直居中
 * 2) 字体：Bodoni Moda（意大利 Didone 奢侈时装杂志体，高级复古、笔画清晰，不花哨）
 *    —— 字号用 clamp()，手机端空间不足时自动等比缩小
 * 3) 桌面端 Logo 整体左移靠边（保留 28px 安全边距，不贴死浏览器边框）
 * 4) 移动端 LOGO 恢复使用站点原图（不裁切）
 *
 * 只影响顶部导航栏，不触碰 banner / 产品板块 / 搜索框等任何其它模块。
 */

/* ---------- Bodoni Moda（自托管，OFL 许可） ---------- */
@font-face {
  font-family: 'HTX Bodoni';
  src: url('fonts/bodoni-moda-latin.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   1. 品牌锁形：Logo + 两行字
   ========================================================================== */
html body .neutral-brand {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  line-height: 1 !important;
}

/* Logo 本体：完整显示原图，不做裁切 */
html body .neutral-brand img {
  display: block !important;
  flex: none !important;
  position: static !important;
  width: 64px !important;
  height: 64px !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* 两行字容器 */
html body .htx-brand-mark {
  display: block !important;
  flex: none !important;
  text-align: left !important;
  line-height: 1 !important;
}
html body .htx-brand-mark > span {
  display: block !important;
  font-family: 'HTX Bodoni', 'Bodoni Moda', Didot, 'Cormorant Garamond', Garamond, serif !important;
  font-weight: 500 !important;
  font-style: normal !important;
  color: #1B1A16 !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
}
/* 上层 HENGHUI —— 字号更大 */
html body .htx-brand-l1 {
  font-size: clamp(11px, 2.95vw, 21px) !important;
  letter-spacing: .24em !important;
}
/* 下层 TEX —— 字号稍小 */
html body .htx-brand-l2 {
  font-size: clamp(8px, 1.95vw, 13px) !important;
  letter-spacing: .34em !important;
  margin-top: 6px !important;
}

/* ==========================================================================
   2. 桌面端：Logo 靠左
   --------------------------------------------------------------------------
   顶栏容器原本是「居中 1296px + 左右 40px 内边距」，Logo 因此落在 x≈112。
   这里只把 Logo 那一组视觉左移，右侧导航的对齐与位置完全不动。
   ========================================================================== */
@media (min-width: 1024px) {
  html body .htx-logo-row {
    position: relative !important;
    left: -84px !important;
  }
}

/* ==========================================================================
   3. 移动端：LOGO 用站点原图（不裁切）+ 品牌字随屏幕缩小
   ========================================================================== */
@media (max-width: 1023px) {
  html body .top-0.fixed.lg\:hidden .neutral-brand {
    gap: 6px !important;
  }
  html body .top-0.fixed.lg\:hidden .neutral-brand img {
    width: 40px !important;
    height: 38px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  html body .top-0.fixed.lg\:hidden .htx-brand-l2 {
    margin-top: 3px !important;
  }
}

/* ==========================================================================
   4. 极窄屏（如 iPhone SE 320px）
   --------------------------------------------------------------------------
   320px 下「语言选择器 + CONTACT」已占去大半宽度，字标再挤进去会把
   CONTACT 按钮顶出视口。原图 LOGO 本身就带 "HengHui Tex Group" 字样，
   信息并不丢失，因此这里隐藏两行字标、只保留原图 LOGO。
   ========================================================================== */
@media (max-width: 340px) {
  html body .top-0.fixed.lg\:hidden .htx-brand-mark {
    display: none !important;
  }
  html body .top-0.fixed.lg\:hidden .neutral-brand img {
    width: 34px !important;
    height: 33px !important;
  }
}
