/* The site header (partials/components/header/header.html), on every page that has one.
   The bar comes from the "Netdata Home v2" mockup; logo, type and colours are the site's own:
   menu IBM Plex Sans 400 16px in white, green (#00ab44) on hover and while its dropdown is open,
   buttons Geist Mono 500. Every rule is scoped to .site-header so nothing leaks into the page. */
.site-header {
  --bg: #05080a; --fg: #edf2ef; --fg-3: #66746e;
  --line: rgba(161,174,168,.15); --line-2: rgba(161,174,168,.28);
  --signal: #00ab44; --signal-hi: #3ddc84; --warn: #f2a93b;
  --body: "IBM Plex Sans", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --gl: max(16px, env(safe-area-inset-left, 0px)); --gr: max(16px, env(safe-area-inset-right, 0px));
  --hh: 58px;
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1001;
  background: rgba(5,8,10,.84); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--fg); font-family: var(--body); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased; color-scheme: dark;
}
.site-header.main-menu::after { content: none; }
.site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; text-decoration: none; }
.site-header a:focus-visible, .site-header button:focus-visible { outline: 2px solid var(--signal-hi); outline-offset: 3px; border-radius: 3px; }
.site-header ul { margin: 0; padding: 0; list-style: none; }
.site-header button { font: inherit; color: inherit; }
.site-header svg { vertical-align: baseline; }

.site-header .row { display: flex; align-items: center; gap: 26px; height: var(--hh); padding-left: var(--gl); padding-right: var(--gr); }
.site-header .sh-brand { display: flex; align-items: center; flex: none; }
.site-header .sh-brand img { display: block; height: 26px; width: auto; max-width: none; filter: none; }

.site-header .mm { display: flex; }
.site-header .mm-btn { background: none; border: 0; color: #fff; font: 400 16px var(--body); padding: 10px 11px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; border-radius: 4px; }
.site-header .mm-btn svg { width: 9px; height: 9px; transition: transform .2s; }
.site-header .mm-btn:hover, .site-header .mm-btn[aria-expanded="true"] { color: var(--signal); }
.site-header .mm-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.site-header .utils { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.site-header .btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 6px; font: 500 14px/1.2 var(--mono); border: 1px solid var(--line-2); color: var(--fg); background: rgba(5,8,10,.4); cursor: pointer; transition: background .2s, border-color .2s; white-space: nowrap; }
.site-header .btn:hover { border-color: var(--fg-3); background: rgba(255,255,255,.04); }
.site-header .btn.primary { background: var(--signal); border-color: var(--signal); color: #031208; }
.site-header .btn.primary:hover { background: var(--signal-hi); border-color: var(--signal-hi); }
.site-header .btn svg { width: 14px; height: 14px; }

.site-header .search { display: inline-flex; align-items: center; gap: 8px; min-width: 172px; padding: 6px 8px 6px 10px; border: 1px solid rgba(255,255,255,.32); border-radius: 6px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); font-size: 13.5px; cursor: pointer; }
.site-header .search:hover { border-color: rgba(255,255,255,.5); color: #fff; }
.site-header .search svg { width: 14px; height: 14px; flex: none; }
.site-header .search kbd { margin-left: auto; font: 500 10px var(--mono); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.32); border-radius: 4px; padding: 2px 5px; }

.site-header .gh { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px; border-radius: 6px; color: var(--fg); font: 600 13.5px var(--body); font-variant-numeric: tabular-nums; }
.site-header .gh:hover { background: rgba(255,255,255,.05); }
.site-header .gh .gi { width: 18px; height: 18px; }
.site-header .gh .sh-star { width: 11px; height: 11px; fill: var(--warn); margin-right: -3px; }

.site-header .burger { display: none; width: 38px; height: 38px; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 6px; background: none; cursor: pointer; flex: none; }
.site-header .bars, .site-header .bars::before, .site-header .bars::after { display: block; width: 16px; height: 1.5px; background: var(--fg); position: relative; transition: transform .2s, background .2s; }
.site-header .bars::before, .site-header .bars::after { content: ""; position: absolute; left: 0; }
.site-header .bars::before { top: -5px; } .site-header .bars::after { top: 5px; }
.site-header .burger[aria-expanded="true"] .bars { background: transparent; }
.site-header .burger[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.site-header .burger[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

.site-header .mobile-panel, .site-header .show-s { display: none; }
.site-header .panel-utils { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* the logo and type are wider than the mockup's: the search box gives up its label below
   1500px, Live Demo leaves the bar below 1400px, and the burger takes over below 1280px */
@media (max-width: 1500px) { .site-header .search { min-width: 0; } .site-header .search span { display: none; } }
@media (max-width: 1280px) {
  .site-header .mm { display: none; }
  .site-header .burger { display: inline-flex; }
  /* backdrop-filter makes the header the containing block, so the panel hangs from it */
  .site-header .mobile-panel:not(.hidden) { display: block; position: absolute; inset: 100% 0 auto 0; height: calc(100vh - var(--hh) - env(safe-area-inset-top, 0px)); height: calc(100dvh - var(--hh) - env(safe-area-inset-top, 0px)); overflow-y: auto; background: var(--bg); border-top: 1px solid var(--line); padding: 8px var(--gr) 32px var(--gl); }
}
@media (max-width: 760px) {
  .site-header .hide-s { display: none; }
  .site-header .show-s { display: inline-flex; }
  .site-header .utils { gap: 8px; }
  .site-header .row { gap: 16px; }
  .site-header .search kbd { display: none; }
}

/* the dropdowns (mega-menu partials, unchanged) start at the menu's left edge and stay on screen;
   site-header.js measures --mm-left */
.site-header-mm { display: contents; }
@media (min-width: 1281px) {
  .site-header-mm .mega-menu { transform: none;
    left: clamp(16px, var(--mm-left, 50%), calc(100vw - min(var(--mega-menu-container-width, 1200px), 100vw - 240px) - 16px)); }
}

/* phones: search and menu are 44px tap targets */
@media (max-width: 760px) {
  .site-header .search { width: 44px; height: 44px; justify-content: center; padding: 0; }
  .site-header .burger { width: 44px; height: 44px; }
}

/* one filled green button per screen: the page's own primary action. Contact Sales is the
   header's strongest button by its white outline, not by fill. */
.site-header .btn.strong { border-color: rgba(255,255,255,.7); }
.site-header .btn.strong:hover { border-color: #fff; background: rgba(255,255,255,.06); }