/* ============================================================
   CE Logistics — Shared header chrome
   Loaded by all 5 pages. The markup itself is injected into the
   empty <header class="header"> tag by buildHeader() in mobile-nav.js
   — this file only owns the styling, so header layout/behavior stays
   identical across pages by construction instead of by convention.
============================================================ */
.header {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: var(--nav-height-desktop);
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: var(--nav-border-bottom);
}
.header-inner {
  height: 100%;
  display: flex; align-items: center; gap: 48px;
}
.logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 18px; letter-spacing: 0.04em;
  color: var(--color-text-primary);
}
.logo img { height: 36px; width: auto; display: block; }
.nav-list {
  display: flex; align-items: center; gap: 4px;
  list-style: none; padding: 0; margin: 0;
}
.nav-list a {
  display: inline-block; padding: 8px 14px;
  color: var(--nav-link); font-size: 15px; font-weight: 500;
  border-radius: 8px;
  transition: color var(--duration-fast);
}
.nav-list a:hover { color: var(--nav-link-hover); background: var(--color-bg-subtle); }
.nav-list a.active { color: var(--nav-link-active); }
.nav-list a.active::after {
  content: ""; display: block; height: 2px; width: 24px;
  background: var(--color-primary); margin: 4px auto -10px; border-radius: 2px;
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.lang-switch {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 8px;
  color: var(--color-text-secondary); font-size: 14px; font-weight: 500;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}
.lang-switch:hover { border-color: var(--color-border-default); }
.lang-switch svg { width: 14px; height: 14px; }