/* =========================================================
   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;
  border: none; outline: none; box-shadow: none; 
}
.site-logo:hover{ 
  opacity:1; border: none; outline: none; box-shadow: none;  
}
.site-logo img{ 
  height:100px; width:auto; display:block; 
  border: none; outline: none; box-shadow: none; 
}

/* 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 - SMOOTH TRANSITIONS */
.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 .3s cubic-bezier(0.4, 0, 0.2, 1);
  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);
  transform: translateY(-1px);
}

/* 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);
  transform: translateY(0);
}

/* 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;
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 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));
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}
.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);
  transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* =========================================================
   MOBILE RESPONSIVE — HIDE LAMP INDICATOR
   ========================================================= */
@media (max-width:768px){
  .site-header{ padding:1.5rem 1rem; }
  .header-left{ flex-direction:column; align-items:flex-start; gap:1rem; }
  
  /* Consistent logo size across all pages */
  .site-logo img{ height:70px; width:auto; }
  
  /* Consistent title size */
  .site-title{ font-size: 1.5rem; }
  
  /* Adjust nav container for mobile */
  .nav-container{
    padding:.2rem;
    gap:.35rem;
  }
  
  /* Consistent link sizing on mobile */
  .nav-container a{ 
    padding:.5rem 1rem; 
    min-width:70px;
    height:40px;
    font-size:.85rem;
  }
  
  /* HIDE LAMP INDICATOR ON MOBILE */
  .lamp-indicator,
  .lamp-indicator::before,
  .lamp-indicator::after{
    display: none !important;
    opacity: 0 !important;
  }
}

/* Small mobile devices */
@media (max-width:480px){
  .site-header{ padding:1rem 0.75rem; }
  
  .site-logo img{ height:60px; }
  .site-title{ font-size: 1.25rem; }
  
  .nav-container a{ 
    padding:.45rem .85rem; 
    min-width:60px;
    height:38px;
    font-size:.8rem;
  }
}

/* =========================================================
   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; }
}

/* =========================================================
   PAGE TRANSITION SMOOTHING
   ========================================================= */
body {
  transition: opacity 0.2s ease-in-out;
}

/* Fade effect for page transitions (optional - add to your HTML) */
.page-transition-enter {
  opacity: 0;
}

.page-transition-enter-active {
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.page-transition-exit {
  opacity: 1;
}

.page-transition-exit-active {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}