/*
 * header.css — site header. Sticky top, blurred translucent background,
 * three regions: brand (left), search (centre, lg+), site-switcher (right).
 * Mirrors the Next.js Header.tsx structure; class names are the only
 * difference.
 */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-height);
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.site-header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--space-3);
  gap: var(--space-3);
}
@media (min-width: 640px) {
  .site-header-inner {
    padding: 0 var(--space-6);
    gap: var(--space-6);
  }
}

/* Mobile drawer-toggle button — visible below lg only. */
.site-header-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  transition: background-color 150ms ease;
}
.site-header-menu-btn:hover {
  background: hsl(var(--accent));
}
@media (min-width: 1024px) {
  .site-header-menu-btn {
    display: none;
  }
}

.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
.site-logo-img {
  width: 1.75rem;
  height: 1.75rem;
}
/* Show white logo on dark theme (default), black logo on light theme.
   Both are mounted in the DOM so the swap is instant on theme toggle. */
.site-logo-img--light { display: none; }
:root[data-theme="light"] .site-logo-img--dark  { display: none; }
:root[data-theme="light"] .site-logo-img--light { display: inline-block; }
.site-logo-text {
  display: none;
  font-size: var(--text-sm);
  font-weight: 600;
  color: hsl(var(--foreground));
}
@media (min-width: 640px) {
  .site-logo-text {
    display: inline;
  }
}

/* Centre search slot — flex:1 so it absorbs spare horizontal space.
   The inner button has its own max-width and is centred via mx-auto.
   The right cluster has its own natural width on the other side, so
   the search button truly sits in the middle of the header. */
.site-search-slot {
  display: none;
}
@media (min-width: 1024px) {
  .site-search-slot {
    display: flex;
    flex: 1 1 auto;
    justify-content: center;
    min-width: 0;
  }
}

.site-search-btn {
  display: none;
}
@media (min-width: 1024px) {
  .site-search-btn {
    display: inline-flex;
    width: 100%;
    max-width: 36rem;
    align-items: center;
    gap: var(--space-2);
    height: 2.25rem;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--border));
    background: hsl(var(--card));
    color: hsl(var(--muted-foreground));
    font-size: var(--text-sm);
    transition: background-color 150ms ease, color 150ms ease;
  }
  .site-search-btn:hover {
    background: hsl(var(--accent));
    color: hsl(var(--foreground));
  }
}
.site-search-btn svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}
.site-search-btn span {
  flex: 1 1 auto;
  text-align: left;
}
.site-search-btn kbd {
  font-size: var(--text-xs);
  background: hsl(var(--muted));
  padding: var(--space-0_5) var(--space-1_5);
  border-radius: var(--radius-sm);
  color: hsl(var(--muted-foreground) / 0.8);
}

/* Right cluster — site switcher dropdown trigger. */
.site-header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
}
@media (min-width: 640px) {
  .site-header-right { gap: var(--space-2); }
}

.site-switcher {
  position: relative;
}
.site-switcher-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 2.25rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  transition: background-color 150ms ease;
}
.site-switcher-trigger:hover {
  background: hsl(var(--accent));
}
.site-switcher-trigger svg {
  width: 0.875rem;
  height: 0.875rem;
  transition: transform 150ms ease;
}
.site-switcher.is-open .site-switcher-trigger svg {
  transform: rotate(180deg);
}
.site-switcher-menu {
  display: none;
  position: absolute;
  right: 0;
  margin-top: var(--space-1);
  width: 12rem;
  border-radius: var(--radius-md);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--popover));
  box-shadow: 0 10px 30px -10px hsl(0 0% 0% / 0.5);
  overflow: hidden;
}
.site-switcher.is-open .site-switcher-menu {
  display: block;
}
.site-switcher-item {
  display: block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  transition: background-color 150ms ease, color 150ms ease;
}
.site-switcher-item:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}
.site-switcher-item.is-current {
  color: hsl(var(--foreground));
  font-weight: 500;
}