/* ============================================================
   Z NATION TRANSPORT — HEADER + NAVIGATION
   Sticky dark nav, desktop + mobile.
   ============================================================ */

/* ── Skip link ──────────────────────────────────────────────── */
.znt-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: var(--z-max);
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: var(--fw-semibold);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
}
.znt-skip-link:focus { top: var(--space-4); }

/* ── Header shell ───────────────────────────────────────────── */
/* Initial state: cinematic glass — transparent dark, soft blur, no hard edge.
   The page background is dark navy site-wide, so a transparent header never
   loses contrast against the hero or any other section. */
.znt-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: var(--z-nav);
  background: rgba(5, 16, 24, 0.32);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background var(--dur-slow) var(--ease-standard),
              backdrop-filter var(--dur-slow) var(--ease-standard),
              border-color var(--dur-slow) var(--ease-standard),
              box-shadow var(--dur-slow) var(--ease-standard);
}

/* Header is fixed (removed from flow) — offset main content by its height
   so nothing is hidden underneath on initial load. */
.znt-main {
  padding-top: 84px;
}

/* Scrolled state: solid glass navy, tighter, clear separation from content */
.znt-header.znt-header--scrolled {
  background: rgba(4, 13, 20, 0.92);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-lg);
}

.znt-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  height: 84px;
  transition: height var(--dur-slow) var(--ease-standard);
}
.znt-header--scrolled .znt-header__inner {
  height: 64px;
}

/* ── Logo ───────────────────────────────────────────────────── */
.znt-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.znt-header__logo:hover { opacity: 0.85; }
.znt-header__logo svg {
  flex-shrink: 0;
  transition: transform var(--dur-slow) var(--ease-standard);
  transform-origin: left center;
}
/* slightly more compact on scroll — never distorted, just a gentle scale */
.znt-header--scrolled .znt-header__logo svg { transform: scale(0.9); }

.znt-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.znt-wordmark strong {
  font-family: var(--font-display);
  font-weight: var(--fw-extra);
  font-size: 1.1rem;
  letter-spacing: var(--ls-tighter);
  text-transform: uppercase;
  color: var(--text-primary);
}
.znt-wordmark__sub {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: 0.5rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1px;
}

/* ── Desktop nav ────────────────────────────────────────────── */
.znt-nav { margin-inline: auto; }

.znt-nav__list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--space-1);
}

.znt-nav__link {
  position: relative;
  display: block;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  transition: var(--t-colors);
  text-decoration: none;
  white-space: nowrap;
}
.znt-nav__link:hover,
.znt-nav__link:focus-visible {
  color: var(--text-primary);
}
.znt-nav__item--active .znt-nav__link {
  color: var(--text-primary);
}

/* route-line underline — draws in on hover/active, no layout shift */
.znt-nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-standard);
}
.znt-nav__link:hover::after,
.znt-nav__link:focus-visible::after,
.znt-nav__item--active .znt-nav__link::after {
  transform: scaleX(1);
  opacity: 1;
}
.znt-nav__item--active .znt-nav__link::after { transform-origin: left center; }
.znt-nav__link:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Header actions ─────────────────────────────────────────── */
.znt-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

/* Primary CTA — outlined + glowing in the transparent top state,
   solid brand-accent once the header goes solid on scroll. */
.znt-header__actions .znt-btn--primary {
  transition: var(--t-colors),
              transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.znt-header:not(.znt-header--scrolled) .znt-header__actions .znt-btn--primary {
  background: rgba(255, 90, 31, 0.08);
  color: var(--text-primary);
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 90, 31, 0.18), 0 0 22px rgba(255, 90, 31, 0.22);
}
.znt-header:not(.znt-header--scrolled) .znt-header__actions .znt-btn--primary:hover {
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: 0 0 0 1px rgba(255, 90, 31, 0.32), 0 0 28px rgba(255, 90, 31, 0.40);
}
.znt-header__actions .znt-btn--primary:hover {
  transform: translateY(-2px);
}

/* Secondary "Partner Login" CTA — keep readable on glass at top */
.znt-header:not(.znt-header--scrolled) .znt-header__actions .znt-btn--secondary {
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.03);
}
.znt-header__actions .znt-btn--secondary:hover {
  transform: translateY(-2px);
}

/* ── Hamburger ──────────────────────────────────────────────── */
.znt-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  padding: 0;
  transition: var(--t-colors);
}
.znt-hamburger:hover { background: var(--state-hover); border-color: var(--border-strong); }
.znt-hamburger__bar {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--text-secondary);
  border-radius: 2px;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-standard);
}
.znt-hamburger[aria-expanded="true"] .znt-hamburger__bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.znt-hamburger[aria-expanded="true"] .znt-hamburger__bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.znt-hamburger[aria-expanded="true"] .znt-hamburger__bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Language switcher ──────────────────────────────────────── */
.znt-lang-switch {
  display: flex;
  align-items: center;
  gap: var(--space-1, 4px);
  height: 36px;
  padding: 0 var(--space-2, 10px);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono, monospace);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--t-colors);
  flex-shrink: 0;
}
.znt-lang-switch:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: var(--state-hover);
}
.znt-lang-switch--mobile {
  width: 100%;
  height: 44px;
  justify-content: center;
  margin-top: var(--space-3);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  text-transform: none;
}

