/* 北海明珠官网：顶部导航、下拉菜单与移动端菜单 */

.site-header{position:sticky;top:0;z-index:70;height:80px;background:rgba(255,255,255,.97);border-bottom:1px solid rgba(222,229,239,.9);backdrop-filter:blur(14px)}
.header-inner{height:80px;display:flex;align-items:center;gap:26px}
.brand{display:flex;align-items:center;min-width:190px}
.brand img{width:114px;height:auto}
.main-nav{display:flex;align-items:center;gap:28px;margin-left:auto}
.main-nav>a,.nav-group>a{
position:relative;
padding:28px 0 25px;
font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
font-size:15px;
font-weight:600;
line-height:1;
letter-spacing:.025em;
color:#2f3d55;
white-space:nowrap;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
transition:color .22s ease,opacity .22s ease
}
.main-nav>a:after,.nav-group>a:after{
content:"";
position:absolute;
left:50%;
bottom:18px;
width:0;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,var(--primary),#5b8df2);
transform:translateX(-50%);
transition:width .22s ease
}
.main-nav>a:hover,.main-nav>a.active,.nav-group:hover>a,.nav-group.active>a{
color:var(--primary)
}
.main-nav>a:hover:after,.main-nav>a.active:after,.nav-group:hover>a:after,.nav-group.active>a:after{width:26px}
.nav-group{position:relative;display:flex;align-items:center}
.submenu-toggle{
border:0;
background:transparent;
color:#8090a7;
padding:5px 4px;
margin-left:2px;
font-size:12px;
transition:color .2s ease,transform .2s ease
}
.nav-group:hover .submenu-toggle,.nav-group.active .submenu-toggle{color:var(--primary)}
.submenu{position:absolute;left:50%;top:69px;min-width:190px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 18px 48px rgba(17,34,65,.16);transform:translate(-50%,10px);opacity:0;visibility:hidden;transition:.2s}
.submenu:before{content:"";position:absolute;top:-12px;left:0;right:0;height:14px}
.submenu a{
display:block;
padding:11px 13px;
border-radius:9px;
font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
color:#46556d;
font-size:14px;
font-weight:500;
line-height:1.45;
letter-spacing:.015em;
transition:background .2s ease,color .2s ease,padding-left .2s ease
}
.submenu a:hover{background:var(--primary-soft);color:var(--primary);padding-left:17px}
.nav-group:hover .submenu,.nav-group:focus-within .submenu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.header-booking{
margin-left:2px;
background:var(--primary);
color:#fff;
padding:14px 22px;
border-radius:11px;
font-family:"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",system-ui,sans-serif;
font-weight:700;
letter-spacing:.055em;
box-shadow:0 10px 24px rgba(40,99,223,.22);
transition:background .22s ease,transform .22s ease,box-shadow .22s ease
}
.header-booking:hover{
background:var(--primary-dark);
transform:translateY(-2px);
box-shadow:0 14px 30px rgba(40,99,223,.28)
}
.menu-toggle{display:none;margin-left:auto;width:43px;height:43px;border:0;background:var(--bg);border-radius:10px;padding:11px}
.menu-toggle span{display:block;height:2px;background:var(--ink);margin:5px 0}
@media (max-width:1050px){
.main-nav{gap:17px}
.main-nav>a,.nav-group>a{font-size:13px}
}
@media (max-width:850px){
.site-header,.header-inner{height:70px}
.brand img{width:105px}
.menu-toggle{display:block}
.header-booking{display:none}
.main-nav{position:fixed;left:0;right:0;top:70px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 25px;background:#fff;border-top:1px solid var(--line);box-shadow:0 20px 40px rgba(20,35,63,.15);max-height:calc(100vh - 70px);overflow:auto}
.main-nav.open{display:flex}
.main-nav>a,.nav-group>a{
padding:15px 4px;
font-size:16px;
font-weight:600;
line-height:1.25;
letter-spacing:.025em
}
.main-nav>a:after,.nav-group>a:after{display:none}
.nav-group{display:grid;grid-template-columns:1fr 38px}
.submenu-toggle{display:block}
.submenu{position:static;grid-column:1/3;display:none;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:8px;background:var(--bg);padding:6px;margin-bottom:8px}
.nav-group.submenu-open .submenu{display:block}
}

/* 桌面端导航增强：加高导航栏并放大 Logo */
@media (min-width:1201px){
.site-header{height:96px}
.site-header .header-inner{width:min(calc(100% - 48px),1320px);height:96px;gap:32px}
.site-header .brand{min-width:255px}
.site-header .brand img{width:182px;max-height:66px;object-fit:contain}
.site-header .main-nav{gap:30px}
.site-header .main-nav>a,.site-header .nav-group>a{
padding:36px 0 33px;
font-size:16px;
font-weight:600;
letter-spacing:.03em
}
.site-header .main-nav>a:after,.site-header .nav-group>a:after{bottom:23px}
.site-header .submenu{top:83px}
.site-header .header-booking{min-width:112px;height:56px;padding:0 22px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:17px}
}
@media (min-width:851px) and (max-width:1200px){
.site-header{height:88px}
.site-header .header-inner{width:min(calc(100% - 36px),1180px);height:88px;gap:20px}
.site-header .brand{min-width:210px}
.site-header .brand img{width:160px;max-height:58px;object-fit:contain}
.site-header .main-nav{gap:17px}
.site-header .main-nav>a,.site-header .nav-group>a{
padding:32px 0 29px;
font-size:15px;
font-weight:600;
letter-spacing:.02em
}
.site-header .main-nav>a:after,.site-header .nav-group>a:after{bottom:20px}
.site-header .submenu{top:76px}
.site-header .header-booking{height:50px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center}
}


/* V4.2 手机端 Logo 尺寸 */
@media (max-width:850px){
.site-header .brand img{width:124px;max-height:46px;object-fit:contain}
}

/* =====================================================
 * 顶部导航子菜单显示修复
 * 原因：paint containment 会裁掉超出导航栏高度的下拉菜单。
 * 保留滚动稳定性处理，但允许子菜单显示在导航栏下方。
 * ===================================================== */
.site-header{
    contain:none !important;
    overflow:visible !important;
    isolation:isolate;
}

.site-header .header-inner,
.site-header .main-nav,
.site-header .nav-group{
    overflow:visible !important;
}

.site-header .submenu{
    z-index:120;
    pointer-events:none;
}

@media (min-width:851px){
    .site-header .nav-group:hover > .submenu,
    .site-header .nav-group:focus-within > .submenu,
    .site-header .nav-group.submenu-open > .submenu{
        opacity:1 !important;
        visibility:visible !important;
        transform:translate(-50%,0) !important;
        pointer-events:auto;
    }
}

@media (max-width:850px){
    .site-header .submenu{
        pointer-events:auto;
    }
}