/* ========================================
   HEADER & NAVIGATION STYLES
   ======================================== */

/* ---------- Top Banner ---------- */
.topbar{background:#1d1b29;color:#fff;font-size:14px}
.topbar .container{display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 24px;flex-wrap:wrap}
.topbar a.tb-link{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.topbar a.tb-link:hover{color:var(--yellow)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--line)}
.site-header .container{display:flex;align-items:center;gap:34px;height:76px}
.logo img{height:40px;width:auto}
.main-nav{display:flex;align-items:center;gap:26px;font-family:'Proxima Nova SemiBold',Arial,sans-serif;font-weight:600;font-size:15px}
.main-nav a{color:var(--ink);padding:27px 0;position:relative}
.main-nav a:hover{color:var(--purple)}
.main-nav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--purple)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:18px}
.header-actions a.login{font-family:'Proxima Nova SemiBold',Arial,sans-serif;font-weight:600;color:var(--purple)}
.header-actions a.login:hover{text-decoration:underline}
.nav-toggle{display:none}
#nav-state{display:none}

/* ---------- Responsive Navigation ---------- */
@media (max-width:820px){
    .nav-toggle{display:inline-block;margin-left:auto}
    .main-nav,.header-actions{display:none}
    #nav-state:checked ~ .main-nav{display:flex;position:absolute;top:76px;left:0;right:0;background:#fff;flex-direction:column;align-items:flex-start;gap:0;padding:8px 24px;border-bottom:1px solid var(--line);box-shadow:0 14px 28px rgba(0,0,0,.08)}
    #nav-state:checked ~ .main-nav a{width:100%;padding:14px 0;border-bottom:1px solid var(--line)}
}