/* ============================================
   NAVBAR.CSS – Leadership Bar + Ticker + Nav
   ============================================ */

/* ── LEADERSHIP BAR ── */
#lb{background:linear-gradient(135deg,var(--dark),#051a4a);border-bottom:3px solid var(--gold);width:100%}

/* centered, compact */
.lb-inner{
  display:flex;justify-content:center;align-items:center;
  width:100%;gap:8px;padding:8px 20px;
}

.lb-card{
  display:flex;align-items:center;gap:10px;
  padding:8px 14px;border-radius:12px;
  border:1px solid rgba(255,215,0,.12);
  position:relative;overflow:hidden;cursor:pointer;
  transition:all .4s cubic-bezier(.4,0,.2,1);
  flex-shrink:0;background:rgba(255,255,255,.04);
}
.lb-card:hover{
  background:rgba(255,215,0,.1);
  border-color:var(--gold);
  box-shadow:0 8px 32px rgba(255,215,0,.2);
  transform:translateY(-3px) scale(1.04);
  z-index:10;
}
.lb-card::after{
  content:'';position:absolute;top:0;left:-100%;width:50%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.07),transparent);
  transform:skewX(-20deg);transition:.5s;
}
.lb-card:hover::after{left:130%}

/* Avatar – always visible, bigger on hover */
.lb-avatar{
  width:44px;height:44px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,#0d2d6e,#003893);
  border:2px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  box-shadow:0 0 12px rgba(255,215,0,.15);
  transition:all .4s cubic-bezier(.4,0,.2,1);
}
.lb-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.lb-avatar-text{font-size:10px;font-weight:800;color:var(--gold);text-align:center;line-height:1.2;letter-spacing:.3px}
.lb-card:hover .lb-avatar{width:64px;height:64px;box-shadow:0 0 28px rgba(255,215,0,.45)}

/* Name always visible, details expand on hover */
.lb-info{display:flex;flex-direction:column;justify-content:center;white-space:nowrap}
.lb-name{color:var(--gold);font-weight:700;font-size:12px;line-height:1.3;transition:.3s}
.lb-card:hover .lb-name{font-size:13.5px}

/* Title + Org hidden by default, shown on hover */
.lb-title{
  color:#8eb4e8;font-size:0;line-height:1;
  max-height:0;overflow:hidden;opacity:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  margin-top:0;
}
.lb-org{
  color:rgba(255,255,255,.45);font-size:0;
  max-height:0;overflow:hidden;opacity:0;
  transition:all .35s cubic-bezier(.4,0,.2,1);
  margin-top:0;
}
.lb-card:hover .lb-title{font-size:11px;max-height:30px;opacity:1;margin-top:3px}
.lb-card:hover .lb-org{font-size:10px;max-height:20px;opacity:1;margin-top:2px}

/* ── TICKER – Typewriter style ── */
#ticker{
  background:linear-gradient(90deg,#051a4a,var(--blue));
  border-bottom:1px solid rgba(255,215,0,.3);
  display:flex;align-items:center;width:100%;height:40px;overflow:hidden;
}
.ticker-label{
  background:linear-gradient(135deg,var(--gold),var(--gold2));
  color:var(--blue);font-weight:800;font-size:11px;
  padding:0 26px 0 14px;height:100%;
  display:flex;align-items:center;
  white-space:nowrap;flex-shrink:0;
  letter-spacing:.8px;text-transform:uppercase;
  clip-path:polygon(0 0,100% 0,90% 100%,0 100%);
}
.ticker-text{
  color:var(--white);font-size:13px;padding:0 20px;
  display:flex;align-items:center;gap:10px;
  height:100%;flex:1;overflow:hidden;white-space:nowrap;
}
.ticker-dot{color:var(--gold);font-size:16px;flex-shrink:0}
#typewriter{display:inline-block}
#typewriter-cursor{
  display:inline-block;width:2px;height:14px;
  background:var(--gold);margin-left:2px;
  vertical-align:middle;animation:blink .7s step-end infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}

/* ── NAVBAR ── */
#navbar{
  background:var(--blue);position:sticky;top:0;z-index:1000;
  box-shadow:0 3px 20px rgba(0,0,0,.3);width:100%;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 40px;width:100%}
.nav-logo{display:flex;align-items:center;gap:10px;padding:10px 0}
.nav-logo-icon{
  width:84px;height:84px;
  background:linear-gradient(135deg,#fff,#f5f5f0);
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;overflow:hidden;
  box-shadow:0 0 16px rgba(255,255,255,.25);
  padding:4px;
}
.nav-logo-icon img{
  width:100%;height:100%;
  object-fit:contain;display:block;
}
.nav-logo-text{color:#fff;font-weight:700;font-size:30px;line-height:1.2}
.nav-logo-text span{color:var(--gold);font-size:20px;display:block;font-weight:400}

.nav-links{display:flex;list-style:none}
.nav-links a{color:rgba(255,255,255,.88);font-size:13px;padding:17px 13px;display:block;transition:.2s;font-weight:500;position:relative}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-links a::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:0;height:2px;background:var(--gold);transition:.2s}
.nav-links a:hover::after,.nav-links a.active::after{width:70%}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:10px}
.hamburger span{width:24px;height:2px;background:#fff;border-radius:2px;transition:.3s}
#mob-menu{display:none;background:var(--dark);padding:10px 20px;width:100%}
#mob-menu a{display:block;color:#fff;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}
#mob-menu a:hover{color:var(--gold)}

/* ── RESPONSIVE ── */
@media(max-width:860px){
  .lb-inner{grid-template-columns:repeat(2,1fr)}
  .nav-inner{padding:0 20px}
}
@media(max-width:640px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .lb-inner{grid-template-columns:repeat(2,1fr)}
}