/* ── Mobile nav (full-screen overlay) ────────────────────────── */
.znt-mobile-nav {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-drawer);
  background: var(--bg-page-deep);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.97);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out),
              visibility var(--dur-slow) var(--ease-out);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.znt-mobile-nav.znt-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
}

.znt-mobile-nav__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.znt-mobile-nav__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-5);
  padding-bottom: max(var(--space-5), env(safe-area-inset-bottom));
}

.znt-mobile-nav__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  margin-bottom: var(--space-5);
}

.znt-mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: var(--t-colors);
}
.znt-mobile-nav__close:hover { background: var(--state-hover); color: var(--text-primary); }

.znt-mobile-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  gap: var(--space-1);
}
.znt-mobile-nav__list .znt-nav__item {
  border-bottom: 1px solid var(--border-subtle);
  opacity: 0;
  transform: translateX(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.znt-open .znt-mobile-nav__list .znt-nav__item { opacity: 1; transform: none; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(1) { transition-delay: 60ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(2) { transition-delay: 110ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(3) { transition-delay: 160ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(4) { transition-delay: 210ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(5) { transition-delay: 260ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(6) { transition-delay: 310ms; }
.znt-open .znt-mobile-nav__list .znt-nav__item:nth-child(n+7) { transition-delay: 360ms; }
@media (prefers-reduced-motion: reduce) {
  .znt-mobile-nav__list .znt-nav__item { opacity: 1; transform: none; transition: none; }
}

.znt-mobile-nav__list .znt-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  padding: var(--space-3) var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  border-radius: 0;
  transition: color var(--dur-fast) var(--ease-standard), padding var(--dur-fast) var(--ease-out);
}
.znt-mobile-nav__list .znt-nav__link::after {
  content: "→";
  font-family: var(--font-sans);
  font-size: 1rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast), transform var(--dur-fast) var(--ease-out);
}
.znt-mobile-nav__list .znt-nav__link:hover,
.znt-mobile-nav__list .znt-nav__link:focus-visible {
  color: var(--text-primary);
  background: transparent;
  padding-left: var(--space-3);
}
.znt-mobile-nav__list .znt-nav__link:hover::after,
.znt-mobile-nav__list .znt-nav__link:focus-visible::after { opacity: 0.7; transform: none; }

/* active page — turquoise marker */
.znt-mobile-nav__list .znt-nav__item--active { border-bottom-color: rgba(63, 208, 201, 0.35); }
.znt-mobile-nav__list .znt-nav__item--active .znt-nav__link {
  color: #3FD0C9;
  padding-left: var(--space-4);
  position: relative;
}
.znt-mobile-nav__list .znt-nav__item--active .znt-nav__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 2px;
  background: #3FD0C9;
  border-radius: 2px;
}

/* submenu items (if ever added to the WP menu) stay accessible */
.znt-mobile-nav__list .sub-menu {
  list-style: none;
  margin: 0 0 var(--space-2);
  padding: 0 0 0 var(--space-4);
}
.znt-mobile-nav__list .sub-menu .znt-nav__link {
  font-size: var(--fs-body);
  min-height: 44px;
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
}

.znt-mobile-nav__footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.znt-mobile-nav__footer .znt-btn + .znt-btn {
  margin-top: var(--space-3);
}

.znt-mobile-overlay { display: none; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .znt-nav { display: none; }
  .znt-hamburger { display: flex; }
  .znt-header__actions { margin-left: auto; }
  .znt-header__actions .znt-btn--primary { display: none; }
  .znt-header__actions .znt-header__partner-link { display: none; }
  .znt-header__actions .znt-lang-switch { display: none; }
}

/* Spanish nav labels (Inicio, Servicios, Nuestra Flota, Acerca de Nosotros,
   Blog, Contacto) run wider than their English counterparts and can overflow
   the header at desktop widths that fit the English nav comfortably —
   tighten spacing first, then fall back to the hamburger menu sooner. */
html[lang="es-MX"] .znt-nav__list {
  gap: 0;
}
html[lang="es-MX"] .znt-nav__link {
  padding: var(--space-2) var(--space-2);
  font-size: 0.875rem;
}
@media (max-width: 1240px) {
  html[lang="es-MX"] .znt-nav { display: none; }
  html[lang="es-MX"] .znt-hamburger { display: flex; }
  html[lang="es-MX"] .znt-header__actions { margin-left: auto; }
  html[lang="es-MX"] .znt-header__actions .znt-btn--primary { display: none; }
  html[lang="es-MX"] .znt-header__actions .znt-header__partner-link { display: none; }
  html[lang="es-MX"] .znt-header__actions .znt-lang-switch { display: none; }
}

@media (max-width: 480px) {
  .znt-header__inner { height: 60px; }
  .znt-header--scrolled .znt-header__inner { height: 54px; }
  .znt-wordmark strong { font-size: 0.95rem; }
  .znt-main { padding-top: 60px; }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .znt-header,
  .znt-header__inner,
  .znt-header__logo svg,
  .znt-nav__link::after,
  .znt-header__actions .znt-btn--primary,
  .znt-header__actions .znt-btn--secondary {
    transition: none !important;
  }
}