/* header.css*/

/* ---------------------------
  Component variables (local)
  --------------------------- */
.site-header{
  /* component-scoped vars */
  --bg: rgba(6,10,14,0.6);
  --border: rgba(255,255,255,0.03);
  --mobile-nav-width: 78%;
  --mobile-nav-max-width: 360px;

  /* layout */
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;

  /* visuals */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);

  /* keep header content above page content */
  box-sizing: border-box;
}

/* Header inner wrapper: centers content and creates spacing */
.header-inner{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.25rem;
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Brand / logo link */
.brand{
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text);
  text-decoration: none;
}

/* ---------------------------
  Top navigation (desktop)
  --------------------------- */
.top-nav{
  display: flex;
  flex: 1;
  justify-content: center;
}

.top-nav-list{
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav-list a{
  color: var(--muted);
  text-decoration: none;
  padding: .35rem .45rem;
  border-radius: 6px;
  transition: color .18s, background-color .18s;
}

/* Hover + focus styles for keyboard accessibility */
.top-nav-list a:hover,
.top-nav-list a:focus,
.top-nav-list a:focus-visible{
  color: var(--text);
  background: rgba(55,160,255,0.04);
  outline: none;
  box-shadow: 0 0 0 3px rgba(55,160,255,0.06);
}

/* Call-to-action button in header */
.call-btn{
  background: var(--accent);
  padding: .45rem .9rem;
  border-radius: 8px;
  color: #041019;
  font-weight: 700;
  text-decoration: none;
}

/* Primary nav toggle (mobile) */
.nav-toggle{
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 1.6rem;
  display: none; /* shown in mobile media query */
  cursor: pointer;
}

/* ---------------------------
  Mobile navigation (slide-in)
  --------------------------- */
.mobile-nav{
  position: fixed;
  top: 0;
  right: -100%;
  width: var(--mobile-nav-width);
  max-width: var(--mobile-nav-max-width);
  height: 100vh;
  padding: 1.5rem;
  z-index: 1000;

  /* visuals */
  background: linear-gradient(180deg,#071018, #07141c);
  border-left: 1px solid rgba(255,255,255,0.02);

  /* motion */
  transition: right .32s cubic-bezier(.2,.9,.2,1);
  box-sizing: border-box;
}

/* Open state (slides in) */
.mobile-nav.open{
  right: 0;
}

/* close button inside mobile nav */
.nav-close{
  background: transparent;
  border: 0;
  color: var(--text);
  font-size: 2rem;
  align-self: flex-end;
  cursor: pointer;
}

/* mobile nav list styles */
.mobile-nav-list{
  list-style: none;
  padding: 1rem 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mobile-nav-list a{
  color: var(--text);
  text-decoration: none;
  font-size: 1.1rem;
  padding: .5rem;
  border-radius: 8px;
}

/* Hover + focus for mobile items */
.mobile-nav-list a:hover,
.mobile-nav-list a:focus,
.mobile-nav-list a:focus-visible{
  background: rgba(255,255,255,0.02);
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.02);
}

/* ---------------------------
  Responsive rules
  --------------------------- */
/* Mobile-first: hide top nav on small screens, show toggle */
@media (max-width: 980px){
  .top-nav{ display: none; }
  .call-btn{ display: none; }
  .nav-toggle{ display: block; }
}

/* Desktop-only: hide the mobile nav container */
@media (min-width: 981px){
  .mobile-nav{ display: none !important; }
}

/* ---------------------------
  Accessibility & preferences
  --------------------------- */
/* Respect reduced motion setting */
@media (prefers-reduced-motion: reduce){
  .top-nav-list a,
  .mobile-nav,
  .mobile-nav.open{
   transition: none !important;
  }
}

/* Ensure focus outlines for keyboard users who rely on browser defaults */
:focus{ outline: none; }
:focus-visible{ outline: none; }