/* === css/intel-building/layout/header/header.css === v1.0.3 ===
   Intel Building (new theme) — site header.
   Pixel reference: figma-ui-folder/screens/Frame 2.png
   Fig source: "Wireframe - 7" > "Component 3" > "Frame 2" (node 1200x82 @ 120,40
   inside the 1440-wide hero frame; children "Group 2" logo, "Frame 3" nav,
   "Frame 7" button — see the exact offsets reproduced in the rules below).
   Requires base/variables.css to be loaded first.
   Isolated from the legacy KIBMS theme — do not merge with welcome.css.

   v1.0.1: Book a Demo button icon now uses the real
   images/intel-building/icons/arrow.svg instead of a unicode arrow.
   v1.0.2: .plx-btn-icon img sizing moved to the shared rule in
   pages/home.css (the hero's Book Demo button now needs it too) — removed
   the duplicate header-only copy.
   v1.0.3: --header-container-max renamed to --container-max (variables.css
   v1.1.0) now that every section shares this one page-wide container. */

.plx-site-header {
  position: sticky;
  top: 0;
  z-index: 500;
  padding-top: var(--header-top-offset);
  background: transparent;
  transition: padding-top var(--transition-base), background-color var(--transition-base);
}

.plx-site-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Sticky-scrolled state — toggled by js/intel-building/layout/header.js once
   the page has scrolled a short distance (data-plx-scrolled only, no class
   toggling, per JS/CSS-STANDARDS). The header is already position:fixed at
   rest (so it never has to jump between absolute/fixed — that would cause a
   visible snap); only its own look animates in and out: the floating pill
   flattens into a flush, edge-to-edge bar (radius/shadow removed, no top
   gap) in the header's own background-surface color, with a bit less
   height and a slightly smaller logo. */
.plx-site-header--overlay[data-plx-scrolled="true"] {
  padding-top: 0;
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.plx-site-header--overlay[data-plx-scrolled="true"] .plx-header-bar {
  min-height: 52px;
  padding-top: var(--space-1);
  padding-bottom: var(--space-1);
  border-radius: 0;
  box-shadow: none;
}

.plx-header-container {
  max-width: var(--container-max);
}

/* Mobile-first base — Frame 2.png is a desktop reference; the fixed 82px
   height/32px padding it specifies is applied from the lg breakpoint up in
   header-responsive.css, scaling down comfortably below that. */
.plx-header-bar {
  display: flex;
  align-items: center;
  min-height: 64px;
  background: var(--color-bg-surface);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-pop);
  padding: var(--space-2) var(--space-4);
  transition: min-height var(--transition-base), height var(--transition-base),
    padding-top var(--transition-base), padding-bottom var(--transition-base),
    border-radius var(--transition-base), box-shadow var(--transition-base);
}

.plx-header-bar .row {
  width: 100%;
}

/* ---- Logo (col-auto) — real asset: images/intel-building/logo.svg,
   inlined in the Blade partial so it themes/scales crisply with no extra request ---- */
.plx-logo {
  display: inline-flex;
  align-items: center;
}

.plx-logo-svg {
  display: block;
  width: 121px;
  height: 39px;
  transform-origin: left center;
  transition: transform var(--transition-base);
}

.plx-site-header--overlay[data-plx-scrolled="true"] .plx-logo-svg {
  transform: scale(0.88);
}

/* ---- Nav (col, centered in the remaining space) — shown from lg up,
   see header-responsive.css; the mobile dropdown below covers <lg. ---- */
.plx-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.plx-nav-link {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.plx-nav-link:hover,
.plx-nav-link:focus-visible {
  color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ---- Actions (col-auto) ---- */
.plx-header-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.plx-header-actions .plx-btn-primary {
  height: 43px;
  padding: 0 var(--space-5);
}

/* Book a Demo arrow — images/intel-building/icons/arrow.svg. Sizing/layout for
   .plx-btn-icon img is shared site-wide in pages/home.css (also used by the
   hero's Book Demo button) rather than duplicated here. */

.plx-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.plx-nav-toggle:hover,
.plx-nav-toggle:focus-visible {
  background: var(--color-dark-elevated);
}

.plx-nav-toggle svg {
  width: 18px;
  height: 18px;
}

.plx-nav-toggle[data-plx-open="true"] .plx-icon-open,
.plx-nav-toggle:not([data-plx-open="true"]) .plx-icon-close {
  display: none;
}

/* ---- Mobile nav dropdown ---- */
.plx-mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
}

.plx-mobile-nav[data-plx-open="true"] {
  display: flex;
}

.plx-mobile-nav .plx-nav-link {
  padding: var(--space-3) var(--space-2);
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}

.plx-mobile-nav .plx-nav-link:last-child {
  border-bottom: none;
}