/* css/header.css
   Global, reusable header styles — polished, centered nav, pill CTA, mobile menu */
:root{
  --brand-color:#000000;
  --muted:#6b7280;
  --cta-gradient:linear-gradient(180deg,#000000,#1a1a1a);
  --glass-bg: rgba(255,255,255,0.78);
  --shadow: 0 18px 40px rgba(0,0,0,0.10);
  --gap: 1rem;
  --container-max:1140px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--glass-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}

.container.header-inner{
  max-width:var(--container-max);
  margin:0 auto;
  padding: .9rem 24px;
  display:flex;
  align-items:center;
  gap:var(--gap);
}

.brand{
  display:flex;
  align-items:center;
  gap:.75rem;
  text-decoration:none;
  color:var(--brand-color);
}
.site-logo{
  width:64px;
  height:64px;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 8px 30px rgba(0,0,0,0.06);
  border:1px solid rgba(0,0,0,0.04);
}
.brand-text{
  font-weight:700;
  font-size:1.06rem;
  letter-spacing:-0.01em;
}

.site-nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.4rem;
  flex:1;
}
.site-nav a{
  color:rgba(0,0,0,0.88);
  text-decoration:none;
  padding:.35rem .25rem;
  font-weight:600;
  border-radius:7px;
  transition:color .16s ease, transform .16s ease;
  position:relative;
  font-size:1rem;
}
.site-nav a::after{
  content:'';
  position:absolute;
  left:50%;
  transform:translateX(-50%) scaleX(0);
  bottom:-6px;
  height:2px;
  width:44%;
  background:linear-gradient(90deg,#000000,#1a1a1a);
  border-radius:2px;
  transition:transform .16s ease;
}
.site-nav a:hover{ transform:translateY(-2px); color:#000000; }
.site-nav a:hover::after{ transform:translateX(-50%) scaleX(1); }

.nav-toggle{
  display:none;
  border:0;
  background:transparent;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.nav-toggle .bar{
  display:block;
  width:18px;
  height:2px;
  background:rgba(0,0,0,0.8);
  margin:3px 0;
  border-radius:2px;
}

.header-actions{ display:flex; gap:1rem; align-items:center; margin-left:auto; }
.header-link{ color:var(--brand-color); font-weight:600; text-decoration:none; }
.button.button-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.86rem 1.5rem;
  border-radius:999px;
  font-weight:700;
  background:var(--cta-gradient);
  color:#fff;
  box-shadow:var(--shadow);
  border:none;
  text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.button.button-primary:active{ transform:translateY(1px); }

.mobile-menu-panel{
  position:fixed;
  inset:0 0 auto 0;
  top:72px;
  right:24px;
  left:24px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 30px 60px rgba(0,0,0,0.12);
  padding:1rem;
  display:none;
  flex-direction:column;
  gap:.75rem;
  z-index:70;
}
.mobile-menu-panel.open{ display:flex; }
.mobile-menu-panel a{ display:block; padding:.75rem 1rem; font-weight:600; color:var(--brand-color); text-decoration:none; border-radius:8px; }
.mobile-menu-footer{ margin-top:.5rem; border-top:1px solid rgba(0,0,0,0.04); padding-top:.75rem; }

.site-header .empty-box, .site-header .mystery-box{ display:none !important; }

@media (max-width:920px){
  .site-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .container.header-inner{ padding:.6rem 16px; align-items:center; gap:.5rem; }
  .brand-text{ font-size:1rem; }
  .site-logo{ width:56px; height:56px; }
  .header-actions{ gap:.4rem; }
  .header-link{ font-size:.95rem; white-space:nowrap; }
  .button.button-primary{ padding:.7rem 1.2rem; font-size:.95rem; white-space:nowrap; }
}

@media (max-width:480px){
  .site-logo{ width:48px; height:48px; }
  .brand-text{ font-size:.9rem; }
  .container.header-inner{ padding:.5rem 12px; gap:.4rem; }
  .header-actions{ gap:.3rem; }
  .header-link{ font-size:.85rem; white-space:nowrap; }
  .button.button-primary{ padding:.6rem 1rem; font-size:.85rem; white-space:nowrap; }
  .nav-toggle{ width:40px; height:40px; }
  .nav-toggle .bar{ width:16px; height:1.5px; margin:2.5px 0; }
}