/* ═══════════════════════════════════════════
   Header Style 2 v4.0 — style.css
═══════════════════════════════════════════ */

#hs2-wrap {
    --hs2-primary:       #e8192c;
    --hs2-primary-hover: #c0121f;
    --hs2-header-bg:     #ffffff;
    --hs2-topbar-bg:     #f7f7f7;
    --hs2-nav-bg:        #ffffff;
    --hs2-sidebar-bg:    #ffffff;
    --hs2-text:          #111111;
    --hs2-muted:         #666666;
    --hs2-border:        #e5e5e5;
    --hs2-ham-color:     #333333;
    --hs2-ham-bg:        transparent;
    --hs2-ham-radius:    0px;
    --hs2-ham-w:         22px;
    --hs2-ham-h:         2px;
    --hs2-ham-gap:       5px;
    --hs2-ham-btn-size:  36px;
    --hs2-logo-h:        38px;
    --hs2-logo-ml:       10px;
    --hs2-logo-mr:       0px;
    --hs2-search-size:   19px;
    --hs2-search-ml:     0px;
    --hs2-search-mr:     0px;
    --hs2-dark-ml:       6px;
    --hs2-dark-mr:       0px;
    --hs2-hdr-h:         64px;
    --hs2-hdr-pt:        0px;
    --hs2-hdr-pb:        0px;
    --hs2-hdr-pl:        16px;
    --hs2-hdr-pr:        16px;
    --hs2-nav-h:         46px;
    --hs2-nav-fs:        14px;
    --hs2-nav-pt:        0px;
    --hs2-nav-pb:        0px;
    --hs2-nav-pl:        16px;
    --hs2-nav-pr:        16px;
    --hs2-tb-h:          36px;
    --hs2-tb-pl:         20px;
    --hs2-tb-pr:         20px;
    --hs2-sb-w:          300px;
    --hs2-sb-pt:         0px;
    --hs2-sb-pl:         16px;
    --hs2-sb-pr:         16px;

    /* Internal */
    --hs2-search-bg:  #f3f3f3;
    --hs2-hover-bg:   #f5f5f5;
    --hs2-drop-bg:    #ffffff;
    --hs2-icon-c:     #333333;
    --hs2-trk-bg:     #dddddd;
    --hs2-thm-bg:     #ffffff;
    --hs2-shadow:     0 2px 12px rgba(0,0,0,.07);
    --hs2-shadow-lg:  0 8px 28px rgba(0,0,0,.10);
    --hs2-tr:         .28s ease;
    --hs2-font:       'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* Dark Mode */
#hs2-wrap.hs2-dark {
    --hs2-header-bg:  #121212;
    --hs2-topbar-bg:  #0d0d0d;
    --hs2-nav-bg:     #181818;
    --hs2-sidebar-bg: #161616;
    --hs2-text:       #f0f0f0;
    --hs2-muted:      #999999;
    --hs2-border:     #2a2a2a;
    --hs2-search-bg:  #242424;
    --hs2-hover-bg:   #222222;
    --hs2-drop-bg:    #1e1e1e;
    --hs2-icon-c:     #cccccc;
    --hs2-trk-bg:     #444444;
    --hs2-shadow:     0 2px 12px rgba(0,0,0,.45);
    --hs2-shadow-lg:  0 8px 28px rgba(0,0,0,.55);
}

/* Reset */
#hs2-wrap *,#hs2-wrap *::before,#hs2-wrap *::after{box-sizing:border-box;margin:0;padding:0}
#hs2-wrap{font-family:var(--hs2-font);color:var(--hs2-text);transition:color var(--hs2-tr)}
#hs2-wrap a{text-decoration:none;color:inherit}
#hs2-wrap ul{list-style:none}
#hs2-wrap button{cursor:pointer;font-family:var(--hs2-font);border:none;background:none}

/* ═══ TOP BAR ═══ */
#hs2-topbar{
    background:var(--hs2-topbar-bg);
    border-bottom:1px solid var(--hs2-border);
    height:var(--hs2-tb-h);
    transition:background var(--hs2-tr),border-color var(--hs2-tr);
}
.hs2-tb-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:100%;max-width:1400px;margin:0 auto;
    padding:0 var(--hs2-tb-pr) 0 var(--hs2-tb-pl);
}
.hs2-tb-left,.hs2-tb-right{display:flex;align-items:center;gap:10px}
.hs2-tb-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--hs2-muted);font-weight:500;white-space:nowrap}
.hs2-tb-sep{color:var(--hs2-border);font-size:11px}
.hs2-social{display:flex;align-items:center;color:var(--hs2-muted);transition:color var(--hs2-tr)}
.hs2-social:hover{color:var(--hs2-primary)}

