/* ==========================================================================
   DALY BMS — Header
   数值全部来自源站 style0305.css 实测，勿凭感觉改
   源站: .web_head{bg:rgb(255 255 255/50%); z-index:99} 高82px
        .layout{width:1500px} → 大屏 .head_layer .layout{width:1788px}
        .head_nav>li{margin:0 26px; font-size:14px; line-height:80px}
        下划线 3px #e50012；下拉 250px rgba(0,0,0,.7)，链接 #ccc，hover #e50012
   ========================================================================== */

.layout {
  width: 1500px;
  margin: 0 auto;
  position: relative;
}

.web_head {
  position: relative;
  z-index: 99;
  background: rgb(255 255 255 / 50%);
  transition: none;
}

.web_head .head_layer .layout {
  display: flex;
  width: 1788px;
  max-width: 96%;
  flex-direction: row;
  align-items: center;
}

/* ---------- Logo ---------- */
.web_head .logo {
  float: left;
  margin: 0;
  line-height: 0;
}

.web_head .logo img {
  max-width: 170px;
  height: auto;
  vertical-align: middle;
}

.web_head .logo a,
.kl-logo-lockup {
  display: inline-flex;
  align-items: center;
}

.kl-logo-lockup { gap: 10px; }

.web_head .logo img.kl-logo-mark {
  width: 68px;
  max-width: none;
}

.kl-logo-copy {
  display: grid;
  gap: 3px;
}

.web_head .logo img.kl-logo-wordmark {
  display: block;
  max-width: none;
}

.kl-logo-wordmark--en {
  color: #033692;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
  white-space: nowrap;
}

.web_head .logo img.kl-logo-wordmark--zh { width: 130px; }

.web_head .logo .daly-logo-text {
  display: inline-block;
  color: var(--daly-red);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 80px;
}

/* ---------- Nav ---------- */
.web_head .nav_wrap {
  position: relative;
  z-index: 11;
  flex: 1;
  text-align: left;
}

.nav_wrap .head_nav {
  margin: 0;
  padding: 0;
  text-align: center;
  list-style: none;
}

.nav_wrap .head_nav,
.nav_wrap .head_nav a {
  color: #000;
}

.nav_wrap .head_nav > li {
  position: relative;
  display: inline-block;
  margin: 0 26px;
  text-align: left;
  text-transform: capitalize;
  font-size: 14px;
  line-height: 80px;
}

.nav_wrap .head_nav > li::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background-color: var(--daly-red);
  content: "";
  transition: all ease-in-out 0.35s;
}

.nav_wrap .head_nav > li.nav-current::after,
.nav_wrap .head_nav > li.current-menu-item::after,
.nav_wrap .head_nav > li.current-menu-ancestor::after,
.nav_wrap .head_nav > li:hover::after {
  left: 0;
  width: 100%;
}

.nav_wrap .head_nav > li > a {
  position: relative;
  display: block;
  text-decoration: none;
}

.nav_wrap .head_nav > li > a em {
  font-style: normal;
}

/* 最后一项（Daly Online Store）带购物车图标。
   ⚠️ 源站 CSS 写的是 img{width:60px}，但源站那张图**实际加载失败**
   （实测 naturalWidth=0，渲染出来的 112x80 只是坏图占位框），
   所以 60px 不是真实设计值，照抄会让图标大到挤爆导航。
   我们的图能正常加载，按 20px 文字配 24px 图标取值。 */
.nav_wrap .head_nav > li:last-child > a {
  font-size: 20px;
}

.nav_wrap .head_nav > li > a > img.menu-image {
  display: inline-block;
  margin-right: 6px;
  width: 24px;
  height: auto;
  vertical-align: middle;
}

/* 有子菜单的箭头 —— 源站是 fontawesome \f107，这里用纯 CSS 三角避免依赖字体图标 */
.nav_wrap .head_nav > li.menu-item-has-children > a em::after {
  display: inline-block;
  margin-left: 6px;
  width: 0;
  height: 0;
  border-color: #000 transparent transparent;
  border-style: solid;
  border-width: 5px 4px 0;
  content: "";
  vertical-align: middle;
  transition: all 0.3s ease;
}

.nav_wrap .head_nav > li.menu-item-has-children:hover > a em::after {
  border-top-color: var(--daly-red);
  transform: rotate(180deg);
}

.nav_wrap .head_nav li:hover > a {
  color: var(--daly-red);
}

/* ---------- 下拉子菜单 ---------- */
.nav_wrap .head_nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  visibility: hidden;
  box-sizing: content-box;
  margin: 0;
  padding: 10px 0;
  width: 250px;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0;
  list-style: none;
  transform: scale(0.8);
  transform-origin: 0 0;
  transition: all 0.3s ease;
}

.nav_wrap .head_nav li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: none;
}

.nav_wrap .head_nav > li li {
  position: relative;
  text-align: left;
  line-height: 1.5em;
}

.nav_wrap .head_nav > li li a {
  position: relative;
  display: block;
  padding: 10px 25px;
  color: #ccc;
  font-size: 14px;
  line-height: 1.5em;
  text-decoration: none;
  transition: all 0.3s ease;
}

