/* =============================================================
   公共头部 / 底部样式（inc_head.html / inc_foot.html 共用）
   设计：清新现代风，主色 青绿(teal) → 蓝 渐变
   作用域隔离在 .hp-header / .hp-catbar / .site-footer 下，
   不污染 mayicms 默认样式，可在全站任意页面复用。
   颜色变量（CSS 自定义属性，便于全站统一换色）
   ============================================================= */
:root{
    --hp-primary:#0f9e8e;          /* 主色 青绿 */
    --hp-primary-d:#0b7d71;        /* 深主色 */
    --hp-primary-l:#e6f7f4;        /* 浅主色底 */
    --hp-accent:#1f7fd1;           /* 渐变蓝 */
    --hp-grad:linear-gradient(135deg,#0f9e8e 0%,#1f7fd1 100%);
    --hp-ink:#2b3340;              /* 主文字 */
    --hp-muted:#8a94a6;            /* 次要文字 */
    --hp-line:#e8ecf1;             /* 边框 */
    --hp-bg:#f4f6f8;               /* 页面底 */
    --hp-navbg:#0e1726;            /* 顶栏深底 */
}

/* ---------------- 顶部条（欢迎语 / 登录注册） ---------------- */
.hp-header .header-top-area,
.header-top-area{
    background:var(--hp-navbg);
    color:#cdd5e0;
    font-size:13px;
}
.header-top-area a{color:#cdd5e0;text-decoration:none;}
.header-top-area a:hover{color:#fff;}
.header-top-area .header-top-left{padding:8px 0;}
.header-top-area .header-top-right{padding:8px 0;}
.header-top-area .header-top-menu li{display:inline-block;margin-left:14px;}
.header-top-area .header-top-menu li a{color:#cdd5e0;}
.header-top-area .header-top-menu li a:hover{color:#fff;}
.header-top-area #mayilogin{display:inline-block;margin-left:14px;}
.header-top-area #mayilogin a{color:#fff;}
.header-top-area #mayilogin img{vertical-align:middle;}

/* ---------------- 主头部（logo / 导航 / 搜索 / 发布） ---------------- */
.hp-header{
    background:#fff;
    box-shadow:0 2px 12px rgba(15,30,50,.06);
    position:sticky;
    top:0;
    z-index:200;
}
.hp-header-inner{
    display:flex;
    align-items:center;
    height:72px;
    gap:22px;
}
.hp-logo{display:flex;align-items:center;flex:none;}
.hp-logo img{height:42px;display:block;}

.hp-nav{flex:1;min-width:0;}
.hp-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;overflow-x:auto;}
.hp-nav li{position:relative;flex:none;}
.hp-nav li a{
    display:block;
    padding:0 14px;
    height:72px;
    line-height:72px;
    color:var(--hp-ink);
    font-size:15px;
    text-decoration:none;
    white-space:nowrap;
    border-bottom:3px solid transparent;
    transition:color .15s,border-color .15s;
}
.hp-nav li a:hover{color:var(--hp-primary);}
.hp-nav li a.active,
.hp-nav li a.on{color:var(--hp-primary);border-bottom-color:var(--hp-primary);}

.hp-search{flex:none;width:260px;max-width:32vw;}
.hp-search form{
    display:flex;
    height:42px;
    border:2px solid var(--hp-primary);
    border-radius:24px;
    overflow:hidden;
    background:#fff;
}
.hp-search input[type=text]{
    flex:1;border:0;outline:0;padding:0 16px;font-size:14px;color:var(--hp-ink);min-width:0;
}
.hp-search button{
    width:54px;border:0;cursor:pointer;
    background:var(--hp-grad);color:#fff;font-size:18px;
    display:flex;align-items:center;justify-content:center;
}
.hp-search button:hover{filter:brightness(1.08);}

.hp-post{
    flex:none;
    height:42px;line-height:42px;
    padding:0 22px;
    border-radius:24px;
    background:var(--hp-grad);
    color:#fff!important;
    font-size:15px;font-weight:600;
    text-decoration:none;
    white-space:nowrap;
    box-shadow:0 6px 16px rgba(15,158,142,.28);
    transition:transform .15s,box-shadow .15s;
}
.hp-post:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,158,142,.34);color:#fff;}

/* ---------------- 分类条（全部分类下拉 + 快捷分类） ---------------- */
.hp-catbar{background:#fff;border-top:1px solid var(--hp-line);border-bottom:1px solid var(--hp-line);}
.hp-catbar-inner{display:flex;align-items:stretch;height:48px;gap:0;}
.hp-cat-all{position:relative;flex:none;}
.hp-cat-all-btn{
    display:flex;align-items:center;gap:8px;
    height:48px;padding:0 22px;
    background:var(--hp-grad);color:#fff;font-size:15px;font-weight:600;cursor:pointer;
    border-radius:0 0 0 0;
}
.hp-cat-all-btn::before{content:"";width:16px;height:12px;
    background:linear-gradient(#fff,#fff) top/16px 2px no-repeat,
               linear-gradient(#fff,#fff) center/16px 2px no-repeat,
               linear-gradient(#fff,#fff) bottom/16px 2px no-repeat;}
.hp-cat-dropdown{
    position:absolute;left:0;top:48px;width:220px;
    background:#fff;border:1px solid var(--hp-line);border-top:0;
    box-shadow:0 12px 28px rgba(15,30,50,.12);
    opacity:0;visibility:hidden;transform:translateY(6px);
    transition:.18s;z-index:300;
    /* 注意：这里绝不能加 overflow:auto，否则二级面板向右弹出时会被裁进容器里变成滚动条 */
}
.hp-cat-all:hover .hp-cat-dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.hp-cat-dropdown>ul{list-style:none;margin:0;padding:6px 0;}
.hp-cat-dropdown>ul>li{position:relative;}
.hp-cat-dropdown>ul>li>a{
    display:flex;align-items:center;justify-content:space-between;
    padding:9px 16px;color:var(--hp-ink);text-decoration:none;font-size:14px;
}
.hp-cat-dropdown>ul>li>a:hover{background:var(--hp-primary-l);color:var(--hp-primary);}
/* 二级面板：跟随一级项，鼠标移入后在其右侧弹出（flyout） */
.hp-cat-sub{
    display:none;position:absolute;left:100%;top:-7px;
    min-height:100%;width:340px;background:#fff;border:1px solid var(--hp-line);
    box-shadow:0 12px 28px rgba(15,30,50,.12);padding:12px 14px;
    columns:2;column-gap:14px;
}
.hp-cat-dropdown>ul>li:hover .hp-cat-sub{display:block;}
.hp-cat-sub a{display:block;padding:6px 4px;color:var(--hp-muted);text-decoration:none;font-size:13px;break-inside:avoid;}
.hp-cat-sub a:hover{color:var(--hp-primary);}

.hp-cat-quick{flex:1;display:flex;align-items:center;gap:2px;overflow-x:auto;padding-left:8px;}
.hp-cat-quick a{
    flex:none;padding:0 14px;height:48px;line-height:48px;
    color:var(--hp-ink);text-decoration:none;font-size:14px;white-space:nowrap;
}
.hp-cat-quick a:hover{color:var(--hp-primary);}

/* ---------------- 底部 ---------------- */
.site-footer{background:var(--hp-navbg);color:#aeb8c7;font-size:14px;margin-top:40px;}
.site-footer a{color:#aeb8c7;text-decoration:none;}
.site-footer a:hover{color:var(--hp-primary);}
.site-footer .footer-main{padding:46px 0 22px;border-bottom:1px solid rgba(255,255,255,.08);}
.site-footer .footer-col{margin-bottom:24px;}
.site-footer .footer-brand{font-size:19px;color:#fff;font-weight:700;margin-bottom:16px;}
.site-footer .footer-contact p{margin:0 0 8px;line-height:1.7;}
.site-footer .footer-contact a{color:#aeb8c7;}
.site-footer .footer-title{font-size:16px;color:#fff;margin:0 0 16px;font-weight:600;}
.site-footer .footer-links{list-style:none;padding:0;margin:0;}
.site-footer .footer-links li{margin-bottom:10px;}
.site-footer .footer-report{line-height:1.7;}
.site-footer .footer-bar{background:#080f1a;padding:14px 0;}
.site-footer .footer-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;}
.site-footer .footer-bar-inner p{margin:0;font-size:13px;color:#7e8aa0;}
.site-footer .footer-bar-inner a{color:#7e8aa0;}
.site-footer .footer-bar-inner a:hover{color:var(--hp-primary);}
.site-footer .footer-gotop{
    width:34px;height:34px;border:1px solid #3a4759;background:transparent;color:#fff;
    cursor:pointer;border-radius:6px;font-size:13px;line-height:1;
}
.site-footer .footer-gotop:hover{background:var(--hp-primary);border-color:var(--hp-primary);color:#fff;}

/* ---------------- 响应式 ---------------- */
@media (max-width:991px){
    .hp-header-inner{height:auto;flex-wrap:wrap;padding:10px 0;gap:12px;}
    .hp-logo{order:1;}
    .hp-post{order:2;margin-left:auto;}
    .hp-search{order:3;width:100%;max-width:none;}
    .hp-nav{order:4;width:100%;}
    .hp-nav ul{height:auto;gap:0;}
    .hp-nav li a{height:44px;line-height:44px;}
    .hp-catbar-inner{height:auto;flex-wrap:wrap;}
    .hp-cat-all{width:100%;}
    .hp-cat-all-btn{width:100%;justify-content:center;}
    .hp-cat-dropdown{width:100%;position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-top:1px solid var(--hp-line);}
    .hp-cat-sub{position:static;width:100%;columns:1;box-shadow:none;border:0;padding:0 0 8px 16px;}
    .hp-cat-quick{width:100%;flex-wrap:wrap;padding:6px 0;}
    .hp-cat-quick a{height:38px;line-height:38px;padding:0 12px;}
}
@media (max-width:575px){
    .hp-post{padding:0 16px;}
}