/**
 * HysaeX 自定义导航栏 — CSS 样式表（WoodMart 移植版）
 *
 * 缩放策略：所有 px 值基于 1200px 参考宽度，由 JS 动态计算缩放系数
 * CSS 只提供基础结构和静态样式，字体大小/Logo高度由 JS 控制
 * 位置用百分比定位（天然响应式）
 */

/* ====== 导航栏容器 ====== */
.hysaex-navbar {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 900;
}

/* Admin bar 存在时导航栏下移，避免顶部边框被遮挡 */
body.admin-bar .hysaex-navbar {
    top: 32px;
}

.hysaex-navbar__wrap {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    position: relative;
    font-size: 16px;  /* 仅作 fallback，实际字体大小由 JS 控制 */
}

.hysaex-navbar__svg-bg {
    width: 100%;
    height: auto;
    display: block;
    line-height: 0;
}

.hysaex-navbar__svg-bg svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ====== 导航栏内容层 ====== */
.hysaex-navbar__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

/* ====== 通用链接样式 ====== */
.hysaex-navbar__link,
.hysaex-navbar__brand {
    position: absolute;
    pointer-events: auto;
    text-decoration: none;
}

.hysaex-navbar__link {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    color: #1a1a2e;
    text-transform: uppercase;
    transition: color 0.2s;
    white-space: nowrap;
    /* transform: translate(-50%, -50%) 由 JS 设置 */
}

.hysaex-navbar__link:hover {
    color: #2e4299;
}

/* ====== 品牌 Logo ====== */
.hysaex-navbar__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* transform: translate(-50%, -50%) 由 JS 设置 */
}

.hysaex-navbar__logo {
    width: auto;
    display: block;
    /* max-height 由 JS 动态计算 */
}

/* ====== Tab 区域 SENSE ANEW tagline ====== */
.hysaex-navbar__tagline {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    /* width 和 top 由 JS 设置 */
}

.hysaex-navbar__tagline img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ====== WoodMart 账户 / 购物车挂载区 ====== */
.hysaex-navbar__tools-area {
    position: absolute;
    right: 3%;
    top: 34.5%;
    transform: translateY(-50%);
    pointer-events: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 18px;
}

/* 移入的 WoodMart 元素保持原样，仅去掉多余外边距 */
.hysaex-navbar__tools-area .wd-tools-element {
    margin: 0;
}

.hysaex-navbar__tools-area .wd-tools-element > a {
    display: flex;
    align-items: center;
}

/* ====== WordPress 菜单容器 ====== */
.hysaex-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hysaex-nav-menu li {
    list-style: none;
}

/* ====== WoodMart 侧边栏（购物车 / 登录）贴住导航栏斜下沿 ======
   导航栏 SVG 为 1600×62.36，但底边是斜的：最低点 62.36 只在中央 tab 处，
   右侧底边仅到 y≈35.83（右端）~46.6（中间）。
   侧栏（z-index 500）在屏幕右侧，把它的顶端对齐到导航栏右侧底边高度
   35.83/1600 ≈ 2.2394vw：右侧正好贴住导航栏，左角被斜边自然盖住一点
   （导航栏 z-index 900 在上层）。移动端导航栏隐藏，保持原样。 */
@media (min-width: 1025px) {
    body .wd-side-hidden {
        top: calc(var(--wd-admin-bar-h, 0px) + 2.2394vw);
    }
}

/* ====== 导航栏空白区域点击穿透 ======
   导航栏的盒子是矩形（高 62.36/1600 ≈ 3.9vw），但可见下沿是斜的——
   右半部分的盒子下沿（2.24vw ~ 3.9vw 之间）是透明区域，却仍会拦截点击，
   导致购物车侧栏顶部的关闭按钮点不到。
   这里让导航栏容器点击穿透，只有可见的白色内条（高 35.75/62.36 ≈ 57.3%）
   和交互元素（链接 / Logo / 图标，CSS 里已设 pointer-events: auto）响应点击。 */
.hysaex-navbar,
.hysaex-navbar__wrap,
.hysaex-navbar__svg-bg {
    pointer-events: none;
}

.hysaex-navbar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 57.3%; /* 白色内条区域，保持原有"点击背景无反应"的手感 */
    pointer-events: auto;
}