/* =====================================================================
   SITE-HEADER.CSS — Desktop header (topbar + branding ribbon)
   Depends on :root variables defined in homepage.css — load that first.
   ===================================================================== */

/* Hidden by default so it stays hidden even on layout-desktop.ejs,
   which never loads site-header-mobile.css. site-header-mobile.css
   re-shows it via a media query when it IS loaded (layout-mobile.ejs). */
.mobile-icon-btn{display:none;}

/* ---------- Top branding ribbon ---------- */
.top-ribbon{padding:10px 0;background:var(--bg);}
.ribbon-bar{max-width:1240px;margin:0 auto;padding:0 24px;}
.ribbon-color{
  background:linear-gradient(90deg,#0a0e1c 0%,#1c1650 55%,#3454ff 130%);
  border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 8px 20px -8px rgba(20,25,55,.25);
}
.ribbon-mask{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);}
.ribbon-track{display:flex;align-items:center;gap:0;width:max-content;animation:ribbon-scroll 22s linear infinite;padding:9px 0;}
@keyframes ribbon-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ribbon-item{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:#fff;letter-spacing:0.2px;white-space:nowrap;padding:0 18px;}
.ribbon-item svg{width:13px;height:13px;color:#8fa2ff;flex-shrink:0;}
.ribbon-sep{color:rgba(255,255,255,.25);font-size:11px;}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:200;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--border);
}
.topbar-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 24px;max-width:1240px;margin:0 auto;gap:24px;
}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  box-shadow:0 6px 16px var(--blue-glow);
}
.brand-mark svg{width:18px;height:18px;color:#fff;}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;}
.brand-name{font-weight:800;font-size:19px;letter-spacing:-0.3px;color:var(--ink);}
.brand-tag{font-size:9.5px;color:var(--faint);letter-spacing:0.3px;margin-top:1px;font-weight:600;text-transform:uppercase;}

nav.main-nav{display:flex;align-items:center;gap:26px;}
.nav-link{display:flex;align-items:center;gap:4px;font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap;transition:color .15s;}
.nav-link:hover{color:var(--blue);}
.nav-link svg{width:13px;height:13px;opacity:0.55;}

.top-actions{display:flex;align-items:center;gap:10px;}
.search-box{display:flex;align-items:center;gap:8px;background:var(--bg-tint);border:1px solid var(--border);border-radius:20px;padding:8px 14px;width:200px;transition:box-shadow .15s;}
.search-box:focus-within{box-shadow:0 0 0 3px var(--blue-bg);border-color:var(--blue);}
.search-box input{border:none;background:transparent;outline:none;font-size:12.5px;width:100%;color:var(--ink);}
.search-box svg{width:15px;height:15px;color:var(--faint);flex-shrink:0;}
.btn-nav-cta{
  background:var(--ink);color:#fff;font-size:12.5px;font-weight:700;
  padding:10px 18px;border-radius:10px;border:none;display:flex;align-items:center;gap:6px;
}
.btn-nav-cta svg{width:14px;height:14px;}
.burger{display:none;background:none;border:none;padding:8px;}
.burger svg{width:22px;height:22px;color:var(--ink);}