/* ============================================================
   SHARED SITE HEADER
   ============================================================ */
.site-header {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  padding:     var(--space-4) var(--space-8);
  position:    sticky;
  top:         0;
  z-index:     var(--z-sticky);
  background:  var(--color-bg);
  transition:  background-color var(--transition-theme);
}

/* ── Toggle rotation animation ── */
.theme-toggle svg {
  transition: transform 320ms ease;
}

.theme-toggle.is-rotated svg {
  transform: rotate(180deg);
}

/* Override design-system.css position:fixed when toggle lives inside header */
.site-header .theme-toggle {
  position:         static;
  top:              auto;
  right:            auto;
  background-color: transparent;
  border-color:     transparent;
  color:            var(--color-text-secondary);
  transition:
    background-color var(--transition-base),
    border-color     var(--transition-base),
    color            var(--transition-fast);
}

.site-header .theme-toggle:hover {
  background-color: var(--color-lifeos-bg);
  border-color:     var(--color-lifeos-border);
  color:            var(--color-title);
}

.site-header-name {
  font-size:      var(--text-sm);
  font-weight:    var(--weight-medium);
  color:          var(--color-title);
  letter-spacing: var(--tracking-tight);
  margin-right:   auto;
  transition:     color var(--transition-theme);
}

.site-header-nav {
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
}

.site-nav-link {
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  font-weight: var(--weight-regular);
  color:       var(--color-text-secondary);
  transition:  color var(--transition-fast);
}

.site-nav-link:hover {
  color: var(--color-text);
}

.site-nav-link--active {
  color:       var(--color-title);
  font-weight: var(--weight-medium);
}

/* ── Minimal variant: show only the toggle ── */
.header--minimal .site-header-name,
.header--minimal .site-header-nav {
  display: none;
}

.header--minimal .theme-toggle {
  margin-left: auto;
}