/* ============================================================
   header.css — Site Header Styles
   ============================================================ */

#site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--transition);
}
#site-header.scrolled { box-shadow: var(--shadow-md); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between; height: 72px;
}

/* Logo */
.logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--text-dark);
}
.logo-icon {
  width: 38px; height: 38px;
  background: var(--primary); border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.logo-icon svg { width: 22px; height: 22px; fill: #fff; }
.logo span { color: var(--primary); }

/* Nav */
nav ul { display: flex; align-items: center; gap: 36px; }
nav a {
  font-weight: 500; font-size: 0.93rem; color: var(--text-body);
  transition: color var(--transition); position: relative;
}
nav a::after {
  content: ''; position: absolute; bottom: -3px; left: 0;
  width: 0; height: 2px; background: var(--primary); transition: width var(--transition);
}
nav a:hover { color: var(--primary); }
nav a:hover::after { width: 100%; }

.header-cta { display: flex; align-items: center; gap: 12px; }

/* Hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  cursor: pointer; padding: 6px; background: none; border: none;
}
.hamburger span { display: block; width: 24px; height: 2px; background: var(--text-dark); border-radius: 2px; transition: all var(--transition); }

/* Mobile Nav */
.mobile-nav {
  display: none; position: fixed; inset: 0;
  background: rgba(10,20,50,0.55); z-index: 999; backdrop-filter: blur(4px);
}
.mobile-nav.open { display: flex; }
.mobile-nav-panel {
  background: #fff; width: 300px; height: 100%;
  padding: 28px; display: flex; flex-direction: column; gap: 8px;
  animation: slideIn 0.28s ease;
}
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.mobile-nav-close { align-self: flex-end; background: none; border: none; font-size: 1.4rem; cursor: pointer; color: var(--text-dark); margin-bottom: 12px; }
.mobile-nav a { display: block; padding: 13px 0; font-size: 1.05rem; font-weight: 500; color: var(--text-dark); border-bottom: 1px solid var(--border); transition: color var(--transition); }
.mobile-nav a:hover { color: var(--primary); }

@media (max-width: 768px) {
  nav, .header-cta { display: none; }
  .hamburger { display: flex; }
}