/* SPARK Logistics — Header / navigation
   Transparent over hero → solid on scroll. Mega-menu-ready. */

.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  color: var(--color-white);
  border-block-end: 1px solid transparent;
  transition:
    background-color var(--dur-med) var(--ease-out),
    box-shadow var(--dur-med) var(--ease-out),
    border-color var(--dur-med) var(--ease-out);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  block-size: var(--header-h);
  transition: block-size var(--dur-med) var(--ease-out);
  /* The global content container is intentionally narrower than the full
     desktop navigation. Give the header enough room so the CTA and language
     selector never push the page sideways or get clipped. */
  width: min(100rem, calc(100% - var(--gutter) * 2));
}

@media (min-width: 1200px) and (max-width: 1499px) {
  .header-cta { display: none; }
}

.site-header.is-scrolled {
  background: var(--color-white);
  color: var(--color-primary);
  border-block-end-color: rgba(15, 62, 117, 0.08);
  box-shadow: var(--shadow-header);
}

.site-header.is-scrolled .header-inner {
  block-size: var(--header-h-scrolled);
}

.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(7, 28, 51, 0.62), rgba(7, 28, 51, 0));
  opacity: 1;
  transition: opacity var(--dur-med) ease;
}

.site-header.is-scrolled::before,
.site-header.nav-open::before { opacity: 0; }

/* Logo */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  text-decoration: none;
}

/* Logos stack in one cell and crossfade with the header state:
   white over the transparent navy hero, colorful once the header turns white */
.brand-mark {
  display: grid;
  place-items: center;
}

.brand-mark .logo {
  grid-area: 1 / 1;
  block-size: clamp(2rem, 3vw, 2.5rem);
  inline-size: auto;
  transition: opacity var(--dur-med) var(--ease-out);
}

.brand .logo--colorful { opacity: 0; }

.site-header.is-scrolled .brand .logo--white { opacity: 0; }
.site-header.is-scrolled .brand .logo--colorful { opacity: 1; }

/* Main nav */
.main-nav > ul {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1vw, 0.9rem);
}

.nav-item { position: relative; }

.nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
}

.nav-link::after {
  content: "";
  position: absolute;
  inset-inline: 0.85rem;
  inset-block-end: 0.28rem;
  block-size: 2px;
  background: var(--color-secondary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-med) var(--ease-out);
}

html[dir="rtl"] .nav-link::after {
  transform-origin: right;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-item.is-open > .nav-link::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

.nav-caret {
  inline-size: 0.7rem;
  block-size: 0.7rem;
  transition: rotate var(--dur-fast) var(--ease-out);
}

.nav-item.is-open > .nav-link .nav-caret { rotate: 180deg; }

/* Dropdown panel shell (mega-menu ready) */
.nav-panel {
  position: absolute;
  inset-block-start: calc(100% + 0.35rem);
  inset-inline-start: 50%;
  translate: -50% 0;
  min-inline-size: 17rem;
  padding: 0.75rem;
  background: var(--color-white);
  color: var(--color-text);
  border: 1px solid rgba(15, 62, 117, 0.08);
  border-radius: var(--radius-md);
  box-shadow: 0 30px 60px -20px rgba(7, 28, 51, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    visibility 0s linear var(--dur-fast);
}

html[dir="rtl"] .nav-panel { translate: 50% 0; }

.nav-item.is-open > .nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-panel ul { display: grid; gap: 2px; }

.nav-panel a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text);
  text-decoration: none;
}

.nav-panel a:hover,
.nav-panel a:focus-visible {
  background: var(--color-light-gray);
  color: var(--color-primary);
}

/* Right cluster */
.header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: none;
}

.lang-switch {
  display: none;
  padding: 0.32rem;
  border-radius: 99px;
  box-shadow: inset 0 0 0 1.5px var(--color-light-gray);
}

.lang-btn {
  padding: 0.5em 0.95em;
  border-radius: 99px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: inherit;
  opacity: 0.72;
  transition: opacity var(--dur-fast) ease, background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}

.lang-btn[aria-pressed="true"] {
  background: var(--color-light-gray);
  color: var(--color-text-muted);
  opacity: 1;
}

/* Burger */
.burger {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: 50%;
}

.burger-lines {
  position: relative;
  inline-size: 1.35rem;
  block-size: 12px;
}

.burger-lines span {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur-med) var(--ease-out), top var(--dur-med) var(--ease-out), opacity var(--dur-fast) ease;
}

.burger-lines span:nth-child(1) { inset-block-start: 0; }
.burger-lines span:nth-child(2) { inset-block-start: 5px; }
.burger-lines span:nth-child(3) { inset-block-start: 10px; }

.burger[aria-expanded="true"] .burger-lines span:nth-child(1) { inset-block-start: 5px; transform: rotate(45deg); }
.burger[aria-expanded="true"] .burger-lines span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] .burger-lines span:nth-child(3) { inset-block-start: 5px; transform: rotate(-45deg); }

/* Breakpoint strategy:
   ≥1200px  full inline navigation, no burger
   <1200px  off-canvas mobile navigation (burger) */
.main-nav { display: none; }

@media (min-width: 1200px) {
  .main-nav { display: block; }
  .burger, .mobile-nav { display: none; }
}

/* Keep the last dropdown inside the viewport edge */
.nav-item:last-child .nav-panel {
  inset-inline-start: auto;
  inset-inline-end: 0;
  translate: none;
}