/* ═══ MAIN HEADER ═══ */
#hs2-header{
    position:sticky;top:0;left:0;right:0;z-index:9990;
    background:var(--hs2-header-bg);
    border-bottom:1px solid var(--hs2-border);
    box-shadow:var(--hs2-shadow);
    transition:background var(--hs2-tr),border-color var(--hs2-tr),box-shadow var(--hs2-tr);
    animation:hs2FadeDown .4s ease forwards;
}
@keyframes hs2FadeDown{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}

.hs2-hdr-inner{
    display:flex;align-items:center;
    height:var(--hs2-hdr-h);
    max-width:1400px;margin:0 auto;
    padding:var(--hs2-hdr-pt) var(--hs2-hdr-pr) var(--hs2-hdr-pb) var(--hs2-hdr-pl);
    gap:8px;
}
.hs2-slot{display:flex;align-items:center;gap:6px}
.hs2-left{flex-shrink:0}
.hs2-center{flex:1;justify-content:center;min-width:0;overflow:hidden}
.hs2-right{flex-shrink:0;margin-left:auto}

/* Logo-center layout */
.hs2-logo-center .hs2-left{flex:1}
.hs2-logo-center .hs2-right{flex:1;justify-content:flex-end;margin-left:0}
.hs2-logo-center .hs2-center{flex:0 0 auto}

/* ── Hamburger — Foxiz exact style ── */
.hs2-ham{
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    width:var(--hs2-ham-btn-size);height:var(--hs2-ham-btn-size);
    background:var(--hs2-ham-bg);
    border-radius:var(--hs2-ham-radius);
    flex-shrink:0;position:relative;
    transition:opacity .2s ease,background var(--hs2-tr);
}
.hs2-ham:hover{opacity:.75}
.hs2-hl{
    display:block;
    width:var(--hs2-ham-w);height:var(--hs2-ham-h);
    background:var(--hs2-ham-color);
    border-radius:var(--hs2-ham-h);
    position:absolute;left:50%;
    margin-left:calc(var(--hs2-ham-w) / -2);
    transform-origin:center;
    transition:transform .34s cubic-bezier(.4,0,.2,1),
               opacity .24s ease,top .3s cubic-bezier(.4,0,.2,1),
               background var(--hs2-tr);
}
.hs2-hl-t{top:calc(50% - var(--hs2-ham-gap) - var(--hs2-ham-h))}
.hs2-hl-m{top:50%;transform:translateY(-50%)}
.hs2-hl-b{top:calc(50% + var(--hs2-ham-gap))}

/* Open X */
.hs2-ham.hs2-open .hs2-hl-t{top:50%;transform:translateY(-50%) rotate(45deg)}
.hs2-ham.hs2-open .hs2-hl-m{opacity:0;transform:translateY(-50%) scaleX(0)}
.hs2-ham.hs2-open .hs2-hl-b{top:50%;transform:translateY(-50%) rotate(-45deg)}

/* ── Logo ── */
.hs2-logo{display:flex;align-items:center;flex-shrink:0;margin-left:var(--hs2-logo-ml);margin-right:var(--hs2-logo-mr)}
.hs2-logo-img{height:var(--hs2-logo-h);width:auto;display:block}
.hs2-logo-txt{font-size:24px;font-weight:900;letter-spacing:-.8px;color:var(--hs2-text);line-height:1;white-space:nowrap;transition:color var(--hs2-tr)}

/* ── Icon button ── */
.hs2-icon-btn{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;color:var(--hs2-icon-c);border-radius:8px;
    flex-shrink:0;transition:background var(--hs2-tr),color var(--hs2-tr);
}
.hs2-icon-btn:hover{background:var(--hs2-hover-bg);color:var(--hs2-primary)}
.hs2-icon-btn svg{width:var(--hs2-search-size);height:var(--hs2-search-size)}

