/* Canonical PeduliAI site header. Loaded after page CSS to prevent per-page drift. */
:root { --site-header-height: 72px; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  min-height: var(--site-header-height);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.site-header .header-inner {
  display: flex;
  align-items: center;
  min-height: var(--site-header-height);
  gap: 16px;
  flex-wrap: nowrap;
}

.site-header .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  white-space: nowrap;
  text-decoration: none;
}

.site-header .logo img { width: 40px; height: 40px; object-fit: cover; }
.site-header .logo-text { display: inline !important; white-space: nowrap; }
.site-header .nav-desktop {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}
.site-header .nav-desktop a {
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}
.site-header .nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; margin-left: auto; }
.site-header .header-download,
.site-header .lang-btn { white-space: nowrap; flex: 0 0 auto; }
.site-header .menu-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  align-items: center;
  justify-content: center;
}
.site-header .menu-toggle svg { display: block; pointer-events: none; }
.site-header .nav-mobile { display: none; }

.site-header--solid,
.site-header.scrolled {
  background: rgba(250, 252, 254, .96);
  border-bottom: 1px solid rgba(21, 42, 64, .1);
  box-shadow: 0 10px 30px rgba(9, 24, 43, .06);
  backdrop-filter: blur(14px);
}

.site-header--solid .logo-text,
.site-header--solid .menu-toggle,
.site-header.scrolled .logo-text,
.site-header.scrolled .menu-toggle { color: var(--brand); -webkit-text-fill-color: currentColor; }

.site-header--solid .nav-desktop a,
.site-header.scrolled .nav-desktop a { color: var(--ink-secondary); }

/* Keep controls legible whenever the header uses its light surface.
   These state rules intentionally live in the canonical header stylesheet so
   product-page overlay styles cannot leave white controls on a white header. */
.site-header--solid .nav-desktop a[aria-current="page"],
.site-header.scrolled .nav-desktop a[aria-current="page"] {
  background: var(--surface);
  color: var(--brand-dark);
}

.site-header.site-header--solid .lang-btn,
.site-header.scrolled .lang-btn {
  background: #fff;
  border-color: var(--border);
  color: var(--ink-secondary);
}

.site-header.site-header--solid .lang-btn:hover,
.site-header.scrolled .lang-btn:hover {
  background: var(--surface);
  border-color: var(--border-strong);
  color: var(--ink);
}

.site-header--overlay:not(.scrolled) .logo-text,
.site-header--overlay:not(.scrolled) .menu-toggle { color: #fff; -webkit-text-fill-color: #fff; }

/* The overlay state mirrors the homepage: the current route stays quiet over
   hero imagery, while the light/scrolled state uses the filled active marker. */
.site-header--overlay:not(.scrolled) .nav-desktop a[aria-current="page"] {
  background: transparent;
  color: rgba(255, 255, 255, .9);
}

.nav-drawer-links { display: grid; }
.nav-drawer-tools { display: none; }

@media (max-width: 1119px) {
  :root { --site-header-height: 64px; }

  .site-header .header-inner { height: 64px; min-height: 64px; gap: 10px; }
  .site-header .nav-desktop,
  .site-header .header-download,
  .site-header .nav-actions > .lang-switch { display: none !important; }
  .site-header .nav-actions { margin-left: auto; width: auto; flex-basis: auto; }
  .site-header .menu-toggle { display: grid !important; flex: 0 0 44px; }

  .site-header .nav-mobile {
    display: flex !important;
    position: absolute;
    top: var(--site-header-height);
    left: max(14px, env(safe-area-inset-left));
    right: max(14px, env(safe-area-inset-right));
    width: auto;
    max-height: calc(100dvh - var(--site-header-height) - 16px);
    padding: 12px;
    overflow-y: auto;
    flex-direction: column;
    gap: 12px;
    border: 1px solid rgba(21, 42, 64, .12);
    border-radius: 16px;
    background: rgba(250, 252, 254, .985);
    box-shadow: 0 22px 52px rgba(9, 24, 43, .18);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity 160ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1), visibility 160ms step-end;
  }

  .site-header .nav-mobile.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 160ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1), visibility 0ms step-start;
  }

  .nav-drawer-links { gap: 2px; }
  .site-header .nav-mobile a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink-secondary);
    font-weight: 650;
    text-decoration: none;
  }
  .site-header .nav-mobile a[aria-current="page"] { background: var(--surface); color: var(--brand); }
  .site-header .nav-mobile a:focus-visible,
  .site-header .nav-mobile button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--brand) 34%, transparent);
    outline-offset: 2px;
  }

  .nav-drawer-tools {
    display: grid;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(21, 42, 64, .1);
  }
  .nav-drawer-label { color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .nav-drawer-languages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .nav-drawer-languages .lang-option {
    min-height: 44px;
    padding: 9px 11px;
    border: 1px solid rgba(21, 42, 64, .1);
    border-radius: 10px;
    background: #fff;
    color: var(--ink-secondary);
    text-align: left;
    white-space: nowrap;
  }
  .nav-drawer-languages .lang-option.active { border-color: var(--brand); color: var(--brand); font-weight: 750; }
  .site-header .nav-mobile .nav-drawer-download { justify-content: center; color: #fff; width: 100%; }

  .site-header.menu-open { background: rgba(250, 252, 254, .98); }
  .site-header.menu-open .logo-text,
  .site-header.menu-open .menu-toggle { color: var(--brand); -webkit-text-fill-color: currentColor; }
}

@media (max-width: 359px) {
  .site-header .logo { gap: 8px; }
  .site-header .logo img { width: 36px; height: 36px; }
  .site-header .logo-text { font-size: 17px; }
  .nav-drawer-languages { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .site-header .nav-mobile { transition: none; }
}