/* =========================================================
   HEADER — EXACT LOOK (LIGHT GRAY PILL + BLACK ACTIVE CHIP)
   Locks appearance in BOTH light & dark system themes
   ========================================================= */

:root, html { color-scheme: dark !important; } /* keep built-ins dark */

/* --- Exact palette tuned to your screenshot --- */
:root{
  --nav-pill-bg:   #b8b2b6;   /* light gray pill */
  --nav-pill-bd:   #6e696d;   /* pill border line */
  --nav-pill-sh:   0 6px 18px rgba(0,0,0,.25);

  --nav-chip-bg:   #0b0b0b;   /* active chip: inky black */
  --nav-chip-bd:   #2a292a;   /* chip border */

  --nav-text:      #ffffff;   /* active text */
  --nav-text-dim:  #d7d4d7;   /* inactive text on gray */

  --nav-accent:    #ec4899;   /* pink nub */
}

/* Header frame */
.site-header{
  position: relative; top:0; left:0; right:0;
  z-index: 1000; padding: 1.5rem 2rem; background: transparent;
}
.header-wrapper{ max-width: 1400px; margin: 0 auto; }
.header-left{ display:flex; align-items:center; gap:1.5rem; }

/* Logo */
.site-logo{ display:flex; align-items:center; transition:none; flex-shrink:0; }
.site-logo:hover{ opacity:1; }
.site-logo img{ height:100px; width:auto; display:block; }

/* Brand title (kept subtle next to pill) */
.site-title{
  font-size: 2rem; font-weight: 700;
  color: var(--nav-text); text-decoration:none; flex-shrink:0;
}

/* Nav bar container */
.nav-bar{ position: relative; }

.nav-container{
  display:flex; align-items:center; gap:.5rem;
  background: var(--nav-pill-bg);
  border: 2px solid var(--nav-pill-bd);
  padding:.25rem; border-radius:9999px; position:relative;
  box-shadow: var(--nav-pill-sh);
}

/* list */
.nav-container ul{ display:flex; list-style:none; margin:0; padding:0; gap:.5rem; position:relative; z-index:2; }
.nav-container li{ margin:0; }

/* links */
.nav-container a{
  position:relative; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:.95rem; font-weight:800;
  padding:.625rem 1.75rem; border-radius:9999px;
  transition: all .25s ease;
  color: var(--nav-text-dim);
  text-decoration:none; white-space:nowrap;
  min-width:100px; height:44px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

/* hover (very subtle on the gray pill) */
.nav-container a:hover{
  background: rgba(0,0,0,.06);
  color: var(--nav-text-dim);
}

/* ACTIVE chip — black with white (or brand) text */
.nav-container a.nav-active{
  background: var(--nav-chip-bg) !important;
  border: 2px solid var(--nav-chip-bd) !important;
  color: var(--nav-text) !important;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 2px 10px rgba(0,0,0,.25);
}

/* Pink nub (lamp) centered-left like your image */
.lamp-indicator{
  position:absolute; inset:0; width:100%;
  background: transparent; border-radius:9999px; z-index:1;
  pointer-events:none; opacity:1;
}
.lamp-indicator::before{
  content:''; position:absolute; top:-.55rem; left:22%;
  width: 52px; height: 2px; background: var(--nav-accent);
  border-radius: 9999px;
  filter: drop-shadow(0 6px 10px color-mix(in oklab, var(--nav-accent) 40%, transparent));
}
.lamp-indicator::after{
  content:''; position:absolute; top:-1rem; left:22%;
  width:60px; height:16px;
  background: radial-gradient(ellipse at center, color-mix(in oklab, var(--nav-accent) 30%, transparent) 0%, transparent 70%);
  filter: blur(10px);
}

/* Mobile tweaks */
@media (max-width:768px){
  .site-header{ padding:1.5rem 1rem; }
  .header-left{ flex-direction:column; align-items:flex-start; gap:1rem; }
  .site-logo img{ height:50px; }
  .nav-container a{ padding:.625rem 1.25rem; min-width:80px; }
}

/* =========================================================
   HARD LOCK — keep this exact look when system = LIGHT
   ========================================================= */
@media (prefers-color-scheme: light){
  html body .site-header .nav-container{
    background: var(--nav-pill-bg) !important;
    border-color: var(--nav-pill-bd) !important;
    box-shadow: var(--nav-pill-sh) !important;
  }
  html body .site-header .nav-container a{
    color: var(--nav-text-dim) !important;
  }
  html body .site-header .nav-container a:hover{
    background: rgba(0,0,0,.06) !important;
    color: var(--nav-text-dim) !important;
  }
  html body .site-header .nav-container a.nav-active{
    background: var(--nav-chip-bg) !important;
    border-color: var(--nav-chip-bd) !important;
    color: var(--nav-text) !important;
  }
  html body .site-header .site-title{ color: var(--nav-text) !important; }
}