/* ── Dark Toggle ── */
.hs2-dark-btn{
    display:flex;align-items:center;gap:5px;
    color:var(--hs2-icon-c);padding:4px 6px;border-radius:8px;
    flex-shrink:0;transition:background var(--hs2-tr);
}
.hs2-dark-btn:hover{background:var(--hs2-hover-bg)}
.hs2-trk{
    display:inline-flex;align-items:center;
    width:36px;height:20px;background:var(--hs2-trk-bg);
    border-radius:10px;padding:2px;transition:background var(--hs2-tr);flex-shrink:0;
}
.hs2-thm{
    width:16px;height:16px;border-radius:50%;
    background:var(--hs2-thm-bg);
    box-shadow:0 1px 4px rgba(0,0,0,.25);
    transition:transform var(--hs2-tr);
}
#hs2-wrap:not(.hs2-dark) .hs2-thm{transform:translateX(0)}
#hs2-wrap:not(.hs2-dark) .hs2-sun{display:block}
#hs2-wrap:not(.hs2-dark) .hs2-moon{display:none}
#hs2-wrap.hs2-dark .hs2-thm{transform:translateX(16px)}
#hs2-wrap.hs2-dark .hs2-trk{background:var(--hs2-primary)}
#hs2-wrap.hs2-dark .hs2-sun{display:none}
#hs2-wrap.hs2-dark .hs2-moon{display:block;color:var(--hs2-primary)}

/* ── Subscribe ── */
.hs2-sub-btn{
    display:inline-flex;align-items:center;justify-content:center;
    padding:8px 15px;background:var(--hs2-primary);color:#fff!important;
    font-size:13px;font-weight:700;border-radius:6px;letter-spacing:.02em;
    white-space:nowrap;flex-shrink:0;
    transition:background var(--hs2-tr),transform .15s ease;
}
.hs2-sub-btn:hover{background:var(--hs2-primary-hover);transform:translateY(-1px)}
.hs2-sub-full{width:100%;padding:11px 15px;font-size:14px;border-radius:8px}

