/* ============================================================
   HEADER — vizasupport  (dark edition matching footer)
   ─ Top bar   : semi-transparent, 36px tall
   ─ Main bar  : dark bg matching footer, 72px tall
   ─ Nav hover : animated underline
   ─ Dropdown  : white card, single column
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   TOP BAR
══════════════════════════════════════════════════════════ */
.site-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  height: var(--topbar-h);
  background: var(--surface-dark-2);
  color: rgba(255,255,255,0.65);
  font-size: var(--text-sm);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.site-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
  gap: var(--space-lg);
}

.site-topbar__item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.60);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.site-topbar__item:hover { color: rgba(255,255,255,0.95); }

.site-topbar__item svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.65;
}

.site-topbar__item--whatsapp { color: #4ade80; }
.site-topbar__item--whatsapp:hover { color: #86efac; }
.site-topbar__item--whatsapp svg { opacity: 1; }

.site-topbar__divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

/* Hide on mobile */
.site-topbar { display: none; }

@media (min-width: 1024px) {
  .site-topbar { display: block; }
}

/* ══════════════════════════════════════════════════════════
   MAIN HEADER BAR — dark, matches footer
══════════════════════════════════════════════════════════ */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  height: var(--header-h-mobile);
  background: var(--surface-dark);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition:
    border-color    var(--transition),
    background      var(--transition-slow),
    box-shadow      var(--transition-slow),
    backdrop-filter var(--transition-slow);
}

@media (min-width: 1024px) {
  .site-header {
    top: var(--topbar-h);
    height: var(--header-main-h);
  }
}

.site-header--scrolled {
  border-color: rgba(255,255,255,0.05);
  background: rgba(15,25,35,0.88);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 2px 24px rgba(0,0,0,0.22);
}

/* ── Header inner layout ──────────────────────────────── */
.header__inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--space-md);
}

/* ══════════════════════════════════════════════════════════
   LOGO
══════════════════════════════════════════════════════════ */
.header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  gap: var(--space-sm);
  margin-right: var(--space-lg);
  transition: opacity var(--transition-fast);
}

.header__logo:hover { opacity: 0.88; }

.header__logo-img {
  height: 34px;
  width: auto;
  filter: brightness(0) invert(1);
}

@media (min-width: 1024px) {
  .header__logo-img { height: 40px; }
}

.header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.header__logo-text span:first-child {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: #ffffff;
  letter-spacing: -0.02em;
}

/* ══════════════════════════════════════════════════════════
   PRIMARY NAV (desktop)
══════════════════════════════════════════════════════════ */
.header__nav {
  display: none;
  align-items: center;
  flex: 1;
  justify-content: center;
  gap: 2px;
}

@media (min-width: 1024px) {
  .header__nav { display: flex; }
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}

.nav__item {
  position: relative;
  list-style: none;
}

/* ── Nav link ─────────────────────────────────────────── */
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 var(--space-md);
  height: var(--header-main-h);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: -0.01em;
  transition: color var(--transition-fast);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: var(--space-md);
  right: var(--space-md);
  height: 2px;
  background: var(--secondary);
  border-radius: 2px 2px 0 0;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.25s var(--ease-out);
}

.nav__link:hover,
.nav__item--active > .nav__link {
  color: #ffffff;
}

.nav__link:hover::after,
.nav__item--active > .nav__link::after {
  transform: scaleX(1);
}

.nav__item--open > .nav__link {
  color: #ffffff;
}

.nav__item--open > .nav__link::after {
  transform: scaleX(1);
}

.nav__link svg {
  width: 11px;
  height: 11px;
  transition: transform var(--transition);
  flex-shrink: 0;
  color: rgba(255,255,255,0.40);
  margin-top: 1px;
}

.nav__item--open > .nav__link svg {
  transform: rotate(180deg);
  color: rgba(255,255,255,0.80);
}

/* ══════════════════════════════════════════════════════════
   DROPDOWN MENU — single column, white card
══════════════════════════════════════════════════════════ */
.nav__dropdown {
  position: absolute;
  top: calc(100% + -2px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 220px;
  background: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 40px rgba(0,0,0,0.18);
  padding: var(--space-sm);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition),
              visibility var(--transition);
  z-index: var(--z-dropdown);
}

/* Caret arrow */
.nav__dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: #ffffff;
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px 0 0 0;
}

.nav__item--open > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* Dropdown items */
.nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--gray-700);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast),
              padding-left var(--transition-fast);
  min-height: 40px;
  white-space: nowrap;
}

.nav__dropdown-link:hover {
  background: var(--primary-xlight);
  color: var(--primary);
  padding-left: calc(var(--space-md) + 4px);
}

