/* AFCS 官网 · 公共组件样式 components.css —— 顶栏/导航/加入按钮/页脚 */
/* ===== 顶部 ===== */
.topbar{background:var(--navy);color:#cfd9e8;font-size:12.5px;}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:36px;gap:12px;}
.topbar a{color:#cfd9e8;}
.topbar a:hover{color:var(--gold-2);}
.topbar .tb-right{display:flex;align-items:center;gap:18px;}
.lang-switch{display:inline-flex;border:1px solid rgba(224,184,61,.5);border-radius:100px;overflow:hidden;}
.lang-switch button{
  background:transparent;border:none;color:#cfd9e8;font-size:12px;padding:3px 12px;cursor:pointer;
  font-family:inherit;letter-spacing:.5px;transition:all .2s;
  white-space: nowrap;
}
.lang-switch button.on{background:var(--gold);color:#fff;font-weight:700;}
.lang-switch button:not(.on):hover{color:var(--gold-2);}

#afcs-header{ position:sticky;top:0;z-index:100; }
header.site{
  background:var(--white);
  border-bottom:1px solid var(--line);box-shadow:0 2px 12px rgba(14,42,82,.06);
}
.site .container{display:flex;align-items:center;justify-content:space-between;height:76px;gap:10px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:10px;flex:none;}
.logo{
    width: auto;
    height: 46px;
}
.logo img{
    height: 100%;
}
.brand-name{line-height:1.25;}
.brand-name .t1{font-size:15.5px;font-weight:700;color:var(--navy);letter-spacing:.3px;}
body.lang-zh .brand-name .t1{font-size:17px;letter-spacing:.5px;}
.brand-name .t2{font-size:11px;color:var(--muted);letter-spacing:.3px;}
nav.main{display:flex;gap:2px;flex-wrap:wrap;}
nav.main a{
  padding:8px 11px;font-size:14px;color:var(--ink);border-radius:6px;
  position:relative;font-weight:500;cursor:pointer;white-space:nowrap;
}
nav.main a:hover{color:var(--navy-3);background:#f0f4fa;}
nav.main a.active{color:var(--navy);font-weight:700;}
nav.main a.active span{
    position: relative;
}
nav.main a.active span::after{
  content:"";position:absolute;left:0px;right:0px;bottom:-8px;height:3px;
  background:var(--gold);border-radius:2px;
}
.btn{
  display:inline-block;padding:11px 26px;border-radius:8px;font-size:15px;
  font-weight:600;cursor:pointer;border:none;transition:all .2s;letter-spacing:.4px;
  line-height: 1.4em;
}
.btn-gold{background:var(--gold);color:#fff;}
.btn-gold:hover{background:var(--gold-2);transform:translateY(-1px);box-shadow:0 6px 16px rgba(201,162,39,.35);}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.1);}
.btn-navy{background:var(--navy-2);color:#fff;}
.btn-navy:hover{background:var(--navy-3);}
.header-cta{white-space:nowrap;padding:9px 20px;font-size:14.5px;}
/* 移动端汉堡按钮 桌面隐藏 */
.menu-toggle { display: none; font-size: 28px; background: transparent; border: none; cursor: pointer; color: var(--navy); padding: 4px 8px; line-height: 1;}
/* ========== 右侧滑出抽屉导航 新增样式 ========== */
.drawer-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, .4); z-index: 998; opacity: 0; visibility: hidden; transition: var(--transition-base); }
.drawer-mask.active { opacity: 1; visibility: visible; }
.mobile-drawer { position: fixed; top: 0; right: 0; width: min(85vw, 340px); height: 100vh; background: #fff; z-index: 999; transform: translateX(100%); transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1); padding: 24px; display: flex; flex-direction: column;}
.mobile-drawer.active { transform: translateX(0); }
.drawer-head { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--line); position: relative;}
.drawer-close {height: 46px;position: absolute; top: 0;right: 0; border: none;background: transparent; display: flex; align-items: center; font-size: 30px; color: var(--muted);}
.drawer-nav.main {display: flex;flex-direction: column;gap: 6px;margin-bottom: 32px;}
.drawer-nav.main a {font-size: 16px;}
.drawer-nav.main a:hover {background: none;color: var(--ink);}
.drawer-nav.main a.active::after{content: none;}
.drawer-cta {padding-left: 11px; margin-top: 20px;}
/* ===== 页脚 ===== */
footer.site{height: auto;margin-top:76px;background:#0a1e3c;color:#a9b8cd;}
footer.site .container{
    height: auto;
    justify-content: center;
}
.f-main{display:grid;grid-template-columns:1.3fr 1fr 1.2fr;gap:40px;padding:52px 0 40px;}
.f-brand .logo{margin-bottom:14px;}
.f-brand h3{color:#fff;font-size:17px;letter-spacing:.5px;margin-bottom:2px;}
.f-brand .en2{font-size:11.5px;letter-spacing:.5px;color:#7a8ca5;margin-bottom:14px;}
.f-brand p{font-size:13px;line-height:1.8;}
footer h4{color:#fff;font-size:14.5px;letter-spacing:1px;margin-bottom:16px;}
.f-nav li{margin-bottom:10px;}
.f-nav a{font-size:13.5px;color:#a9b8cd;cursor:pointer;}
.f-nav a:hover{color:var(--gold-2);}
.f-contact li{font-size:13.5px;margin-bottom:12px;display:flex;gap:10px;}
.f-contact li .k{color:#7a8ca5;flex:none;}
.f-contact a{color:#d7e0ec;}
.f-contact a:hover{color:var(--gold-2);}
.f-bottom{border-top:1px solid rgba(255,255,255,.09);padding:18px 0;font-size:12.5px;color:#7a8ca5;text-align: center;}
.f-bottom .container{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}

/* ===== 响应式 ===== */
@media (max-width:980px){
    #afcs-topbar .tb-contact{
        display: none;
    }
    header nav.main,
    header .btn-gold{
        display: none;
    }
    .menu-toggle{
        display: block;
    }
    #afcs-header header nav.main ,
    #afcs-header header .btn-gold{
        display: none;
    }
    #afcs-footer .f-main{
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 46px 0 26px;
    }
    #afcs-footer .f-nav{
        display: flex;
        gap: 15px;
    }
    .lang-en #afcs-footer .f-nav li{
        flex: 1;
        white-space: nowrap;
    }
    .f-contact{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:620px){
    #afcs-topbar .container{
        height: 50px;
    }
    #afcs-topbar .tb-left{
        line-height: 1.4em;
    }
    #afcs-topbar .lang-switch{
        height: 28px;
    }
    #afcs-topbar .tb-contact{
        display: none;
    }
    header nav.main ,
    header .btn-gold{
        display: none;
    }
    .menu-toggle{
        display: block;
    }
    #afcs-footer .f-main{
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 46px 0 26px;
    }
    #afcs-footer .f-nav{
        display: grid;
        grid-template-columns:repeat(5,1fr);
    }
    .lang-en #afcs-footer .f-nav li:nth-of-type(6){
        grid-column: 1 / 3;
    }
    footer.site{
        margin-top: 46px;
    }
    .f-contact{
        display: flex;
        flex-direction: column;
    }
}