/* ── Ticker ── */
.hs2-ticker{
    display:flex;align-items:center;overflow:hidden;
    border:1px solid var(--hs2-border);border-radius:6px;height:36px;width:100%;
    transition:border-color var(--hs2-tr);
}
.hs2-tick-badge{
    display:flex;align-items:center;gap:6px;
    padding:0 12px;background:var(--hs2-primary);color:#fff;
    font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.08em;
    height:100%;flex-shrink:0;white-space:nowrap;
}
.hs2-tick-dot{width:7px;height:7px;border-radius:50%;background:#fff;animation:hs2Pulse 1.2s ease-in-out infinite}
@keyframes hs2Pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.hs2-tick-track{
    flex:1;overflow:hidden;height:100%;display:flex;align-items:center;
    background:var(--hs2-header-bg);padding:0 10px;position:relative;
    transition:background var(--hs2-tr);
}
.hs2-tick-inner,.hs2-tick-clone{
    display:flex;white-space:nowrap;will-change:transform;
    position:absolute;left:10px;
}
.hs2-tick-item{font-size:13px;font-weight:500;color:var(--hs2-text);padding-right:60px;transition:color var(--hs2-tr)}

/* ── Search Bar ── */
.hs2-search-bar{
    background:var(--hs2-header-bg);border-top:1px solid var(--hs2-border);
    overflow:hidden;max-height:0;
    transition:max-height .35s ease,padding .3s ease,background var(--hs2-tr),border-color var(--hs2-tr);
}
.hs2-search-bar.hs2-open{max-height:68px;padding:10px var(--hs2-hdr-pr) 10px var(--hs2-hdr-pl)}
.hs2-search-inner{
    display:flex;align-items:center;gap:10px;
    background:var(--hs2-search-bg);border-radius:8px;
    padding:9px 14px;max-width:640px;margin:0 auto;
    transition:background var(--hs2-tr);
}
.hs2-search-inner svg{color:var(--hs2-muted);flex-shrink:0}
.hs2-search-inner input[type="search"]{
    flex:1;border:none;background:none;font-size:14px;
    color:var(--hs2-text);font-family:var(--hs2-font);outline:none;
}
.hs2-search-inner input::placeholder{color:var(--hs2-muted)}
.hs2-search-inner button[type="submit"]{
    background:none;border:none;color:var(--hs2-muted);
    display:flex;align-items:center;padding:0;
    transition:color var(--hs2-tr);
}
.hs2-search-inner button[type="submit"]:hover{color:var(--hs2-primary)}

/* ═══ NAV BAR ═══ */
#hs2-nav{
    position:sticky;top:var(--hs2-hdr-h);z-index:9989;
    background:var(--hs2-nav-bg);border-bottom:2px solid var(--hs2-border);
    transition:background var(--hs2-tr),border-color var(--hs2-tr);
}
.hs2-nav-inner{
    max-width:1400px;margin:0 auto;
    padding:var(--hs2-nav-pt) var(--hs2-nav-pr) var(--hs2-nav-pb) var(--hs2-nav-pl);
    overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.hs2-nav-inner::-webkit-scrollbar{display:none}
#hs2NavList{display:flex;align-items:center;height:var(--hs2-nav-h);white-space:nowrap}
#hs2NavList>li>a{
    display:flex;align-items:center;height:var(--hs2-nav-h);
    padding:0 14px;font-size:var(--hs2-nav-fs);font-weight:700;
    color:var(--hs2-text);border-bottom:3px solid transparent;margin-bottom:-2px;
    transition:color var(--hs2-tr),border-color var(--hs2-tr);
}
#hs2NavList>li>a:hover,#hs2NavList>li>a.hs2-active{color:var(--hs2-primary);border-bottom-color:var(--hs2-primary)}
.hs2-more-li{position:relative}
.hs2-more-btn{
    display:flex;align-items:center;gap:4px;
    height:var(--hs2-nav-h);padding:0 14px;
    font-size:var(--hs2-nav-fs);font-weight:700;color:var(--hs2-text);
    border-bottom:3px solid transparent;margin-bottom:-2px;
    transition:color var(--hs2-tr);
}
.hs2-more-btn:hover{color:var(--hs2-primary)}
.hs2-more-btn svg{transition:transform var(--hs2-tr)}
.hs2-more-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.hs2-more-drop{
    position:absolute;top:calc(100% + 2px);left:0;
    background:var(--hs2-drop-bg);border:1px solid var(--hs2-border);
    border-radius:8px;box-shadow:var(--hs2-shadow-lg);min-width:180px;
    z-index:9995;opacity:0;transform:translateY(8px);pointer-events:none;
    transition:opacity .22s ease,transform .22s ease;
}
.hs2-more-drop.hs2-open{opacity:1;transform:translateY(0);pointer-events:all}
.hs2-more-drop ul{padding:6px 0}
.hs2-more-drop ul li a{
    display:block;padding:9px 18px;font-size:13px;font-weight:600;
    color:var(--hs2-text);transition:background var(--hs2-tr),color var(--hs2-tr);
}
.hs2-more-drop ul li a:hover{background:var(--hs2-hover-bg);color:var(--hs2-primary)}

/* ═══ OVERLAY ═══ */
.hs2-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9991;
    opacity:0;pointer-events:none;transition:opacity var(--hs2-tr);
    backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
}
.hs2-overlay.hs2-vis{opacity:1;pointer-events:all}

/* ═══ SIDEBAR ═══ */
#hs2-sidebar{
    position:fixed;top:0;left:0;bottom:0;
    width:var(--hs2-sb-w);max-width:90vw;
    background:var(--hs2-sidebar-bg);z-index:9992;
    display:flex;flex-direction:column;
    transform:translateX(-100%);
    transition:transform .35s cubic-bezier(.4,0,.2,1),background var(--hs2-tr);
    box-shadow:4px 0 32px rgba(0,0,0,.18);overflow:hidden;
}
#hs2-sidebar.hs2-open{transform:translateX(0)}

.hs2-sb-top{
    display:flex;align-items:center;height:60px;
    padding:0 var(--hs2-sb-pr) 0 var(--hs2-sb-pl);
    border-bottom:1px solid var(--hs2-border);gap:10px;flex-shrink:0;
}
.hs2-sb-close{
    display:flex;align-items:center;justify-content:center;
    width:40px;height:40px;background:var(--hs2-primary);
    border-radius:8px;flex-shrink:0;position:relative;
    transition:background var(--hs2-tr),transform .2s ease;
}
.hs2-sb-close:hover{background:var(--hs2-primary-hover);transform:scale(.94)}
.hs2-sb-xl{
    display:block;width:16px;height:2px;background:#fff;
    border-radius:2px;position:absolute;top:50%;left:50%;
}
.hs2-sb-xl1{transform:translate(-50%,-50%) rotate(45deg)}
.hs2-sb-xl2{transform:translate(-50%,-50%) rotate(-45deg)}
.hs2-sb-logo{flex:1;display:flex;align-items:center;justify-content:center}
.hs2-sb-logo img{max-height:30px;width:auto}
.hs2-sb-logo-txt{font-size:20px;font-weight:900;letter-spacing:-.5px;color:var(--hs2-text);transition:color var(--hs2-tr)}

