/* ===========================
   Header
=========================== */

.header {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding-block: 1rem;
  background: var(--color-white);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.navbar {
  min-height: var(--header-height);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  padding: 0.75rem 1.25rem;

  background: var(--color-gray-50);
  border-radius: var(--radius-full);

  box-shadow: var(--shadow-sm);
  flex-wrap: nowrap;
}

.logo {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-gray-900);
  white-space: nowrap;
}

.logo span {
  color: var(--color-primary);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-menu>li>a {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;

  padding: 0.5rem 1.25rem;

  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);

  background: var(--color-white);

  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);

  transition: var(--transition);
}

.nav-menu li:nth-child(1) a {
  color: var(--color-gray-700);
}

.nav-menu li:nth-child(2) a {
  color: var(--color-gray-700);
}

.nav-menu li:nth-child(3) a {
  color: var(--color-gray-700);
}

.nav-menu li:nth-child(4) a {
  color: var(--color-gray-700);
}

.nav-menu li:nth-child(5) a {
  color: var(--color-gray-700);
}

.nav-menu>li>a:hover {
  background: var(--color-gray-50);
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.nav-menu a:active {
  background: var(--color-primary);
  color: var(--color-white);
}

.header__phone {
  display: inline-flex;
  align-items: center;
  gap: .65rem;

  padding: .65rem 1rem;

  background: var(--color-white);

  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-full);

  color: var(--color-gray-900);

  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);

  white-space: nowrap;

  transition:
    background-color .3s ease,
    border-color .3s ease,
    color .3s ease,
    box-shadow .3s ease,
    transform .3s ease;
}

.header__phone-icon {
  width: 18px;
  height: 18px;

  color: var(--color-primary);

  flex-shrink: 0;

  transition: transform .3s ease;
}

.header__phone:hover {
  background: rgba(8, 145, 178, .08);

  border-color: var(--color-primary);

  color: var(--color-primary);

  box-shadow: var(--shadow-sm);

  transform: translateY(-2px);
}

.header__phone:hover .header__phone-icon {
  transform: rotate(-12deg) scale(1.08);
}

.header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;

  padding: .75rem 1.5rem;

  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));

  border-radius: var(--radius-full);

  color: var(--color-white);

  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);

  white-space: nowrap;

  transition:
    background-color .3s ease,
    background .3s ease,
    transform .3s ease,
    box-shadow .3s ease;
}

.header__cta:hover {
  background: var(--color-accent);

  transform: translateY(-2px);

  box-shadow: 0 8px 25px rgba(245, 158, 11, .3);
}

.header__cta-icon {
  transition: transform .3s ease;
}

.header__cta:hover .header__cta-icon {
  transform: translateX(4px);
}

/* ===========================
   Mobile Menu Button
=========================== */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background-color: var(--color-gray-900);
  transition: var(--transition);
}

.mobile-contact {
  display: none;
}