/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--header-bg);
  backdrop-filter: saturate(1.4) blur(16px);
  -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--header-border);
}
.bar { display: flex; align-items: center; min-height: var(--header-h); gap: clamp(12px, 2vw, 28px); }

/* Brand */
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 500 1.28rem/1 var(--font-display); letter-spacing: -0.04em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand-mark { width: 30px; height: 30px; flex-shrink: 0; transition: transform 0.25s ease; }
.brand:hover .brand-mark { transform: rotate(-8deg) scale(1.06); }
.brand-mark .bg { fill: var(--accent); }
.brand-mark .stem { fill: #0a0a0a; }
.brand-mark .dot { fill: #0a0a0a; }

/* Nav */
.main-nav { display: flex; align-items: center; gap: 2px; margin-right: auto; }
.main-nav a {
  position: relative; padding: 8px 12px; border-radius: 8px;
  color: var(--muted); font: 500 0.9rem/1 var(--font-text); text-decoration: none;
  transition: color 0.15s, background-color 0.15s;
  white-space: nowrap; flex-shrink: 0;
}
.main-nav a:hover { color: var(--ink); background: var(--surface-2); }
.main-nav a[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--accent);
}

/* Actions */
.bar-actions { display: flex; align-items: center; gap: 8px; }
.bar-actions > .button { min-height: 38px; padding: 0 16px; font-size: 0.88rem; }

.palette-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 38px; min-width: 220px; padding: 0 8px 0 12px;
  border: 0; border-radius: 12px;
  background: var(--btn-quiet-bg); color: var(--muted); cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.palette-trigger:hover { background: var(--btn-quiet-hover); color: var(--ink); }
.palette-trigger-text { flex: 1; text-align: left; font-size: 0.88rem; }
.palette-kbd {
  display: inline-flex; align-items: center; padding: 3px 7px; border-radius: 7px;
  background: transparent; color: var(--muted); font: 600 0.68rem var(--font-text);
}

.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
  border: 0; border-radius: 12px; background: var(--btn-quiet-bg); color: var(--ink);
  cursor: pointer; flex-shrink: 0; transition: background-color 0.15s;
}
.theme-toggle:hover { background: var(--btn-quiet-hover); }
.theme-toggle svg { width: 17px; height: 17px; grid-area: 1 / 1; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-sun, :root.dark .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon, :root.dark .theme-toggle .icon-moon { display: none; }

/* Tablet / mobile */
@media (max-width: 1080px) {
  :root { --header-h: 94px; }
  .bar { flex-wrap: wrap; padding-block: 8px; row-gap: 6px; }
  .main-nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--line); padding-top: 6px; margin-right: 0; }
  .main-nav::-webkit-scrollbar { display: none; }
  .bar-actions { margin-left: auto; }
  .palette-trigger { min-width: 0; }
}
@media (max-width: 720px) {
  :root { --header-h: 88px; --gutter: 16px; }
  .bar-actions > .button { display: none; }
  .palette-kbd { display: none; }
  .palette-trigger { padding: 0 10px; min-height: 36px; }
  .palette-trigger-text { display: none; }
  .main-nav a { padding: 6px 10px; font-size: 0.85rem; }
}
@media (max-width: 440px) {
  .brand { font-size: 1.15rem; gap: 8px; }
  .brand-mark { width: 26px; height: 26px; }
  .theme-toggle { width: 34px; height: 34px; }
  .palette-trigger { min-height: 34px; padding: 0 8px; }
}