.nav_wrap .head_nav > li li a::before {
  position: absolute;
  top: 40%;
  left: 0;
  display: block;
  width: 3px;
  height: 30%;
  background-color: var(--daly-red);
  content: "";
  opacity: 0;
  transition: all 0.3s ease;
}

.nav_wrap .head_nav > li li a:hover {
  padding-right: 35px;
  padding-left: 15px;
  color: var(--daly-red);
}

.nav_wrap .head_nav > li li a:hover::before {
  top: 0;
  height: 100%;
  opacity: 1;
}

/* 三级菜单向右展开 */
.nav_wrap .head_nav > li ul ul {
  top: -10px;
  left: 102%;
}

/* ---------- 右侧搜索 / 语言 ---------- */
.web_head .head_right {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.web_head .btn--search {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 30px;
  border-right: 1px solid #e7e7e7;
  vertical-align: middle;
  cursor: pointer;
}

.web_head .btn--search::after {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  border: 2px solid #333;
  border-radius: 50%;
  content: "";
  transform: translate(-60%, -60%);
  transition: all ease-in-out 0.35s;
}

.web_head .btn--search::before {
  position: absolute;
  top: 58%;
  left: 58%;
  z-index: 1;
  display: block;
  width: 2px;
  height: 8px;
  background: #333;
  content: "";
  transform: rotate(-45deg);
}

.web_head .btn--search:hover::after {
  border-color: var(--daly-red);
}

.web_head .change-language {
  position: relative;
  display: inline-block;
  margin-left: 20px;
  font-size: 14px;
  white-space: nowrap;
}

.web_head .head-search {
  display: none;
}

/* ---------- 汉堡按钮（仅移动端出现） ---------- */
.daly-burger {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 0;
  background: none;
  cursor: pointer;
}

.daly-burger span {
  display: block;
  margin: 5px 0;
  width: 26px;
  height: 2px;
  background: #333;
  transition: all 0.3s ease;
}

/* ==========================================================================
   响应式 —— 断点照抄源站实测值
   .layout 宽度梯队：1500 → 1400(≤1680) → 1300(≤1440) → 1100(≤1366) → 95%(≤1200)
   nav margin：26 → 16(≤1800) → 10(≤1500)
   ⚠️ ≤1200 必须回到百分比宽度，否则小屏会被固定的 1100px 撑出横向留白
   ========================================================================== */

@media (max-width: 1800px) {
  .nav_wrap .head_nav > li { margin: 0 16px; font-size: 15px; }
  .web_head .change-language { margin-left: 10px; }
  .web_head .btn--search { width: 45px; }
}

@media (max-width: 1680px) {
  .layout { width: 1400px; }
}

@media (max-width: 1500px) {
  .nav_wrap .head_nav > li { margin: 0 10px; font-size: 14px; }
}

@media (max-width: 1440px) {
  .layout { width: 1300px; }
}

@media (max-width: 1366px) {
  .layout { width: 1100px; }
}

@media (max-width: 1280px) {
  .nav_wrap .head_nav > li { line-height: 60px; }
}

@media (max-width: 1200px) {
  .layout { width: 95%; }
}

/* 1080 以下：源站 fullPage 不再初始化，导航折叠成移动端形态 */
@media (max-width: 1080px) {
  .web_head { padding: 12px 0; }

  .web_head .head_layer .layout {
    flex-wrap: wrap;
    width: 95%;
    max-width: 95%;
  }

  .web_head .logo img { max-width: 140px; }
  .kl-logo-lockup { gap: 7px; }
  .web_head .logo img.kl-logo-mark { width: 54px; }
  .kl-logo-wordmark--en { font-size: 13px; }
  .web_head .logo img.kl-logo-wordmark--zh { width: 104px; }
  .web_head .logo .daly-logo-text { line-height: 1.4; font-size: 20px; }

  .daly-burger { display: block; }
  .web_head .head_right { display: none; }

  .web_head .nav_wrap {
    order: 9;
    flex: 0 0 100%;
    width: 100%;
  }

  .nav_wrap .head_nav {
    display: none;
    width: 100%;
    text-align: left;
  }

  .web_head.is-menu-open .nav_wrap .head_nav { display: block; }

  .nav_wrap .head_nav > li {
    display: block;
    margin: 0;
    width: 100%;
    border-bottom: 1px solid #eee;
    font-size: 16px;
    line-height: 44px;
  }

  .nav_wrap .head_nav > li::after { display: none; }

  /* 移动端子菜单：常驻展开，不用 hover（触屏没有 hover） */
  .nav_wrap .head_nav li ul {
    position: static;
    visibility: visible;
    padding: 0 0 10px 14px;
    width: 100%;
    background: none;
    opacity: 1;
    transform: none;
  }

  .nav_wrap .head_nav > li li a {
    padding: 6px 0;
    color: #666;
    line-height: 1.6;
  }

  .nav_wrap .head_nav > li li a:hover {
    padding-right: 0;
    padding-left: 0;
  }

  .nav_wrap .head_nav > li ul ul { left: 0; top: 0; }
}