.hs2-sb-search{
    padding:12px var(--hs2-sb-pr) 12px var(--hs2-sb-pl);
    border-bottom:1px solid var(--hs2-border);flex-shrink:0;
}
.hs2-sb-si{
    display:flex;align-items:center;gap:8px;
    background:var(--hs2-search-bg);border-radius:8px;
    padding:9px 12px;transition:background var(--hs2-tr);
}
.hs2-sb-si svg{color:var(--hs2-muted);flex-shrink:0}
.hs2-sb-si input[type="search"]{
    flex:1;border:none;background:none;font-size:13px;
    color:var(--hs2-text);font-family:var(--hs2-font);outline:none;
}
.hs2-sb-si input::placeholder{color:var(--hs2-muted)}
.hs2-sb-si button[type="submit"]{
    background:none;border:none;color:var(--hs2-muted);
    display:flex;align-items:center;padding:0;transition:color var(--hs2-tr);
}
.hs2-sb-si button[type="submit"]:hover{color:var(--hs2-primary)}

.hs2-sb-body{flex:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--hs2-border) transparent}
.hs2-sb-body::-webkit-scrollbar{width:4px}
.hs2-sb-body::-webkit-scrollbar-thumb{background:var(--hs2-border);border-radius:2px}
.hs2-sb-sec{padding:18px var(--hs2-sb-pr) 0 var(--hs2-sb-pl)}
.hs2-sb-head{font-size:11px;font-weight:800;color:var(--hs2-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;transition:color var(--hs2-tr)}
.hs2-sb-list{border-top:1px solid var(--hs2-border)}
.hs2-sb-list li a{
    display:flex;align-items:center;gap:10px;
    padding:12px 4px;font-size:14px;font-weight:600;color:var(--hs2-text);
    border-bottom:1px solid var(--hs2-border);
    transition:color var(--hs2-tr),padding-left var(--hs2-tr);
}
.hs2-sb-list li a:hover{color:var(--hs2-primary);padding-left:6px}
.hs2-sb-dot{font-size:18px;line-height:1;color:inherit;flex-shrink:0}
.hs2-sb-lbl{flex:1}
.hs2-sb-arr{color:var(--hs2-muted);flex-shrink:0}
.hs2-sb-socials{display:flex;align-items:center;gap:20px;margin-top:10px;padding-bottom:4px}
.hs2-sb-soc{display:flex;align-items:center;color:var(--hs2-text);transition:color var(--hs2-tr),transform .2s ease}
.hs2-sb-soc:hover{color:var(--hs2-primary);transform:scale(1.15)}
.hs2-sb-foot{padding:14px var(--hs2-sb-pr) 14px var(--hs2-sb-pl);border-top:1px solid var(--hs2-border);flex-shrink:0}
.hs2-sb-copy{font-size:11px;color:var(--hs2-muted);line-height:1.6;transition:color var(--hs2-tr)}

/* ═══ RESPONSIVE ═══ */
@media(max-width:1100px){.hs2-center:has(.hs2-ticker){display:none}}
@media(max-width:768px){
    #hs2-wrap{--hs2-hdr-h:56px;--hs2-sb-w:280px}
    .hs2-tb-inner{padding:0 14px}
    .hs2-tb-item:first-child{display:none}
    .hs2-logo-txt{font-size:20px}
    .hs2-sub-btn:not(.hs2-sub-full){padding:7px 11px;font-size:12px}
    #hs2-nav{top:var(--hs2-hdr-h)}
    #hs2NavList>li>a,.hs2-more-btn{padding:0 10px}
}
@media(max-width:480px){
    #hs2-wrap{--hs2-hdr-h:52px;--hs2-sb-w:100vw}
    #hs2-topbar{display:none}
    .hs2-logo-txt{font-size:18px}
    .hs2-sub-btn:not(.hs2-sub-full){display:none}
    #hs2NavList>li>a,.hs2-more-btn{padding:0 8px;font-size:13px}
}