.nav__dropdown-link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--primary);
  opacity: 0.65;
}

.nav__dropdown-link:hover svg { opacity: 1; }

.nav__dropdown-divider {
  height: 1px;
  background: var(--color-border);
  margin: var(--space-xs) var(--space-sm);
}

.nav__dropdown-all .nav__dropdown-link {
  color: var(--primary);
  font-weight: var(--font-semi);
}

.nav__dropdown-all .nav__dropdown-link:hover {
  background: var(--primary-light);
}

/* ══════════════════════════════════════════════════════════
   HEADER ACTIONS (right side)
══════════════════════════════════════════════════════════ */
.header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  margin-left: auto;
}

/* Phone link */
.header__phone {
  display: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .header__phone {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: var(--font-semi);
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    transition: color var(--transition-fast);
  }
  .header__phone:hover { color: #ffffff; }
  .header__phone svg {
    width: 14px;
    height: 14px;
    color: var(--secondary);
  }
}

/* CTA button — minimalist */
.header__cta {
  display: none;
}

@media (min-width: 1024px) {
  .header__cta {
    display: inline-flex;
    background: var(--secondary) !important;
    color: var(--gray-900) !important;
    font-weight: var(--font-bold);
    letter-spacing: -0.01em;
    box-shadow: none !important;
    border: 2px solid var(--secondary) !important;
  }
  .header__cta:hover {
    background: var(--secondary-dark) !important;
    border-color: var(--secondary-dark) !important;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════
   MOBILE MENU TOGGLE
══════════════════════════════════════════════════════════ */
.header__menu-toggle {
  display: flex;
  margin-top: 8px;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  color: rgba(255,255,255,0.85);
  transition: background var(--transition-fast), border-color var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}

.header__menu-toggle:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.25);
}

.header__menu-toggle svg { width: 20px; height: 20px; }

.header__menu-toggle .icon-close  { display: none; }
.header__menu-toggle[aria-expanded="true"] .icon-menu  { display: none; }
.header__menu-toggle[aria-expanded="true"] .icon-close { display: block; }

@media (min-width: 1024px) {
  .header__menu-toggle { display: none; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE DRAWER
══════════════════════════════════════════════════════════ */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.mobile-menu__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--transition-slow);
}

.mobile-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--surface-dark);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  display: flex;
  flex-direction: column;
  padding-top: var(--header-h-mobile);
  box-shadow: -8px 0 48px rgba(0,0,0,0.30);
}

.mobile-menu--open { pointer-events: auto; }
.mobile-menu--open .mobile-menu__overlay { opacity: 1; }
.mobile-menu--open .mobile-menu__panel   { transform: translateX(0); }

.mobile-nav {
  list-style: none;
  padding: var(--space-sm) 0;
  flex: 1;
}

.mobile-nav__item {
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mobile-nav__item-row {
  display: flex;
  align-items: center;
}

.mobile-nav__item-row .mobile-nav__link {
  flex: 1;
}

.mobile-nav__link {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: rgba(255,255,255,0.80);
  text-decoration: none;
  min-height: 52px;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.mobile-nav__link:hover,
.mobile-nav__item--active > .mobile-nav__link {
  background: rgba(255,255,255,0.06);
  color: #ffffff;
}

.mobile-nav__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.07);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast);
  color: rgba(255,255,255,0.60);
  flex-shrink: 0;
  margin-right: var(--space-md);
}

.mobile-nav__toggle:hover {
  background: rgba(255,255,255,0.12);
  color: #ffffff;
}

.mobile-nav__toggle svg {
  width: 14px;
  height: 14px;
  transition: transform var(--transition);
}

.mobile-nav__item--open .mobile-nav__toggle svg {
  transform: rotate(180deg);
}

.mobile-subnav {
  list-style: none;
  background: rgba(0,0,0,0.20);
  display: none;
  border-top: 1px solid rgba(255,255,255,0.05);
}

.mobile-nav__item--open .mobile-subnav { display: block; }

.mobile-subnav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg) var(--space-sm) calc(var(--space-lg) + var(--space-md));
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  min-height: 44px;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.mobile-subnav__link::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: background var(--transition-fast);
}

.mobile-subnav__link:hover {
  color: rgba(255,255,255,0.95);
  background: rgba(255,255,255,0.05);
}

.mobile-subnav__link:hover::before { background: var(--secondary); }

.mobile-menu__bottom {
  padding: var(--space-lg);
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: rgba(0,0,0,0.20);
}

@media (min-width: 1024px) {
  .mobile-menu { display: none; }
}