/* ============================================================
   SchoolFMS — css/header.css
   ============================================================ */

.site-header {
  position: fixed; top:0; left:0; right:0; z-index:1000;
  height: var(--header-h);
  background: rgba(11,29,58,0.97);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.3); }

.header-inner {
  max-width: 1280px; margin:0 auto; height:100%;
  padding: 0 6%; display:flex; align-items:center;
  justify-content:space-between; gap:24px;
}

/* Logo */
.header-logo { display:flex; align-items:center; flex-shrink:0; }
.logo-img {
  height: 46px; width:auto; object-fit:contain;
  filter: drop-shadow(0 0 8px rgba(56,189,248,0.12));
  transition: filter 0.3s;
}
.header-logo:hover .logo-img { filter: drop-shadow(0 0 14px rgba(56,189,248,0.3)); }

/* Desktop Nav */
.header-nav { flex:1; display:flex; justify-content:center; }
.nav-list { display:flex; gap:4px; }
.nav-link {
  color: rgba(255,255,255,0.6); font-size:0.845rem; font-weight:500;
  padding:7px 12px; border-radius:6px; transition: color 0.2s, background 0.2s;
  white-space:nowrap;
}
.nav-link:hover { color:var(--white); background:rgba(255,255,255,0.06); }
.nav-link.active { color:var(--sky); background:rgba(56,189,248,0.08); }

/* Actions */
.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0; }
.header-login {
  display:flex; align-items:center; gap:6px;
  color:rgba(255,255,255,0.65); font-size:0.835rem; font-weight:600;
  padding:7px 14px; border-radius:6px;
  border:1px solid rgba(255,255,255,0.12); transition:all 0.2s;
}
.header-login:hover { color:var(--white); border-color:rgba(255,255,255,0.3); background:rgba(255,255,255,0.06); }
.header-cta {
  background:var(--blue); color:var(--white);
  font-size:0.835rem; font-weight:700; padding:9px 20px;
  border-radius:6px; white-space:nowrap; transition:all 0.25s;
  box-shadow:0 4px 16px rgba(26,86,219,0.35);
}
.header-cta:hover { background:var(--blue-dark); transform:translateY(-1px); }

/* Hamburger */
.hamburger { display:none; flex-direction:column; gap:5px; padding:6px; border-radius:6px; transition:background 0.2s; }
.hamburger:hover { background:rgba(255,255,255,0.08); }
.hamburger span { display:block; width:22px; height:2px; background:rgba(255,255,255,0.75); border-radius:2px; transition:all 0.3s; }
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Mobile Menu */
.mobile-menu {
  display:none; position:fixed; top:var(--header-h); left:0; right:0;
  background:rgba(8,18,40,0.98); backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,0.07);
  padding:20px 6% 28px;
  transform:translateY(-8px); opacity:0; transition:all 0.3s ease;
  pointer-events:none; z-index:999;
}
.mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:all; }
.mobile-nav-list { display:flex; flex-direction:column; gap:0; margin-bottom:20px; }
.mobile-nav-link {
  display:block; color:rgba(255,255,255,0.65); font-size:0.95rem; font-weight:500;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,0.06); transition:color 0.2s;
}
.mobile-nav-link:hover, .mobile-nav-link.active { color:var(--sky); }
.mobile-actions { display:flex; gap:10px; }
.mobile-login {
  flex:1; text-align:center; border:1px solid rgba(255,255,255,0.18);
  color:rgba(255,255,255,0.7); padding:12px; border-radius:8px;
  font-weight:600; font-size:0.875rem; transition:all 0.2s;
}
.mobile-login:hover { border-color:rgba(255,255,255,0.4); color:var(--white); }
.mobile-cta {
  flex:1; text-align:center; background:var(--blue); color:var(--white);
  padding:12px; border-radius:8px; font-weight:700; font-size:0.875rem; transition:background 0.2s;
}
.mobile-cta:hover { background:var(--blue-dark); }

/* Responsive */
@media (max-width:1100px) { .nav-link { font-size:0.79rem; padding:7px 9px; } }
@media (max-width:920px) {
  .header-nav { display:none; }
  .header-login span { display:none; }
  .hamburger { display:flex; }
  .mobile-menu { display:block; }
}
@media (max-width:480px) { .header-cta { display:none; } }